白猫のメモ帳

C#とかJavaとかJavaScriptとかHTMLとか機械学習とか。

Chrome拡張 + Native MessagingでAIナレッジログを作る

AIエージェント Chrome拡張

こんにちは。
AI使ってますか？
これを書いている時点ではちょうどFable5の利用が停止されてしまいました。
いい感じのモデルだったので早く規制解除されてほしいです。

ナレッジが欲しい

それはそうと、AIを日常的に使っているととにかくナレッジを渡したいですよね。
MCPとかプラグインとかがいろいろあって便利なのですが、意外と認証とかの問題で組織で利用できないとかいうこともありますよね。
それにそもそもログインが必要だけどMCPが用意されてないとかいうパターンもあったりします。

Chrome拡張なら小回りが利きそう

私はもともと割とChrome拡張を作るのが好きなのですが、AIエージェントが進歩してきて最近は作る手間もぐっと少なくなりました。
Chrome拡張はブラウザで動くので、認証もブラウザそのままだし、開いたページ以外も基本見ないし、割とコントロールしやすいです。
これを使って取得したデータをローカルファイルに保存しておけば、ナレッジとして便利に使えそうですよね。

ですが、残念ながらクライアントサイドのスクリプトで動くのでlocalStrageとかは使えてもファイルへのアクセスは基本的にできません。
できてしまったらマルウェアがすごいことになってしまいますしね。
ただ、実はNative Messagingという仕組みを使えばChrome拡張からローカルにインストールされたアプリケーションとメッセージのやり取りをすることができます。
developer.mozilla.org

Windowsだとイマイチ

github.com

詳しいコードとかはGitHubのサンプルを見てもらいたいのですが、要点を絞って解説します。
インストールの方法とかもREADMEを読んでください。

まず、Chrome拡張にはmanifest.jsonという設定ファイルがあるのですが、その中のpermissionsにnativeMessagingを設定する必要があります。
permissionsはその名の通りChrome拡張ができる権限をコントロールする項目です。Chrome拡張を作る際には結構重要なのですが、AIに任せればだいたいいい感じにしてくれます。

実行するアプリケーションはMacだと普通にシェルとかが指定できるんですが、Windowsだとなぜかexeしか指定できないようです。Windoesの場合は好きな言語でexeを作りましょう。サンプルではC#ですね。

そしてレジストリへの登録が必要です。MCP使うよりレジストリ登録するほうがハードル高いだろという声は聞こえないことにさせてください。
Macだと「$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts/」というパスにアプリマニフェストを置けば大丈夫です。
ちなみにアプリマニフェストにはChrome拡張のIDを指定して、対象の拡張からしかメッセージングできないようになっているので、インストールの際にはIDの確認が必要です。

このサンプルアプリはただ開いたページを記録していくだけなので、こんな感じになります。
これだけだと特に意味はないですが、もちろん特定のページで画面内の要素を取ってくるとか好きなことができるので、お好みのデータをお好みの形式で保存すると良いかと思います。

{"url":"https://github.com/","title":"GitHub","time":"2026-06-13T15:35:17.6290685+09:00"}
{"url":"https://github.com/nyago-d/ReadingLogExtension","title":"nyago-d/ReadingLogExtension","time":"2026-06-13T15:35:49.1819127+09:00"}
{"url":"https://shironeko.hateblo.jp/","title":"白猫のメモ帳","time":"2026-06-13T15:36:39.9723413+09:00"}
{"url":"https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Native_messaging","title":"ネイティブメッセージング - Mozilla | MDN","time":"2026-06-13T15:48:09.5517377+09:00"}

欲しいデータをいっぱい集めましょう。
まぁ、有効に活用できるかはまた別の問題ですけどね。
それでは。

AIと遊ぶゲームをAIと作ろう

AIエージェント Codex

こんばんは。
急に夏みたいな暑さでびっくりしますね。

さて、AIで遊んでますか？
前回ローカルLLMで遊ぶ記事を書きましたが、私は最近もちまちまと触っています。

