我が子専用のニュースサイトを作った話

この前、最近作ったものをまとめましたが、今回はまた新たに作った我が子のためだけの“専用ニュースメディア”について書きます

早速完成したもののキャプチャから（Vibe Codingで実装しました。）

きっかけは「父としての悩み」

小学3年生になった息子は、スマホやiPadで興味があることをどんどん調べています。
興味があるものはゲーム系や飼っている犬にあげていい果物のことなど幅広いのですが、特にゲームに関しては多くて、ゲーム攻略サイトや配信系のYouTubeにたどり着くのが多いです。

ただ、そういうサイトとか動画って（中にはないのもありますが…）

• ちょっと見せたくない広告が多い

• YouTubeはやたら長く、結論までたどり着くのに時間を浪費しがち
  →飛ばさずに最初から全部見ちゃうことが多い。。

「せっかく調べてるのに、これはもったいないな…」というのが、正直な気持ちでした。

じゃあ、自分で作ってしまおう！

そこで思いついたのが、
「子どもが興味を持ったことを、わかりやすくまとめたニュースサイトを作る」こと。

我が子のためだけの“専用ニュースメディア”を作ります。

実装の仕組みはこんな感じ

今回は、普段使っているClaude Codeではなく、GoogleのGemini でVibe Codingしてみました。

ニュースサイト部分

今回我が子のためだけで公開はしないので、GAS（Google Apps Script）とスプレッドシートを使って、自分だけが見られるWebアプリとして構築しています。

GASではhtmlが書けるので、htmlを書いてWebアプリとしてデプロイしたらフロントがかけます。サイトとしては結構単純なポートフォリオサイトのような構成のhtmlなので、結構簡単に書けます。

ニュース記事の管理はスプレッドシート

ニュース記事は管理楽にしたかったので、スプレッドシートで管理
記事ID|タイトル|記事|サムネイル
を用意し、以下で説明するPython＋Gemini APIでタイトル作成・記事作成したものをコピーします。

スプレッドシートの内容取得はGASでcode.gsを活用すると簡単に読み込めます。

私の場合は、息子が調べたいことを一緒に検索し、その内容をPythonに投げ込み記事化です。

記事要約部分

WebサイトやトランスクリプトのテキストをPython+Gemini APIで要約して作っています。流れは、

1. URLやテキストを入力

2. 文字要素を子どもむけに要約

3. Markdown形式で出力

というもの（トランスクリプトはそのうち自動で取得できるように改良したい。今はテキストコピペのみに対応）

そして、出来上がったMarkdown形式の記事をスプレッドシートにタイトル・記事・サムネイルをコピーすると、先ほどのGASベースのフロントWebアプリに自動で反映されます

ー8月10日追記ー　管理画面作ってみた

いちいちコピーが面倒だったので、Xで見たGemini AI Studioで作られているnote投稿生成をヒントに、Reactベースで記事管理をできるページを作ってみた。

基本的に中身はPythonで作っていたものを自分が管理しやすいようにWebサイトのフロントを作ったというもの。ローカルで起動したらいいし、父しか使わないので、難しいことはやっていないです。

①カテゴリを選択（Pythonの時は手動で設定）
②記事化したいメモを貼り付ける（これは今Obsidianの自分のメモを読み込んで記事化する部分も作ったので、そっちでも活用できるように）
③生成された記事を確認、気になるところは編集できるようにしました。
④完成したらGoogleSheetAPIを使って記事管理スプレッドシートに自動で記入。
→息子がニュースサイト開くと最新記事が見られるように。

できあがったのがこちら！

全体の雰囲気はパステルカラーのやさしいデザインにして、
当日にアップされた記事が「Today's Topic」として最上部に表示されるようにしています。(for のあとは息子の名前が入ってるので伏せてます）

バナーのタイトル・要約と画像をアップロードする必要があります。この辺は息子とゲームやっているのでそのキャプチャを撮影して使ったり、今飼っている犬の写真を使ってバナー画像作ったりしました。

そして、このトピックを見て分かる通り、現在息子はツムツムに夢中。
今月出てきた新ツムのロクサスが当たったので、どこまで育てたら強くなるかを調べました。それを今回のまとめニュース記事にしたのがこちら↓

ちょっと、読みやすくなるようにプロンプト調整しましたが、もう少し文章長くてもいいかも・・。この辺は改良していきます（ちなみに画像は我が家のロクサスのキャプチャで、まだスキル3です。この間当たったモアナを4にするのに使っちゃいました…）

過去の記事は「カテゴリ」ごとに分類して、いつでも見返せるようにもしました。現在息子の強い興味であるゲーム・犬（シュナウザー）・実験・バドミントンの4つを厳選しています

今後のアップデート構想

先ほど貼り付けたカテゴリの下の部分はまだ準備中なのですが、
子ども自身が「これ調べて！」と言ったときに、フォームから記事リクエストが送れるような機能も作ろうと思っています。

GASだと厳しそうなので、ここは後日しっかり設計し直す予定です。
→管理画面ができたのでスプレッドシートから要望一覧を読み込み、それを記事化しアップロードできるようにしようかなと考え中（2025/08/10)
GAS上でAPI叩けばGeminiもGPTも動くのでそっちでも完結できそうではあるけれど・・！せっかく管理画面作ったので・・！

最後に

Python＋AIで記事を要約し、GASでWebアプリ化。
我が子の「知りたい！」を邪魔することなく、
安全で集中できる情報の入り口を作ることが目的です。

これで、よくわからない広告や長ったらしい動画に振り回されず、
限られた子どもの時間を、ちゃんと意味のあるものにできたら嬉しいです。