ARDUINO WEB EDITOR（ONLINE TOOLS）セットアップ方法

#はじめに
WEBブラウザ上でArduinoの開発を行うためのセットアップ方法です。
オフライン環境で開発を行いたい場合は、WEBブラウザの戻るボタンを押してArduino IDEのインストール方法を探して下さい。

#必要なもの
- WEB接続可能なPC
- Arduino
- USBケーブル

#セットアップ方法
1. [Arduinoの公式サイト](https://www.arduino.cc/)にログインする。
アカウントが無い場合は「CREATE A NEW ACCOUTN」からアカウントを開設 or Googleアカウントでログインしてください。
![bandicam 2018-09-04 11-44-44-496.png](https://qiita-image-store.s3.amazonaws.com/0/263360/ed22cb20-c57d-e5ad-4939-206fb0a97cf5.png)

2. 「SOFTWARE」→「ONLINE TOOLS」をクリックする。
![bandicam 2018-09-04 11-46-19-031.png](https://qiita-image-store.s3.amazonaws.com/0/263360/a9560a26-d34b-ff88-d552-87dea1dae063.png)

3. 「Device Manager」をクリックする。
![bandicam 2018-09-04 11-47-35-765.png](https://qiita-image-store.s3.amazonaws.com/0/263360/79f361ae-0af9-5d1b-190f-46e73ff2c674.png)

4. 「ADD NEW DEVICE」をクリックする。
![bandicam 2018-09-04 11-48-04-995.png](https://qiita-image-store.s3.amazonaws.com/0/263360/ad19c847-508a-3e66-aedd-ede2239d314b.png)

5. 「Set up the Arduino...」をクリックする。
![bandicam 2018-09-04 11-49-13-536.png](https://qiita-image-store.s3.amazonaws.com/0/263360/b480aa83-dc19-af45-14ef-13ae91c99270.png)

6. PCにArduinoを接続して「NEXT」をクリックする。
Lが点滅するけど気にしなくてOK。
![bandicam 2018-09-04 11-49-33-748.png](https://qiita-image-store.s3.amazonaws.com/0/263360/8140bff9-f446-9bf3-f8e5-590dd1989bd4.png)
![IMG_1224.jpg](https://qiita-image-store.s3.amazonaws.com/0/263360/fbaebbc0-cbf3-d270-0fd4-03fc6e195714.jpeg)

7. 「DOWNLOAD PLUGIN」をクリックする。
![bandicam 2018-09-04 11-49-59-373.png](https://qiita-image-store.s3.amazonaws.com/0/263360/a861d024-e9e8-375d-a5cf-14f0e361f4c9.png)

8. プラグインのダウンロードが始まるのでダウンロードが終わるまで待つ。
![bandicam 2018-09-04 11-50-05-233.png](https://qiita-image-store.s3.amazonaws.com/0/263360/cdd1b72d-aaf8-53c3-a111-0eb50d7c4179.png)

9. ダウンロードが終わったら起動して「次へ」をクリックする。
![bandicam 2018-09-04 11-54-25-531.png](https://qiita-image-store.s3.amazonaws.com/0/263360/56a3f7c3-6581-6a3b-600e-5499167c5136.png)

10. 「同意する」を選択して「次へ」をクリックする。
![bandicam 2018-09-04 11-54-41-872.png](https://qiita-image-store.s3.amazonaws.com/0/263360/0a078f31-4f34-e557-6067-280237c88358.png)

11. 「次へ」をクリックする。
インストール先はデフォルトのままでOK。
![_bandicam 2018-09-04 11-54-49-755.png](https://qiita-image-store.s3.amazonaws.com/0/263360/a7b4b6e8-826e-06d9-d4e6-671f5b7f4eb4.png)

12. 「次へ」をクリックする。
![bandicam 2018-09-04 11-55-06-674.png](https://qiita-image-store.s3.amazonaws.com/0/263360/6f209545-ce21-7a84-c460-43ad9cb5d5dd.png)

13. インストールが始まるので終わるまで待つ。ドライバもインストールする。
![bandicam 2018-09-04 11-55-20-657.png](https://qiita-image-store.s3.amazonaws.com/0/263360/26552c29-2bf8-6630-8781-b81c460c9aaf.png)

14. 「終了」をクリックする。![bandicam 2018-09-04 11-56-05-441.png](https://qiita-image-store.s3.amazonaws.com/0/263360/90100350-f77c-1235-c4f6-caea9a72e280.png)

15. 「NEXT」をクリックする。
![bandicam 2018-09-04 11-56-13-344.png](https://qiita-image-store.s3.amazonaws.com/0/263360/0154a9c2-988e-f436-0b03-730d3a2d7015.png)

#プログラムのアップロードを行う
```ruby:Blink.ino
// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}
// the loop function runs over and over again forever
void loop() {
  digitalWrite(LED_BUILTIN, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second
}
```

1. ARDUINO WEB EDITORの「Examples」→「01.BASICS」→「Blink」を開く
![bandicam 2018-09-04 11-57-08-807.png](https://qiita-image-store.s3.amazonaws.com/0/263360/e7b0e4b6-a396-d5d6-a7c8-daea19e8c97e.png)

2. Blink.inoの「LED_BUILTIN」に任意のPinを割り当てる。

3. 「Verify」をクリックして「Success: Done verifying ***」と表示されればOK。
![bandicam 2018-09-04 11-59-36-738.png](https://qiita-image-store.s3.amazonaws.com/0/263360/82383cdf-7acb-20d5-d03a-3c3e0af076ce.png)
![bandicam 2018-09-04 11-59-45-616.png](https://qiita-image-store.s3.amazonaws.com/0/263360/d3518bfc-26c6-bf37-d7bc-7625967a6c03.png)

4. 「Upload」をクリックして「Success: Done uploading ***」と表示されればOK。
![bandicam 2018-09-04 12-26-17-705.png](https://qiita-image-store.s3.amazonaws.com/0/263360/778400a8-6384-64ba-5553-77b0d3adb157.png)
![bandicam 2018-09-04 12-26-51-866.png](https://qiita-image-store.s3.amazonaws.com/0/263360/b11ef08a-419c-e44f-31ee-4a9dccb746dc.png)

5. 「delay」の括弧内を任意の数値に変更してVerify＆Uploadする。

6. デフォルトでは「delay(1000)」なのでLが１秒間点灯して１秒間消灯するが、5以降は指定した時間で点滅するようになる。
![IMG_1224.jpg](https://qiita-image-store.s3.amazonaws.com/0/263360/e30f31ee-7a34-7589-4cbe-7ba72c1674c5.jpeg)

#アップロードできない場合の対処法
1. 「Select Other Board & Port」をクリックする。
<img width="486" alt="スクリーンショット 2018-09-04 13.32.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/263360/b37a9965-2117-5e98-f3dd-e212f7b4c0a0.png">

2. 使用している環境に合わせて「BOARDS」「PORTS」「FLAVOURS」を設定する。
Macの場合は「BOARDS」「FLAVOURS」だけでOK。
![bandicam 2018-09-04 12-28-35-728.png](https://qiita-image-store.s3.amazonaws.com/0/263360/52154786-b68b-4755-a7c0-ed2d92391734.png)