Ionic3でJSON（２）（アプリ内部でJSONファイルを使用）
Angular 2 (, Angular 4, ionic3)に関して、以下の本を繰り返し読んでいる。
Angular2によるモダンWeb開発 Kindle版
末次 章 (著)
発売日：2017/1/18
2800円
また、Javascript、JSONについては、以下の本を繰り返し読んでいる。
これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん Kindle版
たにぐち まこと (著)
発売日：2017年03月27日
2580円
前回は、https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot から、jsonファイルを取得して、Ionic3アプリで表示した。
http://twosquirrel.mints.ne.jp/?p=17248
今回は、自分のアプリの中にjsonファイルを入れて、そちらから表示したい。上記の「これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん」の、「Chapter 7 Ajax通信のきほんを学ぼう」を参考に、Ionic3でやってみる。上記Chapterをそのまま写経をした記録は以下。
http://twosquirrel.mints.ne.jp/?p=16827
（環境）
Windows8.1
Node 6.10.2
cordova 6.5.0
Ionic CLI 2.2.2
VisualStudioCode
Git 2.8.1
（１）Ionic3アプリの作成
cmd.exe（コマンドプロンプト）で、アプリを作成したい場所に移動してから、
ionic start ionic3-json blank –-v2
cd ionic3-http
ionic serve
（２）imageファイルの保存
www/assets/img/ フォルダを作成し、そこに、今回は３つのimageを保存。
image自体は、
今回は、写真AC（https://www.photo-ac.com/）から、桜の写真をダウンロードして、sakura.jpg という名前で保存。
また、pixabay（https://pixabay.com/ja/）から、月と、虹の写真をダウンロードして、それぞれ、moon.jpg, rainbow.jpg という名前で保存。
（３）jsonファイルの作成
www/assets/data/ フォルダを作成し、そこに、images.json という名前でjsonファイルを保存。
あとは、以下と同じようにやればできるのかな？（不安、、、）
http://twosquirrel.mints.ne.jp/?p=17248
（４）HttpProviderファイルの作成
ionic g provider ImageData
（変更前）
（変更後）
（５）src/app/app.module.ts の修正。
（変更前）
（変更後1）
（変更後2）
（６）src/pages/home/home.ts
（変更前）
（変更後）
（７）一旦、ionic serve してみる。
home.ts で、ImagesDataがないとエラーが出たので、imageData に訂正。
そのほか、エラーに従い、訂正。
src/pages/home/home.ts
Chromeのデベロッパーツールを開いてみると、
だめだった。。。
src/providers/image-data.ts
www/assets/data/images.json
JSONファイルの最後に「;」は不要なのか？（JSONというものについて、全く分かっていない。。。[]なのか、{}なのか。ううむ。）
一度、Ctrl+C => y => Enter でサーバ訂正してから、再度、ionic serve. Chromeが開いたところで、F12を押して、デベロッパーツールを開くと、やっとjsonファイルの読み込みができた。（ここまででさえも、私には相当大変だった。）
（８）src/pages/home/home.ts
src/pages/home/home.html
（変更前）
（変更後）
（９）src/providers/image-data.ts
（変更前）
（変更後）
（１０）ionic serve してみる。
.childrenを消去
真っ白、undefinedと出る。
困った。。。
（１１）images.jsonの修正
{
“data”: [
{
“path”: “assets/img/sakura.jpg”,
“name”: “cherryblossoms”,
“caption”: “さくらーさくらー”
},
{
“path”: “assets/img/rainbow.jpg”,
“name”: “rainbow”,
“caption”: “虹のかなたに”
},
{
“path”: “assets/img/moon.jpg”,
“name”: “moon”,
“caption”: “まんまるお月さま”
}
]
}
src/pages/home/home.ts
src/pages/home/home.html
ionic serve
わおー！
（１２）src/pages/home/home.html の修正
わーい！たーのしー！
これで、なんとか、ionic3で、自分のアプリ内でjsonファイルを用いて、画像などのリストを作成することができた。
（１３）Androidアプリの作成
ionic platform add android
ionic build android
このapkファイル（約4MB）を、自分のスマホに送ってインストール。
arrows M03
ソースコードは下記にアップロードした。
https://github.com/adash333/ionic3-json
（参考）
CYOKODOG
Angular2で簡易ブログを作ってみる
2016-05-18
http://www.cyokodog.net/blog/angular2/
ローカルJSONファイルから、問題一覧を出力したい
投稿 2017/02/09 16:59 ・編集 2017/02/09 18:38
https://teratail.com/questions/65218
http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/
IONIC2 画像フォルダの設定について
Administrator 2017-03-02
https://sndbox.jp/ionic2/ionic2-image-dir
JSON について
http://hakuhin.jp/js/json.html
途中