HttpClientを活用！Ionicで作るWordpressカードアプリ ①トップページ編
今日もお疲れ様です。先日、いよいよ初めてのモバイルアプリ開発に挑戦。IonicでToDoリストを作成してみました。テキストを写しながらですが、なんとなくコードの特徴や呼び出し方について分かったような気がします。今回は同じテキストを使って、2番目のチュートリアルである「Wordpressカードアプリ」の製作に取り掛かっていきます！
(目安：3分)
【目次】
作るものと学べる事
Wordpressの最新記事が表示されるアプリ
今回完成を目指すのは、「Wordpressの最新情報が、アプリを更新しなくても取得できる」アプリです。Twitterのようなイメージですね。最新記事がタイトルだけカード形式で表示されて、更新されるたびに新しいカードが生成されていく、といったようなものです。使う側としては「あーはいはい、ニュースアプリとかでもあるやつね」といった具合ですが、いざ作るとなるとどういう仕組みか全然分かりません、、、。今回はそんな仕組みについても勉強できるということで楽しみです。
外部リソースの活用法を学ぶ
今回のチュートリアルで学べることは、ずばり「REST API」と「JSON」です。どんなものかをざっくり書くと、HTMLファイルを丸ごと用意して、それを取得して表示するためのもの、ということですね。いろいろな形式があるそうですが、なかでも近年人気なのが、この「REST API」なのだとか。
そのほか、新しいコードやメソッドも登場することでしょう、、、
果たしてスムーズに理解出来るのか、、、
作成開始！
ionic gで新規フォルダを作成し、いざ
コマンドプロンプトに ionic g を入力し、チュートリアル用の新しいフォルダを作成します。今回はBlankで作成。上の写真のようなまっさらなページが出来上がりました。
Wordpressのサイトから実際に本物の記事を取って来て作りたい気持ちは山々ですが、テキストと表示が異なると一気に難民になってしまいます。本書はそういったリスクをしっかり配慮してくださっています。なんとチュートリアル用にwordpressのページを作ってあるとのこと！
今回アクセスする最新記事は、そのチュートリアル用のページから取ってくることになります。
それでは早速、app.module.tsを開いてコードを書いていきます。
HTTP通信による記事の取得
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule],
providers: [{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
}],
bootstrap: [AppComponent],
})
export class AppModule {}今回はじめましてなのは一番上の
import { HttpClientModule }
の部分ですね。これは初心者でもなんとなく分かりますよー！要はHTTP通信によってデータを取得するために必要なおまじないということですね。
import {○○} を追記した後にはconstructor( )の部分も修正しないといけない、という認識でしたが、このmodule.tsの場合のように@ngModule( )の中を書き換える、ということもあるのですね。安直に繋げて覚える作戦、失敗です。そもそもファイルによって違うのかな？
ちなみにこの段階でエラー出まくってました。何回か読み返しても
「いや～どこが間違ってるんだ？セミコロンとか中かっこも間違ってないしなあ、、、」
と詰んでそうな気配が漂っていましたが、よーくよく見てみたら分かりました。
「あ、クライアントって、Cli-E-ntなんだ、、、」
「(Cli-A-ntじゃないのね)」
スペルミスでした。怖いですねーカタカナ英語。
記事一覧を表示するためのページを作成
さて、次はhome.page.tsを作っていきますよー。個別の記事ではなく、最新記事のタイトルだけを一覧表示するためのページです。
import { HttpClient } from '@angular/common/http';
export class HomePage {
constructor(
public http: HttpClient,
) {}あれ、この場合は{ HttpClientModule } じゃなくて { HttpClient }なんだ！
app.module.tsの場合だから、Moduleがつくのかな？き、きっとそうだよね。
お、今回のチュートリアルで初めてのメソッドと遭遇。ionViewDidEnter( )。
あれか、ionViewWillEnter( )の親戚か！JavaScriptでいうところのイベントリスナーのようなイメージであっていますかね？モバイルアプリなのでページがいろいろ入れ替わりますと。で、そのたびにいろいろなアクションが裏で動きますよっていう。
ionViewDidEnter() {
this.http.get('URL')
.subscribe(data => {
this.posts = data['posts'];
});
get( ) メソッドとsubscribeもはじめてだ！両方ともデータを取ってくるっていう意味合いですね。getに関してはイメージしやすいのですが、subscribeの方が解説を読んでもちょっと分かりづらいです。
くうう難しい！
それと” data => ”の =>は、矢印って意味でいいのかな？笑
普通にJavaScriptの場合でしたら「≧」こういうような意味ですよね。ただ上のコードだとそういう意味で使われてないような気が。
その後、htmlを*ng for = 'let p of posts'と{{ title }}でバインディングして…！
ここまでの成果
ひとまずトップページ
よしよし！カードがいい感じ(^^*)
ionicで本当に便利ですねー。デザインセンスのない僕からしたら画期的過ぎる！！！
ここまでのコードや流れを一通りおさらいしながら、明日以降細かい仕様を増やしていきます。テキストをチラ見したところ、ローディングインジケータを導入とやら書いてあります。
あの、待っている間にくるくるしてるやつか！楽しみだ～。
