4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ionic開発メモ(1) インストール〜プロジェクト作成

Last updated at Posted at 2015-07-15

ハイブリッドスマホアプリの開発にionicが便利そうです。
スマホアプリのionicview と連携して、実機テストもできるようです。
ちなみに、ionic.ioのサービスはα版のうちは無料で使えるとのこと。
色々と試しながら進めて行こうと思います。

##環境構築
まずは、nodeとnpmをインストールしておいてください。
公式ドキュメント
http://ionicframework.com/docs/guide/installation.html

cordovaをインストール

$ sudo npm install -g cordova

ionicをインストール

$ sudo npm install -g ionic

ちなみに、yeomanのgenerator-ionicを使って環境構築もできます。
今回は、リアルタイムに変更を確認しながら開発を進めたいのと、初めて触るのでシンプルな構成から始めたいので、yeomanは使わずに、ionicの公式ドキュメントに沿って進めようと思います。

##プロジェクトの作成

プロジェクトを作成するには以下のコマンドを実行します。

$ ionic start {{プロジェクト名}} {{テンプレート名}}

公式ドキュメントでは、テンプレート名に'blank'が使われていますが、他にもテンプレートがあります。
詳しい情報はgithubを参考にしてください。
https://github.com/driftyco/ionic-cli

  • tabs (Default)
  • sidemenu
  • maps
  • salesforce
  • tests
  • complex-list
  • blank

の中から選ぶことができます。
ionic.io専用のオプションとして、'io'もあるようです。

プロジェクト作成が完了したら、

$ cd {{プロジェクト名}}

でプロジェクトディレクトリに移動して、

$ ionic serve

を実行すると、サーバが立ち上がります。

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?