背景
青梅市では毎年1月に「子どもふれあいフェスタ」が開催され、子ども向けの体験型イベントが多数出展されます。CoderDojo青梅も参加しており、昨年はScratchプログラミング体験や塗り絵画像をデジタル水槽にアップロードする企画を実施しました。
今年はさらに進化して「カラー召喚AIバトル」という新しい遊びを準備しています。本記事では、その開発過程と技術的な工夫を紹介します。
カラー召喚AIバトルとは？
子どもたちが色ブロックを組み立て、そのブロック作品から君だけの妖精（戦士）を召喚するアプリ。召喚した戦士が二人でカードバトル風の対戦をする。その様子を生成AIが実況テキストで盛り上げるもの。
- 子どもたちが色ブロックを組み立てる
- USBカメラで色を読み取り、組み合わせに応じて戦士を召喚
- 戦士同士が最大7ターンでバトル
- その様子を生成AIが実況テキストで解説
まるで「自分の作ったキャラが戦う」ような体験を、AIの力で実現します。
技術スタック
生成AIクラウドサービスの従量課金が課題。無料プランで試したが、すぐに無料トークンを使い果たしてしまい、有料プランの青天井が怖いので、ローカルLLM構成を選びました。
- ハードウェア：
- ノートPC (CPU6コア/12スレッド, RAM16GB)
- Raspberry Pi 4 (CPU4コア/4スレッド*, メモリ8GB)
- 画像処理：OpenCV（色検出）+ USBカメラ
- LLMプラットフォーム：Ollama
- 軽量AIモデル：IBM Graniteシリーズ
- プロンプト設計：LangFlow（ノーコードGUI）
- 言語：Python
*: ラズパイはハイパースレッディング非対応
アーキテクチャ概要
一番最初は、デスクトップPCからラズパイにRDP接続して、ラズパイ上に対戦アプリを構築してどこにでも持ち出せる構成だった。ラズパイならば、多くのライブラリやミドルウェアをインストールしても何度でも作り直すことができるから。しかし、ラズパイでの生成AI処理は重い（遅い）。ゲームは応答性能が大切なので、レスポンスを最優先して、ほぼ出来上がった対戦アプリ環境をRYZEN7000シリーズのノートPCへ複製した。
＜図．アーキテクチャ＞
課題と解決策
課題
対戦アプリ開発は、ゲームロジック(緑色部分)と生成AIプロンプトエンジニアリング(赤色部分)が混在していると、機能拡張やデバッグを進めるとどんどんコードが増加し複雑になっていく。
また、初期値としてのプレイヤー属性である名前やスキル、体力、攻撃力などのパラメータを常に保持しつつ、各ターンの行動を遷移しながら実況テキストを生成するには、後述のLangChainやLangGraphといったライブラリを活用したくなる。app.invoke()関数までは使ってみたものの、状態や遷移などのLangGraphライブラリに進むと学習コストが高そうだった。
- プロンプトエンジニアリングに時間がかかる
- ゲームロジックと生成AIのコードが混在し複雑化
- LangChainやLangGraphは強力だが学習コストが高い
解決策
LangFlow を使って、アプリに生成AIの複雑なロジックを組み入れます。LangFlow を使うことでプロンプトエンジニアリングはノーコード開発を実現できるので、対戦アプリのコード開発に注力できます。
プロンプトエンジニアリングは単体で、日本語での指示、例えば「あなたは熱心な対戦バトルの実況アナウンサーです。プレイヤーのパラメータと各ターンの行動を元に、対戦バトルの状況をレポートします」といった指示を繰り返しトライすることが簡単になります。
- ゲームロジックとプロンプト調整を分離
- プロンプト調整はLangFlowでノーコード化
- コーディングはゲームロジックに集中できる
LangFlow とは
LangChain をベースにしたOSSのノーコード開発ツールで、GUIのドラッグ＆ドロップとパラメータ変更でLLM（大規模言語モデル）のアプリや RAG などのワークフローを視覚的に構築できるツールです。
LangFlow のメリット
LLMアプリ開発用のフレームワーク「LangChain」と「LangGraph」を覚えなくてもアプリ開発が進む
- LangChain：LLMアプリ開発に便利。複雑なロジックに強い
- LangGraph：LangChainを拡張したライブラリ。設計が難しく、学習コストが高い
- LangFlow：ブロック型のGUIで、ノーコード開発ができる。気軽にテストと修正ができる
LangFlow の実装ポイント
インストール先のPython環境によってはインストールでエラーが多発したので、venv環境にするか、もっと簡単に試すにはコンテナ版LangFlowをダウンロードした方がよさそうです。
コンテナ版での注意点：
- LangFlowコンテナ版はオールインワンではないので注意
- Chroma DB などのミドルウェアは別途インストールする
- 利用するノードによっては、ライブラリの追加が必要な場合もある
- Ollamaをインストール直後はLocalhostからの受信のみなので、Dockerコンテナからの受信をするため、Ollama側で全てのソース（0.0.0.0）からのアクセスを許可すること
ライブデモ
東京国際フォーラムで開催された「IBM TechXchange Summit Japan 2025」の IBM Champions ブースに「カラー召喚AIバトル」を展示させていただきました。
デモの流れ
- 来場者にカラフルなブロックを組み立てていただきます（時間ないので完成品で代用😅）
- USBカメラでブロック作品を読み取り、色の組み合わせに応じた戦士を召喚します
- 戦士は２人召喚され、最大７ターンでお互いの技を使い対戦します
- 対戦の状況を、IBM Granite AIが生成したテキストで実況してくれます
- アプリ開発に使った LangFlow の実機でプロンプトを調整します
紹介したいポイント
- 対戦ターンの状態維持と、状態遷移する場合のプロンプトエンジニアリングの悩み
- コードを修正せず、LangFlow でのノーコード調整が反映されるインタラクティブ性
- Raspberry Pi単体でも動く部分の生成AI呼び出しと、LEDによるCPUコア別オブザーバビリティ
まとめ
子どもふれあいフェスタ開催の2026年1月25日が期限という明確なゴール設定、それを前倒し開発せねばならくなったIBMイベントブース出展というモチベーションのおかげで、平日夜間と土日を何時間も費やして生成AIを組み込むアプリ開発を学習することができました。おかげで某クラウドのAI認定試験にも余裕で合格という副産物まで得ることができました。
感じたこと
- LangFlow は、アプリのロジック と LLMプロンプト調整 の開発作業を分離できる（高い保守性）
- プロンプトエンジニアリングは、トライ＆エラーを繰り返すのでノーコード開発は便利（学習コスト抑制）
- ローカルLLMは、従量課金を一切気にしなくていいので特におすすめ
次のアクション
- アプリ開発は継続、さまざまな LangFlow ノードの使い方を学ぶ
- 子どもフェスタまでに、軽快なアプリとして完成させる（期限：12月末）
- やってみたいこと：IBM Cloud の GPUベアメタルでローカルLLM（きっと爆速検証）
以上