Angular CLI + Onsen UI 2 によるアプリ開発

## 本記事の対象者

・Angular (6.x)
・Onsen UI 2 (2.10.x)
でモバイルアプリ開発を考えている方

---

## 概要

「Angular CLI」で作成したプロジェクトに、「Onsen UI 2」を組み込んだモバイルアプリ開発の基盤を作ります。

↓下記リポジトリ参照
https://github.com/puku0x/angular-cli-onsenui

---

# 開発環境を作る

---

## 1. PhoneGapのインストール

今回はモバイルアプリを作ります。最初にPhoneGapをインストールしてください。

```sh
$ npm install -g phonegap
```

---
## 2. Angular CLIのインストール

Angularを使う上で必須のツールです。
忘れずインストールしましょう。

```sh
$ npm install -g @angular/cli
```

---

## 3. プロジェクト作成

アプリのプロジェクトを作成しましょう。

```sh
$ phonegap create my-app
```

`my-app`の部分は自由に設定できます。

---

## 4. 不要なファイルの削除

README.mdを削除しましょう。

```sh
$ rm my-app/README.md
```

**削除し忘れるとAngular CLIでのプロジェクトの作成に失敗します**

---

## 5. プロジェクトの上書き
Angular CLIのコマンドで、[3.]()で作成したものと同じ名前のプロジェクトを作りましょう。

```sh
$ ng new my-app --style=scss
```

スタイルシートは`scss`に変更しておくと良いと思います👍

---

## 6. 作業ディレクトリへ移動

生成したプロジェクトの作業ディレクトリに移動します。

```sh
$ cd my-app
```

---

## 7. PhoneGapアセットの退避

Angular CLIでのビルド時に`www`ディレクトリ以下は消去されてしまいます。

`www/res`と`www/img`を`src`に退避しましょう。

```sh
$ mv www/res src/res
$ mv www/img src/img
```

---

## 8. angular.jsonの変更
該当する部分を以下のように変更してください。

```json:my-app/angular.json
"options": {
  "outputPath": "www",
  <中略>
  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/res",
    "src/img"
  ],
```

---

## 9. 開発サーバの起動

開発用のサーバを起動します。

```sh
$ ng serve -o
```

ブラウザで`localhost:4200`を開いてアプリの画面が表示されればOKです。

![my-app-01.png](https://qiita-image-store.s3.amazonaws.com/0/106886/65c59dfc-c8ef-a9f1-97be-53456aed42fe.png)

↑開発者ツール(F12)を開いてモバイル表示させたところ

---

## 10. 開発サーバの終了

開発中はファイルを変更すると自動で画面を更新してくれます。

ターミナルで`Ctrl + C`を押すと開発サーバを終了することができます。

---

## 11. Onsen UIのインストール

モバイルUIの表示にOnsen UIを使います。
npmでインストールしましょう。

```sh
$ npm install onsenui ngx-onsenui
```

---

## 12. AppModuleの修正

`OnsenModule`と`CUSTOM_ELEMENTS_SCHEMA`を追加してください。

```ts:my-app/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { OnsenModule } from 'ngx-onsenui';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, OnsenModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
```

---

## 13. styles.scssの修正

Onsen UI関連のCSSをインポートしましょう。

```scss:my-app/src/styles.scss
/* You can add global styles to this file, and also import other style files */
@import "~onsenui/css/onsenui.css";
@import "~onsenui/css/onsen-css-components.css";

```

これでOnsen UIを使う準備ができました。

---

## 14. ページを作る

ターミナルで下記のコマンドを実行してください。

```bash
$ ng g component page1
```

---

## 15. Page1Componentの修正（1）

テンプレートを修正しましょう。

```html:my-app/src/app/page1/page1.component.html
<ons-toolbar>
  <div class="left"></div>
  <div class="center">Page 1</div>
</ons-toolbar>
<div class="content">
  <p>This is the first page.</p>
  <ons-button>Push page</ons-button>
</div>
```

---

## 16. Page1Componentの修正（2）

セレクタを`ons-page[page1]`に変更しましょう。

```ts:my-app/src/app/page1/page1.component1.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ons-page[page1]',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.scss']
})
export class Page1Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
```

---

## 17. AppComponentの修正（1）

テンプレートを以下のように変更しましょう。

```html:my-app/src/app/app.component.html
<ons-navigator [page]="rootPage"></ons-navigator>
```

`ons-navigator`はページ遷移機能を提供するコンポーネントです。ここでは初期画面を設定しています。

---

## 18. AppComponentの修正（2）

`rootPage`を設定しましょう。

```ts:my-app/src/app/app.component.ts
import { Component } from '@angular/core';
import { Page1Component } from './page1/page1.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  rootPage = Page1Component;
}
```

---

## 19. entryComponents追加

`Page1Component`を`AppModule`の`entryComponents`に追加してください。

```ts:my-app/src/app/app.module.ts
import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';

@NgModule({
  declarations: [AppComponent, Page1Component],
  entryComponents: [Page1Component],
  <中略>
})
export class AppModule { }
```

`ons-navigator`での画面遷移時にコンポーネントを動的に読み込むため、`entryComponents `を指定してAngularに教える必要があります。

---

## 20. 確認

再度開発サーバを起動して、画面にOnsen UIのスタイルが適用されていれば成功です。
<img width="640" src="https://qiita-image-store.s3.amazonaws.com/0/106886/0daff20e-6377-1ea3-65e2-2e7105026ffb.png">

---

# 開発用アプリで動かそう

---

## 21. インストール

モバイル端末に「PhoneGap Developer」をインストールしましょう。

http://docs.phonegap.com/getting-started/2-install-mobile-app/

※現在はAppStoreでの配信が停止されています。

---

## 22. index.html編集

`cordova.js`を追加しましょう。

```html:my-app/src/index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <!-- <base href="/"> 削除 -->
  <script type="text/javascript" src="cordova.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
```

---

## 23. ビルド（＋ウォッチ）

Ctrl+Cでサーバを止め、下記のコマンドを実行してください。

```bash
$ ng build --watch
```

ファイルの変更が発生した場合に自動で再ビルドされ、`/www` に出力されます。

---
## 24. PhoneGapサーバの起動

新しいターミナルで下記コマンドを実行後、

```bash
$ phonegap serve
```

PhoneGap Debuggerアプリで`開発PCのIPアドレス:3000`開いてください。

ブラウザで`localhost:3000`を開いても良いです。

[20.]()と同じ画面が表示されていれば成功です。

---

## 終わり

お疲れ様でした！

これでAngular CLIのプロジェクトでOnsen UIを利用する準備ができました。

これだけでは物足りない！という方は
https://github.com/puku0x/angular-cli-onsenui
を参考にページ遷移も実装してみましょう!!

---
## 補足

`ng serve`と`phonegap serve`どっちを使うの？
→ 普段の開発では`ng serve`を使ってください。
　`phonegap serve`は実機で動かす時用です。

Cordovaじゃダメなの？
→ デバッガアプリを使わないならCordovaでOK

Onsen UIの他コンポーネントはどう使うの？
→ つ https://ja.onsen.io/v2/docs/angular2.html