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

16INT016
2016/3/4

IoT アプリケーションのソフトウェア・ハードウェアを
単一コードベースで開発できる統合開発環境 f3.js
加藤 淳†

後藤 真孝†

概要：Internet of Things (IoT)アプリケーションのソフトウェア開発者にとって，センサやアクチュエータを配置する筐体の設計は CAD システムを用いる必要があり容易でない．本稿では，ソフトウェアの開発用インタフェース上でハードウェア設計まで一貫して行える統合開発環境 f3.js を提案する．f3.js では，センサやアクチュエータの制御コードと同じスコープに，レーザーカッターを用いた筐体設計のためのコードを書ける．また，レーザーカッターの切断面を組み合わせて立体形状を形成できるように，展開図の作成支援用 API を備えている．ユーザは展開図上にセンサやアクチュエータを配置する GUI プログラミングのようなコードで，新しいハードウェアインタフェースを設計できる．これらの仕組みを利用して，エンドユーザでも GUI を操作して IoT アプリケーションをパラメトリックにカスタ
マイズできるようになっている．提案手法の妥当性を，f3.js を用いた 5 名参加の小規模ワークショップで評価した．

f3.js: An Integrated Development Environment for Single Codebase
Development of Both Software and Hardware of IoT Applications
JUN KATO†MASATAKA GOTO†

Abstract: During the development process of Internet of Things (IoT) applications, software developers need to learn how to use
computer-aided design tools to create the enclosures. This paper proposes f3.js, an IDE that allows enclosure design within thecode editor. It allows the programmer to write a single JavaScript codebase that defines not only the behavior of microcontrollers
but also the layout of modules on laser-cut acrylic panels that form three-dimensional shapes. The IDE provides a set of GUI
toolkit-like APIs to help creating development views for laser-cutting and GUI widgets that allow end-users to customize IoT
applications by modifying parameters. Its five example applications are collected from a workshop with five participants.

1. はじめにInternet of Things (IoT)アプリケーションは，センサやアクチュエータなどのモジュールをマイコンに接続して実世界で動作させることで，パーソナルコンピュータやスマー
トフォンのように標準化されたハードウェアでは難しい情報取得や提示を可能にするものである．その開発プロセス
において，ソフトウェアの開発とハードウェアの設計には
通常別々のツールが用いられる．まず，ソフトウェア開発には，マイコン用の統合開発環境(Integrated Development
Environment, IDE)が利用される．次に，ハードウェアの設計では，3D プリンタで 3 次元形状を直接出力したり，レー
ザーカッターで 2 次元の展開図を切断加工したりする必要がある．このような形状を効率的に設計するために CAD(Computer-Aided Design)システムが利用される．
ソフトウェア開発者が IoT アプリケーションのプロトタ
イピングにおいて筐体設計までは行おうとすると，3 つの問題に直面する．まず，CAD システムの学習コストが高く，学習しても別々のツールを使い分けるのは面倒である．また，筐体にはセンサやアクチュエータなどのモジュールを安定して把持するための穴などを開ける必要がある．箱型などのシンプルな形状を設計したいだけでも，CAD システ
ムでのモデリングは容易でない．最後に，実際に組み立てて配線するために必要な機材が多く，手間も大きい．
†産業技術総合研究所, National Institute of Advanced Industrial Science andTechnology© 2016 Information Processing Society of Japan

図 1. f3.js を利用した IoT アプリケーションの開発過程．

132

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

16INT016
2016/3/4

本稿では，GUI アプリケーションの開発プロセスを参考

イコンとセンサ・アクチュエータを繋ぐ配線を可視化するにした f3.js―Form Follows Function() for JavaScript─という画面を持つ IDE である．画面上で配線を行うことで，対応

IDE を提案し，上述した問題を解決・軽減することを目指するモジュールが特定の名前の変数に格納され，制御可能

す．GUI 設計では，プログラムのロジックと見た目は共にとなる．また，市販の高級 CAD システムと連携して，利用ソースコードで定義されるため，ソフトウェア開発者はしているモジュールを配置するための筐体制作を手助けす

IDE を離れずにアプリケーション開発を行える．また，コる機能を試験的に実装している．

ードエディタの横に Interface Builder を配置して，インタフ

一方，本研究はソースコードのみで筐体設計まで可能で

ェースのプレビューを確認できる．これにより，開発者はあり，ツールを切り替えるメンタルワークロードがない．

実際にプログラムを実行することなくボタンなどのウィジ

また，コードの変更結果が即座に反映される筐体のプレビ

ェットの見た目を確認できる．

ュー画面を備えている．ただし，プレビュー画面上でマウf3.js は，図 1 に示したように単一の JavaScript ファイルスなどを利用した直接操作を行うことはできない．この点を記述するだけで，IoT アプリケーションのソフトウェア

では，GUI アプリケーション開発に利用される Interface(マイコンをどのモジュールと接続してどのような機能をBuilder を参考に改良が可能だと考えている．

実現するか)とハードウェア(モジュールをどのような立体

Autodesk 123D Circuits [3]はブラウザ上で実行できる電形状のどの面に配置するか)を開発・設計できるようにする．

