Google HackFair Tokyo 2015

1. BlocklyDuino Editor
Google HackFairTokyo 2015
岡田裕行（＠okhiroyuki）

2. 自己紹介
● 岡田裕行（@okhiroyuki）
● Let's Make With Arduino！(@MakeWithArduino)
の中の人
● CoderDojo西宮＆梅田 Arduino島メンター

3. What’s
BlocklyDuino？

4. Blockly ＋ Arduino

5. Blockly
● Webベース（No Flash）
● 100％ クライアントサイド
（Javascript）
● めっちゃ軽量
● ほぼすべてのブラウザに対応
● Android、iOSにも対応
● オープンソース
Googleが作った
ビジュアルプログラミングエディタ用ライ
ブラリ

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

7. Arduino
初心者でも、すばやく簡単に
電子工作ができる
オープンソース・ハードウェア
● ボードの種類が多い
● センサーやシールドが豊富
● Cベースの開発言語
● 専用のIDEもオープンソース

8. Arduino UnoとArduino IDE

9. What’s
BlocklyDuino
Editor？

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

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

12. ● オンライン版
https://code.makewitharduino.com
● オフライン版（ChromeApp）
Chrome ウェブストアで「BlocklyDuino」でヒットします。
BlocklyDuino Editorの種類

14. BlocklyDuino Editorの主な機能
オンライン版 オフライン版
ビジュアルプログラミング ✔ ✔
言語切り替え ✔ ✔
XMLデータの保存・読み込み ✔ ✔
サンプルサイトとの連携 ✔ ✔
Arduinoコードの一括コピー ✔
.inoファイルの保存 ✔
自動保存 ✔

15. デモ

16. BlocklyDuino Editorを支える
あれこれ

17. ● BlocklyDuinoの存在
○ https://github.com/BlocklyDuino/BlocklyDuino をfolk
○ 新しいブロックの追加、日本語・にほんごの充実
● Chromeの存在
○ JavascriptベースのBlocklyDuinoを、そのままChromeAppに移植
○ Chrome Extensions APIのメッセージ通信を活用し、サンプルサイトと連動
● CoderDojo 西宮/梅田 でのメンター経験
○ メンター経験で得た気づきを、ツールにフィードバック（機能追加、改良）
BlocklyDuino Editorを支えるあれこれ

18. ChromeAppへの移植で少しはまった箇所
● windows.promptの存在
○ BlocklyDuinoでは、一部でwindow.promptを使用
○ ChromeExtensionでは使えない
○ HTML5 Dialog要素に置き換え

19. Chrome Extensions APIのメッセージング通信
を活用したサンプルサイトとの連携
サンプルコード
表示
メッセージング通信
サンプルコード
問い合わせ

20. メンター体験に基づくフィードバック
CoderDojo西宮/梅田 における
Arduinoプログラミング
いろいろな気づき 機能追加、改良

21. CoderDojo梅田の雰囲気
Arduino島

22. 具体的な改善事例
1. 自分の思うような電子回路の動きを表現できない忍者（子ども）がいた。
2. 調べてみると、Arduinoの割り込み処理を使うとうまく出来るとわかる。
3. 割り込み処理のブロックを新たに追加した。
4. 次のDojoで、見事リベンジを果たす

24. 最後に
もし、興味が湧きましたら、フォローやいいねをお願いします。
Twitter：@makewitharduino
Facebook Page：https://www.facebook.com/makewitharduino/

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