情報処理学会論文誌

教育とコンピュータ

Vol.3 No.1 53–63 (Feb. 2017)

論 文

タブレット端末で動作する，マイコン用ビジュアル
プログラミング環境 aiBlocks の開発
光永 法明1,a)

井芹 威晴1,†1

吉田 図夢1,†2

受付日 2015年11月4日，再受付日 2016年9月28日,
採録日 2016年11月3日

概要：タブレット端末が普及するにともない，パソコンではなくタブレット上でのプログラミング環境も増えつつある．最近ではマイクロコントローラあるいはマイクロコンピュータを省略してマイコンとよばれる 1 チップから数チップで計算機を構築できるコンピュータが，家電，車といった製品の中だけでなく，趣味の電子工作や学校でのプログラミングの学習にも使われている．しかし，そのプログラミングに使えるタブレット端末上のビジュアルプログラミング環境はみあたらない．もし，そのような環境があればマイコンや電子工作に親しむ層が増えると期待される．ところで，マイコンにインタプリタを載せればプロ
グラミング環境にコンパイラは不要であり，デバッグ情報をインタプリタから提供すれば，タブレット端末のような資源の限られたコンピュータでもプログラムの動作状態やマイコンの入出力といった情報を表示するプログラミング環境を実現しやすい．そこで，マイコンにインタプリタを搭載し，そのプログラムを開発するタブレット端末用ビジュアルプログラミング環境 aiBlocks を実現したので，初めてプログラミ
ングと電子工作に取り組んだ初心者による aiBlocks の評価とともに報告する．
キーワード：タブレット端末，ビジュアルプログラミング，マイコン，プログラミング環境

aiBlocks: A Visual Programming Environment on a Tablet PC
to Write a Micro Controller’s Program
Noriaki Mitsunaga1,a)Takeharu Iseri1,†1

Tom Yoshida1,†2

Received: November 4, 2015, Revised: September 28, 2016,
Accepted: November 3, 2016

Abstract: In recent years, tablet PCs are becoming popular and number of visual programming environments on them are increasing. Meanwhile, micro controllers, small computers that consist of single or a few
ICs, are becoming popular among hobyists and programming education. We beleive that a visual programming environment to build a micro controller program on a tablet PC makes more pepole to familar withmicro controllers and electronical circuits. However, no such visual programming environment on tablet PC
has been published as far as we know. Then, we have developed such an environment named “aiBlocks” onAndroid OS. In this paper, we report how we developed aiBlocks and how beginners used it.
Keywords: tablet PC, visual programming, micro controller, programming environment

1. はじめに
1

†1
†2
a)

器のほぼ全面がディスプレイとタッチパネルで構成される機器が，従来からあるパソコン以上に普及してきてい最近ではスマートフォンやタブレット端末とよばれる機る．それらで動作するアプリケーションソフトは映像や

大阪教育大学
Osaka Kyoiku University, Kashiwara, Osaka 582–8582,
Japan
現在，岸和田市立桜台中学校
Presently with Kishiwada Sakura-dai Junior High School
現在，Fubic Singapore PTE. LTD.
Presently with Fubic Singapore PTE. LTD.
mitunaga@cc.osaka-kyoiku.ac.jp

文章などのコンテンツを表示するものが多かったが，普c 2017 Information Processing Society of Japan

及するにつれ techBASIC [1]，Hopscotch [2]，Pyonkee [3]，ScratchJr [4] といったプログラミング環境も増えている．
こういった端末でプログラミング環境を提供することで，あらたにプログラミング用のハードウェア（たとえばパソ

53

情報処理学会論文誌

教育とコンピュータ

Vol.3 No.1 53–63 (Feb. 2017)コン）を用意せずに入門できるという利点がある．また，いたプログラムの作例集試作 [14] の報告を 1 つの報告にまビジュアルプログラミング環境を使うとキーボード操作にとめるとともに，他のビジュアルプログラミング環境との不慣れな児童・生徒もプログラミングを楽しむことができ

比較，開発にあたって想定している初心者のプログラミン

る [5] といわれており，ディスプレイと一体型のタッチパ

グ過程の説明を加え，aiBlocks 開発環境全体として報告す

ネルによる操作も直感的で相性がいいと考えられる．

る．以下，2 章ではタブレット端末上でのプログラミング環

ところでマイコン（マイクロコントローラ，マイクロコ

境を概観し，aiBlocks の開発の基とした iArduinoTerminal

ンピュータの略称，1 チップから数チップで構成され家電

for Android を紹介する．そして，想定する初心者のマイや車などに組み込まれることが多いコンピュータ）が広くコンプログラムの作成過程を述べる．3 章では aiBlocks の普及し，産業機器や電化製品だけでなく趣味の電子工作や全体構成と操作方法，実装，作例集について説明する．そ学校での学習にも広く部品として使われている．マイコン

して，4 章で aiBlocks の使用感と初心者による評価を報告を使った電子回路の場合には，ハードウェア，ソフトウェ

し，5 章にまとめと今後の課題を述べる．

アの両方についての知識が必要になる．そのため，ハード

2. タブレット端末向けプログラミング環境

ウェアのみの電子工作，ソフトウェアのみで完結するプロ
グラミングと比べて学習のハードルが高くなりやすい．そ2.1 タブレット端末向けプログラミング環境の現状

こで，ある程度ハードウェアを完成させたマイコンボード

現在入手しやすいタブレット端末の OS には，Android，やモジュールを用意したり，ライブラリを充実させたプロ

iOS，Windows がある．Windows はキーボードのあるパ

グラミング環境を用意したりするといった工夫がされてソコンだけでなくタブレット型のパソコンでも利用されるいる．そのような環境はマイコンの機能と速度を最大限OS である．そのため，Windows 上のソフトウェアはタブに生かす方向のものと，多少の制限があっても開発のス

