プログラミング学習環境'BitArrow'の紹介-Webブラウザのみでプログラムが学べる発表 長 慎也（明星大学）
デモ 堀越将之 （明星大学） 長島和平（東京農工大学）
共同研究者
間辺 広樹（神奈川県立柏陽高校）
兼宗 進（大阪電気通信大学）
並木 美太郎 （東京農工大学）

http://bitarrow.eplang.jp/
SS研 教育環境分科会 2017年度

1

自己紹介
• 研究テーマ– プログラミング言語と言語処理系– プログラミング教育• ゲーム制作が趣味– ゲーム制作を通じたプログラミングの学習

SS研 教育環境分科会 2017年度

2

Agenda• BitArrowの特徴• 言語ごとの特徴・実践例– JavaScript–C– ドリトル• クラス管理機能• さらなる機能追加

SS研 教育環境分科会 2017年度

3

プログラミング学習をする上で難しいこと• 開発環境の問題– インストールが大変なものや、管理者権限がなくてインストールできないPCもある– 学校のPC、自宅のPCなどあちこちにインストールする必要がある• 言語の問題– 覚えることが多い– エラーへの対処が難しい

SS研 教育環境分科会 2017年度

4

Webブラウザでのプログラミング学習
環境• セットアップが不要• 家でも学べる• ネットワークに接続されている→他のユーザ・デバイスとデータ共有が容易• Webブラウザだけで学べるプログラミング学
習環境「BitArrow」を開発中

SS研 教育環境分科会 2017年度

5

学習者

既存の環境
• WebブラウザでC言語を学ぶ環境– CloudCoder，CodeWrite→ サーバサイドで実行

PC（Webブラウザ）
プログラムを作成
プログラム送信• インタラクティブ性の高いアニメー
ションなどには不向き• サーバ側に処理系のインストールが必要– 変なコードで壊されないために，サンドボックス化等の対策も必要
SS研 教育環境分科会 2017年度

実行結果送信サーバー
gccなどでプログラ
ム実行
6

BitArrowの特徴

学習者• 学習者の環境セットアップ不要– 教員もPC（Webブラウザ）• 学習者の書いたプログラムをブラウザで直接実行

プログラムを作成
JavaScriptに変換
実行– アニメーションなどのインタラク
ティブ性のある作品を作れる• サーバの負荷・セットアップの手間がBitArrowサーバー
少ない（運営サイドのメリット）
ファイルの保存，– gccなどの処理系不要
ログ収集など– Apache,PHP,mysql等があればOKSS研 教育環境分科会 2017年度

7Agenda• BitArrowの特徴• 言語ごとの特徴・実践例– JavaScript–C– ドリトル

BiｔArrowは現在これら３つの言語が学習できる• クラス管理機能• さらなる機能追加

SS研 教育環境分科会 2017年度

8