子回路のシミュレーション環境で，実際に回路を組み上げ

ユーザは JavaScript プログラミングのみを学べばよく，学なくても動作確認を行える．4 つのバリエーションがあり，習コストを低く抑えられることが期待できる．また，f3.js

Electronics Lab は Arduino マイコンと各種電子部品，Circuitが提供する API を利用すれば，GUI プログラミングのようScribe は導電性インクと対応する独自モジュール，PCB

なコードで新しいハードウェアのインタフェースを設計でDesign はプリント基板と各種電子部品，MESH はソニー製

きる．設計した内容はコードエディタの横に常にプレビュ

MESH モジュールのシミュレーションが可能である．

ーが表示され，利用しているセンサやアクチュエータの外

いずれもシミュレーションが主目的で，実際に試用でき

形と配置を確認できる．作成したレイアウトをもとにアクる新しいハードウェアのインタフェースを備えた IoT アプ

リル板を加工すると，センサやアクチュエータを設置する

リケーションの作成には別途手間がかかる．本研究と最もためのネジ穴が空くため，ユーザはネジとドライバ，接着

近いのは Circuit Scribe で，配線やモジュールを点線で表し剤だけで IoT アプリケーションを組み上げることができる．

た PDF ファイルを家庭用プリンタで印刷し，点線を導電性

さらに，ソフトウェアとハードウェアが JavaScript の同一

インクでなぞってモジュールを配置すれば IoT アプリケー

スコープ内で定義されるため，モジュールの有無，筐体上ションが得られる．同様のアプローチで配線の印刷までをの配置や筐体の大きさ，これらのハードウェアに応じたソ自動化した PaperPulse [4]という研究もある．しかし，いずフトウェアの処理をパラメトリックに制御できる．f3.js は，

れも手描きで平面しかデザインできないため，本研究が可

この特長を活かし，プログラマでなくともスライダーなど能にするプロシージャルな立体形状の設計とは一線を画すの GUI ウィジェットを操作して IoT アプリケーションをカる．なお，各種モジュールの機能をシミュレーションする

スタマイズ，出力できる機能を備えている．

ことは f3.js でも技術的には可能であり，今後の課題である．

以降，本稿では，関連研究との比較を行い，f3.js のイン

2.1.2 IDE 以外のアプローチ

タラクションデザインと実装の概要を説明する．そして，

IoT アプリケーションでは，求められる機能をどこまで

著者 1 名を含む 5 名のプログラマによる試用例を紹介して，

ハードウェアで実装し，残りをソフトウェアで処理するか

提案手法の妥当性を評価，議論する．

選べることがある．その選択次第で，工数やコストを大き

2. 関連研究く削減できることがある．そこで，機能上の要求仕様とソ

本章では，関連研究を紹介し，f3.js と比較することで，本研究の狙いと貢献を明らかにする．
2.1 ソフトウェアとハードウェアの同時開発支援ツール

フトウェア・ハードウェアが持つ制約条件を共に満たす設計を支援するための研究が多くなされている．
まず，ハードウェアの物理的な特徴を利用して，既存の電子部品が持つ一部の機能を代替する研究がある．Printed

2.2-2.3 節で紹介するように，さまざまな IDE が IoT アプ

Optics [5]は，ハードウェアの設計を工夫して光路を制御し，リケーションのソフトウェア開発またはハードウェア設

光センサを用いてボタンや加速度センサなどの機能を実現

計のために提案されてきたが，両方を同時に行えるものはできることを示した．PipeDream [6]は 3D プリンタで印刷多くない．本節では，IDE に限らずソフトウェアとハードされた物体内部にパイプ状の空洞を開けて，音センサによウェアを横断的に設計するための研究を紹介する．

り接触などのインタラクションを検知できることを示した．

2.1.1 IDE によるアプローチ
Microsoft Visual Studio は.NET Gadgeteer [2]と呼ばれるマ© 2016 Information Processing Society of Japanまた，電子部品を既存の物体に付与して機能を後付けす
る研究がある．Sauron [7]は低価格な画像センサを付与して133

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

16INT016
2016/3/4

簡単な画像処理によるイベント検知を可能にした．Midasールキット Phybots [13]と同様の設計方針である．

[8]は既存の物体に導電性のシートを貼りつけてタッチイ

2.3 フィジカルコンピューティングの開発支援ツール

ベントの検知を可能にした．また，Mechanical Hijacking [9]Phidgets [14]はセンサやアクチュエータなどのモジューは，人間用に設計されたボタンなどのユーザインタフェー

ルをパソコンに USB 接続できるようパッケージ化し，はんスの周りにアクチュエータを配置して，人間用のユーザイ

だ付けのいらないフィジカルコンピューティングを実現しンタフェースをプログラムから制御できるようにした．

たライブラリである．パソコンを使わずマイコンのみで動これらの既存研究は，いずれも特定のセンサやアクチュ作するような IoT アプリケーションの開発は，Arduino [15]

