🦄

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

2022/06/07に公開約5,000字

概要

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

前提

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

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

https://developer.twitter.com

使用ライブラリ

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

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

https://pub.dev/packages/twitter_api_v2

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

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

flutter pub add twitter_api_v2
flutter pub get

実装

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

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

https://github.com/myConsciousness/example-volume-stream-with-flutter
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);

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

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

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

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

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

  
  void initState() {
    super.initState();

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

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

              return StreamBuilder(
                // データが流れてくるたびに再描画されます。
                stream: snapshot.data,
                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では実装者がレスポンスに含まれるデータ量を制御できる仕様を持っています。

https://developer.twitter.com/en/docs/twitter-api/expansions

https://developer.twitter.com/en/docs/twitter-api/fields

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

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

貢献者の募集

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

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

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

https://github.com/twitter-dart/twitter-api-v2

https://pub.dev/packages/twitter_api_v2

スポンサーの募集

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

https://github.com/sponsors/myconsciousness

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

GitHubで編集を提案

Discussion

ログインするとコメントできます