記事をChromeの拡張からクリップして、要約して表示するアプリをつくってみる
作ったWebアプリです。
↓ ↓ ↓
アプリ全体のシステム構成
① Chrome拡張機能(今回は既存のものを使用)
- ページを見ながら「保存ボタン」を押す
- 記事の タイトル・URL・タグ・本文・メモ をGASに送る
こんな感じにChromeの拡張にいれました。 Nボタン NewsStocker AI
② Google Apps Script (GAS)
2つの役割を兼ねています。
| 関数 | 役割 |
|---|---|
doPost | Chrome拡張から記事データを受け取って、スプレッドシートに保存 |
generateSummary | Gemini APIで記事本文を要約(3点の箇条書き) |
doGet | Web画面からの要求に応じて、記事データをJSONP形式で返す |
getArticlesData | スプレッドシートから記事一覧を取り出す共通処理 |
③ Googleスプレッドシート
- シート名:
ニュース - 列構成: A列=日付、B列=タイトル、C列=URL、D列=タグ、E列=AI要約、F列=メモ
- データの実体(保管庫)
④ Gemini API (gemini-2.5-flash)
- 記事本文を渡すと、重要ポイント3点を箇条書きで返してくれる
- APIキーはGASの スクリプトプロパティ に安全に保管
⑤ 閲覧用HTMLページ(london3.jp上)
- 記事を 2列のカード形式 で表示
- タグでの絞り込み機能 搭載
- Google Analytics で閲覧計測
- フッターに村上の署名
データの流れ(具体例)
保存するとき
- 例えば、Yahoo!ニュースで「グーグルが新型AIチップ発表」の記事を見る
- Chrome拡張の保存ボタンをポチッ
- GASの
doPostが発動 → Gemini APIで要約生成 → スプレッドシートに追記 - スプレッドシートに1行増える ✅
閲覧するとき
https://london3.jp/app/news/をブラウザで開く- HTMLが裏でGASの
doGetを呼ぶ(JSONP) - GASがスプレッドシートからデータを読んで返す
- HTMLがカード形式で表示
- タグボタンを押すと絞り込み ✅
実装した機能
記事の保存
- ✅ Chrome拡張から自動保存
- ✅ Gemini APIで自動要約(失敗しても記事自体は保存される エラーハンドリング付き)
- ✅ エラー発生時もスプレッドシートにログを残す
記事の表示
- ✅ 新しい順に表示
- ✅ 2列カードレイアウト(スマホは1列に自動切替)
- ✅ AI要約を全文表示
- ✅ 投稿日時表示
タグ絞り込み
- ✅ 全記事からタグを自動抽出(重複なし)
- ✅ タグボタンで絞り込み
- ✅ タグごとの件数表示
- ✅ カード内タグをクリックでも絞り込める
- ✅ カンマ/読点/スペース区切りどれにも対応
セキュリティ
- ✅ APIキーはスクリプトプロパティで保管(ソースコードに書かない)
- ✅ XSS対策(HTMLエスケープ処理)
後から削除機能を追加しました
パスワードを入れて記事を削除できるように追加機能をしました
こんな感じで完成しました。
そんなところで