エータを活用する手法であり，汎用の IoT アプリケーショの登場以降，急速に広まった．マイコンの IDE と仕様をオ

ン用 IDE を目指す f3.js とは相補的な役割を果たすものでープンソースで公開したことにより，デファクトスタンダある．例えば，Printed Optics をライブラリ化してレーザーード化している．Grove システム[16]は，Phidgets と同様にカッターの展開図作成に利用したり，Sauron の画像処理部

各種モジュールをマイコンへ接続しやすいようパッケージ

分をライブラリ化してイベント検知に利用したりできる．

化したものである．このようにデファクトスタンダード化，

2.2 2 次元・3 次元形状のための IDE

モジュール化が進むと，ハードウェアの設計情報を容易に

DressCode [10]はデザイナーが 2 次元的な形状を自由に入手できるようになり，3D プリンタやレーザーカッターに描ける Domain Specific Language (DSL)のための IDE であよる筐体設計が捗る．本研究では，Web 上に公開されている．ソースコードを入力すると即座に形状を見ることがでる Grove モジュールの設計情報を元に，ネジ穴や配線口をきるライブプログラミングを実現している．OpenSCAD

容易に開けられる API を実装し，提供している．

[11]は 3D プリンタに出力できる 3 次元形状に関して同様

近年のマイコン用 IDE は，Codebender [17]，mbed Compilerのことができる DSL および IDE であり，CAD システムの[18]のようにブラウザ上で動作するものが多くなってきてGUI が持つような設計支援機能を API として提供している．

いる．また，多くのマイコンが無線 LAN 経由でインターネ

ShapeJS [12]は IDE ではないが，同様の目的で JavaScript 用

ットに接続できる．例えば f3.js がサポートしている Edisonの API を提供しているライブラリである．

の他にも，JavaScript で動作する Tessel.io [19]や Arduino Yún

f3.js は，DSL ではなく汎用言語の JavaScript を用いて，などがある．マイコン上で動作するプログラムの書き換え

IoT アプリケーションの筐体を設計可能な API を提供してまで無線で行えるものは多くないが，Edison はその一例でいる IDE である．上述した既存研究との最大の違いは，ハあり，今後増えていくことが考えられる．将来は，f3.js やードウェアの形状のみならずソフトウェアの開発まで可能

TouchDevelop [20]のようにブラウザ上で動作する IDE を利な点にある．その目的に供するためには，DSL ではなく汎用して，PC レスで IoT アプリケーションをライブプログラ

用言語を利用することが妥当と考えた．

ミングできるようになるだろう．

また，センサやアクチュエータなどのモジュールを配置した新しいハードウェアのインタフェースを開発するため

3. f3.js: Form Follows Function()には，2 次元的な形状設計機能は役不足である一方，3 次元

本章では，f3.js を用いて IoT アプリケーションのソフト

形状のモデリングは容易でない．3 次元のコンピュータグ

ウェアとハードウェアをシームレスに開発・設計するプロ

ラフィクスに関する基礎知識が要求される他，モジュール

セスを紹介する．アプリケーションの具体例として，図 1の設計情報を取り込んでネジ穴などの正しい向きを計算すに写っているカメラアプリケーションを取り上げる．このる必要がある．さらに，3D プリンタによる成型では，中にカメラは，ボタンが押されたら円周上に配置された LED が配線を通す中空の構造を作りづらいことがある．プリンタ

カウントダウンを始め，カウントダウン終了時に写真を撮の精度が不十分で，ネジ穴が設計通り開かないこともある．

影するようになっている．筐体右上にカメラが，右下にそこで本研究では，高精度に面を切り出せるレーザーカ

LED があり，左上にボタンがある．これらの振る舞いと筐ッターを利用して，複数の面を組み合わせて筐体を作成す

体設計を共に定義している両義的ソースコードの具体例

ることとした．そのために，面同士を繋ぐ「ありつぎ」を(全文)については http://f3js.org に掲載してある．

出力したり，面を押し出して作った立体形状から展開図を

3.1 マイコン用のプログラム開発

作成したりする API を提供している．この展開図上にモジ

f3.js は Intel Edison [1]マイコンを無線または有線で接ュールを配置することで，画面上にボタンを配置するよう続した Windows または Mac OS X 搭載パソコンで動作するに，GUI プログラミングと同様の使い勝手で筐体を設計でWeb サーバとして実装されており，アプリケーションのソきることを目指している．これは，絶対座標系が存在しなースコードは図 2 に示すように処理される．ユーザは Web

い 3 次元の実世界において，天井カメラの画角内で床面上ブラウザを搭載したパソコンやタブレットなどの端末からに座標系を張り，GUI プログラミングのように物体やロボ

f3.js を利用する．f3.js にアクセスすると，パソコンのファットの移動を支持できるようにしたプロトタイピング用ツ

イルやディレクトリ構造を閲覧できるファイルブラウザが© 2016 Information Processing Society of Japan134

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

16INT016
2016/3/4

表示され，任意のディレクトリへ移動できる．ここで，アケースがほとんどである．開発初期段階のプロトタイピン

プリケーション開発のためのディレクトリを新規作成する

