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チーム

読者の皆様こんにちは、編集長の白石です。

先日ふとしたきっかけで、本サイトの認定エキスパートでありアシアル株式会社の社長でもある田中 正裕さんと、Web技術について語り合う機会がありました。

ReactやAngular2といった次世代のアプリケーションフレームワークが存在感を増す中で、UIを構築するためのフレームワークはどう進化するのか？

これらのアプリケーションフレームワークをベースとしたIonic2やOnsen UI2と言ったUIフレームワークについて、それぞれの立場から語り合ってみました。 （田中さんはOnsen UI2の開発者、白石はIonic2をかなりヘビーに使い倒しています）

Progressive Web Apps (PWApps)というキーワードが認知を広げる中で、ハイブリッドアプリやモバイルサイトを構築する手段として、これらのフレームワークは存在感を増しています。PWApps、React、Angular2、Cordovaといったキーワードに関心のある方は必読です！

では、本編をお楽しみください。

対談参加者のプロフィール

田中 正裕(アシアル株式会社 代表取締役社長)

ユーザーインタフェース設計からインフラストラクチャー構築まで、最先端の技術を駆使したシステム構築を手がける。特にPHPをはじめとするOSSや、HTML5やJavaScriptといったオープンなアーキテクチャーを用いたシステムの構築に尽力している。モバイルアプリ開発プラットフォーム「Monaca」のプロダクトマネジャーを兼務。

白石 俊平(HTML5 Experts.jp編集長)

株式会社オープンウェブ・テクノロジーCEO。2015年12月、「最先端は、ここにある。」を謳うテクノロジー情報キュレーションサービスTechFeedをリリース。Web技術者向け情報メディア「HTML5 Experts.jp」編集長。日本最大（6,500名超）のHTML5開発者コミュニティ「html5j」ファウンダー。Google社公認Developer Expert (HTML5)、Microsoft社公認Most Valuable Professional (IE) などを歴任。著書に「HTML5&API入門」（2010, 日経BP）、「Google Gearsスタートガイド」（2007, 技術評論社）など。監訳に「実践jQuery Mobile」（2013, オライリー）など。

Ionic2とOnsen UI2

白石: 本日はよろしくお願いします。今回はReact/Angular2時代のUIフレームワークということで、最先端のUIフレームワークについて語る場にしたいと思っています。

田中: はい、よろしくお願いします！

白石: まずは、Ionic2やOnsen UI2について馴染みのない読者も多いと思うので、それぞれのフレームワークとぼくらの関わりについて話しましょうか。まずは、両フレームワークの共通点としては、以下の様な点が挙げられるかと思います。

• どちらもコンポーネント指向のUIフレームワーク。独自のタグを元に、HTMLっぽいテンプレートを記述することでUIを構築していける。
• どちらも最初から数多くのUIコンポーネントを備えており、モバイルネイティブに近い見た目のアプリを作れる。
• どちらも、Cordovaをベースとしたモバイルアプリ開発（ハイブリッドアプリ）を前提としている。そのため、以下に示すようなCordovaの特徴を備えることになる。
  • ほぼ完全なクロスプラットフォーム性を備える
  • プラグインを通じて、ネイティブの機能を呼び出すことができる
  • WebView上で動作するので、ネイティブアプリに比べて動作が遅い

白石: で、こうした認識をベースとして、それぞれのフレームワークの違いなどに踏み込んでいければと思います。 まずは田中さんとOnsen UIの関係ですが、田中さんはOnsen UIのメイン開発者ということでいいんでしょうか？

田中: 正確に言うと、開発のリードをしている立場ですね。

白石: では、開発の優先順位なども田中さんが決定してらっしゃるということですね。チームは何人くらいいるんですか？

田中: 以前弊社に所属していた久保田 光則さんも含めると、4〜5人くらいがフルコミットしている感じですね。

そもそもOnsen UIとは何かというと、バージョン1の時はAngular1をベースとしたUIフレームワークでした。現在開発を続けているOnsen UI2の大きな特徴は「アプリケーションフレームワーク非依存」ということです。

<!--
Onsen UI2のコード例。
以下の例はAngular2だが、Angular1やReactと組み合わせることも可能
-->
<ons-page>
  <ons-input (change)="onChange()" type="text"></ons-input>
  <ons-button>Click Me!</ons-button>
</ons-page>

Onsen UI2自体はWeb Componentsに則って作られていて、それをReactやAngular2、Angular1、さらにはjQueryなどと組み合わせて利用できます。最近だとVue.jsとか今はMeteorとかいうバインディングも増えていますね。

白石: そこがIonicとの大きな違いですね。

ぼくは、先日リリースしたTechFeedというアプリで、Ionic2を全面的に採用しました。TechFeedはエンジニア向けのニュースアプリなのですが、Web/メール/モバイルアプリと、様々なクライアントがあります。そのモバイルアプリを開発するにあたって、プラットフォームごとにコードベースを分けたくなかったので、Cordova上で動作するモバイルアプリ用UIフレームワークを探していたんですね。

