うえきのブログ

妙高市に住んでいるサーバエンジニアのブログです

Scratch3でCHaserを遊べるようにしてみました

みなさんU16プログラミングコンテストをご存知でしょうか？2011年に北海道旭川で始まった、16歳以下の高校生、中学生、小学生を対象としたプログラミングコンテストです。

CHaserについて

旭川では競技部門、作品部門、IoT部門があり、わたしの地元新潟県上越地域（上越市、妙高市、糸魚川市）では2021年から競技部門の準備を進め、11月3日に大会を開催しました。

競技部門ではCHaser (チェイサー) という対戦型プラットフォーム上で、1対1 のプログラム同士の対決を行います。

CHaserクライアントは、Java、HSP、Rubyなど様々なプログラミング言語で開発が可能です。上越妙高ではPythonを使ったプログラムを事前講習会で教え、大会に参加してもらっています。

お陰さまで2年目となる今年は事前講習会の参加者も増え、対象も小学校低学年から中学生と広い年齢が参加してくれています。ただ、やはり小学校低学年の子たちがVSCodeを使ってPythonのプログラムを書くのはやや難しいという課題がありました。

そこで今回は小学生にも馴染みのあるScratch3を使ってCHaserクライアントが作れるようにしてみました。

Scratch3 CHaser機能拡張

Scaratch3版CHaserクライアントの使い方

技術解説の前に、まずは遊び方を紹介したいと思います。 Scatch3（Webブラウザ）からは直接CHaserサーバーと通信ができないため、scratch-chaser-proxy という中継プログラムを経由することでやりとりを行います。

前提状況

  • CHaserサーバーを実行してゲームができる環境をあらかじめ用意してください。
  • インターネット環境が必要です。
  • Scratch3の利用には対応したブラウザーが必要です（Chromeの最新版を推奨）
  • パソコンは1台でもできますし、4つの役割をそれぞれ異なるパソコンにすることもできます。
    • CHaserサーバー
    • Coolクライアント (Scratch3を操作するブラウザ)
    • Hotクライアント
    • scratch-chaser-proxy を実行するパソコン

実行手順

scratch-chaser-proxy

  1. GitHubのリリースページからお使いのOSに対応したプログラムをダウンロードします。
  2. コマンドプロンプトまたはターミナルからダウンロードしたファイルを実行します。

CHaserサーバー

  1. CHaserサーバーを起動し「TCP接続待ち状態」にします。

Coolクライアント (Scratch3)

  1. ブラウザで https://ueki-kazuki.github.io/scratch-gui/ を開きます。
  2. 拡張機能から "CHaser" を追加します。
  3. ブロックから "127.0.0.1 に Cool で ユーザー1 という名前で接続する" をスクリプトエリアにドラッグアンドドロップします。
  4. 必要に応じて接続先CHaserサーバーのIPアドレスを変更してください。
  5. ブロックを実行します。
  6. CHaserサーバーのCoolの状態が「準備完了」になれば接続成功です。
  7. 繰り返しなどいろいろなブロックを組み合わせて動かしてみましょう！

ゲームをやり直すときは

  1. ゲームのたびに scratch-chaser-proxy を実行し直す必要はありません。
  2. 再度ゲームをしたい場合は、CHaserサーバーを起動して「TCP接続待ち状態」にしたら、Scratchを再度再生するだけでOKです。

技術的な仕組み

Scaratch3 機能拡張

Scratch3用のブロックは機能拡張を開発しました。ここではJavaScriptを使います。

機能拡張の作り方のチュートリアルがあるので、これらを参考にさせていただきました。

後述しますが、scratch-chaser-proxy とはWebSocketを使って通信を行っています。CHaserサーバーからの応答を待つためには Promise を使った同期処理が必要になります。ここがJavaScriptの非同期処理に慣れていないと、やや難しい点です。

コードはGitHubの作業ブランチにアップしてあります。

scratch-chaser-proxy

前述の通り、Scatch3（Webブラウザ）からは直接CHaserサーバーと通信ができません。そこで scratch-chaser-proxy という中継プログラムを経由することでやりとりを行います。

Scratch3とCHaserの通信の流れ

このプログラムはGo言語を使いました。GoのおかげでWindowsとMacそれぞれの環境用のバイナリを簡単に作ることができます。

最新コードはGitHubのdevelopブランチにアップしてあります。

機能制限、今後の予定、質問とか

Scratchの機能拡張をCHaserのアイコンに置き換える

Scratchの機能拡張を開くとでてくるアイコンは、上で紹介したチュートリアルの絵のままになっています。

CHaserのアイコンを探したのですが見当たらず、どなたかにオシャレなアイコンを描いていただけるとうれしいです。

Lookup, Searchが未実装

GetReady, Walk, Putは使えますが、LookupとSearch命令はまだ実装できていません。

仮に値が取れたとして、Scratchでどう活用すればいいのかが思いつかず、手つかずとなっています。

ゲームセット変数がほしい

ループブロックで「ゲーム終了するまで」を実現したいのですが、ゲーム終了を表すブロックが未実装です。

テスト・テスト・テスト

はい、テスト全然書けてないです。WebSocketまわりはmock使ってテスト書いておかないと。

XXXXの動きがおかしくない？

すいません、まだ十分な動作確認を行っていないのでバグがたくさんあります。 9月中に時間をみて直していきたいと思ってます。

そもそもXXXXがおかしくない？

Scratch3機能拡張のお作法、JavaScriptのお作法、Goの、GitHubリポジトリの、、、と、いろいろな面で至らない点があるかもしれません。

もし「こうした方がいいよ」という点があればプルリクいただくか、Twitterやはてブで教えてください！

プログラミング教材としても

今回の開発で用いた技術は、プログラミング初級者にも手頃な教材なんじゃないかなと思います。

  • JavaScript
    • npm / yarn
    • Promise （非同期処理）
  • Golang
    • Socketプログラミング
    • Gin （Webフレームワーク）
    • Makefile
  • WebSocket
  • Git / GitHub

新卒の方の半年後の研修くらいでちょうどいいかもしれません。プログラムしたものが視覚的に動きはじめると楽しいですね。

最後に

Scratchを使って、より広い年齢層の方にCHaserを楽しんでもらい、そしてU16プログラミングコンテストへの興味を持ってもらえたらと思います。

CHaserを使ったU-16プログラミングコンテストは旭川や上越だけでなく、全国に広がっています。

ぜひお近くの市町村で開催されていれば、参加してみてください！