AIで子供向けニュース記事を自動生成！ React, Gemini, スプレッドシート連携で作る簡単記事作成ツール

こんばんは。はっきんぐパパのほったりたです。

先日GAS＋スプレッドシートで子供専用ニュースサイトを作りました。今回はそのニュース生成を簡単にする管理システムをReactとGoogle Gemini、それにGoogleスプレッドシートを使って、作ってみたお話をします。

子供向けニュース記事作成で注意したポイント

まず初めに、子供向けのニュース記事作成にはどんな課題があるのか、そしてそれをどう解決するのか考えました。

1. 子供向けのという点で、容易に理解できる文章を作る必要がある

2. 記事はあんまり長めにしない。極力簡潔に。

の2点。

子供が興味を持つかどうかに関しては、
この記事サイトを作ってから、これ読みたいーって息子が言ってくれるので、多分読んでくれるだろうというスタンスです。笑

あと、私個人でしか使わないので、ローカルで動けばいいやと
思ってローカルで動かしてます。

GASも自分のみ公開で息子以外見ないですしね。
人の目を気にせず、
息子にだけ評価されるシステムを作るのがいちばんの幸せ。

システムの全体像と使用技術の概要
(2025年記事記入の8月時点)

システムの全体像と使用技術について見ていきます。
（と言っても大したことはやっていない）

実際の管理画面がこちら

システムは主に三つの部分から成り立っています。

1. React: フロントエンドの開発に利用

2. Google Gemini: 記事の自動生成に利用

3. Googleスプレッドシート: 生成した記事の格納と管理に利用

Reactで簡単にニュース記事が作れるようなUIを開発し、Geminiで記事を生成、そしてGoogle Sheet APIでスプレッドシートに生成されたニュースを書き込みに行くという形をとります。また自分でもニュース記事が見えるように管理画面側でもスプレッドシートを読み取りニュースが確認できるようにします。

実際の使い方とスクリーンショットによる具体的な説明

では、具体的にどうやって使うのかは以下のXポストで動画をアップしてます。

という感じ。
・カスタム記事の画面は先ほど貼り付けたもので、

以下がObsidianとURL分析のキャプチャ

Obsidian連携の機能

Obsidianは今このシステムがローカルで動いているということで
直接ディレクトリ読みに行って連携してるっていう力技ですw

連携したディレクトリにメモが入っていればそれを読み込み、
それをベースに記事化をします。

連携した記事を読み込むと分析結果を出力し、
どういう記事にするか推薦してくれます
（実はこれは別で作ってたやつのシステム流用したので、こういう推薦をしてくれてます。子供向けではここまでいらないかなと思うので、あとで修正予定）

記事内容と、記事の方向性を選択し、生成を行うと子供向けニュース記事を作ってくれるようになってます

URLの機能

こっちは単純で息子が読みたい記事のURLをコピペし貼り付けると子供向けに書き換えてくれます。それだけ。こっちは分析してどういう記事にするか？みたいなObsidianみたいなことはやってないです。

※ちょこちょこバドミントンの例えが出てくるのは息子がバドミントンやっているという基本情報をプロンプトに入れてるからです。笑

記事投稿・管理

ここで生成した記事は前回GAS＋スプレッドシートで作ったニュースサイトに投稿されるため、我が子はGASで作ったフロントサイドであるニュースサイトを読み込めば新しい記事を読むことができます。
どっちもスプレッドシートを読み込んでいますね。

GASでの画像表示が難所でした

開発の過程では、成功もあれば苦労もありました。ReactとGemini、そしてGoogle Sheet APIの連携は初めてでしたが、割とすんなりいけました。

ただ、その後引っかかったのはサムネイルのアップロード。これがGoogleDriveを活用したのですが、うまくいかず、、一旦自動は諦めここだけは時間がある時にまとめてDriveにアップするようにしています。

ちなみに、GASでDriveの画像を読み込むときはURLを下記のようにしないと読み込みませんでした。

https://lh3.googleusercontent.com/d/ドライブにアップロードした画像のID

まとめ

ReactとGoogle Gemini、それにGoogleスプレッドシートを活用した、子供向けのニュース記事自動生成システムの裏側の話でした。
今後は子供自身が気になる事柄について、GASのフロントに用意している気になる記事を我が子むけに変換する依頼を父にできるような機能をつけたいなと思ってます。

(2026年記事修正の10月時点) 子供向けニュースサイトと記事作成管理画面の現在

この記事を書いたのが1年前の夏休みでした。
当時、夏休みの宿題を考えたことをメモしたり、一緒にゲームしたり、
実験したりというのをまとめるためです。

この当時から

という仕組み自体はほぼ変わっていません。

以下の改修は行なっています。

息子が興味があることの検索し、Geminiに提案させ、
僕がソースを確認し、問題なければニュースにするという流れです。

という流れに変えたという改修をしたりしていました。
（Obsidian連携はそのまま残してあります）

また、管理画面は基本僕がみるので、前回の記事の時よりも、
シンプルにしました。

一方で、デザインは結構変えていて、
当時とは息子の好みがガラッと変わりました。

この記事執筆した昨年の8月頃は、
先ほど画像を貼り付けたような可愛い感じでした。

その後、2025年11月ごろには、かっこよい感じに。
ということで、以下のデザインになりました。
（当時の記事はこちら）

そして、現在息子は4年生になり、習いごとも忙しくなってきたため
シンプルに情報を取得できるようにと、一覧性を重視した
ニュースサイトのようになっています。
(息子は青が好きになったのでちょっと濃い青をメインカラーで使っています）

プロンプトの調整も行なっています
当時から知りたいことを頭に持ってきて、我が子が知りたいことが
冒頭でわかるようにしていましたが、話し言葉風の記事にしていました。
これは現在は話し言葉風をやめ、息子が欲しい情報をまとめるようにしています。

最後まで読んでいただきありがとうございました！
普段は「はっきんぐパパ」として、子どもと作ったものづくりの記事も書いていますので、ぜひ覗いてみてください

↓

はっきんぐパパのXはこちら

↓

https://x.com/teamhackingpapa