Edited at

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

More than 1 year has passed since last update.


本記事の対象者

・Angular (6.x)

・Onsen UI 2 (2.10.x)

でモバイルアプリ開発を考えている方



概要

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

↓下記リポジトリ参照

https://github.com/puku0x/angular-cli-onsenui



開発環境を作る



1. PhoneGapのインストール

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

$ npm install -g phonegap



2. Angular CLIのインストール

Angularを使う上で必須のツールです。

忘れずインストールしましょう。

$ npm install -g @angular/cli



3. プロジェクト作成

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

$ phonegap create my-app

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



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

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

$ rm my-app/README.md

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



5. プロジェクトの上書き

Angular CLIのコマンドで、3.で作成したものと同じ名前のプロジェクトを作りましょう。

$ ng new my-app --style=scss

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



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

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

$ cd my-app



7. PhoneGapアセットの退避

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

www/reswww/imgsrcに退避しましょう。

$ mv www/res src/res

$ mv www/img src/img



8. angular.jsonの変更

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


my-app/angular.json

"options": {

"outputPath": "www",
<中略>
"assets": [
"src/favicon.ico",
"src/assets",
"src/res",
"src/img"
],



9. 開発サーバの起動

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

$ ng serve -o

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

my-app-01.png

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



10. 開発サーバの終了

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

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



11. Onsen UIのインストール

モバイルUIの表示にOnsen UIを使います。

npmでインストールしましょう。

$ npm install onsenui ngx-onsenui



12. AppModuleの修正

OnsenModuleCUSTOM_ELEMENTS_SCHEMAを追加してください。


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をインポートしましょう。


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. ページを作る

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

$ ng g component page1



15. Page1Componentの修正(1)

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


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]に変更しましょう。


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)

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


my-app/src/app/app.component.html

<ons-navigator [page]="rootPage"></ons-navigator>


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



18. AppComponentの修正(2)

rootPageを設定しましょう。


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追加

Page1ComponentAppModuleentryComponentsに追加してください。


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のスタイルが適用されていれば成功です。



開発用アプリで動かそう



21. インストール

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

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

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



22. index.html編集

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


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でサーバを止め、下記のコマンドを実行してください。

$ ng build --watch

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



24. PhoneGapサーバの起動

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

$ phonegap serve

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

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

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



終わり

お疲れ様でした!

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

これだけでは物足りない!という方は

https://github.com/puku0x/angular-cli-onsenui

を参考にページ遷移も実装してみましょう!!



補足

ng servephonegap serveどっちを使うの?

→ 普段の開発ではng serveを使ってください。

 phonegap serveは実機で動かす時用です。

Cordovaじゃダメなの?

→ デバッガアプリを使わないならCordovaでOK

Onsen UIの他コンポーネントはどう使うの?

→ つ https://ja.onsen.io/v2/docs/angular2.html