情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-29
2020/3/9

クリック操作とフローチャートを用いた教育用プログラミングツールの開発
川上 由乃1,a)

鈴木 優1,b)

概要：2020 年より改訂される学習指導要領によって小学校でプログラミング教育が必修化される．本研究では，プログラミング教育の目的の１つであるプログラミング的思考を養うためのツールとして，選択式プログラミングツール「ふろみん」を開発した．選択式プログラミングとは，本研究で提案するビジュア
ルプログラミング言語で，クリック操作のみで選択肢から命令を選び，フローチャートを作成するものである．操作方法をクリックのみにすることでパソコン操作の習熟度の違いによらず学習に取り組みやすくなる．また，プログラミングをするためには問題解決のために物事を順序立てて考えることが必要で，プログラミング教育はその力を身に付けるためのものである．そこで，問題解決のための手順を図式にするフローチャートを用いてプログラミングができるようにすることで，手順をプログラミング言語でプログラムに変換することを考える必要がなく，考えた手順をそのままフローチャートにするだけで良くなる．
また，プログラムの流れが読み取りやすく，複雑に見える動作も「順次」「分岐」「反復」という要素の組み合わせであることの理解を促す．これにより簡単で取り組みやすい学習でプログラミング的思考を養うことを支援する．

1. はじめにたらいいのか，記号の組合せをどのように改善していけば，より意図した活動に近づくのか，といったことを論理的に2020 年に改訂される学習指導要領によって小学校でプ

考えていく力のことである [2]．その他にも，ルールに従っログラミング教育が必修化される．学習指導要領とは，文て過不足なく指示を出す力や，意図した結果にならなかっ部科学省が定める教育課程（カリキュラム）の基準である．

たときに必ずどこかに要因があると考え改善するといったプログラミング教育の目的は，子供たちにコンピュータに力を身に付けることができる．プログラミング教育とはプ

意図した処理を行うよう指示することができるということ

ログラミング単体の授業を行うわけではなく，算数や理科を体験させながら次のような資質及び能力を育成することといった既存の教科の中でプログラミング的思考を養うよである [1]．

うな学習を実施するもので，学年や，教科，時間といった知識及び技能

具体的な内容は各学校が判断することとなっている．子供

身近な生活でコンピュータが活用されていることや問たちにとって難しいプログラミング教育を行うことでプロ題の解決には必要な手順があることに気付くこと

グラミングに対する苦手意識を子供たちが強める可能性が思考力、判断力、表現力等「プログラミング的思考」を育成すること学びに向かう力、人間性等
コンピュータの働きを，よりよい人生や社会づくりに生かそうとする態度を涵養すること
プログラミング的思考とは，自分が意図する一連の活動ある．そのため苦手意識を感じない教育方法が必要であると考える．そこで，本研究では簡単で取り組みやすくプログラミング的思考を養うことを支援する．

2. プログラミング教育
2.1 プログラミング教育の方法を実現するために，どのような動きの組合せが必要であり，プログラミング教育の方法はアンプラグドプログラミン

一つ一つの動きに対応した記号を，どのように組み合わせ

グとソフトウェアを使うプログラミング，ハードウェアを

1

a)
b)

宮城大学
Miyagi University, 1-1 Gakuen, Taiwa-cho, Kurokawa-gun,
Miyagi 981-3298, Japanp1622034@myu.ac.jp
suzu@myu.ac.jp© 2020 Information Processing Society of Japan

使うプログラミングの３つに分けられる．

2.1.1 アンプラグドプログラミング
アンプラグドプログラミングとは，コンピュータを使わ

294

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

ずにパズルやカードなどを用いて，順序立てて物事を考えることによって問題解決の手順を学ぶ方法である．ICT 環
境の整っていない場所でも学ぶことができ，パソコンなど

1B-29
2020/3/9

3. ビジュアルプログラミング言語
3.1 ビジュアルプログラミング言語の概要のコンピュータを使ったことのない子供でも取り組みやす

パソコンやスマートフォンで学べるプログラミング教材

い．例えばカードを使った授業では，命令の書かれたカーは数多くあり，未就学児でも使える簡単なものから，本格ドを意図した動作になるように並べ，相手はその並べられ的なプログラミング言語を学べるものまで，年齢やスキルた命令の通りに行動をする．様々な動作を組み上げて，実にあわせて選ぶことが可能である．その中でも未就学児か際にその通り動くか，動かなかった場合はどこに要因があら小学生にも扱いやすいのが「ビジュアルプログラミングるのかを考え，試行錯誤をする力を身に付ける．