レット形式のパソコンでも動作するがマウス操作を中心にテップを少なくする方向のものがある．初心者にとっては考えられているものが多く，必ずしも指で画面を触っての後者が有効であり，BASIC 言語処理系 [6], [7], [8], [9] や操作はやりやすくない．またタブレット端末での Windows

Arduino [10] などが開発・市販されている．とくに利用すの OS の占有率は 3.7%と低い（2013 年時）[21] ため，以下るマイコンを限定し周辺回路の準備のステップを少なくしでは Windows をパソコン（PC）用 OS として扱う．

た Arduino は利用者が多い．
そのような環境を用いても多くの場合に，回路やプログ

表 1 に著者らが調べた 1) 初心者にも扱いやすいと考えられるマイコン用ビジュアルプログラミング環境，2) タブ

ラムが意図どおりに動作していないときにはデバッガや回

レット端末上でのビジュアルプログラミング環境，3) タ

路計（テスタ），オシロスコープといった従来からの動作状

ブレット端末上でのマイコン用プログラミング環境の一態の可視化ツールが必要とされている．しかし，初心者は覧を示す．1) 初心者に扱いやすいと考えられるマイコン

それらのツールの利用方法に不慣れなためツールが準備さ用プログラミング環境には ArduBlock [15]，PICAXE [16]

れていても操作の習得に時間がかかり，また慣れない接続（ターゲットの PICAXE は Microchip Technology Inc. のでミスをすると余計に混乱するといった問題がある．それ

PIC マイコンに専用ファームウェアを書き込んだマイコ

に対し，マイコン上にプログラミング言語を解釈実行するンである），12Blocks [17]（Parallax Propeller は Parallax

インタプリタを載せ，インタプリタから動作の情報を開発

Inc. のマイコンの名称）などがあげられるが，これらは PC

ツール上に送り，意識しなくてもプログラムの実行場所を用の OS（Windows，Mac OS X，Linux のすべて，もし表示し追加の配線なしにピンの様子が観察できる（可視化

くはいずれか）でのみ動作する．LEGO mindstorms EV3される）開発環境 iArduinoTerminal が提案されている [11]のアプリケーションソフトウェア [18] はタブレット端末

が，テキスト形式でのプログラミング環境である．

の OS である iOS 上で動作するが専用ハードウェアを必要

そこで，初心者にも多く使われている Arduino マイコンとする．BlocklyDuino [19] はブロックを並べてプログラムボード用の，Android を載せたタブレット端末で動作するを作成できるが，プログラムを Arduino 言語に変換する

ビジュアルプログラミング環境 aiBlocks *1 を開発し，開発

機能のみを持ち，コンパイラもしくは開発環境（Arduinoの経過を報告してきた [12], [13], [14]．aiBlocks の実現には

IDE（Arduino マイコンボード用の標準的な開発環境），

Arduino に iArduino インタプリタを載せ，タブレット端末

ArduinoDroid [20] など）が別途必要である．日本国内のではビジュアルプログラミング言語から iArduino インタ

中学校向けの学習教材などのマイコン用ビジュアルプログ

プリタが解釈・実行できる言語に変換し，実行中の入出力

ラミング環境は PC 上の OS でのみ動作し，自社のハードの様子を特別な操作なしに把握できる環境とする．本論文

ウェア向けとしてのみ供給されているのであげていない．

では，これまでの aiBlocks の開発 [12], [13]，aiBlocks を用

2) タブレット端末上でのビジュアルプログラミング環*1

http://www.osaka-kyoiku.ac.jp/m̃itunaga/aiBlocks/ で公開
している．

c 2017 Information Processing Society of Japan

境には Hopscotch [2]，Pyonkee [3]，ScratchJr [4] などがあるが，マイコンのプログラムを作成する環境ではない．3)54情報処理学会論文誌

教育とコンピュータ

表 1

Vol.3 No.1 53–63 (Feb. 2017)

初心者に扱いやすいと考えられるビジュアルプログラミング環境と，タブレット上で実現されているマイコン用プログラミング環境

Table 1 Visual programming environments for beginners including environments which
run on tablet PC and targetting for micro controllers.
動作 OS

言語形式

ターゲット

ArduBlock [15]

PC

ビジュアル

Arduinoprintf デバッグ

PICAXE [16]

PC

ビジュアル

PICAXE

シミュレータ上で可12Blocks [17]

PC

ビジュアル

Parallax Propeller,

あり

LEGO mindstorms EV3 [18]

iOS

ビジュアル

LEGO mindstorms EV3あり

専用ハードウェア

Android

ビジュアル

Arduino-

ブロックから Arduino

名称

動作の可視化PICAXE, Arduino ほか
BlocklyDuino [19]備考ターゲットにより可視化に制限あり

言語への変換のみ

Hopscotch [2]

iOS

ビジュアル

タブレット上あり

Pyonkee [3]

iOS

ビジュアル

タブレット上あり

ScratchJr [4]

iOS

ビジュアル

タブレット上あり

ArduinoDroid [20]Android

テキスト

Arduinoprintf デバッグ

iArduinoTerminal

Android

テキスト

Arduinoあり

for Android [11]タブレット端末上でのマイコン用プログラミング環境であれる．プログラムエディタはプログラムの実行中の部分をる ArduinoDroid [20] と iArduinoTerminal for Android [11]ハイライト表示する．これにより，プログラムの実行の様はテキストベースのプログラミング言語用の環境である．

子，入出力ピンの様子を難しい操作なしに観察できる．まArduinoDroid はプログラムやハードウェアの動作を確認たデバッグ用インタフェース部分のみを Arduino 言語のラするために，いわゆる printf デバッグが必要であるのに対イブラリとして利用できるので，iArduino 言語で開発できし，iArduinoTerminal for Android は変数の値表示や入出ない速度や規模のプログラムについて Arduino 言語に移力のグラフ表示，プログラムなしでの出力の操作といった行しても入出力波形のモニタとピンの操作ができる．そこ

