公開ページに戻る
Day 9 - 12/9

Sentiment Analyst - ニュース感情分析アプリ

ReactJavaScriptAnt Design
GenSparkClaude
Sentiment Analyst - ニュース感情分析アプリ

概要

概要


日々触れるニュースに対して、自分がどう感じたかを記録・可視化するWebアプリです。ニュースを見て「なんとなく嫌な気分」「ポジティブになった」という感情を数値化して記録することで、自分のメンタル状態を客観的に把握できます。

主な機能


  • 感情スコアリング: ニュースの見出しに対する感情を-50（ネガティブ）〜+50（ポジティブ）で記録

  • 平均スコア表示: 記録したニュース全体から、今の自分のメンタル傾向を一目で確認

  • ニュースリンク集: Yahoo!ニュース、Google News、NHK NEWSなどへ素早くアクセス

  • 記録の一覧管理: 過去の記録を日付順に表示し、ソースごとにフィルタリング可能

  • データ永続化: ブラウザに自動保存されるので、いつでも記録を振り返れる


こんな時に便利


  • 毎日のニュースチェックと一緒に、自分の心の状態を記録したい

  • ネガティブなニュースに触れすぎていないか確認したい

  • どんな情報源が自分の気分に影響を与えているか分析したい

  • 日記代わりに、その日気になったニュースと感情を記録したい


使い方


1. 左側の「News Dock」からニュースサイトにアクセス
2. 気になる見出しをコピーして戻る
3. 「Analyze Console」に見出しをペースト
4. 情報源とその時感じた感情スコアを設定
5. 「記録する」ボタンで保存完了

リンク

デモを見る

制作時間

0.5時間

学んだこと・振り返り

技術的な学び


  • Ant DesignというUIライブラリを使うと、少ないコードでプロフェッショナルな見た目のアプリが作れることを知りました

  • ブラウザのLocalStorageという機能で、サーバーを使わずにデータを保存できることが理解できました

  • レスポンシブデザイン（PCとスマホで見た目を変える）の仕組みがわかりました


AIとの協働で気づいたこと


  • 最初に詳細な要件を伝えることで、後からの修正が少なく効率的に開発できる

  • スクリーンショットを使って「ここが見づらい」と具体的に伝えると、的確な改善案が返ってくる

  • 専門用語を知らなくても、「こういう感じにしたい」という感覚的な要望で十分通じる


次に活かしたいこと


  • データをグラフで可視化する機能を追加して、感情の変化を視覚的に見たい

  • 週ごと・月ごとの平均スコアを表示する機能も面白そう

  • 他のジャンル（読書記録、映画感想など）でも同じような記録アプリを作ってみたい

初回プロンプト（計画）

# 25日間AIチャレンジ - Day 9のアイデア相談 ## 制約条件 - **制作時間**: 30分 - **必須要素**: データを保存する - **ストレージ**: LocalStorageのみ ## こだわりポイント（特に重視） - 📱 **レスポンシブ**: PC・タブレット・スマホ対応 - 💡 **革新性**: 新しさ、独創性、ユニークさ - 🎨 **デザイン・UI/UX**: 見た目の美しさ、使いやすさ、直感的な操作 ### 📐 採用デザインガイドライン **Ant Design** - **特徴**: Alibaba開発。管理画面・エンタープライズ向け、統一感のあるコンポーネント - **デザイン要素**: 豊富なコンポーネント、ビジネス向け、React対応 - **参考サイト**: [Ant Design公式](https://ant.design/)、[Ant Design Pro](https://pro.ant.design/)、[Alibaba Cloud](https://www.alibabacloud.com/) **このガイドラインの雰囲気やデザインパターンを踏襲したWebアプリを提案してください。** ## 選択したキーワード 1. ニュース 2. 記録 3. 比較する ## お願い 上記の制約条件と選択したキーワードを考慮して、30分で作れる具体的なWebアプリのアイデアを3つ提案してください。 各アイデアには以下を含めてください： 1. **アプリ名**（キャッチーな名前） 2. **何を解決するアプリか**（1行で） 3. **主な機能**（3つ程度） 4. **なぜこの時間で完成できるか**（簡潔に） できるだけクリエイティブで、キーワードを意外な形で組み合わせたアイデアを期待しています。

チャレンジ生成ツールで作成した最初の計画です

メインAIツールの評価

GenSpark

⭐⭐⭐

良かった点

- 要件を伝えるだけで、必要な機能が全て実装されたアプリが完成した - Ant Designのコンポーネントを効果的に活用し、プロフェッショナルな見た目に - スマートフォン対応の問題点を指摘すると、即座にレイアウトを改善してくれた - LocalStorageの実装やデータ管理のロジックが最初から正確で、エラーが一切なかった

改善してほしい点

最初のYahoo!ニュースのURLがアクセス拒否される問題があったが、すぐに修正してもらえたので大きな問題ではなかった

総合コメント

技術的な知識がなくても、「こういうアプリが欲しい」という要望を自然な言葉で伝えるだけで、実用的なWebアプリが完成したことに驚きました。特に、後から「記録一覧が見づらい」と伝えた時の改善提案が的確で、ユーザー目線でUIを改善してくれる点が素晴らしかったです。

公開日: 2025/12/8