言語」である．ビジュアルプログラミング言語とは，プロ

2.1.2 ソフトウェアを使うプログラミング

グラムを英語や数字などのテキストで記述するのではな

ソフトウェアを使うプログラミングとは，コンピュータ

く，視覚的なオブジェクトでプログラミングするプログラ

でビジュアルプログラミング言語などの専用のアプリケー

ミング言語である．マウス操作だけで簡単にプログラミン

ションを使う方法である．この方法は視覚的にわかりやすグできるため，子ども向けのプログラミング的思考を養う

く，簡単な操作だけで行うことができる．また，結果がす教育ツールにも用いられている．

ぐに出るため，結果をもとに試行錯誤することを後押しする．コンピュータを使って算数の授業で多角形の作図を行ったり，音楽の授業で音を鳴らしてリズムを作ったりといった授業が行われている．多角形の作図や，音楽は同じ

3.2 既存のビジュアルプログラミング言語
ビジュアルプログラミング言語は主に図 1 に示すブロックタイプとフロータイプに分けられる．

行動の繰り返しでできていることに気付き，プログラミン
グにおける反復処理についても学ぶことができる．

2.1.3 ハードウェアを使うプログラミング
ハードウェアを使うプログラミングとは，教育用のロボットやマイコンなどのハードウェアを制御し，動かす方法である．センサやモータなどと組み合わせられるものは身の回りの様々なものにコンピュータが活用されていることを考えるきっかけになる．パソコンやタブレット上でプボタンが押されたとき右に曲がる

１歩進む

５回繰り返す１歩進む
右に曲がる

ボタンが押されたとき５回繰り返す
左に曲がる

左に曲がる

ブロックタイプ

フロータイプ

図 1 ビジュアルプログラミングの例

ログラミングをして自分で組み立てたロボットやマイコンを制御するものや，ロボットを組み立てること自体がプロ

ブロックタイプとは，指示の書かれたブロックをマウスグラミングとなるものがある．自らロボットを組み立てる操作で繋げて配置することでプログラミングする方法であことで愛着が湧き，組み立てる過程の中でどう動かしたいる．米国マサチューセッツ工科大学に設置された研究所でか想像を膨らませながら楽しく学ぶことができる．

ある MIT メディアラボが開発したプログラミング言語学
習環境の Scratch[3] などがある．ブロックを並べる順序が2.2 3 つの方法の比較

一般的なテキスト言語の考え方と似ており，順次・選択・アンプラグドプログラミングは，パソコンがない環境で反復というプログラムの基本構造をしっかりと学ぶことがも実践ができるため，気軽に挑戦できるというメリットができるという利点がある．一方で，繋がったブロックのかある．その反面，コンピュータを使わないということは１たまりから 1 つだけブロックを抜き出そうとしたときに，章で述べたプログラミング教育の目的の「知識及び技能」とドラッグしたブロックより下に繋がっているものがすべて「学びに向かう力、人間性等」を満たすことが難しい．ソフ

くっついて移動してしまうため，プログラムの修正に手間

トウェアを使う方法は，パソコンやタブレットを用意するがかかるという欠点がある．また，ブロックはジャンル分必要があるが，コンピュータが様々なものに活用されていけして用意されているものが多いが，種類が豊富なため使ることに気付くきっかけにはなりやすい．ハードウェアをいたいブロックを探すのが困難である．

使う方法は，子供たちの興味を惹きやすく，また，ロボッ

フロータイプとは，指示の書かれたオブジェクトを自由

トを組み立てることはものづくりの楽しさに気付くきっかに配置して矢印や線で繋ぐことでプログラミングする方法

けになるというメリットがある一方で，専用のロボットをである．ソニー株式会社が提供する MESH アプリなどが用意する必要がある．

ある．MESH という，ボタンやスピーカーなどの様々な機

そこで，本研究では，パソコンやタブレット以外の特殊能を持つ MESH ブロックを MESH アプリ上で繋げてプロな装置を使わずに行うことができるソフトウェアを使う方グラミングをすることで制御するツールである．フロータ法を用いることにする．