その際、まだβ版が出たばかりだったAngular2が割とアーキテクチャ的に美しくまとまっていたのと、Ionic2が既にAngular2に対応していたので、採用することにしました。 なので、Ionic2はAngular2をベースにしたUIフレームワークです。Angular2以外では動きません。

<!--
  Ionic2のコード例。
  タグの名前などは異なるが、あまり変わらない。
-->
<ion-content>
  <ion-input (change)="onChange()" type="text"></ion-input>
  <button>Click Me!</button>
</ion-content>

この、UIフレームワークとアプリケーションフレームワークが密結合（Ionic2）なのか、それとも疎結合（Onsen UI2）なのかというところが、今日の対談のポイントになりそうですね。

ただこのまま、UIフレームワークありきの議論に入っていく前に、ぼくは一つ確認したいことがありまして。そもそもUIフレームワークって必要とされているんでしょうか？

UIフレームワークは必要か？

白石: 「いらないだろう」という前提で話すわけではなくて、Webの世界にとってコンポーネント指向のUIフレームワークというのはまだ新しい存在なので、そもそも「なぜ必要なのか？」を確認したいのです。とりあえず、フレームワークが必要か不要かで言うと、Webデザイナーさんの中には、フレームワークを嫌がる方も多い気がするのですが。

田中: 確かにそういう方もいらっしゃるとは思います。が、（Bootstrapなどのような）CSSフレームワークと、JavaScriptも含めたUIフレームワークは別に考えるべきじゃないかと思います。

白石: 確かにそうですね。CSSフレームワークは、デフォルトでそれなりの見た目になるとか、コーディングスタイルが統一されるなどの利点はあると思いますが、フレームワークのスタイルを変更しようとすると途端に面倒だったりしますしね。フレームワーク独自のルールを覚えなくちゃいけないし、最終的には全部リセットしたくなったり（笑）。

田中: その通りです。それに、ことモバイルアプリやサイトをWeb技術で作る場合に大事なのって、単なるCSSのプリセットがあることではありません。実際に操作してみた時のスムーズさだったり、アプリ全体から受ける印象だったりと、振る舞いも含めたもっと包括的なUXです。

そういう面で、アプリ全体のUXを統一して、なおかつプラットフォームに馴染んだものにするためには、やはり一貫した枠組みが必要です。それは実際に私がMonacaを運営する上で、お客様からご要望をいただいてきたところでもありますし、だからこそOnsen UIを作ることにも繋がりました。ということで、私はUIフレームワークは確実に必要だと思いますね。

白石: なるほど。ただ、UIフレームワークって、寿命が短くないですか？昔はjQuery MobileやKendo UIなんてのもありましたが、今ではあまり使っているという話を聞きません。

UIフレームワークとアプリケーションフレームワーク

田中: それは、それらのフレームワークがUI的に古びてしまったというわけではなく、アーキテクチャ的に古いと見なされたから使われなくなってしまったんだと思うんです。JavaScriptアプリケーションのアーキテクチャは、ここ数年目まぐるしく移り変わってきました。jQueryのあとAngular1、React、Angular2, 他にもRiot.jsとかVue.jsなども出てきている。

ですがそれはアーキテクチャの進化であって、UIが進化したわけではありません。例えばUIの進化って、iOS7からフラットデザインになりましたとか、マテリアルデザインが出てきましたとか、そういうことです。こうした進化がすごく早いかと言われると、正直そうは思いません。UIフレームワークが、アプリケーションアーキテクチャの進化に引きずられちゃってたんじゃないか、というのがぼくの思うところです。

白石: なるほど、だからOnsen UI2はアプリケーション・フレームワークに依存しない形で設計されているわけですね。ぼくはTechFeedをIonic2で作りましたが、それはAngular2の採用を先に決めていたから、というのもあります。というか、その時はまだOnsen UI2が今ほど開発が進んでいなかったので、モバイルアプリを包括的に作れるUIフレームワークと、コンポーネント指向のアプリケーションフレームワークの組み合わせが、Ionic2 + Angular2しかなかったんですよね。

田中: Ionic2はAngular2に強く依存しているわけですが、Ionic2を学ぶには先にAngular2を学ばなくてはならないわけですよね。私はそこを少しもったいないな、と思います。元々私がUIフレームワークで実現したかったことって、「JavaScriptのフレームワークを学ばなくても簡単に使える」ということだったので。

白石: 確かに、Onsen UIはそういうところの配慮が行き届いている気がします。ぼくもOnsen UI1の時に使わせていただいていましたが、Webサイト上のサンプルコードが良くできていて、コピペするだけでUIが作れてしまうのが、とても楽ちんでした。

それぞれのフレームワークが目指すもの

田中: あと、Ionic2はどことなくUIフレームワークというよりは「プラットフォーム」を目指している気がします。