JavaScript
JavaScriptをより簡単に書ける「教育用JavaScript」• 学生にとってWebは身近な存在• JavaScriptプログラミングを通じて，日常触れているWebアプリの仕組みを知ることができる
例： ゲーム， LINE(チャット等）• 制作した作品がネットワーク上で共有される体験ができる
QRコードによるスマートフォンでの実行
SS研 教育環境分科会 2017年度

9教育用JavaScriptのコード例
HTMLA
教育用JavaScript

BA
B• 「繰り返し」行う処理にwhile文を使用– waitメソッドは指定の時間(ms)処理を中断させる• 要素を動かすためのmoveメ
ソッド– 長い文が不要
document.getElementById…
SS研 教育環境分科会 2017年度

10

BitArrowの開発環境（各言語共通）• コーディングと実行を一つのウィンドウで行う• エディタの入力補助– 「"」を打つと対となる「"」も自動入力– 実行時に自動セーブ・自動インデント• エラー内容とおおまかな発生個所を表示• 記述したコードはサーバと同期され、QRコードを発行し、スマホなどを通じ生徒間で共有可能

SS研 教育環境分科会 2017年度

11BiｔArrowのエラー表示

SS研 教育環境分科会 2017年度

12

教育用JavaScript 授業実践
• 共同研究者の所属する高校にて• 神奈川県立柏陽高校• 2016年10月6日から11月8日までの間にBiｔArrowを利用(1年生，170名)• 教育用JavaScriptを用いた簡単なアルゴリズム学習– FizzBuzzなど– （数値・文字列の代わりに）画像を表示させるなど，興味を持続させるようにした

SS研 教育環境分科会 2017年度

13

プログラム例HTML<html><body><div name="t"></div></body></html>JavaScriptfor(i=1;i<=40;i++){if(i%3==0 && i%5==0){
addText("t","FizzBuzz");}else if(i%3==0){
addText("t","Fizz");}else if(i%5==0){
addText("t","Buzz");}else{
addText("t",i);}addText("t","<br>");wait(100);}
waitが入ると盛り上がる！
SS研 教育環境分科会 2017年度

14 14

生徒の書いたプログラムの分析• 生徒の書いたプログラムをログとして収集• 処理系がエラーを発生させ、そのエラーが消えるまでの時間は平均して２分未満→自力でのエラー脱出を支援できている• プログラムがうまく動作しない原因– 書き間違い等：約1/5– アルゴリズムや構文の使い方の誤り：約3/4→分岐と反復の使い方，アルゴリズムの構築について考えさせることができている
SS研 教育環境分科会 2017年度

15 15

Agenda• BitArrowの特徴• 言語ごとの特徴・実践例– JavaScript–C– ドリトル

• クラス管理機能• さらなる機能追加

SS研 教育環境分科会 2017年度

16

BitArrow上のC言語の処理系「C-JS」• C言語をJavaScript(JS)に変換しブラウザ上で実行• JavaScriptとC言語は文法的に似ている– 文法はC→Java→JS と受け継いで，基本のところは同じ．演算子や制御構造などに共通点多い→これらの同じ部分は同じコードとして出力• JavaScriptとC言語でデータ構造はだいぶ違う– C言語はすべてがメモリ空間．ポインタあり– JSはメモリ空間を制御できず，動的メモリのみの世界．メモリへの参照がポインタ代わり→これらの差異を吸収するようにコードを出力
SS研 教育環境分科会 2017年度

17C-JS：初学者向けへの配慮• 初期化忘れ– 初期化されていない値には「ゴミ」をわざと混入→ゴミ検出で警告• 配列の範囲外のアクセス– 検出してエラーを出して停止• 無限ループ– 5秒以上の実行で強制停止（scanfなどの待ち時間は除く）
SS研 教育環境分科会 2017年度

18

C-JS: サポートする命令• printf とscanf– フォーマット指定は%f, %d, %c, %s 対応– scanf の変数は1 つだけ指定できる．

• 数値関数（math.h）の一部• 文字列関数（string.h）の一部• rand（malloc やファイルアクセスなどに未対応）

SS研 教育環境分科会 2017年度

19C-JS:グラフィックスライブラリ
fillRectfillOval
clear
setColordrawGrid
setPenmovePengetkeyupdate四角形を描く楕円を描く
画面を消去する
描画色を設定する
座標を判別するための枠線を描画する
線分を描画する（開始点の指定）
線分を描画する（終了点の指定）
キーボードの押下状態を取得する
一定時間（1/60秒程度）待機する

SS研 教育環境分科会 2017年度

20

SS研 教育環境分科会 2017年度

21

授業実践
• 明星大学 情報学部2年前期「プログラミングI」にてC-JSを使用• 1年後期「プログラミング序論」の続き– FreeBSD+gccを使用– 変数，制御構造など• 受講者44人• 2限続き– 1限に単元の説明– 2限に課題

SS研 教育環境分科会 2017年度

22

授業の内容回 学習内容1 入出力，変数，演算
2 繰り返し3 条件判断
4 関数
5 配列
6 構造体
7 これまでの復習
8 ポインタ・参照渡し
9 マクロ
10 配列の参照渡し
11 配列の探索
12 並べ替え
13 総合
14 総合
15 総合

題材
日付の計算，グラフィックスの入門
合計計算，繰り返しの図形表示，アニメーション
数当て，アニメーションの動作変更
三角形の描画，面積の計算，再帰
複数の図形からなるアニメーション，2次元配列
前回のプログラムを構造体に置き換える
確認問題（以降数回実施）
第6回の内容にポインタを適用ゲーム制作:プレイヤーと敵の作成，衝突判定
前回のプログラムを関数にまとめる
ゲーム制作: 弾の発射
ゲーム制作: スコアランキング
作品制作
コンテスト
まとめ
SS研 教育環境分科会 2017年度

23授業時間外の利用• 総アクセス数– 授業時間内：97473回(90%)– 授業時間外：10300回（10%)→教室での演習時間だけでなく，課題をこなすための時間外アクセスがある程度見られたSS研 教育環境分科会 2017年度

24アンケートによる授業の結果
BitArrowがよい (1)から従来の学習環境（FreeBSD）がよい(4)までの4段階の尺度で回答
n=29

BitArrow vs FreeBSD

尺度 人数
1
23
2
3
3
1
4
21(BitArrowがよい)

234(FreeBSDがよい)
SS研 教育環境分科会 2017年度

25アンケートで集まった意見• よい意見– 直感的に操作できる– エディタの補完機能– エラーの把握が楽– どこでも使える– ゲームを作るのが楽しい• 悪い意見– ネットで調べたものが(C-JSと一般的なCで）互換性がなくて)実行できない– 一般的なCと異なる動作をするので混乱する
SS研 教育環境分科会 2017年度

26

Agenda• BitArrowの特徴• 言語ごとの特徴・実践例– 教育用JavaScript–C– ドリトル• クラス管理機能• さらなる機能追加

SS研 教育環境分科会 2017年度

27

ドリトルとは• ドリトルとは– 日本語の命令でプログラムが書ける– オブジェクト指向の基本が学べる– もともとはJavaで開発– アプレット版でブラウザからもアクセスできる• JavaScriptのみで動作できるように書き直し，BitArrowに搭載– 多くの機能でJava版と互換性をもつ

