Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

BlocklyDuinoとは

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

スクリーンショット 2015-05-06 18.34.31.png

コード生成からArduinoへの書き込みまでの流れ

今回は、下記の二種類を使う。

  1. オンライン版BlocklyDuino
  2. オフライン版BlocklyDuino(Chrome App)

生成するコード

定番の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

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

スクリーンショット 2015-05-09 08.55.09.png

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

Arduino IDEへのコードの反映

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

オンライン版の場合

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

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

BlocklyDuino.png

オフライン版の場合

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

Arduino IDEの外部エディタ機能

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

2015_05_09_9_08.png

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

2015_05_09_9_12.png

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

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

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

BlocklyDuinoでのファイル保存

  1. BlocklyDuinoのコードをローカルに保存する場合、まず保存先となるフォルダを選択
    blink.png

  2. その後、ファイル名を入力
    filename.png

  3. 指定したファイル名と同じ名前のフォルダが生成され、フォルダ中にArduinoが取り扱うinoファイルとBlocklyDuinoのxmlファイルが保存される。
    2015_05_09_9_45.png

その他の機能

自動保存機能(オフライン版のみ)

設定画面にある自動保存を有効化すると、定期的にファイルを保存してれる。
保存のタイミングはデフォルトで1分となっているが、最大10分まで間隔を変更できる。

blink_ino.png

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

サンプルサイトとの連動

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

toppage.png

手順

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

sample.png

Youtube

BlocklyDuinoとサンプルサイトの連動

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした