しかし、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の再設計も必要になってくるでしょう。その時に、各デバイスが発表しているデザインガイドラインはとても有用です。

• iOS Human Interface Guidelines（日本語版）
• マテリアル デザイン
• Windows 10 アプリ UX デザイン ガイド（Modern 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のオープンチャンネルを開設しました。分かる方がいれば有志が回答する形ですのでレスポンス速度はあまり高くありませんが、ご活用いただけましたら幸いです。

Ionic 2 slackチーム

Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。

タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。そういった近年のキーワードを一気に体験できるUIフレームワーク「Ionic 2」が先日リリースされましたので、ご紹介します。

編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高いと判断し、本稿では「Angular 2」で統一させていただきます

記事の内容が古くなってたので、2017年8月11日に更新しました

Ionic 2の概要

Ionic2は、アメリカのIonic社が中心となって開発しているオープンソースのモバイルフレームワークです。 Angular 1上に構築されたIonic 1の後継プロダクトとなり、当時の経験が反映され、とても完成度が高く仕上がっています。 つい先日の2017年1月29日に正式リリースされました。

Drifty Coがデモアプリとして、Ionic 2 Conference Applicationを公開していますので、ぜひアクセスしてみてください。モバイルアプリのデモですので、スマホからアクセスするのがいいかと思います。Ionic 2の世界観とデフォルトデザインの完成度の高さがよくわかるデモとなっています。

このデモでわかる操作性・UI以外にも、Ionic2には

• ターミナルにコマンドを4行入れるだけで開発をはじめることができる
• Webはもちろんのこと、iOS/Android/WindowsPhoneアプリとしてもリリースできる
• ブラウザにPush通知を送ったり、オフライン対応することも可能
• Angular 2上に構築されているので高速

という特徴があります。 Web最前線の現場で使われてる技術を体験するために、ぜひとも一度使ってみてください！ 　

4行で高速開発環境構築

Ionic 2でどのような体験ができるかをご紹介するために、実際にプロジェクトを立ち上げてみます。以下は、Node.js(6以上)をインストールされている環境を前提にしていますので、未インストールの場合は https://nodejs.org/ja/ からインストールください。

最初に、ターミナル（Windowsの場合はコマンドプロンプト）を立ち上げ、以下のコマンドを入力します。これで、Ionic 2を構築するためのIonic CLIというパッケージをインストールします。

npm install -g ionic cordova

次に、プロジェクトを作るフォルダに移動して、以下のコマンドを入力します。するとProjectNameという名前のフォルダが作成され、2-3分でプロジェクトが作成されます。

ionic start ProjectName --v2

最後に、ProjectNameというフォルダに移動し、ionic serveという開発を開始するためのコマンドを入力します。

cd ProjectName
ionic serve

すると、自動的にブラウザが立ち上がり、画面が表示されます。URLがhttp://localhost:8100/になっていると思いますが、これはIonic CLIが自動的に開発用サーバを立ち上げてくれたためです。（実際にアクセスしているのは、www/フォルダの中です）

4行のコマンドで開発の準備が完了しました！

5分でIonic 2の開発を体験！

早速開発してみましょう。Ionic 2は、様々な機能が実装されているためにいろいろな設定ファイルやフォルダが用意されていますが、最初はsrc/とwww/の中をさわれば事足ります。

ProjectName/
├── src/
　　├── app/
　　├── assets/
　　├── pages/
　　　　├── about/
　　　　├── contact/
　　　　├── home/
　　　　└── tabs/
　　├── theme/
　　└── index.html
└── www/

では、まずsrc/pages/の中を見てみましょう。

4つのフォルダが、画面のそれぞれのComponentに対応しています。例えば、Home画面だと以下の通りです。 メインコンテンツはhome/home.htmlが、タブのエリアはtabs/tabs.htmlがテンプレートになっています。

試しに、home/home.htmlをログインフォームにしてみましょう。home/home.htmlの中身を以下に差し替えて見てください。

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label fixed>Username</ion-label>
      <ion-input type="text" value=""></ion-input>
    </ion-item>

    <ion-item>
      <ion-label fixed>Password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
  </ion-list>
  <button ion-button block>Login</button>
</ion-content>

そして保存すると、自動的にブラウザが更新されて、ログインフォームが表示されます。 LiveReloadという機能で、一回いっかい更新ボタンを自分で押す必要がないので、複数ディスプレイで作業してる時とても捗ります。

見慣れないタグ。これって何？

home/home.htmlのタグをみると、ion-headerやion-contentと見覚えのないタグが使われていることに気づくと思います。これは、Directiveを使って定義づけているカスタムタグで、Ionic 2オリジナルのものです。 例えば、<button ion-button>Login</button>だと、これをJavaScriptが以下のように展開します。

<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>

複雑なHTMLであったり、多くのclass名であったりをいちいち書かなくてもいいようにIonic 2が処理してくれますので、開発コードがとても可読性の高いものとなります。 Ionic 2が用意しているComponentsは、公式のサイトから一覧で確認できます。