機能を持つ．

で aiBlocks は iArduinoTerminal for Android を拡張してビジュアルプログラミング環境を実現する．

2.2 インタプリタ iArduino と開発環境

aiBlocks は Android 用アプリ開発の標準プログラミン

iArduino は Arduino 上で動作するインタプリタであ

グ言語である Java で記述する．aiBlocks を JavaScript でる [22]．Arduino の標準の Arduino 言語に文法などが似た記述しブラウザ上のウェブアプリケーションとして実現で

プログラミング言語 iArduino 言語を解釈して実行する．

きれば実行環境がより多くなるメリットがあるが，ウェブ

iArduino は非同期シリアルインタフェースを通じて対話的

アプリケーションではシリアルポートを操作できないためな実行と実行中のプログラムの制御を受け付け，パソコンである．著者らが調べた限り，シリアルポートを操作でき上のシリアルターミナルなどを通して操作する．通常のプる JavaScript の実行環境は Chrome アプリと node.js であ

ログラムの実行に加え，ステップ実行，自動ステップ実行

る．Chrome アプリは Chrome OS 上または PC 用 OS の（文の解釈と解釈の間に一定時間実行停止）ができる．そChrome ブラウザ上で実行できるが，Andoroid の Chrome

して，iArduino 言語のプログラムを不揮発メモリ（マイコ

ブラウザでは実行できない．また node.js はサーバサイド

ン内蔵の EEPROM）に保存し，リセット時に自動実行がの JavaScript 実行環境である．PC の場合にはシリアルできる．したがって開発が終われば Arduino 単体で動作す

ポートサーバとよばれるシリアルポートの通信をネット

る．また可読形式に加えバイナリ形式のデバッグ用インタ

ワークの通信に変換するプログラムを動作させ，ブラウザ

フェースを持っており，入出力ピンの読み書きや変数の値

上の JavaScript がそのプログラムと通信することも考えらの読み出しがプログラムの実行中でも可能である．加えてれる．しかし，Android OS の場合にはそのようなプログ

実行中のプログラムの位置（アドレスに相当）を知ること

ラムを用意することが難しい．

ができる．

iArduinoTerminal は Windows 用，iArduinoTerminal for

2.3 ビジュアルプログラミング環境の設計方針と想定す

Android は Android 用の iArduino 用シリアルターミナルる初心者のマイコンプログラムに親しむ過程

ソフトである [11]．シリアルターミナルに加えて，プログ

ここではブロックを並べて手続き型のプログラムを作成

ラムエディタ，変数と入出力波形のモニタ，入出力ピンのするビジュアルプログラミング言語を想定する．そのよう操作インタフェースを備えているため開発環境と考えらな言語の場合にはあらかじめ用意するプログラムのブロッc 2017 Information Processing Society of Japan

55

情報処理学会論文誌

教育とコンピュータ

Vol.3 No.1 53–63 (Feb. 2017)

クの種類が多くなることが想定される．そのため，利用可考える．それができてから具体的に，点滅させたい，音を能なブロックをすべて画面に表示するのではなく，いくつ変化させたい，動きを変えたいとなり，さらには外界に反かのカテゴリに分類しメニューを用意することになると考応させたいとなるのではないだろうか．LED の点滅，音のえられる．

出力，モータの動きといったものがあると回路・マイコン

Scratch [23] は子ども向けのプログラミング環境としての動作が分かりやすい．また作りたい作品のイメージを具有名であり，多くの子どもたちが利用している（図 1）．

体化するにも役立つと考える．自身の経験も含め，初心者

Scratch はプログラミング言語を教えプログラムを作らせのマイコンプログラム（作品）の作成と理解の過程は次のることを目的としておらず，子ども自身が興味を持って何ようになると考える．

かを達成しようとすることを実現するためのツールを目標( 1 ) 作品づくりの最初の段階では，出力に関係するブロッとしている．したがって Scratch では子どものやりたいことでブロックが分類，メニューが作成されている．図 1 にクの使い方を覚える．

( 2 ) 次に，そういったブロックと時間待ちのブロックを並あるように，たとえば，キャラクタを動かしたいときにはべ，オープンループで動作するプログラムを作る．

「動き」を，キャラクタの見た目を変えたい（画像を切り( 3 ) 繰返しや，条件分岐，あるいは演算を使って動作を複替えたい）ときには「見た目」を，音を出したいときには雑にする．

「音」を，マウスによるクリックなどのイベントに反応させ( 4 ) 入力に応じて動作を分岐するプログラムにする．

たいときには「イベント」を，繰返しや条件分岐などプロ( 5 ) 入力や記憶（変数）を使って計算（演算）をし，動作

グラムの流れを制御したいときには「制御」をクリックすれば，その分類のブロックが表示される．またブロックの色はメニューの色と統一されていて同じ分類のブロックのメニューを探しやすくなっている．

を変えるプログラムにする．

( 6 ) デバッグ方法も覚え，さらに発展させていく．
そうであれば ArduBlock のようなプログラミング言語の構造に基づくブロックの分類よりも，Scratch のような一方，マイコン用のプログラミング環境である ArduBlock

分類がよいと考えられる．以下では，この想定に基づいてを見るとブロックは「制御」
「ピン」
「比べる」
「計算する」

操作などが煩雑にならないようにプログラミング環境を設「変数/定数」「ユーティリティー」「通信」などに分類され計，実現していく．

ている．この分類はプログラミング言語の構造を知ってい3. ビジュアルプログラミング環境 aiBlocks

ると分かりやすい．たとえば「制御」には for 文，while 文，

if 文と時間待ちの，「ピン」には入出力ピン操作の，「比べ3.1 全体構成

る」には比較演算子と論理演算子に相当するブロックが分

