Ionic Frameworkでつくる モバイルアプリ開発入門

書籍「Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉」のサポートページです。著者とIonic Japan User Groupにて運営を行っております。

コマンドの変更

Ionicの現行バージョンがv4となりました（2019年1月末〜）。本書はv3について取り扱っておりますので、コマンドが変更になります。本書内にあります

$ ionic start

はすべて以下のようにオプションが必要になりました。

$ ionic start --type=ionic-angular

P32 下部

import { HttpClient } from '@angular/common/http'; => 削除

P93 上部

$ ionic start wp-tutorial => $ ionic start wp-tutorial --type=ionic-angular

P132 上部

$ ionic start native-tutorial => $ ionic start native-tutorial --type=ionic-angular

と読み替えいただきますようお願い申し上げます。

サポートチャンネル

Ionic Japan User Groupのslack #ionic-handbook でサポートを行っております。なぜかうまく動かない、よくわからない、ということありましたら挫折する前にぜひご利用くださいませー。

Ionic Japan User Groupのslack

チュートリアル

本書のチュートリアルは、以下のレポジトリでステップ別に公開しています。なぜか動かない時などにご利用下さい。

• チュートリアル「タスクリストアプリをつくってみよう」
• チュートリアル「WordPressを表示するアプリをつくろう」
• チュートリアル「コードリファクタリング」
• チュートリアル「スマホアプリの機能をつけよう」

スマホでの実行がうまくいかない場合

Xcodeがうまくいかない方

io.ionic.starter ~ とエラーがでる場合

P44 の最終行で案内していますように「io.ionic.starter」 と設定されている Bundle identifierを変更してください。同一IDで実行している人がいてエラーがでているので、starterを適当な文字列に変更ください。

なお、CHAPTER06 チュートリアル「スマホアプリの機能をつけよう」では、必ず Bundle identifierはXcodeではなく、config.xmlから変更ください（2行目のidがそれに該当します）。

Android Studioがうまくいかない方

Failed find Build Tools revision ~とエラーがでる

Android Studioのビルドツールがない/バージョンが古ければ表示されます。エラー表示上のリンクをクリックして、ビルドツールをインストールください。

▶ が有効にならない

多くの場合はファイル読み込みに時間がかかっています。最下部のバーがRun selected configurationになるまでお待ち下さい。

エミュレーターが選択できない

Android Studioインストール直後は、バーチャルデバイスデータがないのでダウンロードする必要があります。▶をクリックして起動したモーダル右下の「Create New Vitual Device」を選択して起動したいバーチャルデバイスを選択し、バーチャルデバイスデータをDLしてください（時間がかかります）

本書での誤字・誤植

誤字・誤植についてご案内いたします。「間違った記述もしくはチュートリアルを進めることができないもの」は 致命的な誤字誤植 、 そうでないものを その他の誤字誤植 として案内しております。

致命的な誤字誤植

• 現在ありません

その他の誤字誤植

CHAPTER05で誤字誤植がございます。大変申し訳ございません。なお、作業行には影響ありませんので、チュートリアルは問題なく進めていただくことができます。

CHAPTER05

P110 中部 SAMPLE CODE src/pages/home/home.ts

constructor で呼び出していたモジュール名が間違って表記されている。

  public http: Http,  =>  public http: HttpClient,

P119 下部 SAMPLE CODE src/pages/home/home.ts

前の手順と import の呼び出し順が逆になって表記されている。

  import { IonicPage, NavController, LoadingController, Platform } from 'ionic-angular'; => 下
- import { HttpClient } from '@angular/common/http'; => 上

P122 下部 SAMPLE CODE src/pages/home/home.ts

前の手順で削除した HttpClient の表記が残っている / Platform の追加が消えている

import { HttpClient } from '@angular/common/http'; => 削除
import { IonicPage, NavController, LoadingController, Platform } from 'ionic-angular'; => Platformの追加

P123 中部 SAMPLE CODE src/pages/article/article.ts

前の手順で削除した HttpClient の表記が残っている

import { HttpClient } from '@angular/common/http'; => 削除

CHAPTER05

P130 SAMPLE CODE src/config.xml

ファイルパスの間違え。

src/config.xml => config.xml （Ionicプロジェクト直下）

CHAPTER08

P174 上部

誤字。

C++で書くXamarin　=> C#で書くXamarin