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で開発を始めてみましょう！