[Flutter]WP REST APIから記事データを所得して表示する方法

どうもこんにちは。

この記事ではWordPressから記事データを所得する方法について解説していきます。

本記事執筆時点でメジャーな状態管理の方法である「provider+ChangeNotifer」を用いた方式で解説していくので、他の状態管理の方法を使っている方はご注意ください。

最終的には以下のようなアプリが出来上がります。

出来たサンプルアプリはgithubにアップロードしてあるので、とりあえず動かして見たい方はそちらからどうぞ。

では、解説に入っていきます。

WP REST APIから記事を所得して表示する方法

手順としては以下の通り。

pubspec.yamlに以下を追加。

dependencies:
  flutter:
    sdk: flutter

  http: ^0.12.2
  provider: ^4.3.2
  cached_network_image: ^2.0.0
  url_launcher: ^5.5.0

上から、http通信用、provider、画像のキャッシュ用、外部サイトへのリンク用のパッケージです。

バージョンは最新のものに合わせてください。

まずは、記事の入れ子となるクラスを作成します。

今回は、タイトル、記事の内容、日付、アイキャッチ、カテゴリー名、リンクで構成されたエンティティを例として作りました。

次は記事を所得するロジックやhtmlタグを削除するロジックなどを記述したモデルを作りましょう。

以下が完成品です。

では、上から説明していきます。

getWpArticle()では、WP REST APIを叩いて、記事データを所得する処理を行っています。

WordPressで記事データを所得するには、通常https://所得したいサイトのドメイン名/index.php/wp-json/wp/v2/postsを使用すれば良いです。

しかし、これだとアイキャッチやカテゴリー名が取ってこれないので、今回はpostsに?_embedをつけたhttps://所得したいサイトのドメイン名/index.php/wp-json/wp/v2/posts?_embedを使用しています。

これでアイキャッチやカテゴリー名を所得できるようになります。

記事データへのアクセス後、所得可能ならデータを記事の配列へと挿入。

最後にnotifyListeners()で変更を通知しています。

getWpArticle()より下の関数では、HTMLタグの削除、日付の日本語変換、データが所得可能か否かを判定する処理を行っています。

モデルが作成できたら、最後は記事の表示を行うだけです。

完成品は以下の通り。

記事データを所得している間はローディング画面を出しておいて、所得が終わったら一覧画面を表示するようにしています。

FutureBuilderで読み込ませる仕様にするのも良いと思います。

再度記載しますが、完成品はgithubにアップロードしてあるので、参考にしたい方はそちらをどうぞ。

というわけで、終わり。