2
2

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 Frameworkをはじめる ~ Getting Started ~

Last updated at Posted at 2015-05-31

Getting Started with Ionic - Ionic Frameworkをやってみたので忘れないようにメモを書きました。初投稿です。

開発環境を整える

OSX Yosemite (10.10.3)

準備しておくもの(OSX)

最新版のXCode

こちら(MacAppStore)から最新版のXCodeをダウンロードし、インストールします!
この中には、iOSエミュレータも含まれています。

Node.js

Node.jsのバージョン管理をしてくれるnodebrewでインストールしておくと、便利かつ使いやすそうです。
僕はHomebrewを使っているので、このサイトを参考にしました!

【Mac】nodebrewのインストールとコマンドなど使い方まとめ | TASK NOTES

Ionic関係をインストール

まず、Node.jsのモジュール管理ツールnpmcordovaモジュールionicモジュールをインストールします。

$ npm install -g cordova ionic

オプション -g はグローバルインストールと呼ばれ、これでシステムにパスが通ります。
つまり、システム全域でコマンド(モジュール)が使えるようになります。

追加で、ターミナルからiOSエミュレータを動作させるのにios-simモジュールが必要なのでインストールします。

$ npm install -g ios-sim

Ionicプロジェクトを作成

Ionicプロジェクトはこのコマンドで作成します。

$ ionic start myApp tabs

※ Cordovaでは「cordova create」となるように、ionicとcordovaではコマンドがちょっとずつ違ったりします!

「myApp」という名称の新しいフォルダに、tabsテンプレートの内容が展開されます。

テンプレートはblank(特別何も無い), tabs(タブ型ナビゲーション), sidemenu(ドロワー型ナビゲーション)の3つから、なんとなく作りたいものを選びます。

Getting_Started_with_Ionic_-_Ionic_Framework.png

そして動かす

先ほど作られたフォルダへ移動し、対象プラットフォームにiOSを追加。

$ cd myApp
$ cd ionic platform add ios

ビルドした後エミュレーターを起動します。

$ ionic build ios
$ ionic emulate ios

iOSエミュレータが起動し、アプリが起動します。

iOS Simulator Screen Shot 2015.06.01 0.26.37.png

ふり返って

わざわざ書くほどの内容なのかよく考えるべきだったのかもしれないです。

2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?