白石: 確かに。Ionicはモバイルアプリを作る際はCordovaを使用するのですが、CordovaもあくまでIonicが規定するプラットフォームの一部というつもりなのか、cordovaコマンドをラップしたionicコマンドを提供していますね。また、CordovaプラグインのAPIをラップした ionic-native というモジュールも提供しています。これは、各種プラグインをTypeScriptから使えるようにしてくれているので、結構ありがたくはあるんですが。

田中: UIフレームワークを入り口として、プラットフォームに入ってきてください、というスタンスな気がしますよね。 Onsen UIはあくまでUIフレームワークであり、アプリケーションスタックの一部という位置付けなので、そこは思想の違いが現れている気がします。

白石: Ionic2はアプリケーションプラットフォームを限定していて、プラットフォームを志向している。Onsen UI2はアプリケーションプラットフォーム非依存で、ライブラリを指向している。こういう対比になりますね。こうして並べると、個人的にはOnsen UI2の方が設計面で魅力を感じます。

田中: ありがとうございます(笑)。

白石: ただ、まだ結論を出すのは早い気もしますね。どちらも正式リリース前ですし(笑)。

TechFeedがAngular2とIonic2を採用しているからというわけではないですが、アプリケーションプラットフォームを限定しているからこその強みもあるかもしれません。ぼくはまだOnsen UI2を実際に触ってみたことがないので比較ができないのですが、Ionic2のほうがAngular2との相性とかはさすがにいいでしょうし。先ほど出てきたionic-nativeパッケージとかもなかなか便利です。

またぼくらがIonicを採用した理由の一つには、コミュニティの大きさがIonicのほうが大きそうだった、という理由もあります。GitHubのStarの数が、Ionicは25,000、Onsen UIは3,000という違いがあったので。コミュニティの大きさは、Web上の情報量の差にもなって表れてくるので、困ったときに情報を得やすいと思ったのです。

このようにいろんな観点での比較ができそうなので、一概にどちらが優れているとここでは結論付けられなそうですが、こうした議論が読者の皆さんにとって判断の助けになるといいですね。

（編集部: 参考までに、ここまでに出てきた論点や、Web上で得られる内容を比較した表を掲載しておきます）

（UIコンポーネントは現在のところほぼ同数ですが、どちらかにしか実装されていないコンポーネントもいくつかありますし、今後大きく増えていく部分だと思われるため、表からは除外しています）

今後のWeb技術の展望を語る

白石: 最後にお聞きしたいんですが、Onsen UIに限らず、今後のWeb技術って、どういう方向に進んでいくとお考えですか？

田中: Web技術って、今どんどん開発のバリエーションが増えている状態だと思っています。それはフラグメンテーションと呼べるかもしれない。例えば、Angular2がTypeScriptを、ReactがJSXを使用しているように、です。これらが収束して一つの太い流れができていくのか、このまま個別の進化を続けていくのかは、まだ何ともいえません。

白石: テクノロジーのスタックが積み上がっていくにつれ、それぞれの開発手法の間の差異が広がっているというわけですね。こうした状況は、なぜ起きていると考えられますか？

田中: 私はMonacaを通じて「ハイブリッドアプリ」、つまりWeb技術でモバイルアプリを作るというところをずっとやってきました。その経験から言うと、モバイルアプリは大きく2パターンあります。一つは長期間のメンテナンスが必要なアプリ。もう一つはキャンペーンなどのワンタイムなアプリケーションですね。前者には強固な基盤が求められるので、Angular2のようなものが求められます。後者はそうではないですね。逆にさくっと作れるようなものが求められます。

こうしたニーズの二分化も理由の一つじゃないかなあとは思っています。

白石: なるほど、ニーズが分かれていると。そういう意味でいうと、静的な文書中心の「Webサイト」と、Single Page Application化が進む「Webアプリ」の違いも、フロントエンド技術のフラグメンテーションに一役買っていそうです。「Webサイト」の制作においては、まだまだjQueryは現役ですし、無理にそこを変える必要もなさそうですし。

あと、Web技術の適用範囲が増えてきているというのもあるかもしれませんね。WebVRとか、JavaScriptで動かせる組み込み基板とか。ウェアラブルやロボティクスという分野にも、Web技術が広まっていくとは思います。実際にそれがどれくらい使われるかは未知数ですけども。

田中: とはいえWeb技術って、情報技術全体から見るとエッジの技術ではありませんよね。かなりコモディティ化の進んだ、汎用的でメインストリームな技術。

白石: 確かに。これだけ技術が進んでも、結局のところHTML/CSS/JavaScriptという基本的な部分はあまり変わっていません。

田中: こうしたWeb技術の適用範囲をいかに広げていくか…というのは、個人的な興味として強くあります。いちエンジニアとして、Webのスキルセットをいろんなプラットフォームで使えるよう後支えしたいというのは、私の目指すところです。

白石: それは、HTML5 Experts.jpでもぜひ進めていきたいところです。ではそろそろお時間ですね。本日はお付き合いいただき、どうもありがとうございました！