aiBlocks の全体構成を図 2 に示す．プログラムの開発

類されている．LED を点灯するには「ピン」に，音を出す

対象である Arduino 上に iArduino インタプリタを載せには「ユーティリティー」にあるブロックを使う．どちら
かというと，マイコンにできることを理解してから必要なブロックを探す必要がある．
ところで，マイコンと簡単な部品を利用した作品で何をしたいかという問いを子どもにすると，最初の答えは光らせたい，音を出したい，動かしたいといった答えになると

図 2

aiBlocks の動作するタブレットと Arduino は USB ケーブル
でつなぐ．Android 上の aiBlocks アプリケーションで作成したプログラムを，Arduino マイコンボード上の iArduino イ
ンタプリタが実行する

Fig. 2 The aiBlocks runs on a tablet PC. The target Arduino,
micro controller, which runs iArduino interpreter is con図 1 Scratch 2.0 の表示（一部切り抜き）

nected with the tablet PC via USB cable. The program

Fig. 1 Outlook of visual programming environment Scratch

written in aiBlocks runs on the Arduino being inter-

2.0.

c 2017 Information Processing Society of Japanpreted by iArduino.

56

情報処理学会論文誌

教育とコンピュータ

Vol.3 No.1 53–63 (Feb. 2017)

る．aiBlocks は Android 上で動作し，ブロックを並べてするとブロックのプログラムが iArduino 言語に変換され作成したプログラムを iArduino 言語に変換し，iArduino

iArduino に送られる．『実行』ボタンをタップすると，そにシリアルインタフェースを通して送る．iArduino は受のプログラムが実行される．

け取ったプログラムを RAM に記憶し，逐次解釈しながら実行する．プログラムの開発が終わり RAM 上のプログ

3.3 プログラミングに使うブロック

ラムを EEPROM に書き込めば Arduino だけで動作する．

aiBlocks で用意しているブロックをカテゴリごとに表 2

Arduino 上には USB シリアルインタフェースが載っておに示す．ブロックのカテゴリは 2.3 節での想定に基づきり，簡単な回路であればバスパワーで動作するのでタブ
レット端末と USB ケーブルでつなぐだけでよい．

3.2 画面構成と基本操作
aiBlocks の画面表示を図 3 に示す．画面左上にブロッ
1 『カテゴリ選択ボタン』が並び，クのカテゴリを選択する
2 『ブロックパレット』がある．画面中央には，その下には
3 『プログラムエリア』
ブロックを並べてプログラムを作る
4 『実行があり，その上部には実行に関するボタンが並ぶ
ツールバー』がある．
プログラムを作成するときはまず，使いたいブロックの
1 カテゴリをタップする．すると選択したカテゴリの2ブ
ロックパレットが表示される．その中から使いたいブロッ

3 プログラムエリアにドラッグし並べる．図 3
クを選び，
では「出力・待つ」のカテゴリの「デジタル出力」ブロッ
クと「待つ」ブロックを並べて，1 秒間 Arduino 上の LEDを点灯するプログラムを作っている．プログラムが完成し

図 3 aiBlocks のプログラミングタブの表示．上部のタブバーを省

4 実行ツールバーの『書き込み』ボタンをタップする．
たら

略している

Fig. 3 Toolbars and buttons of aiBlocks.

表 2 aiBlocks に用意しているブロック一覧

Table 2 List of programming blocks on aiBlocks.
ブロック名称（C 言語の
カテゴリ

出力・待つ

相当する名称）

動作・処理など

デジタル出力

指定したピンのデジタル出力（L/H）を変える

アナログ出力

指定したピンにアナログ出力（256 段階の PWM 出力）を変える

待つ（秒）
待つ（ミリ秒）
音
無限ループ

くりかえし

指定した時間（秒単位）だけ待つ
指定した時間（ミリ秒単位）だけ待つ指定した周波数（Hz）の音を指定した時間（ミリ秒単位）鳴らす
ずっとブロック（群）を繰り返す

for 文

指定した回数ブロック（群）を繰り返す

while 文条件式が成り立つ（真：値が 0 でない）間ブロック（群）を繰り返す

if 文

条件式が成り立つ（真：値が 0 でない）ときブロック（群）を実行する

if-else 文

条件式が成り立つとき 1 つ目のブロック（群）を，成り立たないとき 2 つ目のブロック（群）を
を実行する

分岐

入力

数・演算

比較演算子

左右の値を比較し，等式（不等式）が成り立つとき 1 となる演算子

AND

左右がともに真である場合 1 となる演算子

OR

左右のいずれかが真である場合 1 となる演算子

NOT

式が 0（偽）である場合 1 となる演算子

デジタル入力

指定したピンのデジタル入力の値（0(L) か 1(H) を返す）

アナログ入力

指定したピンのアナログ入力の値（0〜1023）を返す

定数・変数

定数（数値）または変数名（アルファベット a〜m）を表す

代入文

変数に式の値を代入する

四則演算

四則演算の二項演算子

c 2017 Information Processing Society of Japan

57

情報処理学会論文誌

教育とコンピュータ(a) numeric input mode

Vol.3 No.1 53–63 (Feb. 2017)(b) variable input mode

図 4 数値/変数名をタップすると入力パッドを表示する．入力パッドは (a) 数値モードと (b) 変数名モードをタブで切り替えられる

Fig. 4 An input pad is shown when you tap a number of avariable. The pad has two modes, (a) numeric input
mode and (b) variable selection mode.

図 5

aiBlocks で作成したプログラム（上）を，iArduino 言語のプ
ログラム（下）に変換し，インタプリタへ渡す．プログラムの実行中は，（上）の (A) が指す「1 秒待つ」のように実行中の『出力・待つ』『くりかえし』『分岐』『入力』『数・演算』のブロックの枠を太く表示する

5 種類に分けている．ブロックは全部で 19 種類である．

