3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@akichika(Akichika Tanaka)

toioのビジュアルプログラミングツール「Code Maker for toio」（非公式）を作ってみた

3
Last updated at Posted at 2026-05-28

概要

手軽にプログラミング体験ができるロボットトイ「toio」を、ブラウザだけでビジュアルプログラミングできたり、JavaScriptのコードに変換したり、「トイオ・プレイグラウンド コマンド」のカードを認識してコードに変換できるツールをClaude Codeで作りました。非公式な趣味のアプリですので、あそびとして触ってみてください。

こちらからアクセス：Code Maker for toio™

overview

GitHubでソースコードも公開しています。

作ったもの

Code Maker for toio™ というブラウザベースのビジュアルプログラミング開発環境を趣味で作って公開しました。

Scratchやなどでおなじみのビジュアルプログラミングのブロックを組み合わせてプログラムを作り、WebBluetoothで直接 toio キューブを動かせます。インストール不要、ビルド不要、ブラウザを開けばすぐ使えます。「トイオ・プレイグラウンド コマンド」のカードを認識して、プログラムを変換することもできます。

なお、あまり機能が豊富ではないので、本格的なビジュアルプログラミングにはtoio公式の「toio Do」がおすすめです！

主な機能

機能 説明
🧩 ビジュアルプログラミング JavaScriptに基づいたプログラムをScratch風のブロックで直感的に作れる
📡 ブラウザからWebBluetoothで簡単接続 ブラウザから直接 toio キューブに接続できるので環境構築不要。最大4台同時制御
🖥️ 2D/3D シミュレーター 実機なしでも動作確認できる・デジタルツインで実機の動きも反映できる
📸 カードスキャナー 「トイオ・プレイグラウンド コマンドのカードを並べて、写真からブロックに自動変換できる
🤖 AI コード生成 Gemini / OpenAI / Claude に言葉で指示してブロック生成
🌐 多言語対応 日本語 / English / 中文 を切替可能

なぜ作ったか

Claude Codeの練習として、JavaScriptのコードに対応するビジュアルプログラミング環境を遊びで作りたいと思っていました。また、2026年5月に発売された「トイオ・プレイグラウンド コマンド」でカードを並べたものをそのままビジュアルプログラミングやJavaScriptのコードに変換出来たら面白いかな、という気持ちもありました。とりあえず思い付きでプロンプトをたたいたらできてしまったというのが本音です。

繰り返しますが、あまり機能が豊富ではないので、本格的なビジュアルプログラミングにはtoio公式の「toio Do」がおすすめです！

画面紹介

ビジュアルプログラミング ワークスペース

blockly workspace

Blockly ベースのワークスペースです。カテゴリは 動き・LED・サウンド・制御・センサー・出力 の 6 種類 + 標準の数値・テキスト・変数・論理・関数。

toio 専用のブロックがある程度揃っています（主要機能のみ・実際の機能の半分程度）。たとえば「速さ 60 で 1 秒間動く」「右に速さ 50 で 0.5 秒間回転」のようなブロックを並べていくだけでプログラムが作れます。

右パネルには 2D/3D シミュレーターが常に表示されているので、実機なしでもすぐ動作確認できます。

カードスキャナー

個人的なこだわり機能です。「トイオ・プレイグラウンド コマンド」のカードをカメラや写真ファイルで撮影すると、ビジュアルプログラミングのブロックに自動変換します。

toio PG Card
card-scanner-ex1
card-scanner-ex2
card-scanner-ex3

認識は ローカル処理 と AI（LLM） の 2 段階に対応しています。

ローカル認識（AI 不要）
カードの色とピクセルパターンをスキャンして 24 種類のカードを識別します。Canvas 2D API で画像を解析して、HSL サンプリングで色グループを判定する仕組みです。

1. 画像をスケールダウンして Canvas に描画
2. 7段階の Y レベルで横方向スキャン → HSL サンプリング
3. 多数決でカード色グループを決定
4. 隣接する同色ストリップを結合してカード領域を検出
5. カード内のピクセル解析でサブカテゴリを識別

たとえばオレンジのカードは暗ピクセル密度で「wait_1〜3」「repeat_4〜5」を区別したり、ダークティールのカードは左右の密度バランスで「こうどう1/2」「くりかえしおわり」を判別したりしています。

AI 認識
Gemini / OpenAI / Claude の Vision API を使って高精度な認識もできます。ローカル認識で迷ったときのフォールバックとして使えます。

AI コード生成

ai tab

「星を描いて」「前に進んで右に曲がってを繰り返す」のように日本語で入力すると AI がブロックを自動生成します。Gemini・OpenAI・Claude の API キーを設定するだけで使えます。

生成された XML を ビジュアルプログラミング ワークスペースに直接流し込む仕組みで、ブロックがパッと組みあがります。

