30 days AI challenge 22 日目 – day 22

本記事は 2026/02/01 ~ 2026/03/02 の間毎日 AI アプリケーション開発（AI を搭載したアプリ開発 or AI を使用した開発）をテーマに 30 days AI challenge を行う 22 日目のブログポストです。

毎日 AI 開発チャレンジも 22 日目を迎えました。

毎日アプリを作っていると、アイデアが尽き、なかなか良いアプリを思いつかないことがあります。AI 開発にて大幅にコーディングの時間が短縮されたので、アイデアを考えている時間のほうが圧倒的に長いです。

今日はそんなアイデアだしを手伝ってくれる AI アプリです。

アプリ概要
技術要素
終わりに

アプリ概要

アイデア出しのフレームワークはいくつかあると思いますが、今回はいわゆる “ブレインストーミング” や “マインドマップ” と呼ばれるアイデア出し手法をもとにしています（厳密なプロセスに準拠はしていません）。

ユーザーがテーマを入力し、連想ゲームのようにそのテーマに関連するワードや語彙をつなげていきます。ユーザーが自分で関連ワードを追加もできますし、AI による自動生成も行えます。

以下のようにビジュアル化できるようになっており、各ノードを選択することでハイライトしたり新たなワードを追加したり、そのワードが気に入ればそこから深堀を行うこともできます。

深堀を選択すると、そのワードに関して AI がトレンドやトピックをいくつか示してくれます。あくまでも参考情報程度ですがアイデア出しの助けに少しくらいなるでしょう。
ちなみに、思考マップや深堀したデータはデータベースに格納しているので履歴を後から確認できます。

これはおまけ機能ですが、そのワードをさらに深堀るために、思考フレームワークに当てはめる機能もあります。
これはお勧めの思考フレームワークを AI が生成し、思考を手伝ってくれます（正しいやり方に準拠はしていないのであくまでおまけです）。

技術要素

今回のアプリも Blazor にて UI を C# で構築しつつ、マッピングや画面移動、ズームなどリアルタイム操作は JavaScript で処理するハイブリッド構成です。

ノードをドラッグして自由に動かせるのですが、その処理は JavaScript 側で行っています。処理が完了したら Blazor 側に同期をとるような動きになっています。

//JS 側
_onMouseUp: function (e) {
    if (this._isDraggingNode && this._hasMoved && this._dotnetRef) {
        var dx = (e.clientX - this._dragStartX) / this._scale;
        var dy = (e.clientY - this._dragStartY) / this._scale;
        var newX = this._nodeOrigX + dx;
        var newY = this._nodeOrigY + dy;

        // C#のメソッドを呼び出す (JS → C#)
        this._dotnetRef.invokeMethodAsync('OnNodeDragged', this._dragNodeId, newX, newY);
    }
}

//C# Blazor 側
[JSInvokable]  // ← この属性でJSからの呼び出しを許可
public Task OnNodeDragged(string nodeId, double newX, double newY)
{
    var node = FindNode(nodeId);
    if (node != null)
    {
        node.X = newX;  // C#のデータモデルを更新
        node.Y = newY;
        StateHasChanged();  // UIを再描画
    }
    return Task.CompletedTask;
}

参考程度ですが AI を使用した箇所は以下の通りです（AI に要約してもらいました）。

末端ノード（関連ワード）の生成を AI に行わせる機能もありますが、ここは人間が手動でやったほうが良いのか AI の自動生成でもアイデア出しの刺激になるのか、このあたりは使ってみないとわかりませんね。

機能	仕組み	AIへの指示方法
テーマから関連ワード生成	ユーザーが入力したテーマをプロンプトに埋め込み、関連する単語5個をJSON形式で生成させる	「{theme}」に関連する単語やキーワードを5個生成してください → {“words”:[“…”, …]}
末端ノード一括展開	全末端ノードのテキストをまとめてAIに渡し、各ワードごとに関連語3個をバッチ生成させる	各ワードに関連する新しい単語をそれぞれ3個ずつ → {“results”:{“ワード”:[“…”, …], …}}
トレンド・トピック検索	Grounding Search（Google検索連携）を使い、最新情報をリアルタイム取得して要約させる	最新のトレンドやトピックを5〜10件、超簡潔に要約 → 検索ソースURL付きで返却
思考フレームワーク提案	ワードに適したフレームワーク(SCAMPER, SWOT等)をAIが選定し、入力フィールド構成まで生成	思考フレームワークを3つ提案…名前、説明、フィールド → {“frameworks”:[…]}
フレームワーク回答例生成	各フィールドに対してAIが具体的な回答例を1-3行で提案	{frameworkName} の「{fieldLabel}」について具体的な回答例 → テキスト

終わりに

そろそろ AI アプリのアイデアにも行き詰ってきたので、今日はその思いをぶつけた AI アプリとなりました笑

いろいろアイデア自体はあるのですが、やはりいつもよぎってしまうのが “それは ChatGPT や Copilot だけでよくない？” 、”それはすでに世にあふれており、作る必要なくない？” といった考えです。

ChatGPT や Copilot, Claude などチャット UI で完結するもの、ただプロンプトを AI に投げるもの、となるとそれはアプリにするまでもないので、やはりカスタマイズ性を設けるか、チャットでは難しい UI 操作を追加するか、Agent のような自律した機能をつけるか、このあたりが肝になっている気がします。

できればもう少し “クリエイティブ” なアプリを作りたいですが、なかなか簡単には思いつきませんね。

今日も最後までご覧いただきありがとうございました。明日もお願いします。