Embed Size (px)
Citation preview
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で、見事リベンジを果たす
最後に
もし、興味が湧きましたら、フォローやいいねをお願いします。
Twitter：@makewitharduino
Facebook Page：https://www.facebook.com/makewitharduino/
ご静聴ありがとうございました。
