OCamlBlockly のチュートリアルサイトの理解度向上に向けた改善
理学専攻 情報科学コース 2240654 柴田 真琴 (指導教員：浅井 健一)

1

はじめに

3

OCaml Blockly[1] とは、Google の提供するビジュアルプログラミングツールである Blockly をもとにした OCaml エディタである。図 1 のようにブロックを組み立てることでプログラムを作ることができる。ブロックが完成していれば文法エラーは起きないため、簡単にプログラミングをすることができ、プログラミング経験のない人が初めてプログラミングを学ぶ際に使用するツールとして適していると考えられる。そこ
で、OCaml Blockly を使ってプログラミングを学ぶことができるように、プログラミング初学者用の学習サ
イトを作成し、作ったサイトの問題点を考え、それを解決できるように改善を行った。

図 1 OCaml Blockly

2

図 2 作成するゲーム

作成した学習サイトについて作成した学習サイトは、プログラミングをしたことのない大学生を対象としていて、最終的に簡単なゲームを作れるようになることを目標としている。内容は、お茶の水女子大学の全学部向けの授業「ゲームプログラミング入門」の内容をもとにしている。作るゲームは、図 2 のように鳥をキーボードで左右に動かし、落ちてくる果物をキャッチして点数を増やすというものである。サイト内の練習問題は、全部解くと最終的にこのゲームが完成しているような内容になっている。
作成したサイトは、説明文が書いてあり、その下に演習用のボタンがついている。ボタンをおすと OCaml
Blockly の画面に移りプログラミングをすることができる。演習はチュートリアルと練習問題にわかれていて、チュートリアルでは図 3 のように OCaml Blocklyに吹き出しやハイライトを加えて操作手順を示し、説明に従ってブロックをくみたてると簡単にプログラミングができるようになっている。練習問題は各自でブロックを組み立てて問題文で指定された通りのプログラムを作るものである。

図 3 チュートリアル画面

ユーザ実験とサイトの改善作成した学習サイトを実際に使用してもらいアンケートを行った。対象者はお茶の水女子大学情報科の 1 年生数名で、アンケートで各章ごとに使用感を聞いた。
アンケートでの感想により、チュートリアルで学んだBlockly の操作方法を忘れてしまうこと、説明の文字の多さにより、イメージが湧きづらく読みづらいこと、練習問題に難易度が高すぎるものがあることなどが問題点であると考えられた。練習問題については、全て解けたか、悩まずに解けたか、各章を進めるのにどれくらい時間がかかったかなどの質問を行った結果、解けなかった問題は特定の問題に集中していて、長い時間がかかった章は練習問題で悩んいたことが分かった。
そのため、難しい練習問題の難易度を調整し、練習問題を解いていて悩んでしまった際にサポートする機能が必要であると考えられた。
これらの問題点を解決できるように改善を行った。
まず、練習問題を解いている際に操作方法を確認できるよう、ヘルプボタンを実装した。
（図 4）説明文に画像での解説を追加し、より理解しやすくなるようにした。また、練習問題の画面に答え合わせやヒントボタンの機能をつけ（図 5）、問題の内容自体も改善した。

図 4 ヘルプメニュー4図 5 ヒント

ヘルプ機能の追加

OCaml Blockly の基本操作は各チュートリアルの中で説明している。これまでは、演習問題を解いているときに OCaml Blockly の操作方法を忘れてしまった
場合、一度トップページに戻って確認したい操作が含まれているチュートリアルを探し、そのチュートリアルを目的のところまで進める必要があった。そこで、演習画面にヘルプボタンを作り、基本操作をすぐに確認できるようにした。図 4 のように、ヘルプボタンを押すとメニューが表示されて、メニューから項目を選択すると、チュートリアルが開く。ここでのチュート
リアルは操作の説明に特化している短いものであり、確認したい操作の方法をすぐに見ることができる。また、チュートリアルは別ウィンドウで表示されるため、チュートリアルを見ながら問題を解くことや、操作方法を確認したあとにすぐに問題にとりかかることができる。

5

説明画像の追加

説明部分では主に文字だけでの説明であったが、ブロックの説明を文字だけでするよりも、ブロックの画像を用いて説明をした方が理解しやすいと考えられる。
ブロックや、座標、ゲーム画面の画像を入れて、詳しく説明することで、よりわかりやすくなるようにした。
また、画像を動かしながら説明をする機能も実装した。
（図 6）画像に動きをつけることで飽きにくさと、理解度が向上することを目的としている。使用者の好みや状況に応じて、もとの形式と使いわけることにより、理解がしやすくなるのではないかと考えられる。

このバグが一度発生すると、操作を続けることは不可能で、ページを再読み込みしなければならず、それまでに組み立てたブロックが全て消えてしまう。この原因は、OCaml Blockly では、すでにブロックが接続されているコネクタに他のブロックを接続しようとした場合に先に接続されていたブロックがメインワークスペースに押し出されることにある。押し出されるブロックに変数や関数などがあると、スコープの外に出されてしまい、不具合が生じる場合がある。これを解決するために、使用できる範囲が限られているブロックが押し出される際の挙動を変更した。OCaml Blocklyにはスコープお砂場という機能があり、お砂場がついているコネクタに接続できるブロックを使用することができる。ブロックがスコープの外に押し出される場
合、図８のようにメインワークスペースではなくお砂場に置くことにより、バグが発生しないようにした。

図 6 動く画像での説明

6

練習問題の改善

練習問題の内容を見直し、難しい問題は、複数の問題に分けることにより難易度を調整した。
練習問題に正誤判定機能を追加し、自分の解答が合っているかを確認できるようにした。図 7 のように、答え合わせボタンを押すと、合っている場合は正解、間違っている場合は不正解と表示される。

図 7 正誤判定画面
さらに、不正解の際は、どこが違うかを知りたい場
合、間違っている箇所をハイライトで表示することもできる。正解と判定するには、各ブロックが正解のブロックとブロックの種類が一致していること、数字や演算、文字などの値が一致していること、変数名や関数名などが一致していることが条件である。ただし、一部の問題ではどのような値でも正解になることもあり、その場合は値にかかわらず正解と判定される。
また、各練習問題の画面にヒントボタンをつけて、その問題のキーポイントがわかるようにした。ヒントボタンを押すと、図 5 のようにその問題を解くためのヒントがいくつか表示される。さらに各ヒントの内容と重なる内容のチュートリアルやヘルプがあれば、そのリンクをつけた。ヒントの下にボタンがあり、押すと該当するチュートリアルやヘルプのページが開いて、すぐに見ることができる。

7

OCaml Blockly のバグの改善

OCaml Blockly を使用していると、稀にバグが発生することがある。その中で最も発生率の高いバグは、カーソルについたブロックが離れなくなるものである。

図 8 ブロックが押し出される際の挙動の改善

8

まとめOCaml Blockly を使用したプログラミング初学者向けの学習サイトを作成し、その問題点を考えて、解決できるよう改善を行った。画像での説明を付け加え、ヒントボタンやヘルプボタンなどの機能を実装した。
また、OCaml Blockly 自体の改善も行い、これまで最も高頻度で起こっていたバグの発生を防いだ。

参考文献[1] 松本晴香, 浅井健一. Blockly をベースにした OCaml ビジュア
ルプログラミングエディタ. 第 21 回プログラミングおよびプログ
ラミングワークショップ論文集, March 2019.