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

1B-17
2023/3/1

視覚支援学校小学部におけるプログラミング教育にカッティングマシンを活用するシステムの開発
松本 章代1,a)

松木 李玖1菅原 研1,b)

概要：視覚障害がある児童にプログラミングの授業をおこなう場合，既存のプログラミング環境を利用することは困難である．そこで我々は全盲の児童にもプログラミングができるシステムを独自に開発した．
QR コードと点字を貼ったブロックを用いてプログラミングをおこなう仕組みである．本研究ではそのブロックで作成した図形を描くプログラムを SVG ファイルに変換して，カッティングマシンで厚紙を切り抜くシステムを構築する．本システムによって視覚障害児も健常児と同じように図形を描画するプログラムを作成し，実行結果を確認することが可能となる．

1. はじめに
1.1 研究背景および目的
2020 年度より小学校においてプログラミング教育が始まっている．国内の視覚支援学校・学級に在籍する児童生

は，プログラムから SVG ファイルを作成し，カッティングマシンを用いて 2 次元図形をカットして出力するシステ
ムを構築する．本システムによって視覚障害児も健常児と同じように図形を描画するプログラムを作成し，実行結果を確認することを可能にする．

徒のうち，障害が視覚のみの児童生徒は学習指導要領に準ずる教育を受けることになっており，プログラミングを学

1.2 小学校におけるプログラミング教育とはぶ必要がある．しかし，子どものプログラミング教育にお文部科学省の「小学校プログラミング教育の手引き（第いて一般的に用いられているビジュアル型言語によるプロ三版）[2]」によると，小学校におけるプログラミング教育

グラミングは，視覚に大きく依存する形で行われるため，は，学習指導要領に例示した単元等はもちろんのこと，各既存のプログラミング環境は利用できない．

学校において工夫して多様な教科・学年・単元で適切に取我々は宮城県立視覚支援学校からの依頼を受け，全盲のり入れていくことが望まれる，とされている．プログラミ

子どもたちにもプログラミングができるシステムを独自にング言語の選定についても「ビジュアル型のプログラミン開発し [1] ，3 年ほど共同でプログラミングの授業を実施グ言語を想定」となっており，特定の言語が指定されていしている．開発したシステムは，QR コードと点字を貼っるわけではない．

たブロックを用いてプログラミングをおこなうことによりこの手引きでは，プログラミングに関する学習活動はmicro:bit を制御する仕組みとなっている．このシステムはA〜F の分類に分かれており，そのうち A 分類は「学習指入手が容易な市販製品を組み合わせて作成しており，かつ導要領に例示されている単元等で実施するもの」，B 分類

電子工作の知識や技術が無くても現場の小学校教員が再現

は「学習指導要領に例示されてはいないが，学習指導要可能である．そのため，現場における導入コスト（費用・領に示される各教科等の内容を指導する中で実施するも手間）を抑えることができ，普及のしやすさがメリットでの」，C 分類は「教育課程内で各教科等とは別に実施するあると言える．一方，プログラムを動かすための装置としもの」と示されている．つまり，A 分類は授業での実施がて micro:bit を採用しているため，（視覚に頼らない）出力求められているもの，B 分類や C 分類は各校の工夫に委装置としてはスピーカーやモーターに限られており，たとねられているもの，ということである．A 分類の中の 1 つ

えば小学 5 年生の算数の教科書に掲載されている「多角形に，小学 5 年生の算数「正多角形と円」（プログラミングを描くプログラム」を扱うことは難しい．そこで本研究でを通して正多角形の意味を基に正多角形を描く）がある．
これを小学校のプログラミング教育で一般的に用いられて1a)b)

東北学院大学akiyo@mail.tohoku-gakuin.ac.jp
sugaken@mail.tohoku-gakuin.ac.jp© 2023 Information Processing Society of Japanいる Scratch でコーディングすると図 1 のようになる．なお，この Scratch のペンによる描画機能は，Logo の Turtle

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

1B-17
2023/3/1⃝
4 カッティングマシン
1 を本稿では以下「命令ブロック」と呼ぶ．
なお，⃝
3.1.1 命令ブロック
命令ブロックの例を図 2 に示す．
命令ブロックの作成にあたり，おもちゃのブロックとして市販のアーテックブロックを採用している．類似品でも基本的に問題ないが，アーテックブロックは他のブロックと比較し，命令ブロック同士を結合したときにばらばらに図 1: 正三角形を描くプログラムの例なりにくく扱いやすいという特徴がある．
命令ブロックに貼られた QR コードは UCB Logo の Tur-Graphics から派生している [3]．

2. 関連研究