グでは，ブレッドボードなどを利用して配線さえできていか，すでにプロジェクトが保存されたディレクトリに移動

れば動作確認が可能なこともある．しかし，実用的な IoT

すると，プログラミングを始めることができる．

アプリケーションをテストする際は，ある程度の強度を持

Edison のプログラムは JavaScript のソースコードとしてつ筐体にセンサやアクチュエータの位置が固定されていな記述する必要があり，マイコンに接続したセンサやアクチ

いと，センサの値が不安定になったり，アクチュエータのュエータは Node.js モジュールを読み込んでインスタンス

出力が十分に伝わらなかったりすることが多い．例えば，化することで制御できる．個々の Node.js モジュールが，いカメラの場合は画角が固定できず，思い通りの撮像が得らわゆるドライバの役割を果たしている．例えば，カメラはれるか確認できない．

var Camera = require(‘Camera’)のようにドライバモ

3.3 レーザーカッターの切断面設計

ジュールを読み込み，var c = new Camera(PORT_A)のよ

f3.js では，マイコン用のプログラム開発だけでなく，筐うにインスタンス化すると c.takePicture(‘a.jpg’) の体設計も同一のソースコード中で JavaScript を用いて行え

ようにメソッドを読み込んで制御を行える．センサやアクる(図 2 左側)．画面上では，左にソースコードが，右のチュエータ用の Node.js モジュールは UPM という GitHub

HTML Canvas にレーザーカッターに出力されるレイアウ

上のリポジトリで一元管理されており，誰でも pull request

トのプレビューが表示される．プレビューはソースコードを送ることで新しいドライバを書いて他の人と共有できる．

を変更するたびに自動的に更新されるため，作成したい形

3.2 センサ・アクチュエータの接続と動作確認状が得られているか随時確認しながら開発を行うライブプ

ユーザは，ソースコードを記述したら，Edison にセンサ・ログラミングが可能である．また，プレビューには，レー

アクチュエータを接続して，f3.js 上の Install & Run ボタン

ザーカッターでアクリル板などを切断加工して筐体を作るをクリックすることで実機での動作を確認できる(図 2 右ために必要な切断線だけでなく，ユーザの利便性に配慮し側)．もし動作に不具合があれば，ソースコードを修正してて筐体に載せるセンサやアクチュエータの名前や外形も重再度 Install & Run をクリックしてデバッグできる．

畳表示される．Print Preview ボタンをクリックすると切断

従来の IDE はここまでのプロセスのみを開発支援する

線のみの表示に切り替わる．
f3.js では，マイコン用のプログラムと同一のソースコー
ド中で筐体設計を行えるため，利用しているセンサやアクチュエータの種類や数といった情報を再度 CAD システムに入力するような手間がかからない．その代わり，一回インスタンス化したドライバのインスタンスを特別な API に渡すことで，対応するセンサやアクチュエータに適したネ
ジ穴や配線口を開けることができる．具体的には，var fff= require(‘fff-print’)のようにして API エンドポイン
トを取得し，以降，そのメソッドを呼び出すことで筐体設計を行うことができる．例えば，add(c, 30, 40)のようにカメラドライバのインスタンスを渡すことで，左上から30mm, 40mm の位置を基準にしてカメラを固定するためのネジ穴と配線口を開けることができる．
筐体は通常，立体的な形状をしており，複数の切断面を組み合わせる必要がある．レーザーカッターの切断線は，切断面を複数並べた展開図となることが一般的である．このような展開図は従来手動で作成する必要があったが，f3.js では作成を容易にする API が用意されている．例えば
fff.drawDovetailLine(5, 5, 40, 40)のように書くことで，左上から 5mm, 5mm の位置を開始点として 40mm,
40mm の位置まで凸凹した線が引かれる．これを別の面の図 2. f3.js のシステム構成図．Web ブラウザでは独自の凸凹した線と噛み合わせることを「ありつぎ(dovetail)」とJavaScript インタプリタを，マイコンでは Node.js を用い，呼び，ありつぎを複数組み合わせることで立体形状を作れ

それぞれに共通 API を持つが実装の異なる f3.js ライブラ

る．しかし，正しくかみ合うありつぎを作ることは容易でリを提供することで両義的ソースコードを実現している．

は な い ． そ こ で ， 閉 じ た 平 面 の 領 域 を var© 2016 Information Processing Society of Japan

135

p

=

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

16INT016
2016/3/4

fff.createPath(); p.moveTo(5, 5).dovetailTo(40,両方を同一のソースコードで変更しているため，例えばカ40)….close()のように作成してから p.extrude(30)のよ

ウントダウンタイマーを使う指定が入っていたらそのため

うに 30mm 押し出し，展開図に含まれる閉じた平面の領域のネジ穴を開けると共に，カウントダウンの処理を挟む，を配列で取得できる．

といった対応が容易にできるようになっている．

なお，多くのレーザーカッターは切断の他に表面を浅く彫る彫刻加工が可能であり，f3.js でも定義した平面の領域に対して p.fill = true のように記述すると彫刻を行う