イプの利点は，オブジェクト自体を動かさなくても線の繋© 2020 Information Processing Society of Japan295

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-29
2020/3/9

がりを消したり，繋げたりすることで簡単に命令を削除，を探し出してドラッグで持ってくる必要がある．既存のビ追加できることである．しかしながら，オブジェクト同士

ジュアルプログラミング言語は，画面が実行する部分と，の間にスペースをあらかじめ空けておかないと途中にオブブロックを並べる部分，オブジェクトの一覧部分に分かれジェクトを足したいときにオブジェクトをすべて動かす必ているものが多いが，本ツールはフローチャートを作成す要などがある．また，オブジェクトの配置も自分でするたる部分に選択肢が表示されるため視線の移動が少ないこと

め配置によっては流れを読み取りにくいという欠点がある．

も特徴である．

その他にもブロックタイプやフロータイプに分類されなフローチャートとは問題解決の手順を図式に表したもの

い独自の手法を用いたタイプもある．例えば Viscuit[4] は，である．プログラミングをするためには必ず問題解決のた

自由に絵を書き，メガネという左右２つの輪がつながっために物事を順序立てて考える必要がある．そこで，その考ツールの，それぞれの輪に違う絵を置くことでプログラミえた手順をそのままフローチャートとして作成するだけでングをする．

プログラミングを行うことができるツールを使用すれば，ビジュアルプログラミング言語を用いた教育ツールは，教員は手順をプログラムにすることを教える必要がなく，言語の知識がなくてもプログラミングすることができる．

物事を順序立てて考えることを教えるのに重点を置いた授

また，タイピングミスによるエラーがないこと，ゲーム感業を行うことができる．また，自分の考えている動きを実覚で勉強ができることなどの利点がある．基本的なマウス

現するためには「順次」「分岐」「反復」のどれを使うのか操作だけでプログラミングを行えることが利点だが，実際を考え，それをフローチャートの形にして，実際に動作さにプログラミングをする際は，まず制作や問題解決のためせることで，複雑に感じる動作も実際の動く仕組みは，「順に必要となる手順を順序立てて考え，そのあとに考えた手

次」「分岐」「反復」という単純な要素の組み合わせででき順をどのようにプログラムにするかを考える必要がある．ているということに気付くきっかけとなる．

つまり，教員は順序立てて考えることと，ビジュアルプロ作成中のプログラムの途中に命令の追加をする場合や，グラミング言語の操作方法やプログラムにする方法を教え命令を削除するとき，他の命令に書き換えるときにもクなければならない．さらに，操作を教える際，パソコンをリックだけで全て行うことができ，修正したいときにその使ったことのない子供がいる場合は，ビジュアルプログラ都度ブロックやオブジェクトをドラッグで移動させるとミング言語の使い方の前にマウス操作も教える必要があいった余計な操作を必要としない．そのため，ブロックやる．パソコンを使ったことのある子供と使ったことのないオブジェクトが画面内に乱雑に置かれることがなく，プロ子供で進行度や積極さに差が生まれてしまう可能性がある

グラミングする本人も他の人にもプログラムが読みやすくと考える．

なる．フローチャートを作成する場所をブロックタイプや4. 選択式プログラミングの提案
4.1 選択式プログラミングの概要

フロータイプのように自由に決めるのではなく，固定の位置にすることで，どんな内容のプログラムでも命令の流れがわかりやすくなる．

本研究で提案する選択式プログラミングとは，選択肢か子供が「操作方法が難しくて覚えるのが大変」や「ブロッら「命令」を選ぶだけでフローチャートを作成してプログ

クやオブジェクトが多すぎて何を使ったらいいのかわからラミングができるものである．必要な操作がクリックのみない」という印象を抱かなくすることで，プログラミングなことが特徴で，ブロックタイプやフロータイプと違ってに対する難しそうというイメージを払拭し，楽しく学べる命令が書かれたブロックやオブジェクトを一覧から探し出ようにする．本ツールの対象はこれからプログラミング教してドラッグで並べる必要がない．

育を受ける小学生を想定する．本ツールによって以下の力

授業の中でパソコン操作を教えながら既存のビジュアルや習慣を身に付けることができる．

プログラミング言語を使う場合，普段からパソコンをよく• 目的を達成するためにはどのような処理をどのような使う子供は経験から別の操作を行うことでできることを自順番で実行すればいいのか，ということを論理的に考ら考えることができるのに対して，はじめてパソコンを使える力