Fig. 5 A program written with blocks (upper) is converted to『出力・待つ』には，デジタル/アナログ出力と待つ（busyiArduino language (lower) and sent to iArduino inter-loop），音を出すブロックがある．『くりかえし』には，C

preter. Running block is highligted as shown (A) when

言語の for 文と while 文に相当するブロックが，『分岐』に

the micro controller runs a program.

は，if 文に相当するブロックと条件式でよく利用する演算子に相当するブロックがある．
『入力』には，デジタル/ア
ナログ入力のブロックが，『数・演算』には，数値や変数，
代入，四則演算のブロックがある．
ブロックの形状は，単独で C 言語の文（式文）に相当す
るブロック（デジタル出力や変数への代入など），式の一部になるブロック（数値，変数名，演算子，デジタル/アナロ

図 6 アナログ出力のブロックとその入力パッド．入力パッドの操グ入力など），制御文に相当するブロック（for，while，if

作バーをスライドさせると，マイコンボードの出力がリアルタ

文など）で変え，形状が異なるブロックが結合できないよ
うにしている．これにより文法的な誤りを防ぐ．
また，数値や変数名などの入力には専用の入力パッドをイムに変化する

Fig. 6 An analog output block and its input bar to determine
output value. The output of micro controller changes
in real time when you slide the bar.

用意している．数値・変数名の入力パッドを図 4 に示す．
上部のタブで (a) 数値と (b) 変数名の入力モードを切り替

グラムはユーザに見せない．
「書き込み」ボタンをタップえる．(a) 数値モードでは 8 桁までの数値を，(b) 変数名

するとこの変換をして iArduino に送る．これを実行する

モードでは a から m の範囲のアルファベット 1 文字を入と Arduino 上の LED（13 番ピンに接続）が 1 秒ごとに点力できる．他にピン番号，アナログ入力の値，等号・不等灯/消灯を繰り返す．

号，音階，四則演算記号の入力用パッドがある．これによ

また出力に関するブロックをタップするとすぐにピンり正しい iArduino 言語として変換できない，あるいは実の出力が変わる．たとえば図 5 のデジタル出力のブロッ

行してもおかしくなるような文字入力をできるだけ防ぐ．

クをタップすると 13 番ピンの出力がすぐに HIGH またはaiBlocks で作ったプログラムの例を図 5 に示す．『無限LOW になる．またアナログ出力の値の入力パッドは操作

ループ』のブロックの中に『デジタル出力』と『待つ（秒）』バーをスライドさせて値（0〜255）を変える（図 6）．指のブロックがある．このプログラムを iArduino 言語のプを離さずバーにのせたままでも出力が変化するようにしてログラムに変換すると図 5 下のテキストになる．このプロいる．入力のブロックは入力の値をリアルタイムに表示すc 2017 Information Processing Society of Japan


58

情報処理学会論文誌

教育とコンピュータ

Vol.3 No.1 53–63 (Feb. 2017)

図 7 デジタル入力のブロック．現在の値（L または H）を表示する

Fig. 7 An digital input block. It shows current value L or H.

図 8 アナログ入力のブロック．現在の値（0〜1023）を表示する

Fig. 8 An analog input block. It shows current value (from 0
to 1023).

る．デジタル入力のブロックは電圧が高い場合は H，低い
場合は L をブロックに表示する（図 7）．Arduino のアナ
ログ入力は 0 [V]〜5 [V] の電圧を 1,024 段階で測ることができる．アナログ入力のブロックは現在の入力電圧を 0〜1023 の数値で表示する（図 8）．
図 9 作例を真似るのに必要な部品を紹介するページ（部分）3.4 プログラムの実行
プログラムの実行中は実行しているブロックをハイラ

Fig. 9 This page introduces electric parts which are used forexamples.

イト表示する．図 5 では (A) の 1 秒待つブロック（de-lay(1*1000) に変換）を実行中である．プログラムの動作

合にはスクロールをしたいと判断し，ブロック全体の描画を観察しやすいよう，通常の実行（図 3 の「実行」ボタン）

原点を移動してスクロールの効果を出す．それ以外のカテに加え，1 命令実行すると停止するステップ実行（「1 行ず

ゴリ選択ボタンや実行ツールバー上のボタンのタップであつ実行」ボタン）と，文の解釈と解釈の間に 0.5 秒間実行

れば，それぞれの機能を実現する関数を呼び出す．

を停止する自動ステップ実行（「ゆっくり実行」ボタン）が実行中のブロックのハイライト表示については次のようできる．

にして実現している．
『書き込み』ボタンがタップされブ

3.5 ブロックの描画と操作の実現

各ブロックの変換後のプログラムリスト上での位置（先頭

ロックによるプログラムを iArduino 言語に変換する際に，

aiBlocks の開発言語は Android 標準の Java である．ブからのバイト数と長さ）を記憶しておく．プログラムの実

ロックの描画に適した標準のライブラリがないため，画面行中には iArduino から実行中のプログラムの位置が送らの図 3 の部分を Canvas とし，そこに多角形や円弧の描画れてくるので，対応するブロックを探しそれをハイライト

によりボタンやブロックを実現している．そのため，プロ表示（枠線を太く）する．

グラムエリアのスクロールも aiBlocks アプリ内に実装して実現している．Canvas 内をタップするとタップした座標

3.6 aiBlocks を利用したマイコン電子工作の作例集

によりブロック上，プログラムエリア内（ブロック上では

作例集ではまず，作例を真似るのに必要な部品についてない），ボタン上，それ以外（何もしない）と判断する．ブ

簡単な紹介（図 9）をし，ブレッドボードの使い方，カラー

ロック上をタップしたと判断した後に指を動かすとドラッ

コードの読み方，aiBlocks の操作などを説明する（図 10）．

