Ionic3でJSON(2)(アプリ内部で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アプリで表示した。

Ionic3でJSON(1)(外部サイトのJSONファイルを使用)
Angular 2 (, Angular 4, ionic3)に関して、以下の本を繰り返し読んでいる。 Angular2によるモダ...

今回は、自分のアプリの中にjsonファイルを入れて、そちらから表示したい。上記の「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」の、「Chapter 7 Ajax通信のきほんを学ぼう」を参考に、Ionic3でやってみる。上記Chapterをそのまま写経をした記録は以下。

「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」を読んでみる(6)Chapter7前半_Ajax通信の基本
以下の本を読んで、CSSとJavaScriptについて勉強している。 これからWebをはじめる人のHTML&CSS、JavaScriptのき...

(環境)
Windows8.1
Node 6.10.2
cordova 6.5.0
Ionic CLI 2.2.2
VisualStudioCode
Git 2.8.1

(1)Ionic3アプリの作成

cmd.exe(コマンドプロンプト)で、アプリを作成したい場所に移動してから、

ionic start ionic3-json blank –-v2

cd ionic3-http

ionic serve

image

image

(2)imageファイルの保存

www/assets/img/ フォルダを作成し、そこに、今回は3つのimageを保存。

image自体は、

今回は、写真AC(https://www.photo-ac.com/)から、桜の写真をダウンロードして、sakura.jpg という名前で保存。

また、pixabay(https://pixabay.com/ja/)から、月と、虹の写真をダウンロードして、それぞれ、moon.jpg, rainbow.jpg という名前で保存。

image

(3)jsonファイルの作成

www/assets/data/ フォルダを作成し、そこに、images.json という名前でjsonファイルを保存。

image

image

あとは、以下と同じようにやればできるのかな?(不安、、、)

Ionic3でJSON(1)(外部サイトのJSONファイルを使用)
Angular 2 (, Angular 4, ionic3)に関して、以下の本を繰り返し読んでいる。 Angular2によるモダ...

(4)HttpProviderファイルの作成

ionic g provider ImageData

(変更前)
image

(変更後)
image

(5)src/app/app.module.ts の修正。

(変更前)
image

(変更後1)
image

(変更後2)
image

(6)src/pages/home/home.ts

(変更前)
image

(変更後)
image

(7)一旦、ionic serve してみる。

home.ts で、ImagesDataがないとエラーが出たので、imageData に訂正。

そのほか、エラーに従い、訂正。

src/pages/home/home.ts
image

image

Chromeのデベロッパーツールを開いてみると、

image

だめだった。。。

src/providers/image-data.ts
image

image

image

www/assets/data/images.json
image

JSONファイルの最後に「;」は不要なのか?(JSONというものについて、全く分かっていない。。。[]なのか、{}なのか。ううむ。)

一度、Ctrl+C => y => Enter でサーバ訂正してから、再度、ionic serve. Chromeが開いたところで、F12を押して、デベロッパーツールを開くと、やっとjsonファイルの読み込みができた。(ここまででさえも、私には相当大変だった。)

image

(8)src/pages/home/home.ts

image

src/pages/home/home.html

(変更前)
image

(変更後)
image

(9)src/providers/image-data.ts

(変更前)
image

(変更後)
image

(10)ionic serve してみる。

image

.childrenを消去

image

真っ白、undefinedと出る。

困った。。。

(11)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”: “まんまるお月さま”

}

]

}

image

src/pages/home/home.ts
image

src/pages/home/home.html
image

ionic serve

image

わおー!

(12)src/pages/home/home.html の修正

image

image

わーい!たーのしー!

これで、なんとか、ionic3で、自分のアプリ内でjsonファイルを用いて、画像などのリストを作成することができた。

(13)Androidアプリの作成

ionic platform add android
ionic build android

image

image

image

このapkファイル(約4MB)を、自分のスマホに送ってインストール。

arrows M03

image

ソースコードは下記にアップロードした。

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

途中

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする