@kyanny's blog

My thoughts, my life. Views/opinions are my own.

Google Developers Summit : Progressive Web Apps に参加した

Google Developers Summit Tokyo 2016 : Progressive Web App | トップ

久しぶりに技術カンファレンスに参加した。 Progressive であるかどうかはともかく、仕事でも Web アプリケーションをずっと書いているし、モバイルへの関心も高まってきたので、 Web 技術のカンファレンスがどういうものか興味もあった。

全体的に、 Progressive Web Apps (PWAs) という言葉・概念自体にあまりこだわることはないのかな、と思った。 Web アプリが Native アプリのように「インストールできる、オフラインで動く」ようにするために、新しい Web API を活用したり、 Native と遜色ないユーザー体験を実現・提供していきましょう、ということで、それを例えば Apple が iOS の Safari に独自仕様で「ホーム画面に追加」機能を作ったりしていたのを、 Google は Web 標準に働きかけてちゃんと統一していきますよ、それがブラウザやプラットフォームにかかわらずユーザーが等しくより良い Web アプリを体験できることに繋がるから、みたいな、そういうのをひっくるめて呼ぶためにとりあえず名前をつける必要があった、というところか。

Progressive というワードが用いられているのは、まだまだ Web アプリで Native に匹敵するユーザー体験を実現するのは難しいところもあって、なので全てのユーザーに最も良い体験を提供するのは無理でも、段階的に実現・提供していきましょう、ということのようだ。最初に見たときの印象では Progressive JPEG のように、「最初にぼやけたレイアウトだけレンダリングさせてデータが届き次第順次精細なものを表示していくテクニック」のようなことかと思ったが、もっと観念的なことのようだった(もちろんテクニックも含まれてはいるが)

Chrome が Add to home 機能を実装したことでホーム画面に Native アプリと全く同じように Web アプリをインストールできるようになった(ブラウザから直接)、という話が何度もいろいろな人に言及されてたけど、 iOS ユーザーとしては正直「そんなの iPhone では何年も前からできてたけど、え、 Android いまさら?しかも Chrome だけ?」と思ってしまった。が、 theme-color には感動した。カンファレンスの数日前に全然関係ないところで知ったが、改めてここでも触れられていて、これは確かに Web の体験を Native っぽくする重要なポイントだし、それが簡単なマークアップだけでできるのは画期的だと思った。のでちょっとしたデモを作ったりして遊んだ。

以下、良かったセッションなど。

Offline first experiences

Service Worker の話。内容が具体的で、わかりやすかった。

Hey, look at me, I'm Notification

通知の話。 Web Notifications とか Web Push API とかは夢があるし、実用イメージも湧きやすいが、濫用したらダメよ、ということを具体的にいろんな通知の例を挙げて、どこが良くてどこがダメか、どうすれば改善できるか、という話をずっとしていてこれが良かった。 Timely, Precise, Relevant という三軸を満たすようにするのが大事ということで、言われてみれば確かにその通りで全部当たり前なのだけど、なんでも通知したくなっちゃいそうなので気をつけてやらないとな、と改めて思った。

あと、 Web 通知はブラウザのサポートなどが鍵になってくるものの、依然としてサーバサイド API を介在してそこでいろいろケアしてやる必要がある、言い換えればサーバサイドで工夫する余地があるというのは興味深かった。 Web にせよ Native にせよ、クライアントサイド・フロントエンドの重要さは増すばかりだが、裏方色の強くなったサーバサイド・ API というのもちゃんと存在感があって大事な部分であり続ける、というのは、サーバサイドを本職としてきた身には安心するところがあった。

SUUMO における Progressive Web Apps の活用事例

HTTP -> HTTPS への移行時に localStorage がネックになったのでサーバサイド API (とその裏のデータベース)を介して「お引越し」させる、という話はいろいろすごかったが、中でも「情報誌など紙媒体に http:// で書かれた URL を全て https:// に変更していくのは(印刷された紙が残り続けてしまうので)難しいので HSTS 対応なども進めていく」というのは、確かに印刷された紙はどうしようもないな、と同情を禁じ得なかった。

ホーム画面から起動されたものは KPI の数字がちょっと良かった、とか、そういう話も良かった。しかし、大掛かりなアプリで大掛かりなマイグレーションをするから大変というのはわかるが、全工程の半分過ぎたところまでで一年かかっているというのは時間かかりすぎだと思った。

Quipper Qstrap で theme-color

Google Developers Summit に参加する数日前に theme-color というものを知って面白いなと思い、カンファレンスでも言及されていてさらに興味が湧いたので、自分で試したくなってちょっとしたでもページを作った。

Quipper Colors

Quipper では Bootstrap をベースにした Qstrap という CSS フレームワークを自社開発している。これは Quipper のサービスで統一したカラースキームやコンポーネントを再利用しやすくすることで、開発者の負担を減らしたり統一したユーザー体験を提供する目的で作られているものだが、このカラースキームを選ぶと theme-color を変化させて Android Chrome のツールバーの色を変えられる、というもの。

実装は至極単純で、 meta タグの値を変えただけの HTML を各色ぶん用意してリンクをはってるだけ。仕事では Qstrap を毎日使っているものの、ゼロからマークアップすることはあまりないし、あまり使わないコンポーネントもあったりするので、 Qstrap の練習も兼ねている。