書籍「Ionicで作る モバイルアプリ制作入門［Angular版］」のサポートページです。著者とIonic Japan User Groupにて運営を行っております。
- P32
npmパッケージ名が変更されました。
% npm install ionic -g
↓
% npm install @ionic/cli -g- P48
またそれに伴い、CLIから Ionic Lab が分離されました。そのため、 ionic serve --lab コマンドは廃止され、Ionic Labをためそうと思うと、以下の手順が必要になります。
% npm i @ionic/lab --save-dev
% ionic serve
// 別のターミナルで
% npx ionic-lab http://localhost:81002020年2月12日にIonic5がリリースされました。それに伴ってスターターテンプレートのアップデートがあったため、 書籍の通りに進めるためには以下の読み替えが必要です。 なお、スターターテンプレートの変更があっただけですので、パッケージのバージョンをあげることには問題はありません（2020年2月12日現在）。
また 新しいUIデザインを使ったすばらしいスターターテンプレートを利用できますので、ぜひ自分のプロダクトでプロジェクトをつくる時は ionic start --type=angular コマンドをご利用ください。
コマンドを以下の通り変更ください。なお、作成するプロジェクト名の質問と ? Starter template: のテンプレートの選択はスキップされます。
% ionic start --type=angular
↓
% ionic start 'tasklist-tutorial' https://github.com/ionic-jp/starters-v4-angular-sidemenu.gitコマンドを以下の通り変更ください。なお、 ? Starter template: のテンプレートの選択はスキップされます。
% ionic start wp-tutorial --type=angular
↓
% ionic start 'wp-tutorial' https://github.com/ionic-jp/starters-v4-angular-blank.gitコマンドを以下の通り変更ください。なお、 ? Starter template: のテンプレートの選択はスキップされます。
% ionic start native-tutorial --type=angular
↓
% ionic start 'native-tutorial' https://github.com/ionic-jp/starters-v4-angular-tabs.gitコマンドを以下の通り変更ください。
% ionic start chat-tutorial tabs --type=angular
↓
% ionic start 'chat-tutorial' https://github.com/ionic-jp/starters-v4-angular-tabs.gitCapacitor4リリースがリリースされました。Capacitor4ではコアプラグインは本体から外れ、別パッケージになったため、追加でパッケージのインストールが必要です。
- P179にて以下のコマンドを実行
% npm install @capacitor/local-notifications
% npm install @capacitor/camera
% npx cap sync- P237にて、追加で以下のコマンドを実行。
% npm install @capacitor/camera
% npx cap syncまた、このことでインポート元が変更になります。
- P182
- import { Plugins } from '@capacitor/core';
+ import { LocalNotifications } from '@capacitor/local-notifications';
...
- Plugins.LocalNotifications.schedule({
+ LocalNotifications.schedule({- P196
- import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
+ import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
...
- const image = await Plugins.Camera.getPhoto({
+ const image = await Camera.getPhoto({- import { Plugins, CameraResultType } from '@capacitor/core';
+ import { Camera, CameraResultType } from '@capacitor/camera';
...
- const image = await Plugins.Camera.getPhoto({
+ const image = await Camera.getPhoto({同様に、利用してるプラグインが @rdlabo/capacitor-admob から @capacitor-community/admob に変更となります。
- P186
- npm install @rdlabo/capacitor-admob
+ npm install @capacitor-community/admob- P188
以下のAndroidのプラグインを MainActivity で add する処理は不要になりました。
add(jp.rdlabo.capacitor.plugin.admob.Admob.class)
- P189
- import { Plugins } from '@capacitor/core';
+ import { Admob } from '@capacitor-community/admob'
...
- Plugins.Admob.initialize({
+ Admob.initialize({- P190
- import { Plugins } from '@capacitor/core';
- import { AdOptions, AdSize, AdPosition } from '@rdlabo/admob';
+ import { Admob, AdOptions, AdSize, AdPosition } from '@capacitor-community/admob';
...
- Plugins.Admob.showBanner(options).then({
+ Admob.showBanner(options).then({
...
- Plugins.Admob.hideBanner(options).then({
+ Admob.hideBanner(options).then({詳細は、 https://github.com/capacitor-community/admob をご確認ください。
P71などに、 @ionic-native/core 、 @ionic-native/splash-screen 、 @ionic-native/status-bar といった表記があり、インポートされたり、providersに入ったりしておりますが、Capacitor4以降これらは不要になったため、テンプレートファイルから削除されています。
また、Capacitorプラグインが充実し、Cordovaプラグインを使う必要が薄くなったことから、P192の「Cordovaプラグインを使ってバッジで通知数を知らせよう」は非推奨とします。もしも自分でチャレンジする場合は、 @ionic-native が、 @awesome-cordova-plugins にリネームされたことを念頭にお試しください。詳しくは以下記事をご覧ください。
https://ionic.io/blog/a-new-chapter-for-ionic-native
iOS15からPush通知まわりでユーザにパーミッションを求めないと権限を受け取ることができなくなりました。それに伴い、P182で以下のコードの変更が必要です。
- localNotification() {
+ async localNotification() {
+ await LocalNotifications.requestPermissions();
Plugins.LocalNotifications.schedule({@angular/fire@6.0.0 から仕様に変更がありました。まず、アプリとライブラリ内部の整合性をとるために、 tsconfig.json を以下のように書き換えてください。
"useDefineForClassFields": false,
+ "skipLibCheck": true,
},また、以下を読み替えてください。
- SECTION21全般
新APIが公開されたため、書籍で利用してるAPIは互換APIとなります。すべての
@angular/fireのインポートパスを@angular/fire/compatとしてください。例えば、P210では以下のように読み替えてください。
- + import { AngularFireModule } from '@angular/fire';
- + import { AngularFireAuthModule } from '@angular/fire/auth';
+ + import { AngularFireModule } from '@angular/fire/compat';
+ + import { AngularFireAuthModule } from '@angular/fire/compat/auth';APIが変更され、AngularFireAuth以下の auth が不要となりました。 this.afAuth.auth.****() は this.afAuth.****() となります。例えば、P219では以下のように読み替えてください。
- + return this.afAuth.auth
+ + return this.afAuth- P243の
this.afAuth.currentUserメソッドがPromiseになったため、以下に変更。
- getUserId(): string {
- return this.afAuth.currentUser.uid;
+ async getUserId(): Promise<string> {
+ const user = await this.afAuth.currentUser;
+ return user.uid;
}また、そのため、 getUserId() メソッドを利用していたところには、 await を追加する必要があります。
- P244の
ionViewWillEnter()内
- this.uid = this.auth.getUserId();
+ this.uid = await this.auth.getUserId();- P248の
tab1.page.ts-ngOnInit()内
- const user = this.firestore.userInit(await this.auth.getUserId());
+ const user = await this.firestore.userInit(await this.auth.getUserId());- P257の
tab1.page.ts-ionViewWillEnter内
- this.uid = this.auth.getUserId();
+ this.uid = await this.auth.getUserId();Ionic Japan User Groupのslack #code_question でサポートを行っております。なぜかうまく動かない、よくわからない、ということありましたら挫折する前にぜひご利用くださいませー。
本書のチュートリアルは、以下のレポジトリでステップ別にコミットしています。なぜか動かない時などにご利用下さい。
- チュートリアル「タスクリストアプリをつくってみよう」
- チュートリアル「WordPressを表示するアプリをつくろう / コードリファクタリング」
- チュートリアル「Capacitorをつかったモバイルアプリ制作」
- チュートリアル「本気でつくるチャットアプリ」
誤字・誤植についてご案内いたします。「間違った記述もしくはチュートリアルを進めることができないもの」は 致命的な誤字誤植 、 そうでないものを その他の誤字誤植 として案内しております。
- P213で削除してはいけない行を削除するように案内している
- },
- ]; // この行は削除してはいけません
- P228で、
src/app/auth/firebase.error.tsがsrc/auth/firebase.error.tsと表記されている
- P225でInputが[type=text]になっている。なお、どちらにしてもFirebaseのチェックがあるためどちらにしても問題なく動きます
- <ion-input type="text" required></ion-input> // type="email" の間違い
+ <ion-input type="text" required [(ngModel)]="login.email" // type="email" の間違い
+ name="email"></ion-input>- P247の文中で、
ionViewWillEnter()がioniViewWillEnter()と表記されてる