No Pain, No Gain

プログラミングで日常をちょっとだけ楽にしよう。

【ハイブリッドアプリ】Ionic CLI でとりあえず開発を始めるためのよく使うコマンドのメモ【Angular】

Ionic で新しいアプリを開発する場合のコマンドをメモ。 以下のコマンドをコマンドプロンプトやGit Bashなどのターミナルから実行します。

もくじ

前準備

プロジェクトを作成する前準備として、ionic本体cordova をインストールしましょう。

npm install -g cordova ionic

新しいプロジェクトを作る

ionic start [project name] [ひな形の名前]
ionic start NewProject tabs // 例

ひな形の種類を指定すると、CLIが必要なファイルを作成して新たなにフォルダを作成してくれる。指定できるひな形は以下の通り。

  • blank:何も部品がついていない真っ白なプロジェクトが作成される。
  • tabs:タブが付いたプロジェクトが作成される。
  • sidemenu:サイドメニューが付いたプロジェクトが作成される。

新しいコンポーネントを追加する

ionic generate [type] [name]
ionic generate component NewComponent // 例

以下の type を指定すると、必要なファイルを自動で作成してくれます。 Angular CLIとは違って、 app.module.ts に追記はしてくれないみたいです。

hayeta.hatenablog.com

  • component
  • directive
  • page
  • pipe
  • provider
  • tabs

詳しい説明のリンク先は以下。

ionicframework.com

開発サーバーを起動

ionic serve

ブラウザで localhost:8080 を開くとアプリが表示されます。

アプリをビルドする

ionic cordova build [platform]
ionic cordova build android --prod

--prod オプションをつけるとビルド時にUglifyなどを行ってくれて、アプリの起動がめっちゃ早くなる。

ionic cordova build android --prod --release

リリース用のパッケージを作成したい場合は、 --release オプションをつけましょう。未署名のパッケージファイルが作成されます。

どうでもいいですが component ってタイプしにくいです。。