4. f3.js の実装
f3.js は，図 2 に示したような処理系を実現するために，ようになっている．さらに切断を行わない場合はTypeScript で記述されたサーバとクライアントの組み合わ

p.stroke = true と書けばよく，GUI アプリケーション

せで実装されている．本章ではその概要と，利用できるハの開発と同様にしてレーザーカッターの動作を制御できるードウェアについて紹介する．

ようになっている．

4.1 f3.js サーバ

3.4 IoT アプリケーションの組み立て

f3.js サーバは Node.js を利用した HTTP サーバとして実切断面の設計が終わったら，Save as a PDF file ボタンを装されている．ソースコードのほぼ全てがクロスプラット

クリックすると，一般的なレーザーカッターに直接送信でフォームで記述されているが，対応するマイコンへのプロ

きる PDF ファイルが生成される．なお，一般的なレーザー

グラムの転送時に利用する子プロセスの立ち上げ処理や，カッターは，ある程度以上細い特定の色の線を切断し，特OS 固有のシェル（Windows の cmd.exe や Mac OS X の bash

定の色の塗りつぶしを彫刻する仕様になっている．本シスなど）を通したコマンド操作をサポートするために，OS 依

テムは，切断線は 0.005mm の太さの黒い線として，彫刻面

存の Node.js ライブラリを利用している．

は赤色(RGB=255,0,0)の塗りつぶしとして出力しており，

f3.js クライアントがサーバに接続した際は，f3.js は静的

Trotec 社の Rajyet レーザー加工機で動作確認を行っている．

な HTML/CSS/JavaScript ファイルを配信する．また，同時切断加工が済んだアクリルなどの材質の板は，ありつぎ同に Socket.io ライブラリを用いて WebSocket によるストリー

士を組み合わせ，接着して立体形状にできる．

ミング接続が開始される．この接続は，シェルと CUI ベー

本システムが初めから対応しているセンサ・アクチュエ

スでインタラクティブに通信するため，また，マイコン上ータは，いずれもネジ穴のついたモジュールとして販売さで動作するプログラムからの応答をリアルタイムに配信すれている．これらは，ネジとビスを利用していずれかの板るために利用される．この他に，f3.js サーバは，クライアに固定することができる．また，これらのセンサ・アクチ

ント側の要求に応じてサーバ上のファイルを一覧したり編

ュエータは特定の形状のコネクタで配線でき，はんだ付け集したりできるよう，ファイルマネージャの機能を提供す

せずに組み立て可能である．このように，ネジ穴やコネク

る Web API を実装している．

タが標準化されたセンサ・アクチュエータのモジュールに

4.2 f3.js クライアント

加え，その設計情報を提供する API があれば「特別な工具が不要で，まるでプラモデルのように IoT アプリケーショ

f3.js クライアントも TypeScript で開発され，JavaScript にコンパイルされたものが f3.js サーバにより静的ファイル

ンのプロトタイピングが可能」(5 章で紹介するワークショとして接続端末のブラウザに配信される．図 2 左側に示し

ップ参加者のコメントより抜粋)となる．

たような筐体設計の機能をブラウザ上で実現するために，

3.5 エンドユーザによるカスタマイズ
f3.js は JavaScript のプログラムを実行することで切断面

JavaScript の独自インタプリタを実装している．このインタ
プリタは JavaScript の基本的な文法は完全にサポートしてを生成しているため，与えるパラメタを変更してさまざま

いるが，ブラウザが備えているような API はほとんど提供

な形状をパラメトリックに生成することができる．f3.js でしない．その代わり，未定義の関数は無視して実行を続けは，この特性を活かして，変数宣言の直後に特定の書式でる仕組みになっている．

コメントを挟むと，パラメタを変更するための GUI ウィジ
ェットを表示するようになっている．
例えば var useCountdown = true /* カウントダウン

また，このインタプリタ上で f3.js API が呼ばれた際に，筐体設計のプレビューを表示するために EaselJS という描画ライブラリを利用し，レーザーカッターへ送出できるタイマーを使う */という真偽値ではチェックボックスを，

PDF データを生成するために jsPDF という描画ライブラリ

var capacity = 40 /*を利用している．

容積[0-100] */という値域のついた数値の場合はスライダーを表示する．このようなウ

4.3 対応ハードウェアィジェットはプログラマでなくとも操作できるため，基本

f3.js は，現時点で，JavaScript でプログラミングできるマとなるプログラムをプログラマが作成し，それをもとに誰イコンである Intel Edison [1]に対応している．Edison は組

もがニーズに合わせてカスタマイズを施した IoT アプリケ

み込み Linux が動作する高性能なマイコンであり，f3.js かーションを入手できるようになる．この際，形状と機能の© 2016 Information Processing Society of Japanらは TCP/IP (有線または無線)で SSH 接続して JavaScript の136

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

16INT016
2016/3/4

ソースコードを直接転送する．Edison は Arduino Breakout

たセンサやアクチュエータであり，公式 Wiki で物理的なレBoard Kit と呼ばれる基板を接続し，さらに Arduino 用の拡イアウトの情報などが公開されている特徴がある．

