2018年7月8日（日）、サイボウズ株式会社にてHTML5アプリに関わるユーザのための祭典、「HTML5 APP CONFERENCE 2018」が開催されました。
本記事ではイベントの様子を、熱気冷めやらぬうちに速報でお伝えします！

HTML5 APP CONFERENCE 2018

様々な分野のエキスパートが登壇した今回のイベント。本記事では個人的に気になったセッションをピックアップしてご紹介します！

基調講演「Web App Platform Strategy (Webアプリ・プラットフォーム戦略)」

基調講演を務めたのは、浅井 智也さん（一般社団法人 WebDINO Japan/CTO）。

現在語られているHTML5の文脈を紐解くために、1989年にWebが誕生してから現在のトレンドまで、Webの歴史についてディープなお話をしていただきました。

Webの歴史

最初のポイントとなるのは、1995年にNetSpcapeにJavaScriptが実装されたことでしょう。この当時から、Webはアプリケーションのプラットフォームである、といった思想はありました。
しかししばらくの間はFlash全盛期が続き、リッチアプリケーションはFlashのようなプラグイン上で動かすのが一般的でした。
転換期は2004年に訪れます。Ajaxが登場し、「Web2.0」という言葉が流行しました。このあたりで、はじめてHTMLでちゃんとしたアプリケーションが作れるようになった印象を持った方も多かったのではないでしょうか。
その後FirefoxやChrome等の各種ブラウザが登場し、ブラウザ戦争がはじまっていきます。

HTMLの歴史

2004年、MozillaとOperaがHTML4の後方互換性があるHTML拡張（後のHTML5）を提案したもののW3Cが否決し、これを受けて新組織WHATWGがHTML5標準化を推進していきました。
当時、あくまで「HTML5」は最新のWeb機能を指すバズワードだったようです。その後W3Cが新たなHTML Working Groupを設立し、2015年にHTML5の正式勧告が行われました。
現在の最新仕様は「HTML 5.2」となっています。

モバイルの歴史

2007年にiPhoneが登場、その翌年にはAndroidがリリースされ、日本独自の携帯電話は衰退し、スマートデバイスが爆発的に普及していきました。
必然的にネイティブアプリのクロスプラットフォーム対応が求められるようになり、TitaniumやPhoneGap（現在のCordova）といったハイブリッドアプリ開発フレームワークが登場します。
その後、ReactNative、Monaca/Onsen UI、Ionic、Applicanといったハイブリッドアプリ開発フレームワークが立て続けにリリースされていきました。

現在、そして今後

Googleが2015年に「PWA」を提唱し、モバイル向けのHTMLアプリが再注目を浴びるようになりました。しかも今度はハイブリッドアプリとしてではなく、純粋なWebアプリとしてです。
Edge、Firefox、SafariもPWAをサポートをはじめ、さらにChromeがデスクトップ向けPWAのサポートもしています。つまり、Webでどんなものでも作れる環境が整ってきているということです。

開発・運用・チームビルディング　HTML5 アプリのメリット

清水 俊之介さん (株式会社dott 取締役/CTO) からは、HTML5アプリ開発における技術の「選択と集中」についてお話がありました。

選択と集中

HTML5アプリ開発において、扱う技術が多様化してしまうことは一つの課題でした。「コンパクトで流動的なチームを作りたい」という思いから、技術の"選択と集中"を行い以下のような構成を選択しました。

  • モバイル：Ionic
  • Web：Angular
  • 開発サポート：Firebase
  • バックエンド：Python
  • データベース：Google Cloud Datastore
  • インフラ：GAE

このように技術を集約することで、Webを作る人／モバイルを作る人という境界線がなくなり、フレキシブルなチームビルドが可能となりました。

さらに、最近では上記の構成をよりシンプルにする挑戦をしています。「バックエンド」「データベース」「インフラ」はすべてFirebaseに内包される機能を使用するようにしました。
こうしてバックエンド開発自体を減らすことで、毎回同じようなCRUDのAPIやログイン処理を作る必要がなくなり、エンジニアのリソースをもっと面白いことの実装に割けるようになりました。

最終的に残ったIonic＆Angular＆Firabaseの3技術は、JavaScript/TypeScriptに集約されると言えます。技術選定においては、汎用的でフルスタックな技術を選ぶのがポイントです。

PWA, Cordova, Capacitor, ReactNative Dom の比較からみる、これからのHTML5 アプリ

イベントの実行委員長でもある榊原昌彦さん（一般社団法人リレーションデザイン研究所）は、各種クロスプラットフォーム開発ツールの解説をされました。

世はまさにハイブリッドアプリ戦国時代。非常にたくさんのツールが提供されていて、皆さんもどれを使ったらいいのか悩むことがあるんじゃないでしょうか。今回の話がツール選定の参考となればと思います。

Xamarin

なんと言ってもC#で実装できるのが魅力です。他のツールのようにネイティブコードにブリッジする形式ではありません。そのため、ハイパフォーマンスであることが利点です。
実際にパフォーマンスを計測してみると、なんと不思議なことにObjective-Cで作るよりも高い数値を叩き出しています。
その半面、デザインの実装がとても大変だという難点もあります。

ReactNative/ReactNative DOM

Facebookが採用しているとても有名なライブラリです。
標準技術ではなく、Reactの文法で実装します。実行時にはJavaScriptCoreを経由してネイティブコードを実行します。
最近話題のReactNative DOMは、ランタイムやJavaScriptスレッドの仕組みがReactNativeとは異なっています。

Cordova

アプリ内のWebブラウザ（WebView）でWebページを表示しているだけの単純な仕組みです。
UIはネイティブUIではなく、HTML/CSSでネイティブに似せたコンポーネントを作って表示します。
そのため、UIフレームワークの利用が必須となります。代表的なフレームワークは以下の2つです。

  • Ionic・・・とにかく綺麗
  • Onsen UI・・・日本語のドキュメントがある

