164
135

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Arduino IDEつらい・・・、Visual Studio Codeでスケッチを書く方法

Last updated at Posted at 2017-07-17

「Arduino IDE」はArduinoでの統合開発環境として、スケッチをプログラミングする時にお世話になっている方も多いと思います。

しかし、まあ、使いにくい・・・
コード量が増えていくと何を書いているのか分からなくなります・・・
できれば普段使っているようなエディターでコードは書きたいところです。

そこで、
Microsoftが作っている拡張機能『Visual Studio Code Extension for Arduino』を使って、
Visual Studio Codeでスケッチを書けるようにしました。

先日、オープンソース化されましたね!
https://blogs.msdn.microsoft.com/iotdev/2017/07/06/visual-studio-code-extension-for-arduino-is-now-open-sourced/
https://github.com/Microsoft/vscode-arduino

インストール

Arduino IDEをインストールする

「Arduino IDEは使わないって言ったじゃないか!」と思うかもしれませんが、
内部的にはArduino IDEの機能が使われています。もし持っていなければダウンロードしてください。

スクリーンショット 2017-07-17 14.48.05.png https://www.arduino.cc/en/main/software#download

『Visual Studio Code Extension for Arduino』をインストールする

Visual Studio Codeを開き、拡張機能からArduinoと検索しExtensionをインストールします。

スクリーンショット 2017-07-17 16.54.17.png
Microsoftのvscode-arduinoとなっているやつ

簡単な使い方

基本的に command + shift + P でコマンドパレットを開き実行します。

スクリーンショット 2017-07-17 16.57.56.png
Arduinoと検索すると、拡張機能のコマンドが増えているはず

サンプルコードを開いてみる

試しに Arduino: Examples を開いてみると、Arduino IDEに入ってたいつものサンプルコード達が表示されます。
Build-In Examples/01.Basics/Blink を選択

スクリーンショット 2017-07-17 17.03.33.png

開くとこんな感じ、Lチカサンプルです。

スクリーンショット 2017-07-17 17.08.00.png

ボードを選択

右下のステータスバーにある<Select Board Type>と書かれている部分
もしくは command + shift + P => Arduino: Board Config
からマイコンボードの選択画面が開きますので、使用するボードを選択します。

スクリーンショット 2017-07-17 17.11.30.png
今回はArduino Unoを使用

シリアルポートを選択

右下のステータスバーにあるCOM1と書かれている部分
もしくは command + shift + P => Arduino: Select a serial port
から通信に使用するシリアルポートを選択します。

スクリーンショット 2017-07-17 17.18.44.png
今回はUSBポートを使用

Arduinoに書き込む

command + option + U
もしくは command + shift + P => Arduino: Upload
を実行すると、Arduinoへスケッチを書き込むことができます。

スクリーンショット 2017-07-17 17.34.21.png
一瞬Arduino IEDが表示される。

Lチカ画像 当たり前ですが、ちゃんとLチカしました!

シリアル通信でデバッグ

Arduinoのデバッグにはシリアル通信でログを確認するのが一般的だと思います。
VS Codeだけでシリアル通信のやり取りも可能です。

ボーレートを設定

右下のステータスバーに書かれている数字の部分(初期値は9600でした)
もしくは command + shift + P => Arduino: Change Board Rate
でシリアル通信速度(ボーレート)を設定

スクリーンショット 2017-07-17 17.49.31.png

コードの修正

先程のBlinkを少し修正して、シリアル通信のコードを書き加えました。
このコードを command + shift + P => Arduino: Upload で再び書き込みます。

Blink.ino
void setup() {
  Serial.begin(9600);
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  digitalWrite(LED_BUILTIN, HIGH);
  Serial.println(1);
  delay(1000);
  digitalWrite(LED_BUILTIN, LOW);
  Serial.println(0);
  delay(1000);
}

Onだったら1、Offだったら0が交互に出力されるはず

シリアルモニターを表示

右下のステータスバーに書かれている電源のプラグみたいなアイコン
もしくは command + shift + P => Arduino: Open Serial Monitor
でシリアルモニターが表示されます。

スクリーンショット 2017-07-17 17.58.08.png
これで結構捗る!

接続中はアイコンが☓になっているので、クリックするとCloseされます。

設定ファイル

.vscode/json:arduino.jsonの中に設定ファイルが出来上がっている。

.vscode/json:arduino.json
{
    "sketch": "Blink.ino",
    "port": "/dev/cu.usbmodem1421",
    "board": "arduino:avr:uno"
}

ここに設定が保存されているので、毎回設定し直す必要がなくて便利!

おわり

VerifySend Text to Serial Port などもあり、Arduino IDEにある機能は一通り揃っているようです。
書き込みがワンクリックで出来ないのがちょっと不便ですが、概ね良い感じです。
Library Manager はこっちの方が見やすい

ちなみにcommand + shift + PF1 でも開けます

164
135
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
164
135

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?