Ionic2(Beta)のGetting Startedを試してみました

インストールなどの設定について

まずはionic2のインストールから。

$ npm install -g ionic@beta

次のコマンドでプロジェクト作成

$ ionic start cutePuppyPics --v2

途中でyes/noの選択がでますが、とりあえずデフォルトで進めました。するとなぜかSignup画面が。

Ionic用のアカウントを作成できるみたいです。とりあえず進めたら動画が見れました。

プロジェクト作成が終わったので次はサーバの起動です。次のコマンドを実行します。

$ cd cutePuppyPics
$ ionic serve

これでローカルサーバが起動してStarterアプリを動かすことができました。

Ionicはモバイルアプリを開発するためのものです。なのでIOSデバイスなどで動かすようにする必要があります。これはcordovaをつかって対応するみたいです。

$ sudo npm install -g cordova

次のコマンドでiosに対応させます。

$ ionic platform add ios

実行すると何故かエラーが。既に追加されているとのことなので次に進みます。

Error: Platform ios already added.

次のコマンドでエミュレータを起動します。

$ ionic emulate ios --target=iPhone-6

これで無事に表示されました。

Tutorial

インストール手順については確認できたので、続いてTutorialです。

まずはプロジェクトの作成。

$ ionic start MyIonic2Project tutorial --v2
$ cd MyIonic2Project/
$ ionic serve

これで準備OK

ファイル構成はこんな感じ。www/index.htmlがメインのページです。

ionicには次の独自タグがあります。

<ion-app></ion-app>

cordova.jsはbuild後のファイルもindex.htmlで読み込んでいます。

<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>

Angular2のコンポーネント的な処理はappフォルダに記載がありました。

Ionic2で利用できるコンポーネントのサンプルも確認できます。

Ionic Component Documentation - Ionic Framework

Migration

MigrationメニューではIonic1とIonic2の変更点が紹介されていました。

Concepts

Conceptsページではどのようなコンセプトでつくられたか紹介があるみたいです。

さいごに

Angular2やReactなどで開発するときGulpやWebpackの勉強して自動でビルドしたりできるようにする必要があると思うのですが、Ionicはその辺もやってくれるみたいです。なのでJS部分をちょっと編集してコンポーネント内のラベルを変更したら自動で反映されるようになっていました。

簡単にさわってみただけですが、環境構築に時間をかけずに勉強できそうかなと思います。