う子供は習った操作しか使えないということが起きる．ま• 意図した結果にならなかったときにどこを変えたらい

た，反対にパソコン操作を教えることに時間を使うことで，いのか，どう変えたらいいのか，ということを考える

パソコンを使ったことのある子供が授業に飽きてしまう可習慣

能性もある．本ツールでは，必要な操作をクリックのみに• もっと簡単に目的を達成するにはどうしたらいいのすることで，パソコンの習熟度によって学習に差ができなか，他にも達成する方法はあるのか，ということを考いようにする．また，パソコン操作の指導によって授業時える習慣間が足りなくなることを防ぐ．また，命令の書かれたオブジェクトを並べるためには，一覧から必要なオブジェクト© 2020 Information Processing Society of Japan296情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-29
2020/3/9

4.2 タスクのデザイン
選択式プログラミングでは，障害物を避けながらキャラクタをスタートからゴールまで連れていくというプログラ？

ムを作成させる．目的を提示せずに自由に作成させることも検討したが，子供の性格によっては「作りたかった動きにはなっていないけど面白いからこれで完成でいいや！」

GOALと，自分で設定した目的を達成できないまま途中でやめてしまったり，目的を達成するために命令を選ぶのでなく，「こうしたら面白くなるのでは？」という気持ちから別の選

図 2 タスクデザイン択をしてしまったりという可能性もあるのではないかと考えた．興味を持って自らほかの命令を選んだらどのような

図 3 は実装したツールの画面である．画面は左側の命令

動きになるのかを考え，実際に動かすことは学習するうえを選択してフローチャートを作るフローチャート入力部

で重要なことではあるが，それによって達成しようとしてと，右側の制作したプログラムを実行するフローチャート

いる目的を見失うことはないようにしたい．そこで，意図実行部で構成される．

した結果にならなかった際にどこに要因があるかを考え，改善する力を身に付けるために明確な目的を提示することにした．
プログラミング教育で用いられる教材には図形を書くものや計算を解くことを目指すものもあるが，キャラクタのイラストを使うことで興味を惹き，愛着がわきやすいと考えた．そこで，図 2 のような，キャラクタを障害物を避けながらスタートからゴールまで連れていくプログラムを作成させることにした．これは迷路がベースになっているの
図 3

で子供たちにも取り組みやすいと考えたためである．動か画面イメージ

すキャラクタは，動物によって動きや使うことのできる命令に制限を設けることで同じステージでも難易度が変わるようにする．
ツールの使用者は，キャラクタがどこにいて，どこに連フローチャート実行部に表示される迷路を解くためのプログラムをフローチャート入力部で作成する．本ツールはopenFrameworks で実装した．

れて行かなければいけないのか，そのためにはどのような道を通ればいいのかをまずは考える．そして「ここを通っ5.2 フローチャート入力部てゴールまで連れていく」という達成すべき目的に対して，フローチャート入力部ではクリックで選択をしてフロー何歩進んで左右のどちらかに曲がるという処理をどのようチャートを作成することでプログラミングを行う．フローな順番で実行すればいいのか，ということを論理的に考えチャートは，予め開始を表す楕円のみ書かれた状態になっることができる．また，スタートからゴールに行くまでのており，フローチャート内の四角い枠の部分に命令を追加ルートが複数あったり，同じルートを通る際にも様々な命することができる．命令を追加したい枠内をクリックする

令の組み合わせ方で通ることができたりするように障害物と図 4 のような記号の選択肢が出てくる．記号には次の 6を配置する．これによって一度目的を達成できた後にも，つがある．

他にもゴールにたどり着く方法はあるのではないかと考えることができる．

5. 「ふろみん」の開発
5.1 ツールの概要
ふろみんは，クリック操作だけでフローチャートを作成する選択式プログラミングでキャラクタをスタートからゴールまで連れていく迷路を解くことでプログラミング

処理

分岐開始

繰り返し開始終了

分岐終了

繰り返し終了

図 4記号の選択肢的思考を身に付けさせる学習を行うものである．使用者には，チュートリアルを順番に解いてもらうことでツールの使い方と，繰り返しや分岐の活用方法を学んでもらう．

© 2020 Information Processing Society of Japan

