概要
Twitterプロフィールごとにメモを残せるPWAを個人開発しました。
ChatGPT、Gemini、Claudeなど複数AIを比較しつつ、実装からUI調整まで行った記録です。
📝 アプリの概要
Twitter（X）のユーザーごとに「個別メモ」を残せるPWAです。
現状の課題
～ イベントなどでTwitterを交換 ～
Twitterを漁っているとき...「これ，いつ会った人だっけ？」
次にお会いしたとき...「前あった気がするんだけど、誰だっけ～気まずい…」
解決方法
イベントなどでTwitterを交換
その場でメモる！
次会ったときも思い出せる！
プロトタイプ↓
ソースコード↓
機能一覧
- Twitter IDごとのメモ登録・編集・削除・表示
- メモの並び替え（ID／作成日／更新日）
- Web Share Target APIによるTwitterアプリからのID自動入力
- メモデータのエクスポート／インポート
- ダーク／ライトモードの自動切り替え対応（OS連動）
- スマホのホーム画面に追加してネイティブアプリ風に使用可能
技術スタックは Vue 3 + Vite。PWAベースでFlutterへの将来的な移行を意識した構成です。
🤖 今回の開発の進め方
1. 設計フェーズ：ChatGPTで構成相談
わい：スマホで、Twitter（X）のプロフィールに対して個人的なメモを書き残したい
AI：スプシとかアプリとか色々あるけど？
わい：アプリにしたい。おすすめの言語とフレームワークを検討して。
機能: 「Twitterのプロフィール共有」からURLを取得し、ローカルストレージにメモを保存
条件: サーバー不要でプロトタイピングが早く、スマホで完結できる
AI：色々比較した結果、Vue + TypeScript + Vite が良さそうやで。最終的に React 等へ移行も可能な構成にするで。
そんなこんなで、ChatGPTに仕様書を書いてもらいました。
2. 実装フェーズ：Gemini & Gemini CLI
Gemini
まずは，ブラウザ上で使えるAIを使って実装してもらいました．
Gemini、ChatGPT、Claudeを比較しましたが、今回はGeminiを選びました。良かった点は以下のとおりです。
- エラーが少ない
- エラーが起きても、原因特定と修正提案が的確
- 生成されたUIがきれい
- 小さな修正や改善も丁寧に対応
しかしコピペが非効率だと感じました．
そこで，ターミナル上で使える Gemini CLI を導入することにしました．
Gemini CLI
Gemini CLI を導入しました．
良い点
- 指示を出して放置するだけで，実装，実行，エラー修正，コミットまでやってくれる
- 背景の説明をしなくても自動でファイルを読んで，いい感じに実装してくれる
悪い点
- 早いときは早いが，時間がかかることも多い
- ずっと
Read Fileでループしたり，普通にフリーズことがある
💥 実装の際に詰まったところ
■ PWAまわり
-
manifest更新時はホーム画面からアンインストール→再インストールが必要 - ホーム画面への追加時は、Android なら Chrom 、iOS なら Safari を使う
■ Twitter共有機能
Twitterアプリは、urlじゃなく**textパラメータにIDを入れてる**。
→ Web Share Target API の paramsを text に設定して解決。
🤔 反省点
- 自分の中でアプリの完成解像度が低く、機能追加の指示が細切れになってしまった
- まだまだAIのべ教が
🔁 次へ
- Cursor のようなIDE統合AIも試してみる
- 仕様書をもっと明確に定義する
🤖 個人的かつ現段階のAIツール使い分け
- ChatGPT
- 初期設計／アイデア出し／構成相談
- コーディングはGeminiのほうが強いイメージ
- Gemini
- 実装，トラブル対応
- DeepResearch（学生は15ヶ月Proが無料なので）
- Claude
- 文章の校正
- （課金しないと1つのチャットが途中で途切れてしまうのがネック）
- Genspark
- スライド作成
- 他の使い方まだ試してない（おい）
- Github Copilot
- エディタ内でのリアルタイム補完
- Cursor
- まだ使ってない...（おい）
✅ まとめ
検証：初心者でもWebアプリは作れるのか
結論：1日で作れる
🙌 最後に
他にもこんなAIの使い方あるよなど，今やっているおすすめの使い方教えてください！
また，このアプリは，今後もブラッシュアップしていく予定です。
「こういう機能あったら嬉しい！」など、ぜひコメントください！
最後までお読みいただきありがとうございました．