Arduino専用ビジュアルエディタBlocklyDuinoの使い方

# BlocklyDuinoとは

- Googoleが作ったBlocklyのArduio版。
- キーボードによるコードを記述することなく、Scratchのようにブロックを組み合わせるだけでプログラミングできる、Webベースのビジュアルプログラミングエディタ。

![スクリーンショット 2015-05-06 18.34.31.png](https://qiita-image-store.s3.amazonaws.com/0/10770/e947d458-085a-986d-b814-62a8b8fcf9e1.png)


# コード生成からArduinoへの書き込みまでの流れ
今回は、下記の二種類を使う。

1. [オンライン版BlocklyDuino](http://code.makewitharduino.com/?lang=ja)
2. [オフライン版BlocklyDuino（Chrome App）](https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCAQFjAA&url=https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fdetail%2Fblocklyduino-editor%2Fohncgafccgdbigbbikgkfbkiebahihmb%3Fhl%3Dja&ei=41pNVbKMLtfU8gWbwIGICw&usg=AFQjCNHbk6vehUbAaVLNv1eFogBQX_Q2Bw&sig2=a3nJh3xJVgqFevTYOxMyWg&bvm=bv.92885102,d.dGc)

## 生成するコード
定番のLチカ

```
void setup()
{
  pinMode(13, OUTPUT);
}


void loop()
{
  digitalWrite(13, HIGH);
  delay(1000);
  digitalWrite(13, LOW);
  delay(1000);

}
```

## BlocklyDuino上でのコード編集

マウス操作だけで、コードが完成。

![スクリーンショット 2015-05-09 08.53.39.png](https://qiita-image-store.s3.amazonaws.com/0/10770/45914abb-c98e-b711-e0fc-74680d0000d5.png)

Arduinoタブをクリックすると、上記と同じコードがちゃんと生成されてる。

![スクリーンショット 2015-05-09 08.55.09.png](https://qiita-image-store.s3.amazonaws.com/0/10770/0d8dd33c-533a-6a13-2983-051db2006090.png)

オンライン版とオフライン版はブロックが共通しているので、生成されるコードはまったく同じ。

## Arduino IDEへのコードの反映
Arduino IDEへのコードの反映方法は、オンライン版とオフライン版では異なる。

### オンライン版の場合 
オンライン版BlocklyDuinoでは、生成したコードをコピー＆ペーストでArduino IDEに貼り付ける必要がある。

コピペ作業は、一括コピペボタンを使うとちょっと便利。

![BlocklyDuino.png](https://qiita-image-store.s3.amazonaws.com/0/10770/97db3d10-ffaa-7393-d9b0-63538c88ecb8.png)

### オフライン版の場合
オフライン版BlocklyDuinoは、Arduino IDEの外部エディタとして使用する方法がある。

#### Arduino IDEの外部エディタ機能

外部エディタ機能は、Arduino IDEの設定にある```外部のエディタを機能を使用する```にチェックを入れるだけ。

![2015_05_09_9_08.png](https://qiita-image-store.s3.amazonaws.com/0/10770/23fa6970-d89d-911b-07fa-5927ebf23254.png)

なお、外部エディタモードが有効になると、Arduino IDEのエディタ画面はグレー表示され、Read Onlyとなる。外部エディタを使って更新されたコードは、コンパイルや書き込みを行うタイミングで読み込まれ、IDE側に反映される仕組みになっている。

![2015_05_09_9_12.png](https://qiita-image-store.s3.amazonaws.com/0/10770/1b1832bf-eb9e-f557-5cde-23d99838b7f1.png)

#### BlocklyDuinoを外部エディタとして使う手順

流れとしては、下記のような感じ。

1. Arduino IDEを外部エディタモードにする
2. BlocklyDuinoで編集したコードをローカルに保存
3. Arduino IDEで、保存したファイルを読み込む
4. Arduino IDEでコンパイル・書き込み
5. 再度、編集する場合は、BlocklyDuinoで編集し、保存する
6. 以下、4-5の繰り返し

#### BlocklyDuinoでのファイル保存

1. BlocklyDuinoのコードをローカルに保存する場合、まず保存先となるフォルダを選択
   ![blink.png](https://qiita-image-store.s3.amazonaws.com/0/10770/e89432ab-a83f-f7ee-9f80-b758db1e03aa.png)

2. その後、ファイル名を入力
   ![filename.png](https://qiita-image-store.s3.amazonaws.com/0/10770/b25a3446-2f4f-091e-64c4-b67b321e8974.png)

3. 指定したファイル名と同じ名前のフォルダが生成され、フォルダ中にArduinoが取り扱う```inoファイル```とBlocklyDuinoの```xmlファイル```が保存される。
   ![2015_05_09_9_45.png](https://qiita-image-store.s3.amazonaws.com/0/10770/e41bf1a1-020c-d9a8-f783-ba5ee42a3c37.png)

# その他の機能
## 自動保存機能（オフライン版のみ）
設定画面にある自動保存を有効化すると、定期的にファイルを保存してれる。
保存のタイミングはデフォルトで１分となっているが、最大１０分まで間隔を変更できる。

![blink_ino.png](https://qiita-image-store.s3.amazonaws.com/0/10770/19364190-ad82-e1c5-e5b1-d8084342c886.png)

なお、自動保存は、保存ファイルを指定しない限り、実行されない。

## サンプルサイトとの連動
BlocklyDuino Editorは、[Let's Make With Arduino!](https://lets.makewitharduino.com)というサンプルサイトと連動しており、ページ内で紹介されている電子工作のコードを簡単にコピーすることができる。

![toppage.png](https://qiita-image-store.s3.amazonaws.com/0/10770/2a260a5c-76b1-0b6d-d23c-823ee0ea102f.png)

### 手順
1. Chromeブラウザで、[Let's Make With Arduino!](https://lets.makewitharduino.com)を開く。
2. サイドバーより、好きなサンプルを選択する。
3. ページ内のサンプルコードにあるボタンをクリックすると、指定した内容（Web or ChromeApp）でコードが展開される。

![sample.png](https://qiita-image-store.s3.amazonaws.com/0/10770/9b24af87-f0ca-ed12-290d-e215556cfaa0.png)

### Youtube
[![BlocklyDuinoとサンプルサイトの連動 ](http://img.youtube.com/vi/MKexaj7jjU4/0.jpg)](http://www.youtube.com/watch?v=MKexaj7jjU4)