グと判断し，指の動きに合わせてブロックの座標を更新し，次に Arduino 上の LED を使うプログラムを紹介した後で，Canvas を再描画する．指が離れたら（ドラッグ終了），離

ブレッドボード上での配線例と aiBlocks のプログラムリス

れた場所の座標とすでにプログラムエリアにある各ブロットを使って作例を紹介する（図 11）．見開き 2 ページを使クの座標を比較し，隣接ブロックを探す．ドラッグしたブい準備する部品，配線例，プログラムを紹介し，トラブル

ロックが既存のブロックの下より（文に相当するブロック

シューティングを載せる．そして部品やプログラムの使いの場合）で座標のずれがブロックの大きさの 1/3 以内であ方を理解するために試すとよい内容を「やってみよう」とれば隣接ブロックとし，既存のブロックとつなぐ．

して載せる．

ブロック上ではないプログラムエリア内をタップした場

c 2017 Information Processing Society of Japan


作例の一覧を図 12 に示す．2.3 節の想定を基に自身が59

情報処理学会論文誌

教育とコンピュータ

Vol.3 No.1 53–63 (Feb. 2017)

図 11 ブレッドボードに載せた LED を点滅させる作例のページ．見開き 2 ページで構成している

Fig. 11 These pages explain how to blink an LED on a solderless breadboard.
1 LED を点滅させる
2 LED を 2 つ点滅させる
3 圧電スピーカーを使って音を出す
4 模型用モータを回してみる
5 LED の明るさを変えてみる
6 スイッチで LED を点滅させる
7 スイッチを押したらカッコウがなく
8 ボリュームの角度で LED の点滅の速さを変える
9 暗くなったら LED を点滅させる
10 温度センサで温度が高くなると LED を点灯させる
11 熱くなったら扇風機を回す
12 重さを感じたら音を出す
13 人感センサで人が近づいたら LED を点滅させる
14 距離センサで何かが近づいたら LED を点滅させる
15 LED をだんだん明るく，だんだん暗くする
16 LED を順番に点灯する
17 明るさの変化に反応させる
図 12 作例集で取り扱う作例

Fig. 12 List of examples.

せる」でブレッドボードと aiBlocks の操作に慣れる．
「2

LED を 2 つ点滅させる」「3 圧電スピーカを使って音を出
図 10 ブレッドボードの使い方を説明するページ

Fig. 10 This page explains how to use a solderless breadboard.

す」「4 模型用モータを回してみる」でデジタル出力，音，
待ちブロックを使った，光，音，動きの作り方を知る．そして「5 LED の明るさを変えてみる」でアナログ出力ブ

電子工作とプログラミングの初心者である著者の 1 人が構

ロックを扱う．

成を決めた．1 から 5 は出力と時間待ち，くりかえしのブ

次に入力に応じて動作を分岐させる作例が 6 と 7 であロックを主に使った作例である．まず「1 LED を点滅さる．
「6 スイッチで LED を点滅させる」「7 スイッチを押し

c 2017 Information Processing Society of Japan

60

情報処理学会論文誌

教育とコンピュータ

Vol.3 No.1 53–63 (Feb. 2017)

たらカッコウがなく」ではデジタル入力と if ブロックの使い方を扱う．そして入力を演算する作例「8 ボリュームの角度で LED の点滅の速さを変える」があり，アナログ入力の使い方を紹介する．そして「9 暗くなったら LED を点滅させる」から「14 距離センサで何かが近づいたら LEDを点滅させる」はセンサの紹介を兼ねて条件分岐を復習している．さいごに「15 LED をだんだん明るく，だんだん暗くする」「16 LED を順番に点灯する」「17 明るさの変化に反応させる」で少し抽象度の高い話題を取り扱う．
これらの作例の紹介の後で，作例の応用を 3 つ紹介して図 13 作成したライントレースカーの外観

いる．1 つは「3 圧電スピーカを使って音を出す」「9 暗く

Fig. 13 Outlook of a simple line follower robot.

なったら LED を点滅させる」を組み合わせた，照明を消すとハッピーバースデーのメロディが流れる作品である．
次に「3 圧電スピーカを使って音を出す」「10 温度センサ
で温度が高くなると LED を点灯させる」「17 明るさの変化に反応させる」を組み合わせた，冷蔵庫のドアが開放されているとメロディで知らせる作品である．最後に「4 模型用モータを回してみる」「7 スイッチを押したらカッコウが鳴く」を組み合わせた，スイッチで動く模型の作品を紹介している．ほかにトラブルシューティングの方法を紹介するページを設けている．

図 14 作成したライントレースカーの回路図

Fig. 14 Circuit diagram of a line follower robot.

4. aiBlocks の使用感と初心者による評価
4.1 aiBlocks を使った製作例と使用感
aiBlocks を使って製作したライントレースカーの外観を図 13 に，回路図を図 14 に示す．マイコンボードはArduinoUno，電源には単三形乾電池 4 本を使用している．
モータの駆動にはトランジスタを使用し，ベース端子をア
ナログ出力ができる 10 番と 11 番ピンに接続する．ラインの判別には LED と CdS セルを使用する．LED と CdSを，ライン（黒色）の幅以上のスペースを空けて 2 組固定
し，LED で床面を照らし，CdS でその反射光を受ける．固定抵抗と CdS の抵抗分圧により，CdS の明るさの変化による抵抗値の変化を電圧に変える．CdS で受ける光が弱い（ライン上）とアナログ入力の値が大きくなり，逆に受ける

図 15 aiBlocks で書いたライントレースカーのプログラム

Fig. 15 Program written in aiBlocks for a line follower robot.

光が強い（ライン外）とアナログ入力の値が小さくなる．
車体の中心がライン上にあるときは左右の CdS の間にを決める 10 番ピンのアナログ出力を 15 とし，そうでなけ

ラインがあるので，アナログ入力の値は左右ともに小さい．

