目次
はじめに
Vue Fesに参加して開発意欲が高まっている中、以前から温めていたアイデアを形にすることにしました。それは、Xでのいいね履歴を日付別に管理できるWebアプリです。
実は数ヶ月前、Xの仕様変更により他ユーザーのいいね欄が非公開になりました。さらに、Xの仕様上、過去のいいね履歴が完全には保存されていないという課題もあります。この状況を踏まえ、自分のいいねを外部で保存・管理できるツールがあれば便利だと考えていました。
作成したアプリでは、カレンダーUIから日付を選択し、その日にいいねした投稿を一覧で確認することができます。週末のカフェでコーディングを重ね、紆余曲折ありながらも完成させることができました。
本記事では、開発における試行錯誤や技術的な選択について共有していきたいと思います。
技術スタック
使用技術の概要
- フロントエンド: Next.js
- インフラ: AWS Lambda, S3
- 自動化: IFTTT, GitHub Actions
- デプロイ: Vercel
開発の変遷と技術選定
当初はVue Fesでの刺激もあり、Nuxtでの開発を進めていました。しかし、X（Twitter）の投稿を埋め込む際に直面した課題で、大きな方向転換を迫られることになります。
最初の実装ではX公式のwidget.jsを使用していたのですが、iframeでの読み込みによる著しい表示の遅延が発生し、ユーザー体験を著しく損ねる結果となりました。Vue.jsでの開発にこだわりはあったものの、より良いユーザー体験を提供するため、技術スタックの見直しを決断しました。
Next.jsへの移行を決めた決め手は、Vercelが提供するreact-tweetライブラリの存在です。このライブラリはキャッシュ機能を備え、表示の遅延も最小限に抑えられることから、ユーザー体験の大幅な改善が期待できました。幸いにも以前の個人開発でNext.jsとReactの基礎は押さえていたため、移行作業もスムーズに進めることができました。
システムアーキテクチャ
システム全体の処理フローは以下のような流れになっています：
- IFTTTでXのいいねをキャッチ
- WebhookでAWS Lambdaの Python関数にPOST
- Lambda関数でデータを加工し、S3にJSON形式で保存
- GitHub Actionsで定期的にS3からJSONを取得
- 取得したデータを加工してリポジトリにコミット
- Vercelで自動ビルド・デプロイ
開発の着想
本プロジェクトは、いいね欄を公開するという記事から大きな影響を受けています。この記事はXのいいね欄非公開化への対応として公開され、詳細な実装フローとOSSリポジトリが共有されていました。
当初は公開されていたリポジトリをフォークして実装を試みたものの、Terraformやawsの知識不足、さらにメイン言語としてRubyが採用されていたことから、実装の理解が追いつかず断念した経緯があります。しかし、IFTTTやAWSサービス（Lambda/S3）の活用といった核となるアイデアは、今回の実装でも大いに参考にさせていただきました。
学びと気づき
今回の開発では、AWSのLambdaやS3、IFTTTなど、初めて触れるサービスも多く、良い学習機会となりました。また、ユーザー体験を重視した技術選定の重要性も、身をもって経験することができました。
終わりに
開発を通じて、Xのいいね機能の使われ方について考えさせられる機会が多くありました。私自身、現在はXで投稿こそしていないものの、技術情報のキュレーションツールとして日々活用しています。技術系の仕事柄、最新の情報収集は欠かせず、興味深い投稿や有益な記事との出会いも多々あります。
しかし、いいねをした後に実際の記事を読み忘れたり、価値ある投稿を見返す機会を逃してしまうことが課題でした。今回開発したアプリケーションは、そんな自分自身の「情報との向き合い方」を改善するきっかけになればと考えています。
今後の展望
理想を言えば、PocketなどのRead It Later系サービスと連携させ、より包括的な情報管理ツールへと発展させることも可能でしょう。しかし、シンプルさにも価値があると考え、現時点での追加開発は控えめにしようと判断しました。
必要性を感じた際には、version 1.1としてアップデートを検討したいと思います。本プロジェクトを通じて、個人の情報収集と振り返りのワークフローについて、改めて考えを深めることができました。