レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。 WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。
しかし、2009年の「モバイルファースト」と、今の「モバイルファースト」は大きく中身が成長しました。モバイルフレームワークであるIonic 2も先日リリースされましたので、ここで改めて「モバイルファースト」とは何かを考え、モバイルの設計を見直していきます。
レスポンシブとモバイルファースト
モバイルファーストは、「モバイル環境に最適化した開発手法」と説明することができます。
モバイル（多くはiPhoneを指しました）は解像度が低く、操作方法もPC文化と異なり、かつ通信速度も遅いという制約があります。イベントひとつとっても、onclickでは待機時間があるから、jQueryのtapイベントを使う、というようにPCとモバイル開発の乖離をどのようにするかの課題があります。
モバイルファーストがいわれはじめた2009年当時は「PC版を作ったあと、MediaQueriesを使ってモバイルでも表示させる」というワークフローが主流でしたが、これではPCとモバイル開発の乖離にアプローチするのが難しかったため、「先にモバイル版をつくる」ワークフローを取り入れる現場が多く生まれました。PCよりもモバイルを優先させるので、「モバイルファースト」だったわけです。
その頃は、モバイルファーストとレスポンシブデザインの区別がつかない議論を度々聞きましたが、もうここらへんの誤解は整理された感があります。
Googleが提示する「次のモバイルファースト」
モバイルからのアクセスが主流になる中で、Googleは「次のモバイルファースト」として、2つの選択肢を提示しました。AMP（Accelerated Mobile Pages）と、PWA（Progressive Web Apps）です。
簡単に概要をいうと、AMPは超高速でWebサイトを表示することができます。HTMLやJavaScriptは高速化を妨げるものは使えなくなっており、またCSSはインラインのみでの表示でありと、ひたすらページ表示速度をあげるための仕様です。 PWAは「Webのアプリ化」を標榜したもので、インストール型のアプリと同様にWebを使うことができます。代表的な内容でいえば、Webをアプリとしてインストールしたり、オフラインでも表示することができたり、プッシュ通知を受け取ることができるようになります。
Googleはこの2つの仕様により、
- 普通のWebサイトなら、超高速化するためにAMP
- いろいろな機能を実装するなら、PWAでWebをアプリ化
という2つの「次のモバイルファースト」を提示しました。これは、今の「レスポンシブにしてモバイルで表示できればOK」から大きな変化であり、これからのモバイル体験を大きく変えるものになるのではないでしょうか。
UIデザインのモバイルファースト
PWAの標榜する「Webのアプリ化」は、UIデザインにおいても「次のモバイルファースト」を生み出す可能性が高いです。 皆さんご存知の通り、PCと（現在の）モバイル、そしてモバイルアプリはUI文化が異なります。PCとモバイルのWeb表示はレスポンシブデザインによって多くの共通化されたモジュールが使われていますので似通っておりますが（便宜上、これらを「現行WebUI」といいます）、モバイルアプリUIは別物に近いといっていいでしょう。
例えば、「現行WebUI」では、HeaderのロゴはクリックしてHOMEに戻るという文化があります。ほとんどがこのUIを採用しています。しかしながらモバイルアプリはHeader部にロゴは入れませんし、入れていてもクリックさせない場合が多いです。 また、「現行WebUI」ではクリックできる場所は明確にするしきたりがあります。例えばカードデザインでも下に「詳しくみる」と注釈をつけてクリックを促したりします。しかしながら、モバイルアプリUIでは「カードはとりあえずクリックしてみるよね」という風潮があります。
モバイルファーストで考えた時、Webがアプリ化する前提でのUIの再設計も必要になってくるでしょう。その時に、各デバイスが発表しているデザインガイドラインはとても有用です。
AMPのように表示速度に最適化したWebはまた異なるUI文化が生まれてくるのでしょうが、「Webのアプリ化」を標榜するPWAはモバイルWebのUIもアプリサイドに寄せていくことになりそうです。
デバイスの作法に寄り添うために
WebのUIもアプリサイドに寄っていくことを考えた時、一番大きなハードルになるのは前挙した「各デバイス毎のデザインガイドライン」をどのように吸収するかです。モバイルでは、デバイスの文化に寄り添うUI設計が最もユーザの学習コストが低く、適切なUI,UXを提供することができます。iPhoneはフラットデザイン、Androidはマテリアルデザイン、WindowsPhoneはModern UIを提供するために1リソースで複数デザインパターンを用意して保守し続けることはハードルが高く現実的ではありません。
そのハードルに対して、適切にソリューションを提供してるモバイルフレームワークのひとつに、Ionic 2があります。
Ionic 2は、2017年1月にリリースされた、Angular 2を使って構築するモバイルフレームワークです。現在、（著者が確認する範囲では）唯一のPWA対応を標榜したモバイルフレームワークとなっております。
Ionic 2のWebComponents
よくモバイル開発で使われるComponents（CardやFabitなど）を、フラットデザイン、マテリアルデザイン、Modern UIのパターンを用意し、フレームワークが判断して自動的にデザインをデバイスに合わせます。
Ionic 2は、デフォルトで用意しているUIパターンは、複雑になりがちなHTMLを「Web Components」という技術によってカスタムタグを用意して、コーダーの負担を減らす工夫をしています。例えば<button ion-button>Login</button>というボタンがあると、これをフレームワークが自動的に展開して、ユーザには
<button block="" ion-button="" class="button button-md button-default button-default-md button-block button-block-md">
<span class="button-inner">Login</span>
<div class="button-effect" style="transform: translate3d(392px, -91px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 552ms, opacity 386ms 166ms;">
</div>
</button>
と表示されます。手元のソースコードはシンプルですので、可読性が高く、またデバイス毎の表示に困ることはありません。2017年3月現在、28のコンポーネントがデフォルトで用意されています（コンポーネント一覧は公式リファレンスをご覧下さい）
また、フレームワークが直下に<ion-app>というタグを生成してくれており、そこにデバイスを示すclass（iPhoneだとios、Androidはmd、WindowsPhoneはwp）をつけてくれます。なので、もしも自分自身でカスタムデザインを用意したい場合、それを親にしてCSS設計することが可能です。
Ionic 2のオフライン表示
GoogleのPWAのガイドラインの中で「Progressive Web App Checklist」を提供しています。Webをアプリ化するために、これだけはクリアしてねというチェックリストです。
その中で「オフラインでも表示される」というものがあります。普通のWebサイトでは、キャッシュを持っていてもオフライン環境で更新すると「オフラインです」とエラーがでます。しかしながら、Service Workerという技術を使うと、オフライン環境では自動的にキャッシュを返すことができます。
オフライン対応を有効するのはとても簡単で、src/index.htmlの17-24行目のコメントアウトを外すだけです。
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>
このことによって、Service Workerが対応している場合はservice-worker.jsを読み込み、オフライン対応が行われます。回線が安定してるPCとは異なり、トンネルの中であったり山中であったりでも安定してコンテンツを提供するためには必須の機能です。
Ionic 2では、sw-toolbox.jsを利用しておりますので、詳細に興味がある方は「sw-toolbox」をご覧下さい。拡張すれば、いろいろなオフライン時の挙動を制御できます。
Ionic 2のmanifest.json
PWAでは、Webをアプリストアのアプリ同様にHOME画面にアイコン付きで登録することができます。manifest.jsonは、その時のアイコンであったりとか、起動した時のヘッダー部の配色であったりを定めることができます。 初期では以下の通りです。
{
"name": "Ionic",
"short_name": "Ionic",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/imgs/logo.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#4e8ef7",
"theme_color": "#4e8ef7"
}
これを設定すると、Androidで表示された場合に自動的に「ホーム画面に追加」というバナーがでてきて、ユーザに対してWebをアプリとして扱うことを提案することができます。
他のProgressive Web App Checklist
他のProgressive Web App Checklistは以下の通りです。Webをアプリとして扱うことを考える時に、ぜひご配慮下さい。
- SSLで提供されている
- モバイルに表示が最適化されている（レスポンシブデザイン）
- 10秒以内に最初のページが表示される
- Chrome、Edge、Firefox、Safariで動作する
- 各ページはURLを持っている
おわりに
GoogleがAMPとPWAというふたつの選択肢を提示しました。これは、既存のモバイルから設計するデザインワーク中心の「モバイルファースト」から、モバイル体験中心をWebを中心として再設計する新たな「モバイルファースト」を生み出す可能性を秘めています。Webの設計、デザイン、技術の大きな見直しの転換点となるのではないでしょうか。 そこで、ぜひともいちはやく「PWAのサポート」を発表したIonic 2を試していただき、この流れとWebのこれからを体験していただければと思います。
Ionic 2 の日本語コミュニティあります
今では随分改善されましたが、Ionic 2はリリース前（特にβ版時代）はとても日本語情報が少なかったので、知見を共有するためにslackのオープンチャンネルを開設しました。分かる方がいれば有志が回答する形ですのでレスポンス速度はあまり高くありませんが、ご活用いただけましたら幸いです。