張基板である Grove シールドを搭載することで，I/O ポー

f3.js では，これらの情報を利用して現在 21 種類の Grove

トが標準化された Grove システム[16]のモジュールを利用

モジュールに対してネジ穴や配線口を開けるための API をできるようになる．Grove モジュールは全てグラウンド・

提供している．ユーザが他のモジュール用に API を実装す

電源・RX・TX の 4 線で接続できるようパッケージ化されることもできる．実際に，5 章の小規模ワークショップでは参加者により 3 つのセンサへの対応が追加された．

5. 小規模ワークショップ
本章では，f3.js の評価のために行った小規模なワークシ
ョップの方法と参加者が作成した IoT アプリケーション(図 3)を紹介し，ワークショップ後に得られたコメントを引用しながら，f3.js の諸機能について議論する．
5.1 ワークショップの開催方法
ワークショップは，著者 1 名と 4 名の参加者で行った．
著者および 3 名の参加者は Arduino などを用いたハード
ウェアのプロトタイピングの経験があり，1 名は未経験であった．また，全員 JavaScript によるプログラミング経験者であった．
各々に Intel Edison の初期設定と f3.js の利用方法に関す
るイントロダクションを行い，その後の 1 週間で好きな時間にアイデア出しと実装を行ってもらった．著者はワークショップ用ブースに常駐し，随時，参加者からの Edison や
f3.js に関する質問に答えた．ワークショップに参加した時
間は人により 2 時間～10 時間程度のばらつきがあったが，全員が自分好みの IoT アプリケーションを作成できた．
5.2 IoT アプリケーション
5.2.1 だれかきたセンサ (制作時間約 10 時間)
個人ブースで作業していると，誰かが相談ごとなどでブースの入り口にきても気づかず，いきなり肩を叩かれてびっくりすることがある．そこで，ブースに人が入ってきたことを検知して音と光でユーザに通知し，余裕を持って対応できるようにした．Twitter に流れるキーワードに反応して音を鳴らすエゴサーチ機能もある．ハードウェアのプロ
トタイピング未経験者によるもの．
筐体は，利用しているコンピュータのディスプレイ上部にぴったりはまるように設計され，バックライト付き LCD
ディスプレイ，ブザー，音量調節つまみが取り付けられている．また，ディスプレイ裏面側に Edison が隠れるように収納されている．さらに，小さな箱に距離センサが取り付
けられ，ブース入り口に向けて置かれている．
5.2.2 QuadBuzzer (制作時間約 6 時間)
PC/Mac とリアルタイムに通信し，マウスやキーボード入力，閲覧している Web ページのデータなど，あらゆるデー
タを 4 つのブザーが奏でる音楽に変換する楽器を作成した．
筐体は滑らかな曲線で縁取られた上面の 4 隅にブザーが対称的に配置され，Edison はその下に置かれている．
図 3. ワークショップで得られた作例．

© 2016 Information Processing Society of Japan137

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

5.2.3 Songle 物理ウィジェット(制作時間約 8 時間)

16INT016
2016/3/4

境と比べて敷居が低く(P2)」「Web ブラウザ上のユーザイン

ブラウザ上で動作する音楽プレイヤーとリアルタイム

タフェースから Install & Run できて，デバッグ出力もブラに通信し，同期して光ったり，物理ボタンで音楽プレイヤ

ウザから確認できるため開発しやすかった(P3)」という好ーを操作したりできるようにした．

意的なコメントが得られた．

筐体は，Edison を格納した直方体上面にボタンや LED な

一方で「どんな API が使えるのかが分かりにくかった

どのインタフェースを配置したシンプルな形をしている．

(P3)」というコード補完への要望や､「全画面化(P2)」など

5.2.4 Run & Jump (制作時間約 2 時間)

エディタに関する機能増強の要望があり，f3.js における文

バックライト付き LCD ディスプレイに表示された自機「o」をタッチ操作でジャンプさせ，ディスプレイ右端から

字ベースのプログラミング体験の重要性が確認できた．
5.3.3 2.5 次元的な筐体設計のための IDE

流れてくる障害物「x」を避けるゲームを実装した．Songle

筐体を開発できるプログラミングについては，「最適な物理ウィジェットと同様に，直方体の上面にインタフェー

形状をすぐ作れるのがとても楽しかった．Arduino で開発スが集中している．ゲームオーバー時には振動モータが振したとき，無理やり名刺ケースをカットしようとしていび動して演出を盛り上げる．

つな形になったり，アクリルにネジ穴を開けようとしてひ5.2.5 来訪者カウンタ (制作時間約 3 時間)

び割れたりしたことがあったので，比べると大変楽(P4)」

人感センサにより部屋に入室した人数と時刻を記録すで，f3.js の支援機能で初めて筐体を容易に作れたというコる．また，入室時には何人目の入室か LCD に表示する他，

メントが全員から得られた．とくに「平面から立体を作成

常時デジタル時計が表示されている．筐体は一枚のアクリする機能はとても助かった．なかったら無理(P1)」だったと

