No Spoilers Twitter!!!

流行なものはすぐにTwitterのトレンド入りをし、ネタバレをしたくないと気を付けていても関連するツイートが目に入ってしまい楽しみが減ってしまったなんてことはありませんか？

現在、爆発的な人気を博している映画「ワンピースフィルム RED」もまさにその状態だと思います。そこで私たちは、そのようなネタバレを防止するためのアプリを作ることにしました。

背景

Twitterの設定から指定した単語をミュートすることができますが、実際に使ってみたところ以下の点についてかなり使いずらいと感じました。

Twitterのミュート機能の欠点

指定した単語のみしかミュートすることができない！！ 例：「ワンピース」を追加すると、ワンピースはミュートできるけれど「RED」、「シャンクス」などはその都度追加する必要がある。
履歴を残すことができない！！ ミュートにした単語は解除されるとリストから完全に消えるため、同じワードをミュートしたい場合はもう一度フォームから入力する必要がある。

そこで、私たちは携帯のアラームアプリを参考にしてもっと使いやすいミュート機能の実装を行いました。「No Spoilers Twitter!!!」では以下に示すようなことができます。

No Spoilers Twitter!!!でできること

グループ化された単語をワンクリックでミュートすることができる！！ ユーザーはミュートにしたい要素を複数選択してひとつのグループとして追加することができます。これによって、ワンクリックで複数のワードをまとめてミュートすることができます。
履歴を残すことができる！！ ユーザーが作成したミュートワードを解除しても消されることはなく、履歴に残すことができます。これによって、過去に追加したミュートグループを再度入力することなくミュートすることができます。

TwitterUserTimeline取得絞り込み機能

TwitterAPIからアクセストークンと自分のアカウントのTLを取得してグループ化したミュートワードを除外して表示する

Next.js API Route

事前に登録しておいたクライアントID,SECRET,レスポンスのコールバック先,TL取得に必要な権限をTwitterAPI側に送信してアクセス許可画面を表示するAPIをNext.js API Routeを使って作成

const authClient = new auth.OAuth2User({
  client_id: process.env.NEXT_PUBLIC_CLIENT_ID as string,
  client_secret: process.env.NEXT_PUBLIC_CLIENT_SECRET as string,
  callback: `${process.env.NEXT_PUBLIC_HEAD_URL}/timeline`,
  scopes: ['tweet.read', 'users.read', 'offline.access'],
});

const STATE = 'my-state';

export default async function getHomeTimeline(req: NextApiRequest, res: NextApiResponse) {
  const authUrl = authClient.generateAuthURL({
    state: STATE,
    code_challenge: 'code_challenge',
    code_challenge_method: 'plain',
  });
  res.redirect(authUrl);
}

苦戦したところ

TwitterAPIのAccessTokenの保持

今回TwitterAPIを公式が出しているSDKを用いて呼び出しました.そのSDKでは基本的にAccessTokenが内部で保持するようになっていたので一度ページをリロードしてしまうとアクセストークンが破棄されてしまい,呼び出したTLデータが取得できずに苦戦しました.

最終的に最初に入手したアクセストークンをCookieに保存し,二回目以降のリロード時はその保存しておいたアクセストークンを使ってTLデータを取得するAPIを呼び出すことで対応しました.

try {
      const cookies = nookie.get(context);
      if (cookies.accessToken) {
        authClient.token = JSON.parse(cookies.accessToken);
      }

      const client = new Client(authClient);
      const user = await client.users.findMyUser();
    } catch (error) {
      const { code, state } = context.query;

      authClient.generateAuthURL({
        state: STATE,
        code_challenge: 'code_challenge',
        code_challenge_method: 'plain',
      });

      const { token } = await authClient.requestAccessToken(code as string);

      nookie.set(context, 'accessToken', JSON.stringify(token) ?? '');
    }

    const client = new Client(authClient);
    const homeTimeline = await client.tweets.usersIdTimeline(
      `${process.env.NEXT_PUBLIC_AUTHEN_ID}`,
      {
        max_results: 20,
        'tweet.fields': ['author_id', 'created_at'],
        expansions: ['author_id'],
        'user.fields': ['profile_image_url', 'username'],
        exclude: ['replies', 'retweets'],
      },
    );

No Spoilers Twitter!!!

Twitterによるネタバレ防止アプリです。

推しアイデア

作った背景

推し技術

プロジェクト詳細

No Spoilers Twitter!!!

背景

TwitterUserTimeline取得絞り込み機能

Next.js API Route

苦戦したところ

TwitterAPIのAccessTokenの保持

こだわりポイント

Twitterに寄せたUI実装

ワンクリック制御でUX向上