IONIC2体験

Announcing Ionic Framework 2 Beta | The Official Ionic Blogionic2が無事ベータリリースになったようなので、チュートリアルを体験してみました。が、英語なのとionic1やAngularが分かっていないと戸惑う部分が多いように思われました。そこでチュートリアルの流れを日本語で解説し、本家で触れられていない点についていくつか補足します。なおハイブリットアプリをWindowsで作る人はそういないと思いますのでMacが前提です。

読み方

チュートリアルそのものとは関係が無いのですが、ionicは「イオニック」ではなく、「アイオニック」です。ゴルフをやっていたときのグリップの影響か、今でもついイオニックと呼んでしまいますが。

Node.jsのインストール

公式通りに進めてください。ただし必ず4系を使うこと。ES6の事もあるのでそのうちNode5に対応するのだとは思いますが、今のところnumber of issesが発生するようです。

ionic 2のインストール

nodeをインストーラーを使ってインストールした場合には、npmコマンドが一緒にインストールされています。npmコマンドはnode.jsのパッケージ管理に使うコマンドです。ionicはnpmを使用してインストールします。Macだと-gオプション（グローバルインストール：どのユーザーでも使えるようにする）を使うにはsudoが必要です。コマンド実行時に管理者権限のあるユーザーで実行してパスワードを入力してください。

$ sudo npm install -g ionic@beta

これによりionicコマンドがインストールされます。ionicを引数なしで実行するとコマンドのマニュアルが表示されます。私が使っているのはbeta17のようです。

``` kawauchiyasuo-no-MacBook-Pro:project2 yasuo$ ionic _ _ () () _ ___ _ __ _ ___ | |/ _ | ’_ | |/ __| | | (_) | | | | | (__ |_|___/|| ||_|___| CLI v2.0.0-beta.17Usage: ionic task args=======================Available tasks: (use –help or -h for more info) start ………. Starts a new Ionic project in the specified PATH serve ………. Start a local development server for app dev/testing platform ……. Add platform target for building an Ionic app run ………… Run an Ionic project on a connected device emulate …….. Emulate an Ionic project on a simulator or emulator build ………. Build (prepare + compile) an Ionic project for a given platform. plugin ……… Add a Cordova plugin resources …… Automatically create icon and splash screen resources (beta)”

当時のベータ環境について

本文の「必ず4系」はIonic 2ベータを試した時点のNode.js互換性の記録です。Node.js 4・5系はすでにサポート終了しているため、現在のアプリ開発でこの旧版を新規導入する指示ではありません。使用するIonic・ビルドツールが対応する、サポート中のNode.jsを確認します。