関西地区

教育システム情報学会

2017年度学生研究発表会

ブロックを用いて棒人間を操作する
小学生向けプログラミング学習アプリケーション
西村 和貴, 中西 通雄
Kazuki Nishimura, Michio Nakanishi
大阪工業大学情報科学部コンピュータ科学科
Dept. of Computer Science, Faculty of Information Science and Technology, Osaka Institute of Technology
Email: nakanishi.michio@gmail.com
あらまし：2020 年から小学校でプログラミング教育が必修化となるため，小学生用のプログラミング学習教材の需要が高まっている．本研究では，プログラミングの基礎構造である順次処理，繰り返し処理，分岐処理を子どもに理解させるための教材として，ブロックを用いて棒人間を操作するアプリケーションを開発した．これは命令の書かれたブロックを組み合わせ，その命令どおりに棒人間を動作させるものである．繰り返し処理や分岐処理に相当するブロックを用いて動作させることで，プログラミングの基礎構造の理解を図る．
キーワード： プログラミング教育，Blockly，ビジュアルプログラミング

1.

動作確認を行っている．
Google Blockly は， Google の提供するビジュアルプログラミング言語であり，マウス操作だけでプログラミングすることができるライブラリである．本研究では，Blockly の機能であるオリジナルブロックの作成と，アプリケーション動作時の画面上に設置する際に用いた．

はじめに2020 年度から小学校でプログラミング教育が必修化されることになり，小学生にも簡単に操作することができてプログラミング的思考を理解しやすい教材が求められている．本研究では，プログラミン
グ的思考とは，「条件に応じて要素を変え，修正をする」という思考方法であると考えている．そこで，プログラミング学習教材として公開された学習 Web
アプリケーション「ピクトグラミング」(1)とブロックプログラミングを組み合わせることにより，低年齢の小学生でもプログラミング的思考を学習できると思い至った．

2.

2.3 画面設計
アプリケーションを起動した際の画面を図 1 に示
す．学習者はブロック組立部でブロックを組み立て，実行タブ（図 1 の②）をクリックすることで，プログラムが上部から順番にブロックを読み込んでいく．
その後，右側に表示された棒人間は，組み立てられたブロックの命令通りの動作を行う．

アプリケーション概要

2.1 本アプリケーションについて学習者は，棒状にデフォルメされた人型のキャラクター（以下，棒人間と呼ぶ）に対して，ブロックを組み合わせることで命令を作成し，与えられた課題と同じポーズをとらせるようにする．組み立てたブロックによる命令は上部から下部へと実行される
ため，順次実行を理解することができる．また，ブロックには条件分岐や繰り返し処理に相当するプログラムがあり，それらを組み合わせることで様々な命令を与えることができるので，条件分岐や繰り返し処理についても理解することができる．
ブロックプログラミングを用いることで，プログラミングの流れが分かりやすく可視化されており，ブロックも簡単な語句や表現を使用しているため，小学生に理解しすいものとなっている．

図 1 アプリケーション起動時の画面
ブロックを組み立てるブロック組立部（図 1 の①）の拡大図を図 2 に示す．この例では，棒人間が左腕を指定された角度（210 度から 330 度）で 2 回動かすプログラムとなっている．なお，「はじめ…終わり」のブロックは，本アプリケーションを起動したときから設置されている．

2.2 実装方式
本アプリケーションは，JavaScript，HTML5，CSSを用いて実装した．棒人間への命令部分にはビジュアルプログラミング用ライブラリの Google Blocklyと，ブロックによる命令をステップ実行していくためのライブラリである JS-Interpreter を用いている．
本アプリケーションを実行する環境は，Web ブラウザ上であり，Safari，Google Chrome，Firefox での85

関西地区

教育システム情報学会

2017年度学生研究発表会

ブロックを組み立て，命令を実行した際の動作を課題と一致させることを目的とする．ここでは課題例
を 2 つ挙げる．
・例 1「左腕を 210 度と 330 度の角度で 2 回振る」
この場合であれば繰り返し処理の入ったブロックに指定された回数を入力し、命令を実行する．これは繰り返し処理を用いることで解くことができる．
・例 2「右腕を好きな回数だけ振り，振った回数が 2回以上であれば左腕を 3 回振る」
この場合であれば，右腕を振った回数が指定した回数以上であれば続いて左腕も指定された回数だけ振り，指定した回数が 2 回未満であれば左腕は振らない，という命令を実行する．これは繰り返し処理と分岐処理を用いることで解くことができる．

図 2 ブロック組立部
2.4 ブロックと命令の一覧
現在実装済のブロックについて図 3 から図 6 に示す．図 3 のまわるブロックでは体を動かす部位を選択し，0 度から 360 度の間の位置に部位を動かすことができる．なお，計算や関数をクリックした際の表示はまだ未実装である．

4.

評価

指定し，指定した回数分だけブロック直下に置い

小学生に実際に本アプリケーションを使用してもらい，アプリケーションの使いやすさや，3 章で述べた課題の理解度，また課題が達成できたかについて 5 段階評価のアンケートを採ることで評価を行う．
本来であれば，小学生に評価してもらう予定であったが，プログラムが完成した時期が遅く，被験者を確保する時間を採ることができていない．発表の際に，評価結果を口頭で報告する．

た命令をくりかえす．

5.

図 3 まわるブロック
図 4 のくりかえしブロックではくりかえす回数を今後の課題

5.1 棒人間の動作の改善
現状では，棒人間の動作はコマ送りで表現されている．そのため，命令が多くなった場合にどういった動作をしているか理解しにくい恐れがある．アニメーションを実装することで，動きの流れがわかりやすくなり，より学習しやすいアプリケーションになることが期待できる．

図 4 くりかえすブロック
図 5 のもしブロックでは，棒人間がブロック直下

5.2 棒人間に与えることができる命令の追加に置いた命令の状態を満たしていればその命令今あるだけの命令では与える課題の幅が狭いため，棒人間の動作を増やすことで課題の幅を広げ，多様な動きができるように改善する．

を実行し，満たしていなければ実行しない．

5.3 棒人間の可動部位の追加
現状，棒人間が可動する部位が腕や足といった部分しか無く，肘や膝を曲げることができないため，可動部位を増やすことで，より多様な動きができるように改善する．

6.

図 5 もしブロック

本研究では，プログラミング的思考を学習するアプリケーションを開発した．しかし，被験者を確保する時間が取れず，本アプリケーションに対する評価を得ることがまだできていない．評価結果は，研究発表会の際に口頭で報告する．
謝辞：本研究の一部は，JSPS 科研費 17K01088 の助成を受けた．
参考文献

図 6 のうごくブロックでは，棒人間が左右上下のいずれかの位置に指定した数値分（ピクセル）だ
け棒人間が動く．

図 6 うごくブロック

3.

結論(1) 伊藤一成：「ピクトグラミング -人型ピクトグラムを用いたプログラミング学習環境-」，情報処理学会情報教育シンポジウム，pp.110-120，2017 年 8 月

課題例

課題では，棒人間がどのような動きをしてどのようなポーズを最後にとるかを文章で与える．学習者は，86