Capacitor

Ionicチームが作っているツールで、Cordovaの兄弟と言われています。
Android、iOSはもちろん、WebやElectronもターゲットになっています。
CordovaのようにWebView上にWebページを表示しますが、ページの一部、たとえばトーストだけはネイティブUIを利用するといった、ネイティブとWebViewの共存を行える点が特徴です。

PWA

PWAはハイブリッドアプリとは別物で、あくまでもただのWebアプリです。主に以下の5つの機能を利用することができます。

  • プッシュ通知
  • オフライン表示
  • バックグランドSync
  • ホーム画面への追加
  • カメラ等のネイティブ機能の利用

これからのHTML5アプリ

これまでのHTML5アプリは、ネイティブアプリが作れないから仕方なくHTML5で作るといった、ネガティブな理由で採用されるケースが多くありました。
しかし現在ではデバイスのスペックも上がり、事例も増え、今回ご紹介したように多くの便利なツールが提供されるようになりました。それによって、今後HTML5アプリは開発者にとって当たり前の選択肢になっていくのではないでしょうか。

pixiv chatstory の PWA としての取り組み

ikasoumenさん（ピクシブ株式会社）には、「pixiv chatstory」をPWAで作ったお話を語っていただきました。

pixiv chatstoryのPWA対応

「pixiv chatstory」はチャット形式の小説を投稿できるサービスです。iOSはネイティブアプリとして提供しており、AndroidとPC向けはPWAで提供しています。PWAは、ピクシブとしても初挑戦の技術でした。

PWAの機能としては、以下の2点を実装しました。

  • A2HS:Add to Home Screen（ホーム画面へ追加）
  • JavaScriptのLazy Load（JSファイルを分割し、必要な箇所のみを配信することで初期ロードするリソースを軽量化する）

pixiv chatstoryはアプリの特性上、オフライン対応は不採用にしていますが、実装しようと思えばできます。お気に入りのストーリーをキャッシュしておいて飛行機の中などではオフラインで読めるようにする、といった機能追加はありえるかなと考えています。

その他の技術

UIはIonicで実装しています。Ionicはバージョン3の途中からPWA対応されました。pixiv chatstoryは機能的にブラウザAPIだけで事足りるのでCordovaは採用していません。依存が少なくて済むのならその方が良いという考えです。

サーバサイド（APIサーバー）はRailsで実装しています。HTMLファイルは静的ファイルとしてホスティングしています。ホスティングサーバーにはFirebase Hostingを使用しています。

アプリのレビュー時にはHeroku Review Appsを活用しています。GitHubでプルリクエストを送ると自動でHerokuアプリを生成してくれるので楽に検証できます。

HTML5 アプリにおけるパフォーマンスの基礎知識

尾上洋介さん（日本大学）からは、HTML5アプリを開発するときに留意するべきパフォーマンスに関してのお話がありました。

Webアプリのパフォーマンス

一般的にHTML5アプリは、パフォーマンスが低いと思われがちです。それ自体は間違いではなくて、確かに考えなしに開発するとアプリの動きは遅くなってしまいます。

PWA Checklist では、パフォーマンスに関する項目が2点含まれていますので確認してみてください。

また、Googleが提唱しているWebパフォーマンスモデルに「RAIL」があります。これは以下の4項目から構成されます。

  • Response・・・ユーザ操作に対して100ms以内に応答
  • Animation・・・10ms/フレーム（60FPS）
  • Idle・・・アイドル時間を活用する
  • Loading・・・1000ms以内に初期画面表示

これらの要件を満たすことを目標として、パフォーマンス設計をしていく必要があります。

遅いJSの改善

まずはアルゴリズムの改善ができるかどうかを見直します。それが難しいようであれば、Webブラウザの機能に頼っていくことになります。WebWorkerでマルチスレッド化／バックグラウンド実行したり、WebAssembly（軽量バイナリフォーマット）を利用したり、GPGPUで計算したりといった方法が挙げられます。

初期ローディングの改善

不必要なスクリプトや画像等の読み込みがないか、まずは無駄を見直すことが大事です。
そのうえでさらにリソースの読込を改善するのであれば、サーバサイドレンダリングや遅延ローディングを行いましょう。
また、PRPL パターン なども参考にしてみてください。

パフォーマンスの測定

Chromeに搭載されているWebサイト解析ツール、 Lighthouse を使っての測定をおすすめします。
良いWebサイトにするために必要な項目を点数化して表示してくれます。実際に測定してみると、おそらくめちゃくちゃ点数が低くて凹むと思います（笑）そこからいかに改善できるか考えてみましょう。

これからのWebアプリ設計

後から本格的なPWAにするのは難しいので、最初からPWAを意識した、「PWAファースト」な設計をしましょう。そして、後からパフォーマンスチューニングをするのも難しいので、今後は「パフォーマンスファースト」な設計が求められてくるのではないでしょうか。

WebWorker、WebAssembly、GPGPU、ES Modules、HTTP/2、WebComponentsなど、Web標準の技術だけでパフォーマンスを追求できるように環境が進化してきています。
これからの時代は高いパフォーマンスが価値を生む時代になります。優れたUXを実現し、競争力の向上を目指していきましょう。

このイベントは300人の定員に対し、なんと500人近い参加者の申し込みがあったようです。会場では立ち見も出るほどの盛況ぶりでした。先日のGoogle I/O以来、HTML5アプリ、特にPWAに注目が集まっていることが伺えますね！
モナカプレスでは今後もHTML5／PWA関連イベントを追いかけていきますので、ぜひご期待ください！