shironeko.hateblo.jp

ゲームを作ろう

ところで最近ChatGPTやCodexで利用できる画像生成が「GPT Image 2」になって、これが結構すごいぞと話題になっています。
ゲームの素材とかを作れるので、ゲームを作ってみたよみたいな話をちらほら見かけます。
せっかくGWだし私も試しに作ってみようと思います。

とはいえ、ゲームというのはちゃんと作るのには途方もない労力と時間がかかるものです。
今回は「AIと一緒に遊ぶゲーム」というのを基本コンセプトにして、ゲーム自体のクオリティはあまりこだわりません。

最近はAITuberとかも増えてきて、自分でゲームを遊ぶAIというのが現実的になってきたと思います。
ただ、あくまで人間向けのゲームをAIが頑張ってプレイするという感じなので、なかなかハードルが高いように思います。
なので今回は人間用のインタフェースとAI用のインタフェースをそれぞれ用意し、AIに遊びやすいゲームを作ってみるというのをやってみます。

また、基本的にAIエージェントで作るので、スキルなどを使ってゲームを無理なく拡張していけることも同時に目指したいです。
今回使うのは「GPT Image 2」をエージェンティックにそのまま呼び出せるCodexアプリと、レートリミットの関係でGitHub Copilotも併用します。
GitHub Copilotはプレミアムリクエスト制から従量課金制になるらしくて残念ですね。

ちなみにこのゲームで遊んでほしいとかではなく、こういうコンセプトのゲームがあったら楽しいと思っているという話です。
願わくはもっと面白いシステムとかでこういうコンセプトのゲームがいっぱい出てきたらうれしいなと思っています。

どうやって作るの？

さて、ゲームエンジンとか使ってもいいのですがせっかくなのでスクラッチで作ってみたい気持ちです。
ここはCodexの実力を信じて、基本的なコンセプトとゲームシステムを伝えてとりあえず作ってもらいます。
こんな感じのプロンプトを投げました。

AIと一緒に遊ぶゲームが作りたいです。
テーマはパートナーキャラと一緒に探索するローグライクとかがいいかなと思っていますが、いいアイデアがあれば教えてください。
キャラクターやUIなどはソシャゲのようにかわいらしい感じだと良いです。
ゲームは人間用のビジュアル面でも楽しめるインタフェースと、AIが処理しやすいようなAPIのようなインタフェースがあるといいです。
ローカルLLMを想定し、例えばWebSocketで人間とAIがそれぞれにゲームに接続するとかそんな感じをイメージしています。
疑問点があれば聞いてください。まずは計画を立ててください。

返ってきた質問事項はこの程度でした。

確認したい点は3つです。

ゲームはまず ブラウザゲーム として作る方針でよいですか？
戦闘は ターン制ローグライク と リアルタイム寄りハクスラ のどちらが好みですか？
パートナーAIは、最初は 助言役、自律操作キャラ、プレイヤー操作そのもの のどれに近い形がよいですか？

ブラウザゲーム、ターン制、自律操作キャラでお願いしました。

ちなみにCodexのimagegenスキルでもある程度問題なく作ってもらえるとは思うのですが、今回は「agent-sprite-forge」というスキルを使わせてもらっています。
github.com

なんかそれっぽいじゃん

さすがに一発でいい感じにはならなかったので何往復かやり取りしましたが、初版でだいたいこんな感じです。
ゲームシステム的にはファイアーエムブレムをかなり真似させてもらっています。

見た目的には案外それっぽいですね。ただし、AI機能は未実装でルールベースで動きます。
宝箱があるのに開けられなかったり、モンスターが壁をぶち抜いて来たりするけどまぁいいとしましょう。
プレイヤーキャラ、敵キャラ、マップオブジェクト、立ち絵まで全部用意してくれるのがいい感じです。