ル板のみでできており，マグネットを使って磁性のある壁いう．GUI プログラミングに近い API でさまざまな立体形に貼り付けている．著者による制作物．

状を作れる 2.5 次元的な筐体設計ができており，シンプル

5.3 考察な直方体(P3,4)から曲線で縁取られた箱(P2)まで，バリエー

ワークショップ参加者は全員 JavaScript を用いたプログ

ションに富んだ形状が得られた．

ラミング経験があったため，API リファレンスを参照しな

また，ソースコードで筐体を設計する利点として，対称

がら，途中で行き詰まることなく IoT アプリケーションの的な形状を効率的に生成できることが挙げられる他，「他のソフトウェア開発とハードウェア設計ができていた．以降，人が作ったものを，そのままコピー&ペーストできるのが5.2.1-4 小節の(著者以外の)作者を P1-4 と表記する．本節の便利(P3)」だという．また，「Edison にかぎらず，通常の電5.3.1-4 小節は 1 章で述べた研究上の課題と次のように対応子工作でも使いたい．ふだんはガムテープで済ませてしま

しており，課題がどのように解決されたか議論している．

うショート防止の代わりに，よく使われるサイズのボード

1.
2.
3.

高い学習コストと IDE/CAD ツール切り替えのメンに合わせた筐体を(スライダーで大きさを調節して)作りた

タルワークロードの高さ (5.3.1-2 小節)

いと思う(P3)」そうで，GUI で形状などをパラメトリック

モジュールを把持するための立体形状を平面から組にカスタマイズできる機能への需要が確認できた．実際，み立てられるよう設計する難しさ (5.3.3-4 小節)

レーザーカッター用に好きなサイズの直方体の展開図を作組み立てて配線する手間の大きさ (5.3.5 小節)

成できるだけの Web サービス aが「1 日 100 回以上箱を生

5.3.1 両義的ソースコードによるシンプルな開発プロセス成している」など人気を博しているようである．

一つのソースコードを書くとソフトウェアとハードウ

さらに，Grove モジュールに対応したネジ穴や配線口なェアが生成されることに関しては，「ソースコードを書いてどが API で提供され，ユーザ自身でも自由に拡張できるこ

レーザープリンターで出力すれば終わりという，ほとんどとについては，「部品の配置などのモジュールを共有できての作業が PC 上で済むことが，自分のように電子工作よりよい(P3)」という好意的なコメントが得られた．
「超音波セプログラミングが得意な人にとってはかなりハードルを下ンサの図面テンプレートをビスの位置など確認しながら作げてくれる(P4)」など，全員から肯定的な感想が得られた．

るのを楽しめた (P1)」ことから，f3.js を Web 上でホストしアプリケーションに関する情報をすべて両義的ソースて，さまざまな人が協力して強化していける TextAlive [21]コードで指示するシンプルなワークフローに起因すると考のようにソーシャルな IDE にする将来展望が考えられる．

えられる「ユーザインタフェースが綺麗にまとまっていて

5.3.4 筐体設計のライブプログラミング

使いやすかった(P4)」というコメントもあった．
5.3.2 ソフトウェア開発との親和性の高さ

ソースコードが随時実行され，筐体設計のための切断線などがプレビューされる機能については「各モジュールを「JavaScript(+ npm で公開されているライブラリ)を使っ配置した形でケース図面を見られるのは完成予想図を想像て組めるのは Web エンジニアにとって Arduino 等他の環

「ケース図面が表示されると早くしやすくて良かった(P3)」a Make-a-box コメント．Retrieved November 1, 2015 from http://makeabox.io© 2016 Information Processing Society of Japan138

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

16INT016
2016/3/4

本研究の一部は JST CREST の支援を受けた．また，

プリントアウトしたくなるため，完成までのモチベーショ

謝辞

ン維持に良い．やはりケースまで完成するとやりとげた感

5 章のワークショップには石田 啓介氏，川崎 裕太氏，井がある(P1)」というように大いに歓迎された．また，「将来

上 隆広氏，矢倉 大夢氏にご参加いただいた．ここに感謝

的には 1 行更新するごとに(マイコン上のソフトウェアも)の意を表する．

すぐに更新して実行できるようなオプションがあるとよいかもしれない」というように，マイコンそのもののライブ

参考文献

プログラミングに関する期待も見られた．

