HTML5アプリに関わるユーザのための祭典。ーモナカプレスイベントHTML5アプリに関わるユーザのための祭典。開催レポートHTML5アプリに関わるユーザのための祭典。2018」が開催されました。2018様々な分野のエキスパートが登壇した今回のイベント。Japan/CTO)。現在語られているHTML5の文脈を紐解くために、1989年に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機能を指すバズワードだったようです。Groupを設立し、2015年にHTML5の正式勧告が行われました。5.2」となっています。モバイルの歴史2007年にiPhoneが登場、その翌年にはAndroidがリリースされ、日本独自の携帯電話は衰退し、スマートデバイスが爆発的に普及していきました。必然的にネイティブアプリのクロスプラットフォーム対応が求められるようになり、TitaniumやPhoneGap(現在のCordova)といったハイブリッドアプリ開発フレームワークが登場します。UI、Ionic、Applicanといったハイブリッドアプリ開発フレームワークが立て続けにリリースされていきました。現在、そして今後Googleが2015年に「PWA」を提唱し、モバイル向けのHTMLアプリが再注目を浴びるようになりました。今度はハイブリッドアプリとしてではなく、純粋なWebアプリとしてです。Edge、Firefox、SafariもPWAをサポートをはじめ、さらにChromeがデスクトップ向けPWAのサポートもしています。Webでどんなものでも作れる環境が整ってきているということです。HTML5アプリ開発における技術の「選択と集中」についてお話がありました。選択と集中HTML5アプリ開発において、扱う技術が多様化してしまうことは一つの課題でした。「コンパクトで流動的なチームを作りたい」という思いから、技術の"選択と集中"を行い以下のような構成を選択しました。Datastoreインフラ:GAEこのように技術を集約することで、Webを作る人/モバイルを作る人という境界線がなくなり、フレキシブルなチームビルドが可能となりました。最近では上記の構成をよりシンプルにする挑戦をしています。「バックエンド」「データベース」「インフラ」はすべてFirebaseに内包される機能を使用するようにしました。してバックエンド開発自体を減らすことで、毎回同じようなCRUDのAPIやログイン処理を作る必要がなくなり、エンジニアのリソースをもっと面白いことの実装に割けるようになりました。最終的に残ったIonic&Angular&Firabaseの3技術は、JavaScript/TypeScriptに集約されると言えます。技術選定においては、汎用的でフルスタックな技術を選ぶのがポイントです。アプリイベントの実行委員長でもある榊原昌彦さん(一般社団法人リレーションデザイン研究所)は、各種クロスプラットフォーム開発ツールの解説をされました。世はまさにハイブリッドアプリ戦国時代。非常にたくさんのツールが提供されていて、皆さんもどれを使ったらいいのか悩むことがあるんじゃないでしょうか。今回の話がツール選定の参考となればと思います。Xamarinなんと言ってもC#で実装できるのが魅力です。他のツールのようにネイティブコードにブリッジする形式ではありません。そのため、ハイパフォーマンスであることが利点です。実際にパフォーマンスを計測してみると、なんと不思議なことにObjective-Cで作るよりも高い数値を叩き出しています。その半面、デザインの実装がとても大変だという難点もあります。DOMFacebookが採用しているとても有名なライブラリです。標準技術ではなく、Reactの文法で実装します。実行時にはJavaScriptCoreを経由してネイティブコードを実行します。DOMは、ランタイムやJavaScriptスレッドの仕組みがReactNativeとは異なっています。Cordovaアプリ内のWebブラウザ(WebView)でWebページを表示しているだけの単純な仕組みです。UIはネイティブUIではなく、HTML/CSSでネイティブに似せたコンポーネントを作って表示します。そのため、UIフレームワークの利用が必須となります。代表的なフレームワークは以下の2つです。UI・・・日本語のドキュメントがあるCapacitorIonicチームが作っているツールで、Cordovaの兄弟と言われています。Android、iOSはもちろん、WebやElectronもターゲットになっています。CordovaのようにWebView上にWebページを表示しますが、ページの一部、たとえばトーストだけはネイティブUIを利用するといった、ネイティブとWebViewの共存を行える点が特徴です。PWAPWAはハイブリッドアプリとは別物で、あくまでもただのWebアプリです。以下の5つの機能を利用することができます。プッシュ通知オフライン表示バックグランドSyncホーム画面への追加カメラ等のネイティブ機能の利用これからのHTML5アプリこれまでのHTML5アプリは、ネイティブアプリが作れないから仕方なくHTML5で作るといった、ネガティブな理由で採用されるケースが多くありました。現在ではデバイスのスペックも上がり、事例も増え、今回ご紹介したように多くの便利なツールが提供されるようになりました。それによって、今後HTML5アプリは開発者にとって当たり前の選択肢になっていくのではないでしょうか。chatstory」をPWAで作ったお話を語っていただきました。chatstory」はチャット形式の小説を投稿できるサービスです。iOSはネイティブアプリとして提供しており、AndroidとPC向けはPWAで提供しています。PWAは、ピクシブとしても初挑戦の技術でした。PWAの機能としては、以下の2点を実装しました。chatstoryはアプリの特性上、オフライン対応は不採用にしていますが、実装しようと思えばできます。お気に入りのストーリーをキャッシュしておいて飛行機の中などではオフラインで読めるようにする、といった機能追加はありえるかなと考えています。その他の技術UIはIonicで実装しています。Ionicはバージョン3の途中からPWA対応されました。chatstoryは機能的にブラウザAPIだけで事足りるのでCordovaは採用していません。依存が少なくて済むのならその方が良いという考えです。サーバサイド(APIサーバー)はRailsで実装しています。HTMLファイルは静的ファイルとしてホスティングしています。Hostingを使用しています。Appsを活用しています。GitHubでプルリクエストを送ると自動でHerokuアプリを生成してくれるので楽に検証できます。尾上洋介さん(日本大学)からは、HTML5アプリを開発するときに留意するべきパフォーマンスに関してのお話がありました。Webアプリのパフォーマンス一般的にHTML5アプリは、パフォーマンスが低いと思われがちです。それ自体は間違いではなくて、確かに考えなしに開発するとアプリの動きは遅くなってしまいます。パフォーマンスに関する項目が2点含まれていますので確認してみてください。Googleが提唱しているWebパフォーマンスモデルに「RAIL」があります。これは以下の4項目から構成されます。Response・・・ユーザ操作に対して100ms以内に応答Animation・・・10ms/フレーム(60FPS)Idle・・・アイドル時間を活用するLoading・・・1000ms以内に初期画面表示これらの要件を満たすことを目標として、パフォーマンス設計をしていく必要があります。遅いJSの改善まずはアルゴリズムの改善ができるかどうかを見直します。それが難しいようであれば、Webブラウザの機能に頼っていくことになります。WebWorkerでマルチスレッド化/バックグラウンド実行したり、WebAssembly(軽量バイナリフォーマット)を利用したり、GPGPUで計算したりといった方法が挙げられます。不必要なスクリプトや画像等の読み込みがないか、まずは無駄を見直すことが大事です。そのうえでさらにリソースの読込を改善するのであれば、サーバサイドレンダリングや遅延ローディングを行いましょう。参考にしてみてください。使っての測定をおすすめします。良いWebサイトにするために必要な項目を点数化して表示してくれます。実際に測定してみると、おそらくめちゃくちゃ点数が低くて凹むと思います(笑)そこからいかに改善できるか考えてみましょう。後から本格的なPWAにするのは難しいので、最初からPWAを意識した、「PWAファースト」な設計をしましょう。後からパフォーマンスチューニングをするのも難しいので、今後は「パフォーマンスファースト」な設計が求められてくるのではないでしょうか。Modules、HTTP/2、WebComponentsなど、Web標準の技術だけでパフォーマンスを追求できるように環境が進化してきています。これからの時代は高いパフォーマンスが価値を生む時代になります。優れたUXを実現し、競争力の向上を目指していきましょう。このイベントは300人の定員に対し、なんと500人近い参加者の申し込みがあったようです。会場では立ち見も出るほどの盛況ぶりでした。UIエバンジェリスト。代表的は著書は『スラスラわかるJavaScript』(翔泳社)など。開催レポート関連記事2016年12月19日Angular2チームも登壇。C...2019年3月25日AI/機械学習をMonacaで活用。