changed 5 years ago  
Published Linked with GitHub

Ionic で作るモバイルアプリ

はじめに

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

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

追記

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

各章メモ

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 serve lab

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

android studioでエミュレータを起動

疑問

  • 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公式のカラージェネレーター がテーマ全体の色変更に便利に使える
  • Ionicの各コンポーネントのCSSは--background等の変数を持っている。各コンポーネントはShadowDOMでカプセル化されているため、CSSのスタイリングはこの変数を通して行う。

疑問

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

6. Capacitor

  • Cordovaのスピリチュアルな後継ライブラリ
    • スピリチュアルとは？
  • Cordovaはconfig.xml経由でネイティブコードを生成するのに対して、Capacitorはネイティブコードを直接操作できる
  • React Nativeとの違いはNativeとHybridの違い
    • Capacitor NativeとかCapacitor Native for Webとかの謎プロダクトが作られて欲しい
  • capacitor.config.json: AppStore/GooglePlay 配布用設定などはこのファイル
  • 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でローカル通知を送れる
  • ionic cap copy でiOS/Androidビルド用にファイルをコピー
  • ionic cap sync でiOS/Androidビルド用にファイルをコピーと、プラグインのコピーとインストール
  • rdlabo/capacitor-admobを使ってAdMob(広告)を表示する方法
  • @ionic-native/badgeを使ってバッジを表示する
    • 手元の環境だとバッジが表示されなかった。本にもAndroiは機種によっては表示されない、とあったのでとりあえずスルー
  • @ionic/pwa-elementsを使ってカメラ撮影機能を実装する
    • 手元の環境だと、ブラウザで動かすと再撮影時にブラックアウトする。Androidシミュレータ上は問題なし

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

疑問

7. チャットアプリ

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

チャットアプリのキャプチャ
web

疑問

  • .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

Select a repo