読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

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

Ionic

β版ですが、Ionic2のGetting Startedを試してみました。Ionic2はAngular2で開発しているのでそれの勉強にもなりそうな気がちょっとしてます。

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

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

$ npm install -g ionic@beta

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

$ ionic start cutePuppyPics --v2

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


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


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

$ cd cutePuppyPics
$ ionic serve


これでローカルサーバが起動してStarterアプリを動かすことができました。
f:id:tyoshikawa1106:20160512124620p:plain


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

$ sudo npm install -g cordova


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

$ ionic platform add ios


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

Error: Platform ios already added.


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

$ ionic emulate ios --target=iPhone-6


これで無事に表示されました。
f:id:tyoshikawa1106:20160512130246p:plain:w200

Tutorial

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

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

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


これで準備OK
f:id:tyoshikawa1106:20160512130846p:plain

f:id:tyoshikawa1106:20160512130902p:plain


ファイル構成はこんな感じ。www/index.htmlがメインのページです。
f:id:tyoshikawa1106:20160512131033p:plain


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フォルダに記載がありました。
f:id:tyoshikawa1106:20160512131411p:plain


Ionic2で利用できるコンポーネントのサンプルも確認できます。
f:id:tyoshikawa1106:20160512131605p:plain

Ionic Component Documentation - Ionic Framework

Migration

MigrationメニューではIonic1とIonic2の変更点が紹介されていました。
f:id:tyoshikawa1106:20160512131931p:plain

Concepts

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

さいごに

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

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