処理
前へ進んだり，横を向いたりという基本的な動きを選297

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-29
2020/3/9

5.4 実行例

択する

このステージではスタートから階段状にジグザグに進む

分岐開始
分岐の条件を選択するルートや，一番下まで直進したら曲がってさらにゴールまで直進するルートなどがある．図 6 は階段状にジグザグに分岐終了
フローチャート内から分岐の合流する地点を選択する

進むルートを通った場合の例である．

繰り返し開始繰り返しの開始を指す
繰り返し終了繰り返しの回数を選択する
終了
フローチャートの終了を指す
記号を選択すると，さらに詳しい内容や条件などの選択肢が出てくる．図 5 は処理を選んだときと，分岐開始を選んだときの選択肢の例である．これらを選択することでフ

図 6

ローチャートに選択した命令が表示される．

ジグザグに進むルートの例

同じルートを通る場合でも繰り返しや分岐を使うことで簡略化をすることもできる．

6. まとめ
図 5記号の選択肢本研究では，プログラミング教育の目的の１つであるプ
ログラミング的思考を養うためのツールとして，選択式プ

この選択を繰り返すことでプログラミングを行うことができる．さらに，すでに命令が入っている場所をクリックしても同じ選択肢が出てくる．そこで記号や詳細を選択することで，「前へ進む」という命令が入っていた場所を「右に曲がる」に変更するなどのプログラムの修正が容易にできる．また，選択肢にあるゴミ箱を選択することでそこに入っていた命令を削除することができる．隣のプラス記号をクリックすることでそこに新たに命令を追加することができる．フローチャートが完成して終了の記号を最後に選択することで，フローチャート作成モードと実行モードの切り替えボタンを押すことができるようになる．

ログラミングツール「ふろみん」の開発を行った．本ツー
ルは，問題解決の手順を表す図式であるフローチャートに着目し，フローチャートを作成するだけでプログラミングができる．これにより，教員は手順をプログラムにすることを教える必要がなく，順序立てて考える方法について教えることに重点を置くことができる．ツールを使用する子供は問題解決のために考えた手順をそのままフローチャートにすることでプログラミングをすることができる．今回はキャラクタをスタートからゴールへ連れていくプログラムを作成させることとしたが，選択肢や実際に作成させるプログラムを変更することで，さらに学年や授業の科目にあった教育に活用することができると考える．

5.3 フローチャート実行部
画面上部にはモードの切り替えボタンと一時停止・再実行ボタン，実行停止ボタンがある．モードの切り替えボタンを押すとキャラクタがフローチャート通りにアニメー

参考文献
[1]

ションで動く．実行中に一時停止・再実行ボタンを押すと一時停止し，もう一度押すことで途中から実行を再開する．

[2]

再生中，または一時停止中に実行停止ボタンを押すとキャラクタがスタート位置に戻り，その後に一時停止・再実行ボタンを押すことで最初から実行し直すことができる．

[3]

また，実行と同時にフローチャート入力部にフローチャー
ト内のどこの命令を実行しているのかが表示されるため，思いどおりの動きをしなかったときにフローチャートのどこを修正すればいいのかがわかりやすくなっている．さらに実行中にキャラクタが壁や障害物にぶつかったときは表情などでこれ以上進むことができないことを知らせる．

© 2020 Information Processing Society of Japan[4]

文部科学省．小学校段階におけるプログラミング教育の在り方について（議論の取りまとめ）．
http://www.mext.go.jp/b_menu/shingi/chousa/
shotou/122/attach/1372525.htm （2019-12-01 参照）
文部科学省．小学校プログラミング教育の手引（第二版）．
http://www.mext.go.jp/component/a_menu/
education/micro_detail/__icsFiles/afieldfile/
2018/11/06/1403162_02_1.pdf （2019-12-01 参照）
Mitchel Resnick, John Maloney, Andrés MonroyHernández, Natalie Rusk, Evelyn Eastmond, Karen Brennan, Amon Millner, Eric Rosenbaum, Jay Silver, Brian
Silverman and Yasmin Kafai . Scratch: Programming forAll. Communications of the ACM, Volume 52, Issue 11,
pp. 60-67, 2009
原田康徳．子供向けビジュアル言語 Viscuit とそのイン
タフェース．情報処理学会研究報告，ヒューマンインタ
フェース研究会報告 pp. 41-48, 2005

298