Ionic2 とは

モバイルアプリ向けのUIフレームワーク Ionic のバージョン2で、Ionic では AngularJS に最適化されていましたが、Ionic2 では Angular2 を採用しています。

公式ドキュメントを見て分かるように、簡単なコードで iOS / Android / Windows の表示に最適化されたネイティブに近いUIが実装できます。

インストール

cordova と Ionic の CLI(Common Language Infrastructure)をインストールします。
Node.jsがインストールされていない場合は、先にインストールしておいてください。

$ npm install -g cordova ionic

以前は ionic@alpha や ionic@bata と指定していましたが、何も指定せずionicだけで良くなりました。

Getting Started with Ionic
https://ionicframework.com/getting-started/

プロジェクト作成

$ ionic start --v2 myApp tabs

--v2 を指定しない場合は Ionic(AngularJS) となりますので、必ず --v2 を指定してください。
以前は、TypeScriptのプロジェクトを作成する場合に --ts を指定していましたが、デフォルトで TypeScript のプロジェクトが作成されるようになりました。
tabsを指定した場合はタブベースのひな形で作成されますが、他にblank、sidemenuも指定可能です。
省略した場合はタブベースになります。

ブラウザで実行

プロジェクトのディレクトリに移動して ionic serveコマンドを実行すると、Webブラウザが起動してアプリが実行されます。

$ cd myApp
$ ionic serve

Chromeの場合、[F12]で開発者メニューを開いてボタンを押すとスマホに最適化された表示にできますが、WEB開発者向けブラウザ Blisk をインストールしておくと、スマホ画面とPCブラウザ画面が同時に表示できて便利です。

Download Blisk - a browser for web developers
https://blisk.io/

実行中はコードを編集すると自動でブラウザがリロードされますので、修正するたびに実行する煩わしい手順は必要ありません。

実機で実行

アプリを実機のiPhoneで実行する場合は Mac に Xcode をインストールして・・・
というのは結構手間がかかるので、今回はクラウドへアップロードして Ionic View というアプリを使用して実機で実行します。

iPhone は App Store、 Android は Google Play からアプリをインストールします。

インストールしたアプリ、または ionic.ioでアカウントを作成します。

ionicプロジェクトのディレクトリで以下のコマンドを実行して、クラウドへアップロードするためのツールをインストールします。

$ npm install @ionic/cloud-angular --save

以下のコマンドを実行すると、初回は Email と Password を要求されるので、先ほど登録したアカウントの情報を入力します。

$ ionic io init

uploadで現在の状態をクラウドへアップロードできます。

$ ionic upload

先ほどインストールした Ionic View を起動し、作成したアカウントでログインすると、アップロードしたアプリが表示されていると思います。
これを選択して、 VIEW APP でアプリを実行できます。

アプリ実行中に画面を三本指でスワイプアップするとメニューへ戻れます。

まとめ

Ionic２は、インストール、プロジェクトの作成、実行、アップロードまで全てコマンドラインで簡単に行うことができます。
Ionic2で開発を始めてみましょう！