1) Intel. Intel Edison. 2014. Retrieved April 1, 2015 fromhttps://www.intel.com/content/www/do-it-yourself/edison.html
2) Nicolas Villar, James Scott, Steve Hodges, Kerry Hammil, and Colin
Miller. .NET gadgeteer: a platform for custom devices. In Proc. of
Pervasive'12, 216-233.
3) Autodesk. Autodesk 123D Circuits. 2015. Retrieved November 1,
2015 from http://www.123dapp.com/circuits4) Raf Ramakers, Kashyap Todi, Kris Luyten. PaperPulse: An Integrated
Approach for Embedding Electronics in Paper Designs. In Proc. of
CHI’15, 2457-2466.
5) Karl Willis, Eric Brockmeyer, Scott Hudson, and Ivan Poupyrev.
Printed optics: 3D printing of embedded optical elements for interactive
devices. In Proc. of UIST '12, 589-598.
6) Valkyrie Savage, Ryan Schmidt, Tovi Grossman, George Fitzmaurice,and Björn Hartmann. A series of tubes: adding interactivity to 3D prints
using internal pipes. In Proc. of UIST '14, 3-12.
7) Valkyrie Savage, Colin Chang, and Björn Hartmann. Sauron:embedded single-camera sensing of printed physical user interfaces. In
Proc. of UIST '13, 447-456.
8) Valkyrie Savage, Xiaohan Zhang, and Björn Hartmann. Midas:
fabricating custom capacitive touch sensors to prototype interactive
objects. In Proc. of UIST '12, 579-588.
9) Scott Davidoff, Nicolas Villar, Alex S. Taylor, and Shahram Izadi.
Mechanical hijacking: how robots can accelerate UbiComp
deployments. In Proc. of UbiComp '11, 267-270.
10) Jacobs, J., and Buechley, L. Codeable Objects: Computational
Design and Digital Fabrication for Novice Programmers. In Proc. of
CHI’13, 1589-1598.
11) OpenSCAD. 2015. Retrieved November 1, 2015 fromhttp://www.openscad.org/
12) Shapeways. ShapeJS. 2015. Retrieved November 1, 2015 fromhttp://shapejs.shapeways.com
13) Jun Kato, Daisuke Sakamoto, Takeo Igarashi. Phybots: a toolkit
for making robotic things. In Proc. of DIS’12, 248-257.
14) Saul Greenberg and Chester Fitchett. 2001. Phidgets: easy
development of physical interfaces through physical widgets. In Proc. of
UIST’01, 209-218.
15) Arduino. 2015. Retrieved November 1, 2015 fromhttp://arduino.cc
16) SeeedStudio. Grove System. 2015. Retrieved November 1, 2015
from http://www.seeedstudio.com/wiki/GROVE_System
17) Codebender. 2015. Retrieved November 1, 2015 fromhttps://codebender.cc18) mbed Compiler. 2015. Retrieved November 1, 2015 fromhttps://developer.mbed.org/compiler19) Technical Machine. Tessel. 2014. Retrieved November 1, 2015
from https://tessel.io20) Sebastian Burckhardt et al.. It’s Alive! Continuous Feedback in UI
Programming. In Proc. of PLDI’13, 95-104.
21) Jun Kato, Tomoyasu Nakano, Masataka Goto. TextAlive:
Integrated Design Environment for Kinetic Typography. In Proc. of
CHI’15, 3403-3412

一方で，現状は切断線などの設計をすべてソースコード
で記述しているが，「GUI で切断線を編集する機能までは要らないが，クリックするとその座標がソースに入力されるような補助機能は欲しい(P4)」「GUI で直接操作したい(P1,2,3)」というコメントがあった．関連研究でも触れたよ
うに Interface Builder のような直接操作の機能が必要であることが確認された．また， 123D Circuit [3]のように回路上のセンサやアクチュエータのシミュレーションもできれ
ば，ライブプログラミングの体験が更に便利になるだろう．
5.3.5 プラモデルのような IoT アプリケーション開発「入れ物の組み立てがプラモデル的で簡単だった(P3)」というコメントに象徴されるように，はんだ付け不要で接着剤だけを使ってハードウェアを組み立てられる工程はとても好評だった．その上で，「凹凸の辺を組み合わせるだけ
でなく，何らかの形で嵌めこむだけで自立するような，小学生向けの玩具のような仕組みができれば(P3,4)」という接着剤すら不要で組み立てられる仕組みへの要望が見られた．
また，「プリントアウトされた板の裏表が分からなくな
る(P1,3)」問題が明らかになったが，隣り合わせになる面には相対する矢印を彫刻するなど，レーザーカッターの出力を工夫すれば組み立て工程をさらに支援できるだろう．

6. おわりに本研究では，レーザーカッターで切断したアクリル板などを組み合わせ，センサやアクチュエータを配置して新しいハードウェアのインタフェースを備えたマイコンアプリ
ケーションを制作できる統合開発環境 f3.js を開発した．
f3.js において導入された両義的ソースコードは，センサやアクチュエータの利用情報をアプリケーションの形状と機能の記述において共有することで，開発にかかる労力を削減できる．筐体設計のための 2.5 次元的な API は GUI プロ
グラミングなどに親しんだソフトウェアエンジニアにも使いやすく，学習コストを下げることができる．さらに，ソースコードで全てを記述することにより，利用するセンサ・
アクチュエータに応じてソフトウェアの振る舞いと筐体形
状の両方を変えるなど，アプリケーションのパラメトリッ
クなカスタマイズを実現している．
今後は，これらの特徴を活かしながら，ワークショップで得られたフィードバックを元に改善を重ねていきたい．
また，http://f3js.org で f3.js を一般公開し，多くの人に利用してもらいたいと考えている．

© 2016 Information Processing Society of Japan

139