【Fable 5】ClaudeCodeのスマホアプリ版で、通勤時間にニュースアプリをつくってみた

ニュースのAPIと繋いで、完全に自分の好みにあったYahooニュースみたいなiPhoneアプリ作って。 デザインはダーク目で洗練されたものがいい

完成しました！実際にビルド・起動して動作確認済みです。

何ができたか
あなたのサイトに /news ページとして「Prism」(自分専用ニュース) を追加しました。

初回に好みを選ぶ — ジャンル(主要/国内/経済/IT…)と、キーワード(例:「生成AI」)をフォロー

読むほど賢くなる — 記事の「⋯」ボタンから「いいね/興味なし」すると、記事タイトルを解析して好みを学習し、「おすすめ」の並び順が変わっていきます(学習データはあなたのiPhoneの中だけに保存)

Yahoo!ニュース全9カテゴリ をAPIキー不要で自動取得、サムネイル付き
漆黒×ミントグラデーションのダークUI、検索・あとで読む機能つき
ホーム画面に追加するとアプリそのもの — 全画面表示・専用アイコン付き(三角プリズムのアイコンも作りました)

「ちゃんと動いてるか」
npm run build(コンパイル+型チェック)が成功し、サーバーを起動して /news ページ・API・アイコンがすべて正常応答することを確認しました。※ニュース記事の取得だけはこの開発環境の通信制限で試せませんでしたが、公開サーバー(Vercel)上では問題なく動く作りです。

あなたがやること(iPhoneだけでOK、あと2ステップ)
変更を公開する: 今は claude/news-iphone-app-816jlm という作業用ブランチに入っているので、これを本番(main)に合流させるとVercelが自動で公開してくれます。よければ私がマージ用のプルリクエストを作るので、「PR作って」と言ってください(あなたはGitHubで緑の「Merge」ボタンを押すだけになります)。

公開されたら: iPhoneのSafariで あなたのサイトのURL/news を開く → 共有ボタン(□↑) → 「ホーム画面に追加」。以降はホーム画面のPrismアイコンからアプリのように使えます。

PRを作りました！
(GitHubのPRリンクが入っていました)

iPhoneでの操作手順
上のリンクを開く(GitHubにログイン)
下にスクロールして緑の 「Merge pull request」 → 「Confirm merge」 をタップ
Vercelが自動でビルド・公開(1〜2分)
Safariで あなたのサイトのURL + /news を開く
共有ボタン(□↑)→ 「ホーム画面に追加」 で完了。以降はホーム画面のPrismアイコンからアプリのように使えます

ひとつ提案: マージ後にこのPRを私が見張って、もしVercelのビルドが失敗したら自動で修正することもできます。希望なら「PRを見張って」と言ってください。記事がうまく表示されないなど何か問題があれば、スクリーンショットを送ってもらえればすぐ直します。

PRの監視を開始しました。まず現在のCI状況とレビューコメントを確認します。
使用済み 5個のツール
見張り始めたところで確認したら、もう全部終わっていました！おめでとうございます
PRはすでにマージ済み(あなた自身が23:37にマージしてくれていました)
Vercelのデプロイも成功(ステータス「Ready」、ビルドエラーなし)
つまり、Prismはもう公開されています。 PRはマージで閉じたので、見張りもこれで完了です。
今すぐ使えます
https://aiux-official.vercel.app/news

原因はわかっています。キーワードタブは「読み込み済みのYahoo!ニュース記事(約70本)のタイトル」からしか探していないので、大半のキーワードはヒットしないんです。

キーワードタブ専用に、Google News検索(APIキー不要・日本語対応)からも記事を取ってくるように改良します。 これでどんなキーワードでも記事が並ぶようになり、検索タブもWeb全体から探せるようになります。