blocklyduino editorの紹介
TRANSCRIPT
![Page 1: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/1.jpg)
BlocklyDuino EditorGoogle HackFairTokyo 2015
岡田裕行(@okhiroyuki)
![Page 2: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/2.jpg)
自己紹介
● 岡田裕行(@okhiroyuki)● Let's Make With Arduino!(@MakeWithArduino)
の中の人
● CoderDojo西宮&梅田 Arduino島メンター
![Page 3: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/3.jpg)
What’s BlocklyDuino?
![Page 4: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/4.jpg)
Blockly + Arduino
![Page 5: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/5.jpg)
Blockly
● Webベース(No Flash)
● 100% クライアントサイド
(Javascript)
● めっちゃ軽量
● ほぼすべてのブラウザに対応
● Android、iOSにも対応
● オープンソース
Googleが作った
ビジュアルプログラミングエディタ用ライ
ブラリ
![Page 6: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/6.jpg)
Hour of CodeもBlocklyで作成されている
![Page 7: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/7.jpg)
Arduino初心者でも、すばやく簡単に
電子工作ができるオープンソース・ハードウェア
● ボードの種類が多い
● センサーやシールドが豊富
● Cベースの開発言語
● 専用のIDEもオープンソース
![Page 8: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/8.jpg)
Arduino UnoとArduino IDE
![Page 9: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/9.jpg)
What’sBlocklyDuinoEditor?
![Page 10: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/10.jpg)
Scratchのように、ブロックを組み合わせることで、Arduinoをプログラミングできるエディタ
![Page 11: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/11.jpg)
Lチカのコードも4個のブロックでかける
![Page 12: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/12.jpg)
● オンライン版
https://code.makewitharduino.com
● オフライン版(ChromeApp)Chrome ウェブストアで「BlocklyDuino」でヒットします。
BlocklyDuino Editorの種類
![Page 13: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/13.jpg)
![Page 14: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/14.jpg)
BlocklyDuino Editorの主な機能
オンライン版 オフライン版
ビジュアルプログラミング ✔ ✔
言語切り替え ✔ ✔
XMLデータの保存・読み込み ✔ ✔
サンプルサイトとの連携 ✔ ✔
Arduinoコードの一括コピー ✔
.inoファイルの保存 ✔
自動保存 ✔
![Page 15: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/15.jpg)
デモ
![Page 16: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/16.jpg)
BlocklyDuino Editorを支えるあれこれ
![Page 17: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/17.jpg)
● BlocklyDuinoの存在○ https://github.com/BlocklyDuino/BlocklyDuino をfolk○ 新しいブロックの追加、日本語・にほんごの充実
● Chromeの存在○ JavascriptベースのBlocklyDuinoを、そのままChromeAppに移植
○ Chrome Extensions APIのメッセージ通信を活用し、サンプルサイトと連動
● CoderDojo 西宮/梅田 でのメンター経験○ メンター経験で得た気づきを、ツールにフィードバック(機能追加、改良)
BlocklyDuino Editorを支えるあれこれ
![Page 18: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/18.jpg)
ChromeAppへの移植で少しはまった箇所
● windows.promptの存在○ BlocklyDuinoでは、一部でwindow.promptを使用
○ ChromeExtensionでは使えない
○ HTML5 Dialog要素に置き換え
![Page 19: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/19.jpg)
Chrome Extensions APIのメッセージング通信を活用したサンプルサイトとの連携
サンプルコード表示
メッセージング通信
サンプルコード問い合わせ
![Page 20: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/20.jpg)
メンター体験に基づくフィードバック
CoderDojo西宮/梅田 におけるArduinoプログラミング
いろいろな気づき 機能追加、改良
![Page 21: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/21.jpg)
CoderDojo梅田の雰囲気Arduino島
![Page 22: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/22.jpg)
具体的な改善事例
1. 自分の思うような電子回路の動きを表現できない忍者(子ども)がいた。
2. 調べてみると、Arduinoの割り込み処理を使うとうまく出来るとわかる。
3. 割り込み処理のブロックを新たに追加した。
4. 次のDojoで、見事リベンジを果たす
![Page 24: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/24.jpg)
最後に
もし、興味が湧きましたら、フォローやいいねをお願いします。
Twitter:@makewitharduino
Facebook Page:https://www.facebook.com/makewitharduino/
![Page 25: BlocklyDuino Editorの紹介](https://reader034.vdocuments.mx/reader034/viewer/2022050614/587bd57a1a28ab834d8b51dd/html5/thumbnails/25.jpg)
ご静聴ありがとうございました。