はじめに
カードとロボットで手軽にプログラミング体験ができるトイオ・プレイグラウンドは、パソコンなどを使わずにお手軽・直観的にプログラミングであそべる製品です。1セットだけ使う場合は特に気になりませんが、ワークショップや教室で複数セット使う際に、カードが混ざったり紛失していないかなど、カードの枚数チェックが意外と大変という課題がありました。
- 種類と枚数が多い：ベーシック48枚、アドバンス96枚
- 複数のセットが混ざると、どのカードが何枚あるべきか分からなくなる
- 手作業での枚数確認は時間がかかり、記憶に頼ると手戻りのリスクがある
そこで、toioのキューブでカードをタッチするだけで自動カウント・検品できるWebアプリを作りました。Web Bluetooth APIを使ってキューブとPCを接続し、カードの読み取り結果をリアルタイムで集計・表示できます。PC・Androidタブレットが必要ですが、Chrome/Edgeなどのブラウザ上で下記にアクセスすれば簡単に使えます。
（※iPad/iPhoneなどの場合BluefyというWebBluetooth対応ブラウザが必要です）
検品の様子：
キューブのタイヤを使って自走することもできるので、ざっと並べて走らせればタッチの手間も省けます。
まだ並べるのが少し手間という課題もあるので今後さらに改善したいと思いますが、少しでもワークショップや授業などの活動が楽になればと願っています。
特徴
- Webアプリなのでインストール不要: ブラウザで開くだけで使える
- どのカードが何枚必要か覚えていなくてOK: 自動判定してくれる
- 不足だけでなく超過も検出: 複数セットが混ざった場合もすぐ分かる
- 完了時に音でお知らせ: 全数揃ったら自動的に通知
デモ・スクリーンショット
起動・検品中の画面
カードの種類ごとに、現在の枚数と必要枚数が一目で分かります。チェック後は右下の履歴ボタンから検品履歴を見ることができます。
全数揃った時の画面
すべてのカードが揃うと、緑色で「全数OK」と表示され、完了音が鳴ります。
リスト表示モード
カード画像ではなく、リスト形式でも表示できます。全体を俯瞰したい時に便利です。
主な機能
1. 自動カウント機能
カードを読み取ると即座にチェック。不足だけでなく、複数セット混入による枚数超過も検出します。
2. 2種類の表示モード
- 画像表示: 実際のカードデザインを再現した分かりやすい表示
- リスト表示: 全体を俯瞰できる一覧形式
3. データ管理機能
- 検品結果をコメント付きで履歴保存(ブラウザのローカルストレージ)
- 検品結果をCSV/JSON形式でエクスポート・インポート可能
4. 複数キューブ同時接続
最大8台まで同時接続可能。複数人での分担検品や、両手での高速スキャンに対応しています。
5. 自走スキャン対応
カードを並べて、その上をキューブに自走(駆動)させながら読み込むこともできます。
使い方
1. アプリを開く
以下のURLにアクセスします。
Web Bluetoothを使用しているため、Chrome/Edge等の対応ブラウザが必要です。
- Safari、iPhone/iPadのChromeは非対応
- iOS/iPadOSの場合はBluefy等のWeb Bluetooth対応ブラウザが必要
2. toioキューブを接続
「toio キューブ 接続」ボタンをクリックし、Bluetoothデバイス選択画面でキューブをペアリングします。
3. カードをスキャン
手元のカードを、toioキューブで次々にタッチしていきます。
4. 完了確認
全てのカードが揃うと「全数OK」が表示され、音でお知らせします。
技術的なポイント
Web Bluetooth APIの活用
このツールは、Web Bluetooth APIを使ってブラウザから直接toioキューブと通信しています。アプリのインストールが不要で、URLを開くだけで使えるのが大きなメリットです。
// Web Bluetooth APIでtoioキューブに接続
const device = await navigator.bluetooth.requestDevice({
filters: [{ services: [TOIO_SERVICE_UUID] }]
});
トイオ・プレイグラウンド専用カードID対応
toioプレイグラウンドシリーズのカードは、それぞれ固有のIDを持っています。このツールでは、そのIDを読み取って自動的に種類を判別しています。
ローカルストレージでの履歴管理
検品結果はブラウザのローカルストレージに保存され、いつでも過去の履歴を確認できます。また、CSV/JSON形式でのエクスポートも可能なため、複数のデバイス間でのデータ共有も簡単です。
実際の活用シーン
ワークショップ後の検品に
例として、CoderDojoなどでのプログラミングワークショップでは、事後などにカードがなくなっていないかや、混ざっていないかを調べる枚数チェックが必要になる場合があります。このツールを使えば、元々のカードの種類や枚数を覚えていなくても単純にタッチするだけでいいので、検品時間を大幅に短縮できると思います。また不足・超過も検出できるので、複数セットにまたがった検品がスムーズにできます。
まとめ
toioプレイグラウンドのカード検品を効率化する非公式ツールを紹介しました。
- パソコンなどのブラウザからアプリインストール不要で手軽に使える
- 自動カウントで検品作業を効率化
- 複数セットの管理がしやすい
ぜひ、現場でのtoio活用にお役立てください!
リンク
- デモアプリ: https://akichika.github.io/toio-playground-card-counter-unofficial/
- GitHubリポジトリ: https://github.com/akichika/toio-playground-card-counter-unofficial
- toioプレイグラウンド公式: https://toio.io/titles/playground.html
本プロジェクトは個人による非公式ツールであり、株式会社ソニー・インタラクティブエンタテインメントとは関係ありません。カード画像は製品実物を写真撮影したものです。