# Ionic で作るモバイルアプリ

## はじめに

このエントリは[Ionic で作る モバイルアプリ制作入門[Angular 版]<Web/iPhone/Android 対応> | 榊原昌彦](https://www.amazon.co.jp/gp/product/B081ZN64FM)を読みながら走り書きしたメモです。

私は Angular/TypeScript の初心者というわけでは無いので、これらに関する部分のメモは少なめです。
一方、iOS/Android 開発はずぶの素人なので、それらに関するメモが多めです。

### 追記

各章メモでいくつか「疑問」を挙げていますが、ありがたいことに大部分はIonic本の著者様からご回答をいただきました。
[Ionic赤本への疑問がすごく鋭かったのでまとめて返事する記事 - Qiita](https://qiita.com/rdlabo/items/b380263e8b1b253c371b)
ありがとうございます！

## 各章メモ

### 0. はじめに

- Ionic を利用することで Mobile/Web で同じような UI/UX を実現出来る
- Capacitor を利用することで iOS/Android アプリを作れる

### 1. Ionic

- Ionic は WebComponents を採用しているため Angular に依存しない
- Ionic は再利用可能な UI コンポーネント
- iOS/Android で表示が異なる（プラットフォームに最適な表示がされる）
- Ionic CLI `yarn global add ionic`

### 2. Ionic のはじめかた

- プロジェクト作成: `ionic start --type angular`
- 開発用サーバ起動(HMR): `ionic serve`
- **iOS/Android のデザインプレビュー**: `ionic serve --lab`


- 拡張機能の追加: `ionic integrations enable capacitor # など`
- yarn をデフォルトに: `ionic config set --global npmClient yarn`
- Android 用プロジェクト生成: `ionic cap add android`


疑問

- `ionic serve`と`ng serve`の違い
- ログにこれが表示されてるから実態はこれだけかな？ `ng.cmd run app:serve --host=localhost --port=8100`

### 3. Ionicの基本

- Angularアプリの基本に関する内容が多め
- `<ion-title>hoge</ion-title>`: `<title>`の値を`hoge`に設定できる
- `ionic g page task-list`: `ng g c` に加えて、遅延読み込みのモジュール生成と、ルーティングの生成を追加でやってくれる
- Ionicが追加するライフサイクル
- `ionViewWillEnter()`: ページが表示される**アニメーションが始まるとき**
- `ionViewDidEnter()`: ページが表示される**アニメーションが終了したとき**
- `ionViewWillLeave()`: ページから離脱・遷移する**アニメーションが始まるとき**
- `ionViewDidLeave()`: ページから離脱する**アニメーションが終了したとき**

疑問

- Ionicのライフサイクルフック用のinterfaceは無いのかな？
- `ngOnInit`等もinterfaceは必要ないけど、あった方がコードの見通しが良い

### 4. 外部リソースを使う

- AngularのHttpClientの使い方に関する内容が多め
- `<ion-skeleton-text>`: 最近のwebでよく見る本文ロード中はプレースホルダーが表示されるやつ
- `this.platform.is('hybrid')`: コンポーネント等のロジックで、iOS/Android上で動作している場合`true`

### 5. コードリファクタリング

- リファクタリングについての章
- Ionicのライフサイクルフックはカスタムコンポーネントでは動かない
- Ionicではinterfaceの型にprefixとしてIをつける。例：`interface IPost {}`
- MSっぽい。好みではない。
- Ionic公式の[カラージェネレーター](https://ionicframework.jp/docs/theming/color-generator/) がテーマ全体の色変更に便利に使える
- Ionicの各コンポーネントのCSSは`--background`等の変数を持っている。各コンポーネントはShadowDOMでカプセル化されているため、CSSのスタイリングはこの変数を通して行う。
- 例: [ion-button CSSカスタム変数](https://ionicframework.jp/docs/api/button#css-custom-properties)
- なるほどなぁ。これは便利。

疑問

- Ionicのライフサイクルフックが動く詳細な条件は？

### 6. Capacitor

- Cordovaの*スピリチュアルな後継ライブラリ*
- スピリチュアルとは？
- Cordovaはconfig.xml経由でネイティブコードを生成するのに対して、Capacitorはネイティブコードを直接操作できる
- React Nativeとの違いはNativeとHybridの違い
- Capacitor NativeとかCapacitor Native for Webとかの謎プロダクトが作られて欲しい
- capacitor.config.json: AppStore/GooglePlay 配布用設定などはこのファイル
- [Configuring Your App - Capacitor](https://capacitor.ionicframework.com/docs/basics/configuring-your-app/#common-configuration)
- `cordova-res`でmanifestやsplash用の画像パターンを生成できる
- iconの差し替えは AndroidStudio の Image Asset 機能で行う
- splashの差し替えはpng画像を差し替えるだけ
- `app/src/main/AndroidManifest.xml`で、クリアテキストのパーミッションを許可しないと、AndroidシミュレータでLiveReloadできない
- `android:usesCleartextTraffic="true"`
- `ionic capacitor run android -l --address=0.0.0.0`: LiveReload
- `Plugin.LocalNotifications`でローカル通知を送れる
- [Local Notifications - Capacitor](https://capacitor.ionicframework.com/docs/apis/local-Notifications/)
- `ionic cap copy` でiOS/Androidビルド用にファイルをコピー
- `ionic cap sync` でiOS/Androidビルド用にファイルをコピーと、プラグインのコピーとインストール
- [rdlabo/capacitor-admob](https://github.com/rdlabo/capacitor-admob)を使ってAdMob(広告)を表示する方法
- [@ionic-native/badge](https://ionicframework.com/jp/docs/native/badge)を使ってバッジを表示する
- 手元の環境だとバッジが表示されなかった。本にもAndroiは機種によっては表示されない、とあったのでとりあえずスルー
- [@ionic/pwa-elements](https://capacitor.ionicframework.com/docs/pwa-elements/)を使ってカメラ撮影機能を実装する
- 手元の環境だと、ブラウザで動かすと再撮影時にブラックアウトする。Androidシミュレータ上は問題なし

macOS機を持っていないのでiOSアプリ開発の部分は読み飛ばした
メモにまとまりが無いのであとで見直す

疑問

- `cordova-res`とは別に、`ionic cordova resources`というコマンドがあったので詳細を調べる
- [ionic cordova resources - Ionic Framework 日本語ドキュメンテーション](https://ionicframework.com/jp/docs/cli/commands/cordova-resources)
- クリアテキストのパーミッションとは？

### 7. チャットアプリ

- 非同期処理(Promise, async/await, RxJS)について
- firebaseのプロジェクト作成とAuthの設定
- `@angular/fire/auth-guard`に`AngularFireAuthGuard`というGuardが用意されていてとても便利
- `@ionic/angular`の`NavController`が画面遷移時のトランジションアニメーションをやってくれて便利
- ドキュメントが見つからない？
- `IonContent`は`scrollToTop(100) // 100: duration [ms]`メソッドを持っているので便利に使えそう

[web](https://ionic-chat-tutorial.firebaseapp.com)

疑問

- `.toPromise(Promise)` このPromiseはなんだろう

### 8. 実践的

- AppStore/GooglePlayでのアプリリリースについて
- リリースすることがあったら改めて読む

### リポジトリ

タスクリスト
https://github.com/aliyome/ionic-tasklist-tutorial

WordpressのpublicAPIを利用したブログっぽいやつ
https://github.com/aliyome/ionic-wp-tutorial

ネイティブアプリ
https://github.com/aliyome/ionic-native-tutorial

チャットアプリ
https://github.com/aliyome/ionic-chat-tutorial