🦄

FlutterでTwitter API v2.0のVolume Streamを使用する方法

2022/06/07に公開

Flutter

概要

Twitter API v2.0 では現時点（2022/06/05）でVolume StreamとFiltered Streamでのストリーミングがサポートされていますが、今回はその中のVolume Streamに関してFlutterでどのように実装するのか紹介します。

前提

Volume Streamエンドポイントを使用するために少なくともAppOnlyのベアラートークンが必要です。

また、Volume Streamエンドポイントに限らずTwitter API v2.0を使用するためにはTwitter Developersでのセットアップが必要なので、まだお済みでない方は以下の公式ページから申請と設定を行ってください。

https://developer.twitter.com

使用ライブラリ

Flutterでの実装方法を紹介するとは言っても、通信処理から実装するわけではありませんのでご安心ください。

既にVolume Streamエンドポイントをサポートしている私が作成した以下のライブラリを使用します。

twitter_api_v2

https://pub.dev/packages/twitter_api_v2

ライブラリのインストール

お馴染みの以下のコマンドでライブラリをインストールします。

flutter pub add twitter_api_v2

flutter pub get

実装

twitter_api_v2を使用したストリーミングの実装はとても簡単で、FutureBuilderとStreamBuilderを組み合わせるだけで実装することができます。

また、参考ソースは以下のリポジトリにコミットしてありますので、自分でプロジェクトを作成して実装するのが面倒な方はcloneして実行してください。

import 'package:flutter/material.dart';
import 'package:twitter_api_v2/twitter_api_v2.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Example Volume Stream',
      home: VolumeStreamView(),
    );
  }
}

class VolumeStreamView extends StatefulWidget {
  const VolumeStreamView({Key? key}) : super(key: key);

  @override
  State<VolumeStreamView> createState() => _VolumeStreamViewState();
}

class _VolumeStreamViewState extends State<VolumeStreamView> {
  // 必ずTwitter Developerで取得したBearerトークンを指定してください。
  final TwitterApi _twitter = TwitterApi(bearerToken: 'YOUR_TOKEN_HERE');

  late Future<TwitterStreamResponse<TwitterResponse<TweetData, void>>> _stream;

  @override
  void initState() {
    super.initState();

    // 15分間に50回のリクエストのみが許可されるため、
    // あらかじめStreamを取得しておきます。
    _stream = _twitter.tweets.connectSampleStream();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Center(
          child: FutureBuilder(
            future: _stream,
            builder: (_, AsyncSnapshot snapshot) {
              if (!snapshot.hasData) {
                return const CircularProgressIndicator();
              }

              final stream = snapshot.data.stream;

              return StreamBuilder(
                // データが流れてくるたびに再描画されます。
                stream: stream,
                builder: (_, AsyncSnapshot snapshot) {
                  if (!snapshot.hasData) {
                    return const CircularProgressIndicator();
                  }

                  final TwitterResponse response = snapshot.data;

                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('ID: ${response.data.id}'),
                      Text('TEXT: ${response.data.text}'),
                    ],
                  );
                },
              );
            },
          ),
        ),
      );
}

動作確認

上記の実装でFlutterアプリを実行すると以下の結果を得られます。

Volume Stream

いい感じですね。

備考

Twitter API v2.0では実装者がレスポンスに含まれるデータ量を制御できる仕様を持っています。

これはtwitter_api_v2でもサポートされており、以下のように指定することができます。

_twitter.tweets.connectSampleStream(
              expansions: [
                TweetExpansion.authorId,
                TweetExpansion.referencedTweetsId
              ],
              tweetFields: [
                TweetField.conversationId,
              ],
              userFields: UserField.values,
            );

貢献者の募集

twitter_api_v2はオープンソースですのでどのような方でも開発に貢献することができます。開発リポジトリの公用語は英語にしていますが、日本人の方々も大歓迎ですのでお気軽にIssueやPull Requestを作成してください。

また、このライブラリが役に立った場合にGitHub の開発リポジトリにスターを付けることや、Pub.dev でいいねを付けることもよろしくお願いします。これは twitter_api_v2 の開発コミュニティを活性化するためにとても大きな意味があります。

もしなにか疑問がある場合は開発リポジトリのディスカッションにでもスレッドを立てていただければと思います。

https://pub.dev/packages/twitter_api_v2

スポンサーの募集

国内外を問わずオープンソース開発をサポートしてくださるスポンサーを募集しています。少額からの寄付も可能ですので、以下のリンクから是非ご支援ください。

また、この記事にバッジを贈っていただくことでも支援は可能です。

GitHubで編集を提案