プログラミング

FlutterでTwitterクライアント作成③タイムライン取得

2020-03-25




前回の続き。

FlutterでTwitterクライアント作成②フッター追加

前回、FlutterでTwitterのクライアントアプリを作ろうということでヘッダーを追加したところまでやりました。 今回はフッターを追加して画面を切り替えられるようにしたいと思います。 目次1 フッ ...

続きを見る

今回はホーム画面にTwitterのタイムライン情報を読み込んでみます。

まずはお試し

いきなりTwitter APIだと難しそうなので、もっと簡単なやつで情報取得できるかを確認します。
こちらを参考にしました。

http通信を使えるようにする

pubspec.yamlのdependenciesにhttpを追加します。

http通信して情報を表示する

home_route.dartでAPIに接続して情報を取得します。
FlutterリポジトリのIssuesの一覧だそうです。

パッケージの追加

httpを追加します。
as httpとしている理由は

httpパッケージにはgetやpostといった単純な名前があり、他の識別子との衝突を避けたい場合などにこの機能を使います。

とのこと。

HomeをStatefulWidgetに変更

StatelessWidgetだと取得したデータを描画できないので、StatefulWidgetに変更します。
httpで取得したデータ用に変数を追加してます。

httpで情報を取得

initState()は前回やった通り、画面描画前に走る処理です。
画面を表示する前にGitHubから情報を取得する処理を実行しています。

_load()はHTTP通信でデータを取得する処理です。
通常、APIを叩くときは非同期処理を行います。

  1. asyncを付けることで非同期メソッドにする
  2. http.getで非同期通信を行い、Futureを返す
  3. awaitを付けてデータが返ってくるのを待ち受ける

FutureはJavaScriptでいうPromiseのようなものとのこと。
この仕組みがあるため、データが返ってくるのを待たずに次の処理に進んでいます。

取得したデータを表示

bodyには_dataを取得しています。
非同期処理をしているため先に画面描画処理が行われ、setStateで_dataが更新され次第表示されます。

パーミッションの追加

権限の設定をしておかないと、リリースビルド時に失敗します。
AndroidのAndroidManifest.xmlに追記します。

iOS用も何か追加しないといけない気がするけど、今回はAndroidしか動かさないので割愛。

main.dartを修正

今の状態でHot Restartするとエラーが出ました。。。
Headerでエラーを吐いてます。

調べたところ、main.dartとhome_route.dartでそれぞれヘッダーを描画しようとしてるのがダメみたい。
ということで、以下を削除します。

これで改めてHot Restartすると…。
取得した生データが表示されました。
画面を切り替えると再取得しています。

これでAPIを叩いて情報を取得する処理のベースができました。

Twitter API Keyの取得

Twitterのタイムライン他の情報を取得するには公開されているAPIを使用します。
このAPI、以前は割と自由に使えたんですが、2018年に取得が厳しくなってました。。。

とはいえ一般人でも取得は可能です。
取得方法は時々変わるみたいなので、最新の情報をもとにAPI Keyを取得してください。

新しめのはこちら

Twitter タイムライン情報を取得する

API keyが取得出来たらタイムラインの情報を取得してみます。
公式リファレンスはこちら

認証用ライブラリを追加する

Twitterの認証は自分で実装することもできますが、Dart用のライブラリがあったのでそちらを使用することにしました。
(結局http使わなかった)

pubspec.yamlに以下を追加します。

タイムラインの情報を取得する

home_route.dartを修正してTwitterのAPIに接続します。
_loadの中身を以下のように書き換えます。

API Keyなどは各自取得してください。

これを保存した結果がこちら。
何が書いてあるかわかりませんが、twimgなどなんとなくTwitterっぽい文字列が確認できます。

取得した情報をdecodeする

今のままだと何が返ってきているのかよくわからないので、日本語に直してみます。
home_route.dartの_loadにjsonDecodeを追加します。
convertのimportも必要。

_timelineDataはStringじゃないといけないので、textのみを拾って出力します。

これを保存して情報を取り直すとこう。

tweetのテキスト部分だけが表示されました。

ちなみに、home_timeline.jsonはこれだけの情報を持ってます。

タイムラインは文字だけじゃないので…

とりあえずtweetのテキストはできるようになりましたが、まだまだタイムラインとは程遠いですね。
やっぱりユーザーアイコン、ユーザー名、返信ボタンなども表示しないと。

ということで、次回はタイムラインっぽい見た目にします。

FlutterでTwitterクライアント作成④タイムラインをListTileで装飾

前回の続き。 今回はタイムラインの表示をTwitterっぽくします。 目次1 Flutter標準のUIを使用する1.1 tweetをリスト形式で表示する1.1.1 LinkedHashMapの追加1. ...

続きを見る

ここまでのコードはGitHubで。

-プログラミング
-,

© 2024 そんなこと猫でもできる Powered by AFFINGER5