ただし、中のコードは割とすごいことになっていました。
ロジックがゴリゴリにべた書きしてあるので、リファクタの勘所がないまま進めていくとゲームを拡張していくたびに破壊されていく気がします。
とりあえず環境変数に逃がしたり設定ファイルに分割したりといったスケールしやすい感じにしてもう少し改良していきます。
設定ファイルはjsonでもいいけど、人間が編集しやすいようにtomlにしてみました。

全員AIでもいいのでは？

人間向けのUIとAI向けのUIを作るということは、全キャラがAIでも別に成り立ちます。
そうするとAI同士に会話とかしてほしいなと思って、会話が見やすいようにしました。
ついでにキャラも変えたんですが、ちょっと小さいですね。この辺りはゲーム作りの勘が全然ないので難しい。
SDキャラっぽいけど立ち絵にも使えそうな、なかなかにハイクオリティな画像をしれっと作るのがすごい。

で、まぁUIをいろいろ調整したり、LMStudioと連携してAIに操作してもらうようにしたり、AivisSpeechと繋げてしゃべるようにしてみたりしていったんこんな感じです。

他のシステムとつなぎこむのとかはAIエージェントにはお手の物で、それはもうサクッとやってくれます。
ただ、AIの挙動の調整とかはかなり難しくて、全然思ったように動いてくれません。
ゲームシステムの問題なのか、AIに渡している情報が不足しているのか、モデルの性能が足りていないのか、プロンプトが良くないのか。
ゲームバランスとAIのバランス両方考えないといけないのが難しい。

スキルを作ろう

ある程度ゲームシステムが作れると、マップやアイテムなどを増やしていきたくなりますよね。
ただ、そのたびに毎回プロンプトと書いたりするとスタイルや仕様がぶれてしまいそうです。
そんなわけでこんな感じでスキルをピコピコと作っていきます。

中身はこんな感じですが、詳しくはGitHubのリポジトリを見てください。
一応スキル自体の更新もできるようになっていて、ゲームシステムごと追加するときもある程度は頑張ってくれるはず。たぶん。

---
name: create-item-bundle
description: "このリポジトリ専用のアイテム一式を作成・修正するスキルです。主に data/consumables の消耗品 TOML、アイコン素材、宝箱 sequence や敵 drop への配線を扱います。回復薬、消耗品、戦闘中に使うアイテム、宝箱報酬、敵ドロップ、アイテム効果種別の追加を依頼されたときに使います。"
---

# Create Item Bundle

## 概要

現在のアイテム実装では、装備以外の入手物は `data/consumables/*.toml` の消耗品として扱います。実装済みの効果は HP 回復のみで、使用時は `use_consumable` action によって消費されます。

アイコン素材が必要な場合は `$generate2dsprite` または `imagegen` を併用します。このスキルでは、消耗品仕様、TOML、アイコン参照、宝箱/ドロップ配線、効果拡張時の実装範囲、検証を担当します。

## 必ず確認するもの

1. 既存のアイテム契約を確認します。
   - `data/consumables/*.toml`
   - `data/stages/*.toml`
   - `public/assets/ui/`
   - `public/assets/equipment/icons/`
   - `src/shared/types.ts`
   - `src/server/game/config.ts`
   - `src/server/game/equipment.ts`
   - `src/server/game/reducer.ts`
   - `src/client/components/DungeonBoard.tsx`
2. ファイルを作成・変更する場合は `references/project-item-format.md` を読みます。
3. icon パスは `/assets/...` 形式にします。
…

ゲーム作りって大変ですね

今回のコードです。
github.com

いやまぁ大変だろうとは思っていたんですけどね。
正直要素を追加していくのはそんなに辛くないのですが、無限にわいてくるバグっぽい挙動を直していこうとするといくら時間があっても足りないです。
製品を作っているわけじゃないので、「あーバグってるな」くらいの穏やかな気持ちで楽しく開発しないとですね。

というわけで、人間向けインタフェースとAI向けインタフェースの両方があるゲーム。
面白いのをお待ちしておりますので、ぜひ誰かお願いします。