tle Graphics に準拠したソースコードとなっている．QR
コードのシールはテプラで作成している．
命令ブロックに貼る点字は，Scratch（日本語）の表記を小学校でカッティングマシンを活用する取り組みとして，参考にしつつ，できるだけ簡潔な言葉になるよう配慮した

亀井ら [4] の研究がある．亀井らは，小学校の放課後活動命令文である．なお，点字シールは「点字ラベラー BL-1000において，子ども自身が創造（構想）したものを表現できLINK」を用いて作成している．

るようになることを目的とし，3D プリンタやカッティンさらに晴眼者の教員がわかり易いように点字の元の文字グマシンなどのデジタル工作機械を取り入れた制作活動をもテプラで作成して貼っている．Scratch のように，ブロッ支援し，その有効性などについて検討した．デジタル工作

クの色も命令のタイプごとに分けている．

機械を用いた制作において，児童らが出力された作品を持ち帰ることを楽しみにする様子が顕著に観察されたことは興味深い．
亀井らの研究対象が晴眼児童の課外活動であるのに対し，本研究ではカッティングマシンを視覚障害児童の正規の授業内で利用する．図形を描画するプログラムの出力先を画面からカッティングマシンにすることで，視覚に障害を持つ児童が触覚で図形を理解できるようにすることを目的としている．比較的安価な家庭用カッティングマシンを用いた場合においても，単純な図形は 10 秒程度で厚紙を切り抜くことが可能である*1 ことから授業時間内で利用しやすい．

図 2: 命令ブロックの例

1 出力速度が圧倒的に速い，
3D プリンタと比較しても，⃝⃝
2 材料が普通の厚紙でよいので材料費が安い，⃝
3 出力した図形が紙なので折ることができる，といった利点がある．

3. 開発システムの概要
開発システムの構成およびプログラムの実行手順について述べる．

3.1.2 プログラミング教材例
本システムにおいて，図形を描くためのサンプルプログ
ラムを図 3 に示す．(a) の命令ブロックの QR コードを読み込んだものが (b) の Turtle Graphics のソースコードである．命令ブロックを組み立てる際には図 3 (a) のように範囲（スコープ）を意識してブロックをずらしてはめ込む

3.1 開発システムの構成
1 〜⃝
4 の機
本研究で提案するシステムは，基本的に以下⃝器・ソフトウェアから構成される．

ことを想定している．

3.1.3 SVG ファイルとは
画像ファイルのフォーマットは「ラスタ形式」と「ベ⃝1 QR コードと命令（点字・墨字）を貼ったブロック⃝
2 読み取った QR コード（Turtle Graphics のソースクタ形式」の 2 種類に分けられる．SVG（Scalable Vectorコード）から SVG ファイルを生成するウェブサービス

ラスタ形式の画像がピクセルごとに色情報を持つのに対し，⃝3 QR コードを読み取るための PC とバーコードリーダ

ベクタ形式の画像は座標の情報や計算で画像を生成する．

*1

ただし USB メモリを経由したデータの転送時間を含めると 1〜2 分程度かかる．

© 2023 Information Processing Society of JapanGraphics）はベクタ形式の画像フォーマットの一種である．

HTML を標準化している W3C が策定しており，中身は図
図 4 のような XML ベースのテキストファイルである．

182

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

1B-17
2023/3/1

pendown
repeat 3 [forward 30
left 120](a) 命令ブロック(b) Turtle Graphics

図 3: サンプルプログラム< svg xmlns =" http :// www . w3 . org /2000/ svg " ><g stroke =" black " stroke - width ="1" >< line x1 ="0" y1 ="0" x2 ="30" y2 ="0" / >< line x1 ="30" y1 ="0" x2 ="30" y2 ="30" / >図 5: QR コード読み取り・SVG 生成画面

< line x1 ="30" y1 ="30" x2 ="0" y2 ="30" / >< line x1 ="0" y1 ="30" x2 ="0" y2 ="0" / ></g ></ svg >図 4: SVG ファイルのソースコードの例

3.1.4 変換システム TTL2SVG
TTL2SVG は我々が開発した Turtle Graphics のソースコードを SVG ファイルに変換するウェブサービスである．
サーバ側で Ruby で書いた CGI が動いている．

図 6: 生成された SVG ファイル

現在は，以下の命令にのみ対応している．

• ペンの上げ下げ：penup，pendown

下の手順で進める．手順 (2) まで進めた状態のシステム画• ペンの太さの設定：setpensize

面を図 5 に示す．生成された SVG ファイルを図 6 に示す．

• 直線移動：forward，back(1) バーコードリーダーを PC に USB 接続し，本システ• 進行方向の設定：left，rightム（ウェブページ）を開いて入力フォームの中に QR• 指定座標への移動：setxy

コードを読み込んでいくと Tutle Graphics のソース

• 繰り返し：repeat

