Meteorプラットフォーム上で動作するionicアプリケーションを作成チュートリアルが公開されている(ionic + meteor)。
このページでは、ionicとMeteorを組み合わせたサンプルアプリとして簡単なチャットアプリの作成を９つのステップを通して解説している。
このチュートリアルをさわり始めていて、とりあえず一度コピペしていってサンプルアプリが動作するところまでいったところ。
これから何回かにわけて、感想だったりこのチュートリアプリの作成について解説とかやってみようかなーという心意気です完走できるかは知らん。
ionic + Meteor
ionic
ionic単体で開発を始める時とMeteorと組み合わせて開発を始める時の違いについてメモしておきます。
ionic単体の場合、ionic公式ではnpm install -g cordova ionicでグローバルインストールし、ionicコマンドのionic create [AppName] [option]を実行すると[AppName]に入力した名前のディレクトリが作成され、そのディレクトリ内に[option]に指定したアプリの種類にしたがって、デフォルトアプリの構成が用意されます。
あとはhtmlテンプレートやjsファイルなどを適宜作成していくことでionicアプリを作成できました。
ionic + Meteor
さて、ionic + Meteorの場合です。
Meteorの環境設定
まずはMeteorの公式ページに従い、Meteorの開発環境をインストールします。
こちらのページを参照してください。
Meteorの開発環境インストール後、meteor create [AppName]を実行します。
するとカレントディレクトリに[AppName]ディレクトリが作成されるので、cd [AppName]でそのディレクトリに移動しましょう。以降はこの作成された[AppName]ディレクトリで作業を行います。
Meteorにionicを導入するには
[AppName]ディレクトリにはMeteorがデフォルトの場合に使用するhtmlやcssが[AppName].*の形式で作成されています。
しかしこれらのファイルはionic + Meteorを行う際には必要がないのでrm [AppName].*コマンドで余計なファイルを削除します。
ここまでを行うと、.meteor/ディレクトリだけが残った状態となります。
ionicの開発を行う際には対象となるプラットフォームを設定しなければなりません。
以下のコマンドで対象にしたいプラットフォーム(iOS or Android 両方でもOK)を設定しましょう。
meteor add-platform android or meteor add-platform ios
次はこの.meteor/にデフォルトで存在しているものの中で必要のないものをmeteor removeコマンドで削除します。
-
meteor remove blaze-html-templates
: デフォルトのテンプレートHTMLを削除します。 -
meteor remove ecmascript
: MeteorにはECMAScript2015がecmascriptという名称で.meteorのパッケージにデフォルトで用意されています。Angular-MeteorではECMAScript2015とAngularJSに依存関係があるみたいなので、その依存関係を解除するためにECMAScript2015をパッケージから削除しているものと思われます違ってたらスマン。
あとは、ionicを導入するためにパッケージなどの追加を行います。
meteor add angularmeteor add driftyco:ionic
以上のコマンドで、AngularJSとionicが.meteorに追加されました。
次回
vol.2では、ionicとionic + Meteorとのプロジェクト構成の違いについて解説できればと思います。