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

B60
2015/3/6

プログラミング学習支援のためのビジュアル言語デバイスの開発
CAMPAÑA ROJAS JOSÉ MARÍA†1
小林 孝浩†1†1†1
平林 真実 	  鈴木 宣也
概要：プログラミングの苦手なデザイナーに向け、プログラミングの理解を支援する方法を探る研究である。変数と条件文の 2 つのプログラムの基本要素の理解を目標とした。まず最初にデザイナーとデザイナーを志す学生に調査を実施した。調査から、プログラミングの要素を実際のブロックに置き換えたデバイスを開発し用いることとした。ブロックを並べ接続すると、ビジュアルな物理的要素と実際のプログラミング言語の間の関係をディスプレイ上に表示することができる。

Development of a Physical Device That Represents a Visual Language
to Aid in Learning a Programing Language.
JOSÉ MARÍA CAMPAÑA ROJAS†1	  TAKAHIRO KOBAYASHI†1
MASAMI HIRABAYASHI†1	  NOBUYA SUZUKI†1
Abstract: This research seeks for a solution that allows designers who lack programming skills tounderstand that process. It focuses on the comprehension two of basic parts of a program: variables andconditionals. It was first approached by taking surveys to advanced design students and professionals.
Then the development a device that uses physical blocks to represent parts of a program. When theblocks are connected, the real can be seen on a display to show the relation between the physical visualcomponents and the real programming language.

1. Introduction

visual languages are being applied in this case to teach children,
but it is questioned if they help in to the comprehension ofThis research tries to find a solution to a problem that iscoding, that is because they replace the need to write it by using

occurring in the job of the designers: the discipline of Design

space and visual actions. Using current tools to learn

has became interdisciplinary, specially in relation to information

programming such as Scratch [3] [4], it is pretty straightforward

technologies, requiring coding skills that designers do not

to create a simple program, but almost all of these systems do nopossess. Almost every designer whether for a project inshow the code. An exception is made for Google Blockly [5],classroom or for work has the necessity to write code at somewhich has the ability to output the source code. The ability forpoint. This research tries to seek for a solution that allows

the user to be able to see the code for a program that was createddesigners to understand the process of writing code focusing on

in a very easy way gives them the plus to make them able tothe comprehension of some basic parts that conform a program,study it and apply it later. Designers very often end copy-pastingfor example, variables or conditionals and make them able tocode from some website when they want to write a specificactually use them.

program. In the case of novice designers that do not comprehend

2. Backgroundthe code, it makes them almost impossible to modify it to suitResearch is being done to teach information technology
students at university level [1] using for example, social games

his or her needs. With a little background in computer
programming the story changes by much.

[2] to motivate the students and other systems. And there is also
is a lot of research being done to develop systems to teach

3. Approachchildren to manipulate information technologies. But there are

To approach this problem a 22-question survey was applied tojust a few that are directed to teach designers or adults besides

88 advanced design students and design professionals in Japan

university classes, tutorials or video tutorials. In many casesand Mexico. Interviews where also applied to some designers.
According to the survey, designers have knowledge of HTML†1 情報科学芸術大学院大学
Institute of Advanced Media Arts and Sciences© 2015 Information Processing Society of Japanand CSS, which are two of the current tools used to create661

websites. Designers have the necessity to program logic for theireditor and execute it like normal JavaScript and it will run (ifweb works and even convert them in to web applications or

the proper arrangements for the output blocks is done). The

application for devices. All this can be achieved with HTML,

blocks are divided in to two categories, logic blocks and output

CSS and JavaScript using a framework like Apache Cordova [6].

blocks. One set is composed of six value blocks, three variableThat is the main reason why this research focuses on teaching

blocks, four operator blocks, two conditional start blocks, two

the basic principles of JavaScript to designers (which areelse blocks, two conditional end blocks, one loop start and one

basically the same for any programming language).

loop end block, one free input block, two RGB light block(lightbox), two servomotor block (motorbox) and two numeric	  There is extensive research [ a ] that supports that, whendisplay block (logbox) and the main block.

teaching abstract concepts to kids, it is better if those abstract
concepts are represented in a tangible way. This is one of themain ideas of the Montessori Method, which can also be applied
to adults [b]．First, there was an experiment with cards that
represented different parts of JavaScript as in a visualprogramming language. These cards were evaluated with theuser but since they don't give real time feedback, they didn’t
serve much to teach the concepts. There was also the problem
that the user does not know what is the way to connect them orto evaluate if it has been done right. After that a test was madeto find if what is the best way to transfer this knowledge: using
paper cards, using just an iPad application or using a device thatFig. 1	  js.bit

merges an application and physical components. It turns out thatjust an application is the easiest to use, but using physical

4.1 js.bit system specifications

components make a better connection to the user. So after thisEvery block has 6-pin connector on their front and in their back.

