CHaserWeb:ブラウザ上で動作する対戦型プログラミング学習環境の提案と評価 / i2025-inoue

2025年3月3日(月)のインタラクション2025発表ポスター

Transcript

1. CHaserWeb：ブラウザ上で動作する 対戦型プログラミング学習環境の提案と評価 井上 慎之介, 湯村 翼（北海道情報⼤学） 研究背景・⽬的 CHaser（チェイサー） • U-16プログラミングコンテストで使⽤ されている対戦型プラットフォーム • 参加者が作成したプログラムを1対1で 対決 CHaserWeb • Webブラウザ上にコードエディタ + 実⾏ + 盤⾯表⽰を集約 • 従来の環境構築を不要にし、ブラウザが あればどのデバイスでも活⽤可能に • コードエディタはCodeMirrorを活⽤し， Python コード編集環境を構築 • 実⾏ボタンを押すとブラウザ内のPython インタプリタ（Pyodide）がコードを解 釈し実⾏する • HTML 要素をグリッド状に並べ，ターン ごとの盤⾯状態を視覚的に描画 従来のCHaserの課題 • 実⾏⼿順が複雑 • 実⾏環境構築の難易度の⾼さ • Windows以外では動かすのが困難 →取り組む⼈が挫折してしまう 本アプリの有⽤性を検証するため従来の CHaserとの⽐較実験を⾏った • 実施対象︓ • 札幌⿓⾕学園⾼等学校の⾼校⽣（20名） • 北海道情報⼤学の⼤学⽣（11名） CHaserWebの画⾯ Webアプリでプログラムの開発と実⾏ができる CHaserWebを開発 CHaserWebシステム構成 https://shin3391.github.io/CHaserWeb/ こちらで公開中︕ U16プログラミングコンテストの様⼦ 従来のCHaserの対戦画⾯ ゲ " ム 情 報 番号 質問項⽬ 選択肢・回答欄 1 プログラミングを授業以外でしていますか︖ している/していない 2 従来のCHaserで開発を⾏う際にめんどくさいと思うことや 嫌だと思うことがあれば教えてください ⾃由記述欄 3 CHaserWebは従来のCHaserと⽐べて開発がしやすいと感じ ましたか︖ 1(開発しにくい)〜5(開発しやすい) 4 CHaserのプログラムを開発する際CHaserWebを活⽤したい と思いましたか︖ 1(活⽤する必要ない)〜5(活⽤したい) 5 CHaserWebを活⽤しiPadで開発ができそうですか︖ 1(開発できない)〜5(開発できる) 6 CHaserWebのここが良かったなどがあれば教えてください ⾃由記述欄 7 CHaserWebで改善したほうが良いところがあれば教えて下 さい ⾃由記述欄 8 CHaserWebを活⽤できそうな場⾯があったら教えて下さい ⾃由記述欄 9 その他気になることがあれば教えてください ⾃由記述欄 まとめ アンケートの結果から，従来と⽐べて簡単に導⼊できる点やUI/UX の分かりやすさが評価された⼀⽅，相⼿AIやマップのカスタマイズ機 能などの要望が挙げられた． 今後は，こうした機能拡張やモバイル端末向けのUI 最適化，動作の 安定性向上などを進めることで，より幅広い学習者がCHaserの対戦型 プログラミングを気軽に体験できる環境を⽬指す． 回答結果 評価実験 良かった点 • プログラミングとゲーム画 ⾯がひとつのページで⾒れ ること • 従来のものよりも断然操作 がやりやすくて，実⾏まで の段取りが省かれてやりや すかった 改善要望 • iPadでやる時に対戦画⾯が 少し⾒えないところがある • AIのプログラム，マップな どの変更 コ " ド エ デ * タ