れば 50 としている．2 つ目の if-else 文は車体の右にある

このときは左右のモータの回転数を同一にして直進すればCdS とモータ用である．この 2 つの if-else 文を繰り返すこよい．ラインが左に曲がっていたり車体の中心がラインのとでライン上を左右に振れながら車体が進む．

右寄りになり，左の CdS がラインの黒色の影響を受けるとライントレースカーは著者の 1 人が製作したが，その過アナログ入力の値が大きくなる．このとき左のモータの回程で以下の使用感を得た．使用した Android 端末は Acer

転数を下げれば，車体の中心がライン上に戻る．右の CdS

製の ICONIA TAB A200（Andriod OS 4.0.3，画面サイズ

がラインの黒色の影響を受けた場合も同様である．

10.1 インチ，解像度 1,280×800，静電容量式タッチパネル）

ライントレースカーのプログラムを図 15 に示す．車体である．こういった小さな模型を初心者が製作する場合にの左にある CdS を A0 番ピンに，モータを 10 番ピンにつは，if-else 文の条件式の閾値をラインとライン以外の反射ないでいる．1 つ目の if-else 文で CdS が黒色の影響を受け率などから計算によって決めるのではなく，実際にライン

A0 番ピンの値が 250 以上であれば左のモータの回転速度とライン以外でのアナログ入力の値を測って決めることがc 2017 Information Processing Society of Japan

61

情報処理学会論文誌

教育とコンピュータ

Vol.3 No.1 53–63 (Feb. 2017)

利用にあたって aiBlocks と作例集に大きな問題は見られなかった．Android 端末は同程度の価格の PC よりも軽く動作時間が長い（TF103C の場合，キーボードなしで約550 g，カタログ上の使用時間は約 9.5 時間）ので，作例集，部品一式とともに持ち運び，電源がないインタビュー場所
図 16 条件式の入っている if-else 文ブロックで利用するのに不便はなかった．また大学生は PC に不慣Fig. 16 An if-else block which has a conditional expression

れであってもスマートフォンの操作には慣れているため，

block.

操作上の問題もなかった．その一方で，Arduino ボード上の LED に気づきにくい，ブレッドボードの穴の位置の間想定される．そのような方法で閾値を決めるにあたり，ア

違いに気づきにくいという問題がみられた．しかし，作例

ナログ入力の値をブロックに表示していることが有効と感集を利用し配線図の読み方に慣れてくると，配線ミス（ブじた．また，モータの回転数も試行錯誤的に決めると想定

レッドボードの穴の位置の間違い）には自然と気づくようされる．それについてもアナログ出力のブロックをタップな様子が観察された．

して 2 つの速度の切り替え，入力パッドの操作バー（図 6）

またプログラムの作成が楽しくなり aiBlocks で作成できによる実際のモータの回転数の調整が有効と感じた．またる以上の長さのプログラムに挑戦した学生がいた．インタ

Android 端末は軽くバッテリの残量を気にせず，床に置い

ビューでは「慣れてきたら楽しかった」，「仕組みは分からたコース上のライントレースカーのそばで利用できた．

ないけど，動いたのはうれしかった」という感想が得られ一方で，ブロックの移動操作が直感的でないと感じる場

た．したがって aiBlocks と作例集は初めてマイコンのプロ面があった．具体的には，if 文などのブロックを移動させグラムの作成する初心者が楽しめるものであると考える．

ようとタップしてドラッグしたつもりが，条件式のブロッ

5. おわりにクをタップしてドラッグしてしまうことが何度もあった．
図 16 の if-else 文のブロックを移動させようとしたときに本論文では，インタプリタを載せたマイコンのプログラ

は，条件式の部分ではなく「もし」「なら」といった文字の部

ムを作成する，タブレット端末用ビジュアルプログラミン

分をタップしてドラッグする必要がある．しかし，条件式

グ環境 aiBlocks とその作例集の開発について報告した．開を含んだブロック全体の中央，つまり条件式の中央をタッ発にあたっては初心者がマイコンのプログラムに親しむ過プする傾向が強かった．同じ著者が Scratch や ArduBlock

程をあらかじめ想定し，その過程をスムーズに経るようにをマウスで操作した場合には，そのような傾向がなかった

配慮した．そして aiBlocks を利用した製作例としてライ

ことから，指によるタッチパネル操作固有の問題の可能性

ントレースカーを紹介し著者による使用感を述べた．またがある．

初心者に aiBlocks をインストールしたタブレット，作例集

4.2 初心者による評価

作例集を利用することでプログラミングを楽しめることがと必要な部品を渡し評価を求めた．その結果，aiBlocks とaiBlocks と作例集の評価のため，プログラミング未経験の教育学部所属の大学生 5 名の利用の様子を観察しインタビューした．使用した Android 端末は ASUS 製の ASUS

Pad TF103C（Android 4.4.2，画面サイズ 10.1 インチ，解分かった．今後はサンプルプログラムを充実させるとともに，多くの利用者を得たい．
謝辞

本研究は JSPS 科研費 25870418 の助成を受けたものである．

像度 1,280×800，静電容量式タッチパネル）であり，作例集のほかに制作に必要な部品やブレッドボードなどを用意

参考文献

し，インタビュー場所へ運んだ．観察にあたっては次のよ[1]

うに利用者に指示した．まず 1〜4 の作例を作成する．これによりブレッドボードを使った配線に慣れ，出力，時間[2]

待ち，繰返しのブロックの意味を理解することを期待する．
次に 12，15 以外の好きなプログラムを選んでもらいテキストのページだけを見て作成する．そして，配線の最も複[3]

雑な「12 重さを感じたら音を出す」とプログラムの最も複雑な「15 LED の明るさをだんだん明るく，だんだん暗くする」を作成する．それ以上の細かな指示はせず，プログ
ラムの改変などは制限しなかった．利用は 1 人ずつとし，1 人の利用時間はおおよそ 1 時間 30 分である．