experiment the development of a first iPad application / physicalThis connector is used to give power to the blocks and to enabledevice hybrid prototype was started. This prototype was laterthem to exchange information between them. Also every block

called js.bit. js for JavaScript and bit as in little piece and thehas a microprocessor on it’s inside to communicate to theinformation bit used in computers.

systemtheirstatus.

Dependingon

theirfunction

themicroprocessor is either an ATMEGA ATTINY 85 or an

4. js.bit

ATMEGA 328. The blocks communicate to each other using theI2C protocol. Some blocks have input or output connector on the	  js.bit is a set of 28 blocks (or bits) and an iPad application.	 

top or on the right side. The main block acts as a relay that

Each block represents some part of a program, for example, apasses messages to other blocks or to the iPad application via

variable. When the blocks are connected with each other in a

Bluetooth and also detects the order of the array of blocks using

certain pattern, a program is created, just like in a visuala relay algorithm.

language. The iPad application interface is divided in to twospaces: block space and source code space. When the blocks are4.2 Block user testing

placed (and connected) over the block space, a block appears in

As of the time of writing this manuscript, the js.bit system isthe block space, and the corresponding code appears in thecurrently being tested with designers. The tested users are

source code space. A line (colored depending on the type ofadvanced students of design or professional designer. The testblock) then gets from the block to the corresponding line in theconsists in an interview, activities that involve the creation ofsource code indicating the correct grammar and how the blockseveral program using the blocks, another part of the test is done

would act if it was real JavaScript. So the source code that wasin the computer, asking the subjects to write the same exercises

created with the blocks can be seen, read, analyzed and executed.

made with the blocks but this time in a text editor using real

The code can also be copied (it can’t be copy-pasted) to a text

JavaScript. At the end of the test a survey is also taken. Thissurvey contains some questions that serve as a clue as if the usera) For example, research made by Jean Piaget or Maria Montessori.
b) This research is borrowing some concepts of the Montessori teaching system

understood the concepts or not.

but its intention is not to create Montessori teaching materials.

© 2015 Information Processing Society of Japan662

and <= (minor or equal than). The else block is used to indicate
what to do when de condition is not met; the use of this block isoptional. The end condition block is used to delimit theconditional. The else block and end conditional block does not
require or give any physical input or output.

Fig. 2	  js.bit user testing
The programs that the user are asked to make involve the use ofnumbers, variables and conditionals. For example writing avalue in the logbox (a block that has a numerical display), ordepending on the value of two variables turn red or green theFig. 4	  js.bit conditional blocks

lightbox (a block that can be lit with any color).
4.3 Description of blocks used in the user testing

5. Conclusion

For the user test mainly five logic blocks are used: value block,	  The discipline of design is requiring more than ever thevariable block, conditional start block and conditional endnecessity of the designers to be able to work with information

block. The value block consists of a knob that is pointing to atechnologies. It is necessary to find a way to push designers

number that ranges from 0 to 9. When this knob is turned rightprogramming knowledge, and adult people in general. As of thisor left, the number can be changed and hence the value that ittime, js.bit is showing some favorable results in the user testing

represent. It connects to other blocks using a 3-pin connector.

with designers but the testing is not over yet. As it uses atangible object, and has an appealing design, it is easy toThe variable block has a 6-pin connector on its front and back,connect to the user, and because the user can have a physicalin its right side has a 3-pin connector that receives a value block

response it makes it fun. And the fact that is fun makes it able toand in its top, has 3 female pin connector that serve as input andgive a push to the level of understanding of JavaScript of theout put of its value. It connects to other blocks using a cord

designer.

(jumper wire). These blocks require a connection to the variable
in order to be able to take its value.

References
1) Tony Jenkins, Teaching programming – A Journeyfrom Teacher to Motivator. Proceedings of 2nd Annual
LTSN-ICS Conference, pp. 67-51, 2001.
2) Ben Leong, Zi Han Koh, Ali Razeen. Teaching
Introductory Programming as an Online Game. Available
at:http://www.comp.nus.edu.sg/~bleong/teaching/teaching	 
Fig. 3 left: value block, right: variable block
The conditional blocks consist of three blocks; conditional start
block, end condition block and else block. They represent an ifstatement. The condition start block has a knob and two pin
inputs. For the block to work its inputs need to be connected toother corresponding blocks in order to create a condition, forexample, variable blocks. When the knob is turned, the-online-game.pdf [Accessed December, 2014].
3) MIT Scratch. http://scratch.mit.edu
4) Maloney, J., Peppler, K., Kafai, Y., Resnick, M., &Rusk, N. Programming by Choice: Urban Youth Learning
Programming with Scratch. SIGCSE conference, Portland,
pp.367-371, 2008.
5) Google Blockly https://code.google.com/p/blockly/6) Apache Cordova http://cordova.apache.org

condition can be changed, its ranges are: == (equal), != (notequal), > (greater than), < (minor than), >= (great or equal than)© 2015 Information Processing Society of Japan

663