「Ionicで作る モバイルアプリ制作入門 」を写経してみる（５）WordPress表示アプリ

2018年2月19日

今回は、下記の本の「SCTION-013　WordPressを表示するプリを作ろう」を写経してみたい。

以下の本は、Ionic3入門に最適だと思われます。スマホアプリ（スマホサイト）作成したい方には一番のお勧めの本です。

（環境）

C:/ionic3/ フォルダに、wp-tutorial/ アプリを作成する。

（１）新規プロジェクト作成

cd c:/ionic3
ionic start wp-tutorial blank

Would you like to … ? と聞かれるが、そのままEnterを押す。

数分かかる。

cd wp-tutorial
ionic serve

自動的にブラウザが立ち上がる。

（２）HomePageをLazy Loadingにする

Lazy Loadingにするためには、moduleファイルが必要。

src/pages/home/home.module.ts

src/pages/home/home.ts

（変更前）

（変更後）

src/app/app.module.ts

app.component.ts

上記のコーディングにより、HomePageもLazy Loadingされるようになったらしい。。。

（３）記事一覧を取得して表示する。

上記本の作者様が、以下のREST APIを作成してくださっているらしい。（自分で作りたいが、「パーマリンクの設定」がおかしいのか、うまくいかなかった）

https://public-api.wordpress.com/rest/v1.1/sites/ionicjp.wordpress.com/posts/

HTTP通信を行うためには、

src/app/app.module.ts

で、

HttpClientModule

を登録する。（Ionicプロジェクト内で、HttpClientを使えるようにするため）

src/app/app.module.ts

（変更前）

（変更後）

src/pages/home/home.ts

（４）ionViewDidLoadを用いて、ページの表示と同時に、HTTP通信で記事を取得する

src/pages/home/home.ts

src/pages/home/home.html

（変更前）

（変更後）

これで、WordpressのAPIからの記事がIonicアプリ内で表示された。

（５）CSSで見栄えを修正

src/app/app.scss

まだ途中ですが、とりあえず、ここまで。