SS研 教育環境分科会 2017年度

28

ドリトルのプログラム例• プログラミング未経験者でも30分程度でゲーム制作などを体験可能
Kameneko1
かめた＝タートル！作る。
左ボタン＝ボタン！"左" 作る。
左ボタン：動作＝「かめた！３０ 左回り」。
右ボタン＝ボタン！"右" 作る。
右ボタン：動作＝「かめた！３０ 右回り」。
時計＝タイマー！作る。
時計！「かめた！１０ 歩く」実行。
タートル！作る ペンなし "tulip.png" 変身する
１００ １００ 位置。
かめた：衝突＝「｜相手｜ 相手！消える」。
SS研 教育環境分科会 2017年度

29

BitArrow版での新機能• スマートフォンのセンサーを利用した
プログラム
かめた＝タートル！作る．
タイマー！作る １２０ 時間「かめた！ (加速度センサ！左右の加速度？)(加速度センサ！前後の加速度？) 移動する．
」実行．

SS研 教育環境分科会 2017年度

30

Agenda• BitArrowの特徴• 言語ごとの特徴・実践例– JavaScript–C– ドリトル

• クラス管理機能• さらなる機能追加

SS研 教育環境分科会 2017年度

31教員支援機能の全体構成
準備から評価までを支援

教員一括登録
アカウント

学生

PCで
プログラム
作成

ファイル配布
課題
テンプレート

採点
フォーム
作成
PCで
プログラム
作成
学習者行動
履歴（ログ）
SS研 教育環境分科会 2017年度

例題
テンプレート課題を評価
・実習中、実習後学習状況をリアルタイム把握
・PCで一覧
・携帯端末で随時・困っている/止まっている学
習者に対応
ログ閲覧32

学習状況把握(1)携帯端末• 実習時の学習者の状態を一覧• 携帯端末で確認（TA/教員）– 同じ間違いで学習停止– 集中できず作業停止• 特徴のある状況を強調表示– 困っている学生を発見してフォロー

SS研 教育環境分科会 2017年度

33学習状況把握(2)PC画面• 未操作時間を色表示• コンパイルエラーを色表示• コンパイル履歴– 成功（R）– 失敗（E）

SS研 教育環境分科会 2017年度

34学習状況把握(3)詳細状況

ここ最近の実行履歴
Rは実行,Eはエラー
クリックすると....

手が止まっている
学生を把握

SS研 教育環境分科会 2017年度

35

課題の配布機能SS研 教育環境分科会 2017年度

36

評価支援（１）概要• 提出課題を対話的に評価– ソースコードを閲覧・読解– 実行して動作検証– 点数やコメントの記載• グラフィックスプログラムの動作検証に対応する

SS研 教育環境分科会 2017年度

37評価支援（２）教員コメント• 提出されたプログラムと実行結果を表示• 教員が確認してコメントを返す

OK!
SS研 教育環境分科会 2017年度

38評価支援(３)実行確認• グラフィックスをダイジェスト表示• 動きに変化が起きる画像を連続的に提示

SS研 教育環境分科会 2017年度

39学習者によるコメントの確認SS研 教育環境分科会 2017年度

編集画面に教員からコメントが来た旨が通知される
コメントの内容によっては修正して再提出する

40

Agenda• BitArrowの特徴• 言語ごとの特徴・実践例– JavaScript–C– ドリトル

• クラス管理機能• さらなる機能追加

SS研 教育環境分科会 2017年度

41今後の機能• 組み込み機器などからのデータ収集• 統計・グラフ→データサイエンス・IoTの体験• 共有データ→ ネットワークアプリケーションの体験

SS研 教育環境分科会 2017年度

42組み込み機器からのからのデータ収集• HTTP通信が可能な組み込み機器からBitArrowに送信– ラズベリーパイ，Aruduino等– 温度等のセンサーデータ• クラス・グループごとにデータを共有

組み込み機器

DB

グループ1
温度データ
26.5℃

センサーデータ
SS研 教育環境分科会 2017年度

43

統計・グラフ• 収集したデータを統計分析

DB– 合計・平均・分散– グループ化– 相関係数• グラフ化SS研 教育環境分科会 2017年度

44共有データ• ネットワーク上の仮想共有空間（Key-ValueStore）を通じた通信プログラムの作成– 通信を用いた対戦ゲーム– LINEなどのSNS
基本操作(1) キーと値で書込む

共有
データ2

共有
データ1
(2) キーで検索し値を返す

クライアント共有
データm

グループ１ グループ2 … グループN
サーバー
45

まとめ
• Webブラウザ上で動作可能なプログラミング学
習環境「BitArrow」の紹介– プログラミング初心者に配慮した3つの言語を提供– 統計・IoT・ネットワークなどの学習体験– 教員支援• ご利用をお待ちしております
Webサイト http://bitarrow.eplang.jp/（クラス登録も本サイトから）
SS研 教育環境分科会 2017年度

46