Mac で Visual Studio Code で Wio LTE for Arduino で

#概要
表題の通りです。
Arduino IDE を卒業したい（~~本音は VS Code の方がカッコいいから変えたい~~)
のでやってみました。
先人様のお知恵を自分用にまとめてみました。

#環境
- macOS Catalina 10.15.3
- ARUINO 1.8.12

#手順
###1. Arduino IDE のインストール
下記 Web サイトから macOS 用の Arduino IDE をダウンロードします。
https://www.arduino.cc/en/Main/Software
ダウンロードした zip ファイルを解凍して Arduino.app を /Applications フォルダに移します。

###2. Wio LTE のボード定義、ライブラリのインストール
下記サイトを参考に進めます。
https://soracom.github.io/jp-training/WioLTE/0/prepare-mac
(※ 3. の手順も書いてあります)

###3. DFU モードでファイルを書き込むためのドライバをインストール
ターミナルで以下のコマンドを実行します。

```
$ brew install libusb
```

**brew くん、いつもありがとう🍺🍺**

###4. Arduino の Extension をインストール
VS Code に Arduino の Extension をインストールします。

<img width="817" alt="スクリーンショット 2020-04-08 20.36.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/7fd47e06-63d1-9cb5-9bac-abc45df6cbba.png">

Microsoft の提供しているものをインストールしましょう。

###5. setting.json の編集
下記サイトを~~丸パクリ~~参考に進めます。
https://qiita.com/kamata1729/items/10226444bc89e2533e4f

```json:setting.json
{
    "arduino.path": "/Applications/Arduino.app",
    "arduino.commandPath": "Contents/MacOS/Arduino",
    "arduino.additionalUrls": "",
    "arduino.logLevel": "info",
    "arduino.enableUSBDetection": true,
    "arduino.disableTestingOpen": false,
    "arduino.skipHeaderProvider": false,
    "C_Cpp.intelliSenseEngine": "Tag Parser",
}
```

#LedSetRGB をお試し
試しに Wio LTE for Arduino で LedSetRGB.ino を書き込み & 実行してみます。

###1. LedSetRGB.ino を開く
**VS Code ならポチポチするだけで Arduino を光らせちまえるんだ！**

...Arduino IDE でもできるけどね笑
(VS Code でやっていると言っても、書き込みする本体は Arduino IDE ですし...)

コマンドから Arduino: Examples をクリックしましょう。
Mac なら F1 キーですべてのコマンドを表示できます。
<img width="816" alt="スクリーンショット 2020-04-08 20.58.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/546a7da3-86ca-6116-ebf7-b5745007f649.png">
ライブラリがちゃんとインストールできていれば
`/Examples from Custom Libraries/Wio_LTE_for_Arduino/basic`
に LedSetRGB.ino があるはず。
<img width="505" alt="スクリーンショット 2020-04-08 21.16.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/6a48a26f-3c92-2897-5bf5-47f493a32484.png">
上記画像の <img width="20" alt="arduino-icon-small.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/f3269916-0083-b542-2ede-4a53344215a9.png"> LedSetRGB をクリックすれば OK です。

###2. ボードタイプとシリアルポートの設定
コマンドから Arduino:Board Config をクリック。 
<img width="864" alt="スクリーンショット 2020-04-08 21.37.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/7aea4b61-476e-6343-0a01-0cecbab68e8f.png">
Selected Board で Seeed Wio LTE Cat.1(SpeeedJP STM32 Boards)を選びます。
DebugsOFF はそのままで OK です。
<img width="1222" alt="スクリーンショット 2020-04-08 21.38.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/15c793d6-b421-7fa9-c248-6be2022a6645.png">
すると`arduino.json`も書き換わります。

(※ `arduino.json`に`"output": "../ArduinoOutput"`を追加しておくと書き込み時に、
`[Warning] Output path is not specified. Unable to reuse previously compiled files. Upload could be slow. See README.`
が出ないです。)

port 等を変更したい場合は、`arduino.json` の書き換え or VS Code のコマンドからできるはず。
`c_cpp_properties.json` も確認してみましょう。
以下のようになっていると思います。

