こんにちは、ディレクター兼フロントエンドエンジニアのiwaoです。先日、HTML5 APP CONFERENCE 2018というイベントに参加してきました。いろいろと収穫があったので、自分が受講したセッションで、特にビビッと来た点を社内への共有も込めてブログに残しておきたいと思います。

モバイルネイティブアプリに変わる存在！？初めてのPWA

ソニックガーデン野本さんのお話。わたしの知識レベルがPWA（プログレッシブウェブアプリ）は知ってるけど実装方法とか詳しいところはよくわかってない、という状態なので、まずは入門的なところからと思って参加しました。

要点1：PWAはユーザー体験が良い

PWAとは一言でいってしまえばネイティブぽいウェブアプリのこと。スマホでTwitterにアクセスしてホームにアイコンを追加するとTwitter Liteというアイコンが登場するのですが、これこそがTwitterのPWAなのだそうです。

使ってみると確かにネイティブのアプリっぽい。投稿もできるし普通に使う分には特段問題ないように思えます。

実際に数値としても効果が実証されているらしく、Twitterに関しては以前のモバイル版から比べて、Twitter Liteではセッションごとのページ閲覧や直帰率、投稿数などがググッと改善されたそうです。あと、楽天レシピも1ユーザーあたりのPV3.1倍になったそうです。こちらも大きな効果でございますね。

要点2：PWAは難しくない

PWAとして最低限満たすべき項目として、Googleが作った「Progressive Web App Checklist」なるものがあるそうです。これをクリアすればPWAと言えるのだと。項目をクリアしているかどうかは、これまたGoogleが作っているLlighthouseというツールで行えるそうです。

そんでもって、Vuetify.jsというVueのPWA用を使うと、Progressive Web App ChecklistをクリアしたWebアプリがサクッと作れちゃう、というのが後半のお話。確かに10分かからないくらいでFirebaseでデプロイするところまでできてました。

実際には、ここから必要な機能やらページやら実装する必要があるので、また色々大変だとは思うのですが、簡易なものであれば対応自体はそんなに時間がかかるものではない、というのが趣旨だと思いますのでそこについては理解。

抑えるべきポイントがあって、そこを守ればいいんだよ、ということですね。それがわかっただけでも収穫でした。ありがとうございました。

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

続いて参加したのはdott清水さんのセッション。個人的に今回のイベントではこのお話が一番グッと来るものがありました。現在のdottさんは、Angularベースのハイブリッドモバイルアプリ開発フレームワークであるところのIonicでスマホアプリを作っているとのことですが、もともとはiOSやAndroidなどネイティブでも作っていたそうです。その他、バックエンドやインフラなども色んなサービスやツール、言語を使っていたとのこと。

そこから選択と集中によってバックエンドをPythonだけにしたり、DBをGoogle Cloud Datastoreだけにするなど、技術やツールの絞り込みを行ったとのこと。Webの技術だけで開発する体制としたことにより、メンバーの流動的なアサインが可能になり、柔軟にチームを作ることができるようになったそうです。

ここまででもかなり尖ってますが、今年はさらに踏み込んでIonic、Firebase、Anguralrだけにしていきたいとのこと。バックエンド開発自体を減らしてエンジニアのリソースをより大事なことに集中させるという話なのですが、これ相当思い切った集中だと思いました。実際、Firebaseだけってのは厳しい面もあるそうですが、汎用的に使える技術にエンジニアが寄っていく、全員が共通の技術に傾倒していってその技術が広く使われることを目指しているそうです。

選択と集中を行う前のdottさんと近い開発会社の方、結構多いんじゃないでしょうか。うちも割とこれに近かったので、こういう戦略もあるのか、そして確かにありだなと衝撃を受けました。

ここまでエッジの効いた形で取り入れるのは難しいと思いますが、社内でも議題にあげてみようと思いましたっ！

Monacaでモバイルアプリ3分クッキング

Webの技術（HTML、CSS、JavaScript）でハイブリッドアプリ開発ができてしまうMonacaというアプリ開発プラットフォームのお話。

いいなと思ったのはクラウド上にエディタ含め開発環境が揃っているので、ブラウザでアクセスするだけで開発できるという点です。エミュレータによる動作確認もブラウザでOK。しかも変更の反映もすごく早い。クラウドで同期しているため、実機への配信や変更の反映も簡単&ほぼリアルタイムに実現。

Vue.jsやReactといったフレームワークにも対応しているので、慣れ親しんだやり方で開発を進めることができるのも良さそう。ホビーユースなら無料で使えるし、サンプルアプリとしてゲームやツール系など色々揃っているみたいなので、スタートの敷居が低いのも嬉しいですね。

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

pixiv chatstoryというサービスをPWAで作り、そして日々運用している中から得られた知見を共有。PWAはピクシブさんでも初の試みであり、色々手探りでの開発だったそうです。

高速化するためにやったことや、不具合を起こさないための対策など内容としてはかなり実践的。PWAにすでに取り組んでいる方なら「なるほどね」となる話だったはず。私の場合はそういう話もあるんだな、というふわっとした理解に留まりました。ぐぬぬ。。。

ただ、最初はターゲットとするブラウザを絞って開発し、そこから対応ブラウザを増やしていく、といった作り方ができたのはPWAならでは、というお話などは大きな「ふむふむ」を得ました。確かにストアに配信するアプリでそういう展開はなかなか難しいですよね。PWAってネイティブの劣化的な扱いをされることが多い気がするのですが、こういう場面ではアドバンテージを発揮することもあるのだなと。これは良い気づきでした。

フロントエンドでクラウドをいい感じに使う

AWS Amplify、Cognito、Pinpoint、API Gatewayなどを使って、ほんの数行のJavaScriptだけでユーザー認証ページや解析などを実装してみましょう、という内容。

いろんなサービスが次々と登場したり、展開が早かったりで細かいところは追いきれなかったのですが、まともに作ったえらい時間がかかりそうな機能がフロントエンドの処理だけで簡単に実装できてしまうということはわかりました。

Webサービス作りたいけどバックエンドの処理作れないフロントエンドエンジニアを強力にアシストしてくれそう。自在に使えるようになったら夢が広がるやつでした。

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

最後にお聞きしたのはパフォーマンスのお話。PWAの基準を満たすためには「Progressive Web App Checklist」をクリアする必要があるわけですが、そこでキモになってくるのがパフォーマンスの改善だそうです。

一般的なWebサイトでもパフォーマンスはおそろかにできないポイントですが、ネイティブと遜色ないユーザー体験が求められるPWAではよりそこをシビアに考える必要があるわけですね。そのために意識するべき点、考慮すべきところなどを詳しくお話いただきました。内容については資料が公開されているのでぜひそちらでご確認ください。

おわりに

というわけで拙いながらレポートでした。漠然としか知らなかったPWAですが、どんなものなのか、そして今後どういうポジションに来そうなのかはだいたい掴めた気がします。仕事として間違いなく近いうちに関わることになりそうなので、今のうちに準備進めておこうと思いました。粛々とね。それではまた！