c 2017 Information Processing Society of Japan


[4]
[5]

Byte works Inc.: techBASIC, available from http://
www.byteworks.us/Byte Works/techBASIC.html (accessed 2016-09-27).
Hopscotch Technologies: HOPSCOTCH Make your own
games, available from https://www.gethopscotch.com/
(accessed 2016-09-27).
合同会社ソフトウメヤ：Pyonkee, available from http://
www.softumeya.com/pyonkee/ja/ (accessed 2016-0927).
ScratchJr project: ScratchJr, available from http://
www.scratchjr.org/ (accessed 2016-09-27).
兼宗 進，阿部和広，原田康徳：プログラミングが好きになる言語環境，情報処理，Vol.50, No.10, pp.986–995(2009).

62

情報処理学会論文誌

[6]

[7]

[8]

[9]

[10]
[11]

[12]

[13]

[14]

[15]
[16]

[17]
[18]

[19]

[20]

[21]

[22]

[23]

教育とコンピュータ

Vol.3 No.1 53–63 (Feb. 2017)

Parallax Inc.: BASIC Stamp Windows Editor, available from https://www.parallax.com/downloads/basicstamp-editor-software-windows (accessed 2016-09-27).
MCS Electronics:
BACOM-AVR, available fromhttp://mcselec.com/index.php?option=com content&task=view&id=14&Itemid=41 (accessed 2016-09-27).
mikroElektronika: mikroBASIC Pro for PIC, available from http://www.mikroe.com/mikrobasic/pic/
(accessed 2016-09-27).
MicroEngineering Labs.: PICBASIC PRO, available
from http://www.picbasic.co.uk/forum/
(accessed
2016-09-27).
Arduino project: Arduino, available from http://
arduino.cc/ (accessed 2016-09-27).
光永法明：タブレット端末で動作する，インタプリタ型
言語搭載マイコンのプログラミング環境の開発，情報処理学会研究報告，Vol.2013-CE-119(8), pp.1–4 (2013).
井芹威晴，光永法明：タブレット端末で動く，マイコン用
ビジュアルプログラミング環境 aiBlocks の開発，日本産
業技術教育学会近畿支部第 31 回研究発表会講演論文集，pp.29–30 (2014).
井芹威晴，光永法明：aiBlocks：マイコンにインタプリタを載せて利用するタブレット端末用ビジュアルプログラ
ミング環境，情報処理学会研究報告，Vol.2015-CE-128(8)(2015).
光永法明，吉田図夢，井芹威晴：タブレット端末で動作する
Arduino 用プログラミング環境 aiBlocks の初心者向け作
例集の試作と評価，第 42 回人工知能学会 AI チャレンジ研究会人工知能学会研究会資料，Vol.SIG-Challenge-042-04,
pp.16–20 (2015).
ArduBlock project: ArduBlock, available from http://
blog.ardublock.com/ (accessed 2016-09-27).
Revolution Education Ltd.: PICAXE Editor 6, available from http://www.picaxe.com/Software/PICAXE/PICAXE-Editor-6/ (accessed 2016-09-27).
OneRobot: 12Blocks, available from http://onerobot.
org/products/12blocks/ (accessed 2016-09-27).
The LEGO Group: EV3 プログラミングアプリ，入手先
http://education.lego.com/ja-jp/learn/middle-school/
mindstorms-ev3/teaching-resources/software/tabletapp （参照 2016-09-27）.
Lin, F.: BlocklyDuino is a web-based visual programming editor for arduino, available from https://github.
com/BlocklyDuino/BlocklyDuino (accessed 2016-0927).
Smirnov, A.: ArduinoDroid - Arduino IDE for Android, available from http://www.arduinodroid.info/
(accessed 2016-09-27).
総務省：平成 25 年版情報通信白書第 1 部特集「スマートICT」の戦略的活用でいかに日本に元気と成長をもたらすか，入手先 http://www.soumu.go.jp/johotsusintokei/
whitepaper/ja/h25/pdf/ （参照 2016-09-27）.
Mitsunaga, N.: An interpreted language with debugging
interface for a micro controller, IEEE 1st Global Conference on Consumer Electronics, pp.115–119 (2012).
Maloney, J., Resnick, M., Rusk, N., Silverman, B.
and Eastmod, E.: The Scratch programming language
and environment, Trans. Comput. Educ., Vol.10, No.4,
pp.16:1–16:15 (2010).

c 2017 Information Processing Society of Japan

光永 法明 （正会員）
1997 年大阪大学大学院工学研究科電子制御機械工学専攻博士前期課程修了．同年同研究科知能・機能創成工学
専攻博士後期課程進学．2002 年同単位取得済み退学．同年同大学科学技術振興特任教員．2003 年博士後期課程修了．同年大阪大学大学院工学研究科助手．2004 年より

ATR 知能ロボティクス研究所研究員．2008 年より金沢工業大学機械系ロボティクス学科講師．2011 年より大阪教育大学教員養成課程技術教育講座准教授．日本ロボット学
会，人工知能学会会，日本産業技術教育学会各会員．

井芹 威晴 （正会員）
2013 年大阪教育大学学校教育教員養
成課程技術教育専攻卒業．同年同大学
大学院教育学研究科技術教育専攻修士課程進学．2015 年同修了．同年大阪
府岸和田市立桜台中学校教諭．現在に
至る．

吉田 図夢
2015 年大阪教育大学学校教育教員養
成課程技術教育専攻卒業．同年株式会社フュービック入社．フィジカル
フィットネス Div Dr. ストレッチイオ
ンモール京都店配属．2016 年 Dr. ス
トレッチ西宮ガーデンズ店へ異動，店長へ昇格．同年所属を Fubic Singapore PTE. LTD. へ異動，Suntec city mall shop 配属．現在に至る．

63