コード表示

code view

ブロックから生成されたコードをリアルタイムで確認できます。JavaScript と疑似 Python の両方に対応。

HTML 保存 ボタンを押すと、シミュレーター込みのスタンドアロン HTML をダウンロードできます。CDN 依存なのでそのままブラウザで開けます。

多言語対応

multi lang

ヘッダーの言語セレクターで 日本語 / English / 中文 を即時切替できます。ブロックのラベルや UI テキストだけでなく、AI の挨拶メッセージやエラーメッセージも言語に合わせて変わります。

js/i18n.js に全言語の文字列を定義して t(key) ヘルパーで参照する仕組みです。ブロックの定義時にも t() を呼んでいるので、言語切替でページをリロードするだけでブロック名まで変わります。

技術的なポイント

ビルドなし・インストールなし

依存ライブラリはすべて CDN（Blockly / Three.js）です。npm install もビルドステップもありません。index.html をローカルサーバーで開くだけで動きます。

GitHub Pages でそのまま公開できているのもこの構成のおかげです。

WebBluetooth + BLE プロトコル

js/toio.js に toio の BLE プロトコルを実装しています。モーター制御・LED・サウンド・座標読み取りなど、toio の主要な命令を全部カバーしています。

WebBluetooth は HTTPS または localhost でしか動きません。GitHub Pages がそのまま HTTPS で配信されるので、公開環境でも実機接続できます（Chrome / Edge のみ）。

カスタムブロックの定義

// ブロック定義（blocks.js）
Blockly.defineBlocksWithJsonArray([{
  type: 'toio_move',
  message0: '%1 %2 に速度 %3 で %4 秒間動く',
  args0: [
    { type: 'field_dropdown', name: 'CUBE', ... },
    { type: 'field_dropdown', name: 'DIR', ... },
    { type: 'input_value', name: 'SPEED', ... },
    { type: 'input_value', name: 'DURATION', ... },
  ],
  ...
}]);

// コードジェネレーター（generators.js）
Blockly.JavaScript['toio_move'] = function(block) {
  const cube = block.getFieldValue('CUBE');
  const dir  = block.getFieldValue('DIR');
  const speed = Blockly.JavaScript.valueToCode(...);
  const dur   = Blockly.JavaScript.valueToCode(...);
  return `await toio[${cube}].move(${speed}, ${dir === 'FORWARD' ? speed : '-(' + speed + ')'}, ${dur} * 1000);\n`;
};

Blockly の JSON 定義 + JavaScript ジェネレーターの組み合わせで、toio 専用の命令セットを持つブロックを作っています。

AI との連携

AI に「どんなブロックが使えるか」を伝えるために、システムプロンプトにブロックの対応表を組み込んでいます。AI は Blockly の XML 形式で応答を返すので、そのままワークスペースに流し込めます。

JSON 解析のロバスト性にも気を遣いました。LLM がときどき JSON の外に余計なテキストを書いてしまう問題を、バランスブラケット追跡で対応しています。

// 貪欲マッチではなく、対応する ] を正確に探す
function _extractJsonArray(text) {
  const start = text.indexOf('[');
  if (start === -1) return null;
  let depth = 0, inStr = false, esc = false;
  for (let i = start; i < text.length; i++) {
    // ... 文字列内のネスト・エスケープを正確に追跡
    if (c === '[' || c === '{') depth++;
    else if (c === ']' || c === '}') {
      if (--depth === 0) return text.slice(start, i + 1);
    }
  }
  return null;
}

使い方 （5分でお試し）

すぐ試したい場合

https://akichika.github.io/code-maker-for-toio/ を Chrome か Edge で開いてください。

ローカルで動かす

git clone https://github.com/akichika/code-maker-for-toio.git
cd code-maker-for-toio
python -m http.server 3333
# → http://localhost:3333

実機を動かすには

  1. toio キューブの電源を入れる
  2. + キューブ接続 をクリック
  3. Bluetooth ダイアログからキューブを選ぶ
  4. 実行 ▶

Bluetooth の関係で Chrome または Edge が必要 です。Firefox・Safari は未対応です。

ライセンス

MIT Licenseです。自由に使ってください。

※toio™ はソニー・インタラクティブエンタテインメントの商標または登録商標です。このツールは非公式のファンメイドプロジェクトです。

おわりに

「ブラウザだけで toio をビジュアルプログラミングできる」というコンセプトで作りました。インストール不要で手軽に使えて、かつ実機との接続・AI 連携・カードスキャンといった機能を詰め込んだつもりです。

toio を持っている方はぜひ実機接続で試してみてください。シミュレーターだけでも結構楽しいと思います。

GitHub上でのフィードバック・PR 歓迎です！

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?