Ionic 2を使っていると、最初は「ドキュメントにあるコンポーネントをコピペしていく」だけで大部分のUIデザインが完了します。ですので、ワイヤーフレーム段階からがしがし作っては捨てるタイプの小さく回す開発が可能です。

Ionic 2のUI

Themeを書き換える

Ionic 2は、CSSを拡張したSCSSを採用しています。変数などが使えるので、!importantを使わずにThemeの変更をすることが可能です。 実際に、SCSSの変数機能を利用して、Themeを自作してみましょう。

src/theme/variables.scssを開いてみてください。現在設定されているThemeの変数を入れ替えたり、上書きするための設定ファイルです。

この$colorsで設定されているprimaryがdefaultの色となります。試しにこの色をredに変更して保存してみてください。正常にLiveReloadが動作していれば、自動的に以下のようにThemeが変更されます。

他にも、様々な設定変数がIonic2には用意されています。試しにツールバーの背景色を変更してみましょう。 $colorsの下に、以下の値を入力してください。

$toolbar-background : yellow;

そしてリロードすると、ツールバーの背景色が黄色になるのを確認できます。これらの設定変数はOverriding Ionic Sass Variablesに書いてありますので、ここを見ながら変数を作っていくと、簡単にオリジナルThemeを作ることができます。

プラットフォームチェック

Ionic 2は、それぞれのモバイルOSの文化に寄り添ったデザインで表示されるようになっています。上記はChromeで表示しているのでマテリアルデザインとなっていますが、iOS SafariでみるとiOSのデザインに自動的に変更されます。

それぞれのモバイルブラウザでどのように表示されるかを見比べる機能があるので使ってみましょう。http://localhost:8100/ionic-labにアクセスしてみてください。先程の表示画面がそれぞれのモバイルプラットフォーム毎にどのように表示されるのか見比べることができます。

UI,UXを考える上で、それぞれのユーザのプラットフォームの文化に寄り添うのはとても重要な要素ですので、とても重宝する機能です。

Ionic 2をコンパイルする

iPhoneアプリとしてコンパイルする

作ったWebアプリを、iOS/Android/Windows Phoneのアプリとしてコンパイルすることができ、それぞれのプラットフォーム上でのアプリストアで販売できます（このように作られたアプリをハイブリッドアプリといいます）

コンパイルは、とても簡単です。例えば、Xcodeをインストール済みのMacでしたら、以下のコマンドを入力するだけでコンパイルが行われ、iOSアプリとしてのプレビューが行われます。

ionic cordova emulate ios

Webがオフラインでも表示できるようにする

Ionic 2は、Googleが提唱しているService WorkerというWebサイトをアプリとして使うための技術を積極的にキャッチアップしています。Service Workerには様々な機能がありますが、Ionic 2はデフォルトでオフライン対応が実装されています。

オフライン対応を有効するのはとても簡単で、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>

ただ注意事項が2点ありまして、1つはServiceWorkerはSSLでしか動かないです。もうひとつは、現行ではiOS非対応ですので、iPhoneでの確認をすることはできません。ご注意ください。

リリース版をコンパイルする

Ionic 2のコンパイルは、serve/cordova emulateとnpm run build --prodのに分かれます。簡単に違いをいうと、前者はLiveReloadをストレスなく行うために実環境のパフォーマンスを落としていて（Just in Time Compile）、後者はコンパイル時に時間こそがかかるものの、それ以降はとても高速に動作します（Ahead of Time Compile）。ですので、開発環境では前者を、本番環境では後者を使います。 Ahead of Time Compileのコマンドは以下ですので、お気をつけください。

npm run build --prod

ionic cordova build ios --prod

ionic cordova build android --prod --release

なお、Compileの違いの詳細に興味がある方は、Angular AoTガイドをご覧ください。

終わりに

ここまでは、入門的HowToをご紹介してきました。冒頭でもふれたとおり、近年のフロントエンドのキーワードをまとめてさわるにはとても優れたモバイルフレームワークです。しかしながら、実案件に入るとAngular 2ベースのComponents開発であったり、SPA文化であったり、開発に入る前にもっと触れておいた方がいい知識があります。そこで、次の入り口として、3つをご案内して結びにかえさせていただきます。

公式のチュートリアルでもっと学ぶ

Ionic 2では、初心者向けのチュートリアルを用意しています。英語なので少し大変かもしれませんが、大変わかりやすく書かれてありますのでおすすめです。Ionic 2を使う前提でしたら、Angular 2のチュートリアルをする前にぜひこちらを試してみてください。

Ionic 2 Tutorial

日本語コミュニティあります

今では随分改善されましたが、Ionic 2はリリース前（特にβ版時代）はとても日本語情報が少なかったので、知見を共有するためにslackのオープンチャンネルを開設しました。分かる方がいれば有志が回答する形ですのでレスポンス速度はあまり高くありませんが、ご活用いただけましたら幸いです。

Ionic 2 slackチーム