BlocklyDuino EditorGoogle HackFairTokyo 2015

岡田裕行（＠okhiroyuki）

自己紹介

● 岡田裕行（@okhiroyuki）● Let's Make With Arduino！(@MakeWithArduino)

の中の人

● CoderDojo西宮＆梅田 Arduino島メンター

What’s BlocklyDuino？

Blockly ＋ Arduino

Blockly

● Webベース（No Flash）

● 100％ クライアントサイド

（Javascript）

● めっちゃ軽量

● ほぼすべてのブラウザに対応

● Android、iOSにも対応

● オープンソース

Googleが作った

ビジュアルプログラミングエディタ用ライ

ブラリ

Hour of CodeもBlocklyで作成されている

Arduino初心者でも、すばやく簡単に

電子工作ができるオープンソース・ハードウェア

● ボードの種類が多い

● センサーやシールドが豊富

● Cベースの開発言語

● 専用のIDEもオープンソース

Arduino UnoとArduino IDE

What’sBlocklyDuinoEditor？

Scratchのように、ブロックを組み合わせることで、Arduinoをプログラミングできるエディタ

Lチカのコードも４個のブロックでかける

● オンライン版

https://code.makewitharduino.com

● オフライン版（ChromeApp）Chrome ウェブストアで「BlocklyDuino」でヒットします。

BlocklyDuino Editorの種類

BlocklyDuino Editorの主な機能

オンライン版 オフライン版

ビジュアルプログラミング ✔ ✔

言語切り替え ✔ ✔

XMLデータの保存・読み込み ✔ ✔

サンプルサイトとの連携 ✔ ✔

Arduinoコードの一括コピー ✔

.inoファイルの保存 ✔

自動保存 ✔

デモ

BlocklyDuino Editorを支えるあれこれ

● BlocklyDuinoの存在○ https://github.com/BlocklyDuino/BlocklyDuino をfolk○ 新しいブロックの追加、日本語・にほんごの充実

● Chromeの存在○ JavascriptベースのBlocklyDuinoを、そのままChromeAppに移植

○ Chrome Extensions APIのメッセージ通信を活用し、サンプルサイトと連動

● CoderDojo 西宮/梅田 でのメンター経験○ メンター経験で得た気づきを、ツールにフィードバック（機能追加、改良）

BlocklyDuino Editorを支えるあれこれ

ChromeAppへの移植で少しはまった箇所

● windows.promptの存在○ BlocklyDuinoでは、一部でwindow.promptを使用

○ ChromeExtensionでは使えない

○ HTML5 Dialog要素に置き換え

Chrome Extensions APIのメッセージング通信を活用したサンプルサイトとの連携

サンプルコード表示

メッセージング通信

サンプルコード問い合わせ

メンター体験に基づくフィードバック

CoderDojo西宮/梅田 におけるArduinoプログラミング

いろいろな気づき 機能追加、改良

CoderDojo梅田の雰囲気Arduino島

具体的な改善事例

1. 自分の思うような電子回路の動きを表現できない忍者（子ども）がいた。

2. 調べてみると、Arduinoの割り込み処理を使うとうまく出来るとわかる。

3. 割り込み処理のブロックを新たに追加した。

4. 次のDojoで、見事リベンジを果たす

http://www.youtube.com/watch?v=zFMeofa8olE

最後に

もし、興味が湧きましたら、フォローやいいねをお願いします。

Twitter：@makewitharduino

Facebook Page：https://www.facebook.com/makewitharduino/

ご静聴ありがとうございました。