コードが入力されていく．

• 条件分岐：if〜else• 代入：make• 算術演算：+，-，*，/
3.1.5 カッティングマシンへの出力
安価なカッティングマシンとして，ブラザー工業の Scan-(2) 入力がひととおり終わったら，Download ボタンを押すと SVG ファイルがダウンロードされる．

(3) カッティングマシンに SVG ファイルを転送する．
(4) カッティングマシンで図形の線に沿って厚紙を切り抜く．
（図 7）

NCut CM300 を用いる．このカッティングマシンは，PCから USB メモリを介して SVG ファイルを読み込みカット

3.3 本システムを用いた授業例することが可能である．また，約 30cm × 30cm の大きさ

本システムを用いたプログラミングの授業は小学 5 年算まで出力*2 でき，5cm 程度の長さの直線の辺を 8 本カット

数の正多角形に留まらない．本システムの活用が期待できする場合の所要時間は 10 秒程度である．

るプログラミングの授業例を以下に挙げる．

• 小学 4 年算数「角の大きさ」（B 分類）
3.2 プログラムの実行手順*2• 小学 4 年算数「立方体の展開図」（B 分類）

命令ブロックで作成したプログラムを実行する際には以• 小学 5 年算数「正多角形と円」（A 分類）

12 インチマットを使用した場合．

• 小学 5 年算数「角柱・円柱の展開図」（B 分類）© 2023 Information Processing Society of Japan183

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

1B-17
2023/3/1

覚障害を持つ児童が図形を描くプログラムの作成・実行を実現するシステムを構築した．
今後は，Turtle Graphics に留まらず，micro:bit のセンサから取得したデータを折れ線グラフとして直接出力できるようにするなど使い方の幅を広げ，プログラミング出力装置としての応用例を増やしていく．また，本システムを用いて宮城県立視覚支援学校小学部において実際に授業をおこない，小学部の先生方とともに授業内容の検討をおこなっていく．
図 7: カッティングマシンで出力したところ

謝辞 研究に日頃からご協力いただいている宮城県立視覚支援学校の教職員の方々に深く感謝いたします．
本研究は，学校法人東北学院共同研究助成金の支援を受けました．
参考文献
[1]

[2]

図 8: TTL2SVG で作成した折れ線グラフ• 小学 6 年算数「拡大図と縮図」（B 分類）

[3]
[4]

• 小学 4 年理科「もののあたたまり方」（B 分類）• 理科「お湯の冷め方」（C 分類）「角の大きさ」「正多角形と円」「拡大図と縮図」の授業[5]内容については，文献 [5] が参考になる．
展開図の授業内容は独自のアイディアである．出力結果の紙を折ることができるカッティングマシンならではの授[6]

松本章代，高橋幹太，菅原研：“視覚障害をもつ子ども向けプログラミング環境の開発”，日本教育工学会研究報告
集，Vol.19，No.5，pp.143–148 (2019)文部科学省：“小学校プログラミング教育の手引（第三版）” (2020)
https://www.mext.go.jp/content/20200218-mxt_
jogai02-100003171_002.pdf
Scratch Wiki
https://en.scratch-wiki.info/wiki/Pen
亀井美穂子，宮下十有，加藤良将，鳥居隆司：“小学生の表現とものづくりにおける ICT の活用に関する考察―放課
後クラスでの 3D プリンタおよびカッティングマシン導入―”，椙山女学園大学文化情報学部紀要，No.18，pp.43–50(2018)
Type T，堀田龍也：“事例と動画でやさしくわかる! 小学校プログラミングの授業づくり”，学陽書房 (2021)
横川耕二：“理科がもっとおもしろくなる Scratch で科学実験”，誠文堂新光社 (2021)

業案と言える．なお「拡大図と縮図」においても，図形同士で辺の長さや面積の大きさを重ねたり折ったりして比較できることは，理解を促す効果が期待できる．
また，本システムを用いて折れ線グラフを出力することが可能である．理科では「もののあたたまり方」など温度の変化を計測する単元があり，たとえば文献 [6] では

micro:bit で温度を計測するプログラムを作成することが提案されている．MakeCode（の命令ブロック）を用いてプログラムを作成すると micro:bit の温度センサの値を CSV形式で保存できるため，それを Turtle Graphics のソースコードに変換し，折れ線グラフとして出力すれば変化量の推移を触覚で確認できる．参考までに，熱した水が冷める
場合の温度変化の SVG ファイルを図 8 に示す．なお y 座
標の向きが上下逆になるが，出力後の用紙を裏返せば問題は生じない．

4. まとめ本研究では，視覚支援学校小学部におけるプログラミン
グ教育にカッティングマシンを導入することを想定し，視© 2023 Information Processing Society of Japan184