ローカルLLMで遊ぶの楽しいよね

LLM

こんばんは。
ずいぶん久しぶりになってしまいました。

気が付けば新年度ですね。
と思ったらもう初夏みたいな日もあってよくわかりません。

ローカルLLMがいい感じになってきた

最近qwen-3.5とかgemma4とかの割と小さいサイズのローカルLLMの精度が上がってきているみたいです。
私のPCのグラボはVRAM12GBなので、qwen-3.5だと9Bのモデルまでは割とすんなり動きます。
しかもこれらのモデルはマルチモーダルに対応しているので、画像をインプットにすることもできます。

そんなわけである程度の速度、ある程度の精度ならずっとLLMを動かせる環境が手に入ったので何か作ってみます。

ずっとしゃべるよ

画像を渡せてコストも気にしなくていいということで、画面のスナップショットを定期的に撮ってなんか話してもらいます。
最近はAITuberみたいな文脈で似たようなことをしてる人とか、ツールを作ってる人もちらほら見かけますね。
今回出来たものはこんな感じ。

おかずではないと思う。

しゃべりすぎて口パクが動いてないことにあとで気づいた。

キャラとかおしゃべりとかの話

今回はキャラを表示してしゃべる部分はSpriTalkというアプリを使わせてもらいました。
v1.1.0にしたらなぜか体験版扱いになってしまったのが不思議。
booth.pm

4枚の画像を用意するだけでパクパクしてくれてかわいいです。
音声はVOICE BOXを利用しましたが、AivisSpeechとかも対応しているみたい。

画像は元になる画像を1枚作成。顔にマスクして表情差分を作って背景透過って感じです。
ComfyUIでやりましたが、Nano Bananaとかでもがんばればできるんじゃないでしょうかたぶん。

ツールはいろいろ作ってくれてる人がいるので好きなものを使いましょうということでね。
自分でカスタマイズしたい場合は自分で作るのも楽しいと思います。

LLMとかコードとかの話

ローカルLLMはollamaを使って動かしています。サンプルのコードではLM StudioとかCodexとかも対応しています。
この辺りはもうAIエージェントに「こういうこともできるようにして」って言えば勝手にやってくれる感じがします。
SpriTalkとの連携もAPIのスキーマだけ渡したら勝手にできてました。賢いね。

.envでいろいろと設定できるのですが、反応速度をよくするための工夫として、Thinkingは切っておくのがおすすめです。
もちろんThinkingしたほうが精度はいいのですが、どうしてもレスポンス速度が気になります。
あとはCAPTURE_SCALEで画像サイズを調整できます。
0.25とかでも案外認識するので、小さめにすると回答速度が速くなっていい感じです。

キャラ設定はjsonファイルで作るのですが、なんかいくつか設定するところがあってちょっとムズイ。
システムプロンプトと人格だけでいいような気はする。

まじめに画面の解説とかされても面白くないので、こんな設定でしゃべらせてました。
Amazon見てるとなんでも買わせようとしてくる。

  "personality": "明るく観察力が高い。めちゃくちゃパッションで話す。",
  "speechStyle": "すごく早口。",
  "systemPrompt": "あなたは画面を見ながら話すキャラクターです。見えているものをベースにごく短く自然に話してください。",
  "observationPrompt": "画面に見えているものの解説は不要です。とにかくノリと勢いでしゃべってください。",

感情とかも返してもらって表情を出し分けるとかもできるはずなんですが、画像のほうをいろいろ用意する気力がなかったので特に機能していないです。
文字数に関してはプロンプトに入れて収まるようにしてもらってるんですが、超過してぶった切れることもちらほら。この辺は改良の余地がありそうですね。

欲しいものを簡単に作れる時代だなー

開いてるウィンドウとかカメラとかを取得するのにPowerShellを使ってるっぽいんですが、自分でこんなの書ける気がしないですね。
一応コードも置いておきます。ほぼVibe Codingなので遊ぶ場合は自己責任でお願いします。
github.com

それでは。