The Ionic Bookで覚えるIonicの使い方

![スクリーンショット 2014-11-24 19.31.08.png](https://qiita-image-store.s3.amazonaws.com/0/8407/0ec8385c-e07c-6919-f939-db0bf141c04e.png)

ionicの始め方はGetting Staredのところで確認できますが、DocsのGuideのところでも環境構築からアプリの作成まで一連の流れを確認できるみたいです。Getting Staredの内容とは一緒じゃなかったのでちょっとやってみました。

The Ionic Book
http://ionicframework.com/docs/guide/

#Chapter 1: All About Ionic
ionicの概要について説明が載っています。

<img src="https://qiita-image-store.s3.amazonaws.com/0/8407/d01876e7-580c-5b49-5925-422c3aa8f0ef.png" width="300" />

#Chapter 2: Installation
ionic環境構築についてです。必要なファイルをインストールします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/8407/4b466c42-a15f-95cb-14cd-11d07b7acfa8.png" width="300" />

###node.jsのインストール
ionicの環境構築にはnode.jsが必要になります。node.jsをインストールしていない場合は、はじめにインストールしておきます。

http://nodejs.org/

###Cordovaのインストール
次のコマンドでCordovaをインストールします。

```
$ sudo npm install -g cordova
```

![スクリーンショット 2014-11-24 19.45.14.png](https://qiita-image-store.s3.amazonaws.com/0/8407/3526299c-a339-a16f-330b-1e2b210f4cfb.png)


###ionicのインストール
次のコマンドでionicをインストールします。これでionicコマンドが実行できるようになると思います。

```
$ sudo npm install -g ionic
```

![スクリーンショット 2014-11-24 19.49.06.png](https://qiita-image-store.s3.amazonaws.com/0/8407/0c14a4fd-e413-41e2-fa83-de65ae081c66.png)


ionicコマンドが実行できるかは次のコマンドで確認できます。

```
$ ionic
```

![スクリーンショット 2014-11-24 19.51.40.png](https://qiita-image-store.s3.amazonaws.com/0/8407/b93eb508-2cac-2ebf-59dc-53b9abcf8c63.png)

##サンプルプロジェクトを作成
次のコマンドでサンプルプロジェクトを作成できます。

```
$ ionic start todo blank
```

![スクリーンショット 2014-11-24 19.55.35.png](https://qiita-image-store.s3.amazonaws.com/0/8407/2d51516c-8458-d53c-75b8-8799cd722183.png)


正常に実行されれば、todoフォルダが作成されます。

![スクリーンショット 2014-11-24 19.56.22.png](https://qiita-image-store.s3.amazonaws.com/0/8407/8563c533-c056-b957-a855-2c238a18a5b6.png)

wwwフォルダ内にindex.htmlがあります。これを開くと次のページが表示されます。これをベースに作業を進めるみたいです。

![スクリーンショット 2014-11-24 20.04.59.png](https://qiita-image-store.s3.amazonaws.com/0/8407/a48cce50-bee7-f14c-b5ca-30911794ec29.png)


##プラットフォームの宣言
次のコマンドでiOSかAndroidか宣言できるみたいです。iOSの宣言はMacOSでのみ実行できるみたいです。実行前にcdコマンドで対象のフォルダに移動しておくみたいです。(cd todoのような感じです。)

```
$ ionic platform ios
$ ionic platform android
```


![スクリーンショット 2014-11-24 20.11.36.png](https://qiita-image-store.s3.amazonaws.com/0/8407/ddcb9732-50ef-67b9-7c72-1ee6b3c86bfe.png)


##テスト
次のコマンドでテストを実行できるみたいです。(試していませんが、androidの場合はiosの部分を変更すればいいと思います。)

```
$ ionic build ios
$ ionic emulate ios
```

![スクリーンショット 2014-11-24 20.16.54.png](https://qiita-image-store.s3.amazonaws.com/0/8407/b0f3e3e1-3276-9100-df85-fcb5013c5f01.png)


$ ionic emulate iosを実行したときにエラーになりました。

![スクリーンショット 2014-11-24 20.18.18.png](https://qiita-image-store.s3.amazonaws.com/0/8407/8f643ca6-8723-4020-1e3f-62eebb765c04.png)

エラーメッセージを見ると次のコマンドを実行してios-simをインストールすればいいみたいです。

```
npm install -g ios-sim
```

一応sudoを先頭につけて管理者権限で実行しておきました。正常に実行できたので先程のコマンドを再度実行。(念のためionic build iosももう一度実行しました。)

赤色の文字が出たのですが問題なく実行できたみたいです。iOSのエミュレータが起動しました。

![スクリーンショット 2014-11-24 20.21.51.png](https://qiita-image-store.s3.amazonaws.com/0/8407/6f9161e1-3cb6-7d37-130f-fb2174105913.png)

これでインストール部分は完了です。


#Chapter 3: Starting your app
wwwフォルダ内のindex.htmlの内容を以下のコードで上書きます。これはこれから作業するときのベースになるコードみたいで、この時点では何も表示されません。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>
  <body>
  </body>
</html>
```

bodyタグの部分を次のコードで上書きします。サイドバーが表示できるようになります。

```html
<body>
  <ion-side-menus>
    <ion-side-menu-content>
    </ion-side-menu-content>
    <ion-side-menu side="left">
    </ion-side-menu>
  </ion-side-menus>
</body>
```

wwwフォルダ内にjsフォルダがあります。ここのapp.jsを開くと次のコードがあります。

```js
angular.module('starter', ['ionic'])
```

この処理を次の内容で上書きします。

```js
angular.module('todo', ['ionic'])
```

こうなります。

![スクリーンショット 2014-11-24 20.51.11.png](https://qiita-image-store.s3.amazonaws.com/0/8407/b142bdea-f5c1-d020-9a2e-b2ddb1d6a560.png)


index.htmlに戻って次の処理を追加します。

```html
<script src="js/app.js"></script>
```


続いてbodyタグの部分を次のように変更します。Ionicで使えるAngulraJsの宣言です。

```html
<body ng-app="todo">
```

次のように変更します。

```html
<body ng-app="todo">
  <ion-side-menus>

    <!-- Center content -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
    </ion-side-menu>

  </ion-side-menus>
</body>
```

index.htmlはこうなっていれば問題ないと思います。(cordova.jsはこの時点ではきにしなくていいみたいです。)

![スクリーンショット 2014-11-24 20.54.59.png](https://qiita-image-store.s3.amazonaws.com/0/8407/1fff35fa-269e-10cc-912b-38b0b556b919.png)


正しく進んでいればindex.htmlでサイドバーの機能を確認できます。(サイドバーはドラッグして横にスライドさせると表示できます。)

![スクリーンショット 2014-11-24 20.56.46.png](https://qiita-image-store.s3.amazonaws.com/0/8407/0a39fbe2-45e6-8f33-d7bf-9aa22d8b3c48.png)

#Chapter 4: Testing your app
Chapter4では動作確認の方法について説明がありました。

##Desktop browser testing
デスクトッププラウザでテストするには次のコマンドを実行します。途中で選択肢が出てきますが、今回はlocalhostで実行するので'2'を選択します。

```
$ ionic serve
```

![スクリーンショット 2014-11-24 21.06.15.png](https://qiita-image-store.s3.amazonaws.com/0/8407/1b837203-1858-8b4a-06b5-486db0aecf79.png)


これでlocalhostが立ち上がります。

![スクリーンショット 2014-11-24 21.07.49.png](https://qiita-image-store.s3.amazonaws.com/0/8407/c72729a6-cb1a-da75-fe50-4340da2c568d.png)

これでデスクトップブラウザで動作確認が可能です。立ち上げたlocalhostは『q』と入力してエンターキーで終了します。


##Simulator testing
シミュレータを起動して動作確認を行います。上のほうでもありましたが次のコマンドをシミュレータが起動できます。


```
$ ionic build ios
$ ionic emulate ios
```


次のコマンドはどういう効果かわかりませんでした。特定のプラットフォームのプロジェクトファイルを開くみたいなことも書いてありました。

```
$ cordova prepare ios

```

##Mobile browser testing
実際のモバイル端末を使用して動作確認する方法についてです。ちょっとまだ確認できていません。


#Chapter 5: Building out your app
ここではindex.htmlとapp.jsの内容を更新します。これでリストの表示を行うことが可能です。Chapter5はサンプルコードが数多く記載されているのでサイト側で確認した方がいいと思います。

#Chapter 6: Publishing your app
Chapter6は作成したアプリをPlayStoreやiTunseで公開する方法についての説明が載っています。今のところ必要なかったので又の機会に確認したいと思います。
<br/>

最後の方は省略してしまいましたが、とりあえず基本的な部分は確認できたと思います。localhostと接続したりシミュレータを起動したりはやったことがなかったので確認できて良かったです。