```json:c_cpp_properties.json
{
    "configurations": [
        {
            "name": "Mac",
            "defines": [
                "ARDUINO=10800"
            ],
            "includePath": [
                "/Applications/Arduino.app/Contents/Java/tools/**",
                "/Applications/Arduino.app/Contents/Java/hardware/arduino/avr/**",
                "/{USER:PATH}/Library/Arduino15/packages/SeeedJP/tools/**",
                "/{USER:PATH}/Library/Arduino15/packages/SeeedJP/hardware/stm32/1.3.0/**",
                "${workspaceRoot}",
                "/Applications/Arduino.app/hardware/tools/**",
                "/Applications/Arduino.app/libraries/**",
                "/{USER:PATH}/Documents/Arduino/hardware/tools/**",
                "/{USER:PATH}/Documents/Arduino/libraries/**"
            ],
            "forcedInclude": [
                "/{USER:PATH}/Library/Arduino15/packages/SeeedJP/hardware/stm32/1.3.0/cores/arduino/Arduino.h"
            ],
            "intelliSenseMode": "clang-x64",
            "cStandard": "c11",
            "cppStandard": "c++17",
            "compilerPath": "/usr/bin/clang"
        }
    ],
    "version": 4
}
```
(※ {USER:PATH} の部分は自分の環境で適宜読み替えてください。) 

あれ、下記パスが見つからない...？

```
"/Applications/Arduino.app/hardware/tools/**",
"/Applications/Arduino.app/libraries/**",
"/{USER:PATH}/Documents/Arduino/hardware/tools/**",
```
ということでググってみると、Mac では Arduino.app のパスが違うようです。
以下を参考に正しいパスを修正すれば OK です！
https://stackoverflow.com/questions/25025663/where-is-the-arduino-source-folder-on-macs-arduino-app
Mac だと下記パスにすれば良さそう。
`/Arduino.app/Contents/Resources/Java/hardware`
`/Arduino.app/Contents/Resources/Java/libraries`

###3. ボードへ書き込み
Arduino と Mac を接続します。
（こういう時、最近の Mac に USB ポートないの不便ですね笑)
ちゃんと接続できているかは、
`この Mac について → システムレポート → ハードウェア`
で確認できます。
DFU モードになっていれば、`STM32 BOOTLOADER` と表示されます。
通常モード ⇄ DFU モードは以下のサイトを参考してください！
https://soracom.github.io/jp-training/WioLTE/1/1-setup

書き込む際は、コードの右上の Arduino: Upload を押しましょう！
(VS Code のコマンドからも実行できます。)
<img width="622" alt="スクリーンショット 2020-04-08 22.01.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/b7afdb31-dc67-b94a-2ae1-ee3b34dcf77f.png">
以下のようにできたら成功です！
<img width="527" alt="スクリーンショット 2020-04-08 22.20.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557096/d8b9803a-76ff-f1b4-5f9a-64e22f2eec84.png">

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/fCICvNpdjj">pic.twitter.com/fCICvNpdjj</a></p>&mdash; GabD (@GabDrererealGun) <a href="https://twitter.com/GabDrererealGun/status/1247883996521873410?ref_src=twsrc%5Etfw">April 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ピカピカ光ったよ、やったね！
(Qiita へ動画を上げるためだけに Twitter アカウントを作ったのは内緒ですw)
良かったらフォローしてください(^。^)

#感想
今回は Mac で VS Code を使って Arduino に書き込みできる環境を作ってみました。

**これで今度から VS Code でオシャレにコーディングできるゼ！**

今回は以下のサイトを参考にさせていただきました。
先人様方、いつもありがとう！　ではまた！


##偉大な先人様方(参考)
https://soracom.github.io/jp-training/WioLTE/0/prepare-mac
https://qiita.com/kamata1729/items/10226444bc89e2533e4f
https://stackoverflow.com/questions/25025663/where-is-the-arduino-source-folder-on-macs-arduino-app
https://soracom.github.io/jp-training/WioLTE/1/1-setup