自分が知りたいニュースを、自分好みの画面で読めたら。そんな思いから、AIと一緒に「ニュースポケット」というWebアプリを作りました。
読みたいのは、仕事に使えるAIの新機能や、物価・給料、日本の企業や政治の動き。見出しを眺めるだけでなく、その背景や自分への影響まで分かるサイトにしたいと考えました。
実際に作ってみると、ニュースの集め方も、画面の見せ方も、何度か見直すことになりました。この記事では、完成したサイトをお見せしながら、使ったツール、作る途中で悩んだこと、希望の形に近づけた工夫を紹介します。
自分が読みたいニュースをまとめる「ニュースポケット」を作った
ニュースポケットは、気になる分野のニュースを読み、あとで見返したい記事を保存できるサイトです。
扱うのは、AI・日本経済・株式投資・国際情勢・日本政治・芸能ニュースの6テーマ。画面上のタブから、読みたいテーマへ切り替えられます。
見出しから選び、背景まで読めるようにした
一覧には見出しを中心に並べました。まず全体を見渡して、気になった記事を開く使い方です。
記事を開くと、次の3つに分けた解説が読めます。
- 何が起きたか：発表や出来事の要点。
- 背景と知っておきたいこと：話の前提や、理解に必要な補足。
- 自分にはどう関係するか：暮らしや仕事への影響、注目する点。
たとえばAIの新機能なら、機能の名前に加えて「何ができるのか」「仕事のどんな場面に関係するのか」まで分かる書き方を目指しています。詳しく調べたいときのために、参考にした出典へのリンクも付けています。
あとで読みたい記事は、Googleでログインして保存できます。共通のニュース一覧とは別に、その人が保存した記事を管理する仕組みです。
今回は、ブラウザから使うWebアプリとして公開しました。スマホのホーム画面に追加する方法は、記事の後半で紹介します。
使ったツールと、ニュースが届くまでの仕組み
制作は、AIに希望を伝えながら進めた
制作で使ったのはChatGPTとCodexです。Codexには、サイトのファイルを作ったり、コードを直したりする作業を進めてもらいました。
僕は「こんなニュースを読みたい」「この画面は見にくい」と希望を伝え、出来上がった画面を確認します。その結果をもとに、次の修正を頼む。このやり取りを繰り返しました。
画面の基本になっているのは、HTML・CSS・JavaScriptです。
- HTMLは、見出しやボタンなど画面の骨組み。
- CSSは、紺や青の配色、文字の大きさ、余白などの見た目。
- JavaScriptは、タブの切り替えや保存ボタンなどの動き。
PCで起動・検査するためにNode.jsとnpm、公開先へ反映するためにWranglerも使いました。アイコンや操作案内はAIで画像を作り、アイコンは配信用のサイズに整えています。
ChatGPTとCodexの使い分けは、ChatGPTのモデル比較｜Chat・Work・Codexの違いと使い分けにもまとめています。
ニュースを作る役と、サイトへ届ける役を分けた
公開後の仕組みは、次のように分担しています。
| ツール・サービス | ニュースポケットでの役割 |
|---|---|
| ChatGPTの専用クラウドタスク | Webを調べ、話題を選び、出典付きの解説を書く |
| GitHub | サイトのコード、変更履歴、記事データ、手順書を保存する |
| GitHub Actions | 保存された記事データを検査し、サイトへ送る |
| Cloudflare Workers | サイトを表示し、ログインや記事の保存操作を処理する |
| Cloudflare D1 | 記事や、利用者ごとの保存データを保管する |
| Googleログイン | 利用者を確認し、その人の保存記事を扱えるようにする |
GitHubは、制作物と記事データの置き場です。GitHub Actionsは、そこにあるデータを使って決めた処理を実行する仕組みです。
そのため、ニュースポケットではChatGPTが調べて書き、Actionsが検査して届けるという関係になります。Actions自体が、ニュースの重要性を判断して文章を書くわけではありません。
届いた記事は、Cloudflare D1というデータベースに保存されます。データベースは、情報を記録して必要なときに取り出す保管庫です。Cloudflare Workersが、その記事を読み出して画面へ表示します。
こうした処理をクラウド側で動かす構成にしたので、自宅のPCを起動し続ける必要はありません。
更新は毎日8時ごろ、1テーマ0〜3件、全体で最大18件の設定です。条件に合う話題を優先し、件数を埋めるためだけの記事は作らない方針にしました。
なお、10月16日までの制作記録で確認したのは、記事作成からサイト反映までの初回実行です。翌日以降の予定時刻での実行は、別に確認を残しています。
仕様書とデザイン画像から、動く画面を作る
最初に、見た目と動きの希望を伝えた
出発点は、仕様書と参考のデザイン画像でした。紺色の背景、青いグラデーション、記事の枠や余白など、画面の方向性を画像で伝えました。
動きについても希望を添えています。テーマのタブは横一列に並べ、横へ動かして選べるようにする。記事を押せば詳細が開き、保存ボタンも操作できるようにする、といった内容です。
当時の依頼を要約すると、次のようになります。
まずサンプル記事で、画面と操作を確認できるようにしてほしい。外部サービスは、その後につなぐ。未接続の機能は状態が分かるようにし、制作記録も残してほしい。
費用を抑えることや、認証に使う秘密のキーを公開コードへ入れないことも、最初に条件として伝えました。
サンプルで触れるようにしてから、本番へ進めた
最初に用意したのは、架空のサンプル記事6件です。これを使い、タブの切り替え、記事の詳細、保存の操作を確かめました。
この段階では、ニュースの取得元やGoogleログインとの接続を待たずに、画面を確認できます。先に触れるものがあると、「一覧はもっと詰めたい」「この項目はいらない」と修正点を伝えやすくなりました。
続いて、CloudflareとD1へ公開し、Googleログインを接続しました。サンプル段階の保存は端末内だけでしたが、本番ではログインした利用者ごとに保存を管理します。
Googleとの接続では、ログイン後に戻るサイトの住所を登録します。利用者が戻ってきた後、サイト側で本人確認の結果を受け取り、その人の保存記事を表示する流れです。
僕がアカウントへログインしたり、同意内容を確認したりする場面もありました。AIには設定やコードの対応を進めてもらい、本人の確認が必要な操作は自分で行っています。
ニュースの集め方は、途中で何度か見直した
「集められるもの」と「読みたいもの」にずれがあった
制作で特に悩んだのが、ニュースをどう集めるかでした。
最初はRSSやAPIを使い、決まった配信元から定期的に集める方法を考えました。RSSはサイトの更新情報を受け取る形式、APIはプログラムから情報をやり取りする窓口です。
僕が知りたかったのは、Yahoo!ニュース、SmartNews、日経電子版やITmediaなどで扱われるような話題です。そこで、各媒体について、見出し・URL・日時・説明文を取れるか、本文を取得してAIで要約できるかを調べてもらいました。
ここで確認が必要だったのは、取得する方法だけではありません。受け取れるデータが見出しだけなのか、本文も含むのか。取得した内容を公開サイトへ載せたり、AIに渡したりできる条件なのかも整理しました。
利用条件を確認できない情報源は、ニュースポケットでは有効にしていません。
さらに、取得しやすい配信元を増やしても、僕が読みたい話題とはずれることがありました。ニュースが集まることと、自分に合うニュースが並ぶことは、それぞれ考える必要がありました。
読みたい話題を、具体例で伝え直した
そこで、各テーマについて、どんな内容を読みたいかを改めて伝えました。
| テーマ | 読みたい話題 |
|---|---|
| AI | 仕事に使えるサービス、新機能、新しいモデルやAIの発表 |
| 日本経済 | 物価・税金・給料、日本企業や市場、日本に影響する経済の話 |
| 株式投資 | いま注目される株式投資に関する話題 |
| 国際情勢 | 世界を揺るがすような大きな出来事 |
| 日本政治 | 知っておきたい重要な決定や政策 |
| 芸能ニュース | 日本で話題になる芸能人やエンタメのニュース |
たとえば「日本経済」とだけ伝えると、対象は広いままです。そこに「物価や給料など、自分のお金に影響する話」と例を足す。AIなら「仕事に使えるサービスや機能」と伝える。こうして、選んでほしい話題を絞りました。
このやり取りを通して、僕自身も何を読みたいのかを整理していきました。
Webで調べ、出典付きの解説を作る形へ
途中では、Web検索用のAPIであるTavilyを使う案も試作しました。最終的には、ChatGPTの専用クラウドタスクで調査・記事作成を行う形に変更しています。
このタスクで記事データをGitHubに保存し、Actionsが検査してサイトへ送ります。更新頻度も、当初の約1時間ごとの案から毎日へ変えました。
現在は、SmartNews・日経電子版・Yahoo!ニュースで大きく扱われるような主要ニュースを、できるだけ優先する方針です。公開情報や他の報道、企業・行政などの一次発表も照合し、出典付きの解説にまとめます。
掲載するのは、自分のサイト向けに書いた解説です。各媒体の全文をそのまま取り込む仕組みにはしていません。出来事・背景・影響の3項目で600〜900字程度を目安にし、確認できる情報が少なければ短くまとめます。
当初はCloudflare Workers AIで本文を要約する機能も接続・検証しました。その基盤は残っていますが、いまの日次ニュース作成では使っていません。現在の作成役は、構造図にあるChatGPTの専用タスクです。
公開して、使いながら画面を直していく
一覧を見渡しやすくした
画面が動くようになると、直したいところも見えてきました。
最初に変えたかったのは、記事一覧です。ひと目で多くのニュースを見たかったので、「見出しだけにして、もっと一覧を見渡せるようにしてほしい」と伝えました。
さらに、記事が大きな枠の中でひとまとまりに見えたため、1件ずつ切り離すように依頼しました。記事ごとに枠・角丸・余白を設けたのが、いまのカード表示です。
色を大きく変えなくても、枠と余白で記事の区切りをはっきりさせられます。自分が思っていたデザインになったときは、やっぱりうれしかったです。
設定と本文も、普段の使い方に合わせた
設定画面には、使っていないAI要約・利用上限・接続情報などが並んでいました。そこで、普段使う項目を中心に整理してもらいました。
表示項目を減らしても、サーバー側の制限や認証の仕組みは残しています。画面の整理と、裏側の保護の処理は分けて変更しました。
記事の本文については、「もう少し詳しく読みたい」と伝えています。出来事の要点に加え、その背景や自分への影響を補足し、段落を分けて読めるようにしました。
たとえば物価に関する話なら、何が変わったかに続けて、家計を見るうえでどこに注目するかまで説明する、という方向です。文章量を増やすときも、新しい事実を足すなら出典の確認が必要になります。
独自ドメインへ移し、ログインや配信を確認した
サイトの住所には、my-news-pocket.comという独自ドメインを取得しました。最初に希望したnews-pocket.comは、すでに登録されていたためです。
住所を変える作業では、Googleログインから戻る先と、記事データを送る先も合わせて切り替えました。新しいURLで、ログイン、記事の保存、記事配信を確認しています。
コードの検査と31件のテストも実行しました。実画面で「あとで読む」に記事が表示されたことも確認でき、画面と裏側の処理がつながった状態になりました。
ログインや保存まで動くようになると、「自分でもこんな複雑なWebサイトを作れるんだ」と感じられました。見た目が希望に近づいたことと合わせて、制作中にうれしかった場面です。
費用はどのくらいかかった？
最初は、追加費用をかけないことを条件にしていました。サイトの仕組みには無料枠を使い、途中で独自ドメインには費用をかけることにしました。
| 項目 | 今回の構成・費用 |
|---|---|
| Cloudflare Workers・D1 | Freeの構成。利用量には上限あり |
| GitHub・GitHub Actions | 公開リポジトリと標準の実行環境を使用 |
| ChatGPT | すでに利用していた契約を使用 |
| Tavily・有料AI API | 現在の日次更新では使用していない |
| 独自ドメイン | 購入時は1年10.46米ドル。毎年の更新費が必要 |
今回の費用を説明するなら、既存の契約と各サービスの無料枠を使い、独自ドメイン代を追加した形です。
無料版のChatGPTだけで同じ構成を再現できる、と確認したものではありません。また、ドメインの10.46米ドルは購入時の金額です。更新時にはその時点の料金が適用されます。
円での実際の請求額や、既存契約まで含めた総費用は、この記事では計算していません。これから試す方も、すでに契約しているものと、新たに支払うものを分けて考えると分かりやすいと思います。
スマホのホーム画面から使う方法
ニュースポケットは、公開サイトから開けます。ホーム画面に追加すると、次からはアイコンを押してアクセスできます。
記事を見るだけならログイン不要です。「あとで読む」へ保存するときは、Googleでログインします。
iPhoneのSafari
- Safariでニュースポケットを開く。
- 共有メニューから「ホーム画面に追加」を選ぶ。
- 名前を確認して「追加」を押す。
「Webアプリとして開く」が表示された場合は、オンにします。
AndroidのGoogle Chrome
- Chromeでニュースポケットを開く。
- 右上のメニューから、ホーム画面への追加に進む。
- 名前を確認し、画面の案内に沿って追加する。
「ホーム画面に追加」「インストールしてショートカットを作成」など、名称は端末やバージョンによって異なる場合があります。
この2枚は、AppleのSafariの手順やGoogleのChromeの手順をもとに作った説明用の画像です。実機の写真ではなく、画像内のサイト画面や記事も操作イメージになっています。
AIと一緒に作って分かったこと
大変だったのは、希望を伝えて少しずつ直す工程
今回、大変だったのは指示の仕方でした。何を作りたいかに加え、どんな機能が必要か、どう直せば使いやすいかを、その都度考える必要がありました。
ニュースの集め方は、最初の案から変更しています。思っていた方法でできないことがあれば、代替案を探す。その案が、自分の欲しいニュースや使い方に合うかを確かめる。探りながら進める場面が何度もありました。
画面も同じです。「見やすくして」から一歩進めて、「見出しを多く見渡したい」「記事を1件ずつ分けたい」と伝えると、直してほしい場所がはっきりしました。
AIにはコード作成や調査を進めてもらえます。そのうえで、読みたいニュースや好みのデザインを決め、実際に使って確かめるのは自分の役割でした。
後から触れるように、制作記録も残した
今回は、実装と並行して「制作記録・運用手順書」を作ってもらいました。
どのファイルが画面に関係するのか。ニュースの条件を変えるにはどこを直すのか。公開サイトを更新するときは何をするのか。実際の構成に合わせて、こうした内容を記録しています。
これから同じように作るなら、「欲しい機能」「見た目の参考」「費用の条件」を先に伝え、小さく動くものを見ながら直していく進め方が参考になると思います。その過程も残しておけば、後から修正したいときにたどれます。
ニュースポケットも、日々の記事の選び方や読みやすさは、使いながら調整していきたいところです。
コードはGitHubのnews-pocket、詳しい制作の流れや操作は制作記録・運用手順書にまとめています。
この記事は主に2026年10月16日までの制作記録をもとにしています。定時更新の継続実績と、スマホ実機でのホーム画面追加・ログイン復帰は、確認を残している項目です。コードのテストと実機での操作確認は分けて記録しています。
コメント