Visual Studio Code extension for Arduino で電子工作

Visual Studio Code Advent Calendar 2017 の 13日目の記事です。 🙂

昨日の「Visual Studio Code の PHP 言語サポート vscode-php-intellisense 2017年版」に続きまして今日は VS Code と Arduino による電子工作です。

なんだか今年は趣味の電子工作をよくしていた年だったように思いますが、そんな中でも我らが VS Code が活躍してくれました。

Microsoft 謹製 “Visual Studio Code extension for Arduino” という思わぬ伏兵のリリースにびっくりしてしまいましたが、IntelliSense が使える快適なマイコンプログラミングができるようになりました。 🙂

この記事は Windows と Linux で動作することを確認しています。(シリアルポートドライバーの関係で電子工作では  macOS を使う機会がなかったのでした…)

準備

vscode-arduino は、VS Code 上で Arduino のマイコンプログラミングを可能にする拡張です。vscode-cpptools と依存関係があり、C++ の IntelliSense と Arduino 操作が協調して動作します。

Arduino のコンパイラや転送ソフトウェア自体は Arduino IDE に含まれるものが使われますので Arduino IDE の導入が必要です。導入された Adruino IDE は vscode-arduino により自動的に認識されます。

Arduino IDE と vscode-arduino 拡張の導入後、vscode-arduino の次の基本設定を “Default” から “Tag Parser” に変更してください。

{
    "C_Cpp.intelliSenseEngine": "Tag Parser"
}

Arduino の C like なソースコードは include することなく標準ライブラリが使えるようになっていますが、Default パーサーの場合は厳密にソースコードで #include <Arduino.h> などとしないとパースできず IntelliSense が効きません。

このことから “Fuzzy” な検索が出来る “Tag Parser” を使うことでこれを解決してあげます。

ここまでの準備ができたら、空のフォルダを vscode で開き、Arduino のソースファイルとなる空の hogehoge.ino ファイルを作成し開くと vscode-arduino が活動を開始します。(ステータスバーに Arudino の情報がでれば OK です)

Visual Studio Code extension for Arduino

空の hogehoge.ino ファイルができたらまずはターゲットとなる Arduino ボードの設定をします。

F1 キー押下後 “Arduino Board Config” を選択してください。

設定画面がでますので、ターゲットとなるボードを選択します。

選択後、プロジェクトフォルダに .vscode と 2つのファイルが作成されます。

  • arduino.json – Arduino の設定情報が入ります。
  • c_cpp_properties.json – C/C++ パーサーの設定情報が入ります。

c_cpp_properties.json を開き、Arduino IDE の位置を正しく自動認識して brows.path に設定されていることを確認してください。

"browse": {
    "limitSymbolsToIncludedHeaders": false,
    "path": [
        "C:\\Users\\hirom\\AppData\\Local\\Arduino15\\packages\\arduino\\hardware\\avr\\1.6.19\\cores\\arduino"
    ]
}

先に設定した “C_Cpp.intelliSenseEngine”: “Tag Parser” では、解析の設定に brows.path が用いられます。外部ライブラリなどで IntelliSense が正しく働かない場合は、この部分にパスを追加してみてください。(なお Default パーサーでは “includePath” が使われるようです)

では早速ソースコードを書いてみましょう。

IntelliSense やコードレンズが効いて良い感じです。標準の Arduino IDE は補完がサポートされておらず、また Java / Swing でできていることもありフォントなども綺麗にでませんでしたが、vscode-arduino なら全て解決で嬉しくなってしまいます 🙂

最後に Arduino へのプログラムの転送ですが、 “Arduino Board Config” と同様に F1 キーから “Arduino Select Serial Port” で接続先の COM (/dev/ttyUSB) を指定した後、”Arduino Upload” をすれば OK です。

シリアルモニターも同じ操作から “Arduino Open Serial Monitor” で起動可能です。

hexdump for VS Code

vscode-arduino とは直接関係ありませんが、hexdump for VS Code 拡張が便利でしたので合わせて紹介します。

マイコンプログラミングをしているとバイナリデーターと格闘しなくてはいけないことがありますが、hexdump for VS Code は VS Code 内でバイナリ表示・編集を可能にする拡張です。

VS Code エクスプローラーのファイル右クリックコンテキストメニューが拡張され、”Show Hexdump” できるようになります。表示されたバイナリではカーソル選択による “Hex Inspector” が使え、選択値の各種長さの 10進数表現を見たり、右クリックメニューから 1byte 単位の編集が行えます。(便利!)

VS Code で電子工作

今年は実際に Visual Studio Code extension for Arduino を活用して、数台の電子工作を行ってみましたが、トラブルもなく非常に快適でした。

では最後にそんな中の 1台の “未来ガジェット” の紹介をして今年の VS Code Advent Calendar 2017 の担当分を終わろうと思います。 3日間に渡りすいませんでした。

また来年。

# 動画中 vscode-arduino のコンソールが文字化けしているのは半年ほど前の古いバージョンの不具合で、現在は修正されています。:)

未来ガジェット 3号 “古の電子オルゴール”

何十年前ものPC ゲーム少年達を魅了したYAMAHA のシンセサイザー LSI YM2151 で、今再び楽曲を奏でるという、未来ガジェットと呼ぶにふさわしい趣味の一品。

YM2151 は YAMAHA 自身が iOS でエミュレーターをつくるなど、今なお多くの人を魅了する FM 音源と呼ばれるシンセサイザーで、暖かみのあるエレピやゲーム向きのエッジの効いた音が発声できることを特徴としています。

発売から数十年経過し、当然生産終了しているこの LSI を海外ルートから取り寄せ、先人が残した情報を元に回路を再現。オルゴールの盤面ともいえる ROM に格納した楽曲データーをマイコンから LSI に送信することで発声させています。

特にマイコン側の制御ソフトウェアが難しかったですが、小中学校時代に毎夜毎晩打ち込んでいた MML を思い出しながら、ついに楽曲が奏でられた時は泣きそうになったのでした。

この作品は基板が小さく、自分の腕前ではデジタル側とアナログ側の GND をうまく分離できず、よく聴くとチリチリと裏でデジタルノイズが鳴ってしまっているのですが、小学生の頃 PC から奏でられていた楽曲にも同じノイズが乗っていたことがフラッシュバックしタイムリープ寸前に。

いつか僕らが未来振り返る時には。骨董品を極めた作品となりました。

 

Visual Studio Code の PHP 言語サポート vscode-php-intellisense 2017年版

Visual Studio Code Advent Calendar 2017 の 12日目の記事です。 🙂

昨日の「フロントエンド技術を導入した Java ウェブアプリケーション開発」に続きまして今日は PHP です。

実は昨年の Visual Studio Advent Calendar 2016 でも vscode-php-intellisense について書かせていただいておりましたが、2016年 12月時点ではユーザー定義関数の IntelliSense が git master ブランチ上にはあったものの未リリースの段階でした。(VS Code 側の対応待ちがあった)

1年経ちましてユーザー定義関数の補完も無事動作するようになり、また PHP パーサーが Microsoft 謹製のものに変わるなどパフォーマンスを大幅にあげ、実際のプログラミングで活用されている方も多くなったように思います。

準備

vscode-php-intellisense は、同じ作者の方が PHP 7 で実装された php-language-server が使われています。このためお使いの OS に PHP 7.0 以上が導入されている必要があります。

コマンドライン・ターミナルから php -v コマンドを実行し次のようになっていれば使い始められます。(Windows / powershell.exe の例)

PS C:\> php -v
PHP 7.0.13 (cli) (built: Nov 8 2016 13:45:28) ( ZTS )
Copyright (c) 1997-2016 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2016 Zend Technologies

OS (パス)の実行環境を変えたくないよという方は、VS Code の基本設定の次のキーに PHP 7 実行ファイルへのパスを設定してください。優先して使われるようになります。

{
  "php.executablePath": "...."
}

また、VS Code 内蔵の PHP サポートが有効になっていると IntelliSense が混乱しますので無効に設定してください。

{
  "php.suggest.basic": false
}

これにて準備完了です。 PHP プロジェクトのフォルダを VS Code で開き、いずれかの .php ファイルを開くと php-language-server が浮き上がり vscode-php-intellisense の機能が使えるようになります。

拡張の起動ログは「出力」の PHP Language Server から見ることができます(パースが完了すると IntelliSense が使えるようになります。Microsoft の PHP パーサーになってからかなり速くなりました!)

ログを確認すると分かりますが、現在のところパース対象の .php ファイルの大きさが 150000byte に制限されています。 例えば WordPress では制限容量を超えたファイルがいくつか存在し、IntelliSense の対象から外されてしまいますので、拡張のファイルを直接書き換えて対応してください。

Windows の場合

C:\Users\[ユーザー名]\.vscode-insiders\extensions\felixfbecker.php-intellisense-2.0.4\vendor\felixfbecker\language-server\src\PhpDocumentLoader.php

macOS / Linux の場合

~/.vscode-insiders/extensions/felixfbecker.php-intellisense-2.0.4/vendor/felixfbecker/language-server/src/PhpDocumentLoader.php

ソースファイルを 150000 で検索し、300000 くらいにすれば OK です。

    public function load(string $uri): Promise {
        return coroutine(function () use ($uri) {
            $limit = 150000; // ここを修正します

拡張のソースファイルを直接書き換えているため、バージョンアップがあると上書きされます。(再設定してください)

設定から limit が調整できるようなプルリクが届いていますので、近い将来改善されることを期待しています。(実は結構前のプルリクで進展がないのですが… 😛

以上で拡張を使う準備完了です。

PHP IntelliSense

ユーザー定義系の補完以外は去年紹介しましたので、今年はユーザー定義系のIntelliSense を確認してみます。

WordPress プロジェクトをサンプルに、テーマをコーディングしている想定です。

add_filter は WordPress が定義するグローバル関数ですが正しく IntelliSense できています。

ちなみに PowerShell の拡張などでは次のように引数のホバーを確認しながら入力を進めことができますが、残念ながらこの動きは vscode-php-intelliSense では未実装です。(TODO に入っていますので期待です!)

と思っていたら、昨日のアップデートで実装されてしまいました!

素晴らしい…

IntelliSense 確定後はコードレンズ(定義をここに表示)でシグネチャーを確認できますので、こちらで代用すると良いと思います。

残念ながら PHP の標準関数はコードレンズできませんので、カーソルホバーで確認しましょう。 🙂

PHP は動的型付け言語ですので、完全な型参照はできなく IntelliSense の対応もある程度までになりますが、コメントアノテーションや PHP 7 の型定義で補完が効くようになります。

class Test {
    /** @var wpdb */
    private $wpdb1;

    /**
     * @param wpdb $wpdb2
     */
    public function hoge($wpdb2) {
        $this->wpdb1->query(); // OK!

        $wpdb2->query(); // OK!

        /** @var wpdb $wpdb3 */
        global $wpdb3;
        //$wpdb3->; 無念...
    }
}

例にしている $wpdb は WordPress がグローバルに定義する DB のアクセサです。

  • PHPDoc 付き private メンバーの $wpdb1 は補完 OK!
  • PHPDoc 付きメソッドパラメーターの $wpdb2 は補完 OK!
  • メソッド内のインラインコメントアノテーション $wpdb3 は補完できず

という結果でした。

ちなみに、Eclipse PDT や PhpStome ではインラインコメントアノテーションも OK です。このアノテーション方式が何かしらの規格なのかは存じ上げませんがもしかすると将来対応されるかもしれませんね。 🙂

VS Code で PHP

ここ 1年ほど PHP は全て VS Code と vscode-php-intelliSense でコーディングしましたが、VS Code の操作系ともマッチしており快適に作業を進めることが出来ました。

また、昨日紹介しましたが、VS Code は昨今のフロントエンド系の技術との親和性が高いため、PHP などのウェブアプリケーションと相性が良いです。合わせて使うと強力な相棒となってくれることと思います。

フロントエンド技術を導入した Java ウェブアプリケーション開発

Visual Studio Code Advent Calendar 2017 の 11日目の記事です。 🙂

今年の自分は Java と PHP と JavaScript と電子工作の年だったような気がするのですが、そんな中、全てにおいて随分お世話になりました VS Code。Microsoft から Arduino 拡張がリリースされたのが一番驚きました。

ということで、今日より 3日間 VS Code について書いていこうと思います。まず最初は Language Support for Java(TM) by Red Hat(vscode-java) から。「フロントエンド技術を導入した Java ウェブアプリケーション開発」です。

この記事では VS Code で Java とフロントエンド系の開発を行うサンプルプロジェクトを準備しました。

簡単な操作で昨今のフロントエンド技術を使った Java ウェブアプリケーションのビルドができるようになっていますので、興味がある方は手順を追って試していただければと思います。

OS は macOS、Linux、Windows と VS Code がオフシャルサポートする全ての環境で動作することを確認しています。

準備

お使いの環境に次のソフトウェアを導入してください。

  • Java (JDK) 8 以上
  • VS Code 1.18 以上

JDK については、コマンドライン・ターミナルから java -version コマンドが次のように実行できていれば準備完了です。(Linux の例)

$ java -version
openjdk version "1.8.0_151"
OpenJDK Runtime Environment (build 1.8.0_151-8u151-b12-0ubuntu0.17.10.2-b12)
OpenJDK 64-Bit Server VM (build 25.151-b12, mixed mode)

また、VS Code には次の拡張を導入してください。Language Support for Java(TM) by Red Hat が必須の拡張になります。

なお、ESLint 及び HTMLHint については動作に Node.js の実行環境が必要となりますが、本サンプルプロジェクトのビルドでは自動導入されるようになっていますので別途操作は不要です。

最後に Windows をお使いの方は、VS Code のファイル -> 基本設定 -> 設定より、vscode-java の java.jdt.ls.vmargs プロパティーに対して次の設定をしてください。

{
  "java.jdt.ls.vmargs": "-noverify -Xmx1G -XX:+UseG1GC -XX:+UseStringDeduplication -Dfile.encoding=UTF-8"
}

vscode-java の起動引数の最後に “-Dfile.encoding=UTF-8” を追加します。

Windows 版の JDK ではデフォルトファイルエンコードが Shift_JIS になっていますが、本サンプルプロジェクトの文字コードは UTF-8 です。この設定により、ソースコード中に直接日本語を書いた場合に vscode-java の自動ビルドで実行するアプリケーションに文字化けが発生するのを防ぎます。

サンプルプロジェクトのダウンロード及び初期ビルド

github から次の操作でサンプルプロジェクトをクローンし、初期ビルドをかけてください。この操作は一度だけで大丈夫です。git の導入がされていない方は git clone の代わりに .zip ファイルをダウンロード・展開した後、ビルドすれば OK です。

プロジェクトフォルダを配置する場所はどこでも大丈夫ですが、日本語パスを含む場所は避けてください。(後述する Spring Boot 開発者ツールのファイル監視&自動リロード処理が動かないケースがあります)

Windows の場合(cmd.exe もしくは powershell.exe で実行)

git clone https://github.com/h1romas4/springboot-template-web.git
cd springboot-template-web
.\gradlew.bat build
.\gradlew.bat eclipse
.\gradlew.bat webpack
code .

macOS、Linux の場合(ターミナルで実行)

git clone https://github.com/h1romas4/springboot-template-web.git
cd springboot-template-web
./gradlew build
./gradlew eclipse
./gradlew webpack
code .

初期ビルドはライブラリのダウンロードを伴うため少し時間がかかります。

サンプルプロジェクトは Gradle を使ってビルドされます。 gradle wapper を使っているため gradle の導入は不要です。 手順では 3つの gradle タスクを実行しており、それぞれ次のような動作を行っています。

./gradlew buiild

サンプルプロジェクトにある build.gradle を元に Java アプリケーションをビルドします。サンプルは Spring Boot を用いたウェブアプリケーションとなっていますが、必要となるライブラリ jar をインターネットから自動的にダウンロードし、アプリケーションが実行可能なように構成します。

./gradlew eclipse

VS Code の記事なのに eclipse と指定されていて不思議な感じですが、実は vscode-java(Language Support for Java(TM) by Red Hat) の実体は Eclipse の JDT と buildship という機能を language-server として外に出し、VS Code から使えるようにしたものです。

このことから vscode-java は Eclipse 用の .project や .classpath ファイル、そして build.gradle を解釈できるようになっています。

この gradle の eclipse タスクは、build.gradle から .project や .classpath を実行環境に合わせて構成するものです。起動した vscode-java はこれらのファイルを参照し、Java の編集・ビルド環境を初期化します。

./gradlew webpack

本サンプルプロジェクトでは以下の Node.js の実行環境を使ったフロントエンドのビルド技術を活用しています。

gradle の webpack タスクではこれらのセットアップを gradle-node-plugin を使って行っています。 gradle-node-plugin は Node.js の実行環境を自動的にインターネットからダウンロードし、package.json を参照して必要なモジュールを node_modules にプロジェクトローカルとして格納します。(内部的には、使っている OS の Node.js 実行環境を自動的に選択、ダウンロードし npm install コマンドを発行しています)

アプリケーションの実行

これにて VS Code によるウェブアプリケーション開発の準備完了です。まずはアプリケーションを実行してみましょう。

VS Code の統合ターミナルを起動し、次の gradle タスクを実行してください。

Windows の場合

.\gradlew.bat bootRun

macOS、Linux の場合

./gradlew bootRun

ターミナルに “Started Application” と表示されたら準備完了です。

ブラウザから http://127.0.0.1:8080/ にアクセスしてみます。

おめでとうございます。 🙂

では、VS Code に戻って src/main/java/HomeController.java を開き「こんにちは。」となっているところを「こんにちは!」などと書き換えてみてください。先ほど統合ターミナルで起動した gradle bootRun タスクが自動的に .java ファイルの編集・ビルドを検知し、アプリケーションにリロードがかかり、ブラウザを更新すると修正した文字列で動作することと思います。

この動作は build.gradle ファイルの次の指定によるものです。

eclipse {
  classpath {
    defaultOutputDir = file('build/classes/java/main')
  }
}
dependencies {
  // ...
  compile("org.springframework.boot:spring-boot-devtools")
}

gradle eclipse タスクで、vscode-java が .java ファイルを保存後に自動ビルド .class ファイルの格納先を gradle bootRun タスクが実行に使う build/classes/java/main に指定しています。

また、spring-boot-devtools を依存に入れることで、bootRun タスク中に build/classes/java/main 内の .class ファイルの書き換えを監視し自動的にアプリケーションのリロードがかかるようになります。(なお、2017/12 時点最新の gradle 4.4 では eclipse タスクに修正がかかっておりこの記述だけでは動作しないため、今回は暫定的に 4.3 を指定して使っています)

さらに、このアプリケーションで使われている JavaScript も修正してみましょう。本サンプルプロジェクトは、JavaScript の記述に webpack/babel を用いた CommonJS/Modue、ES2015 が使えるようにセットアップされています。

gradle bootRun タスクが動作中の VS Code の統合ターミナルの右側に配置されている「+」アイコンをクリックし、さらにもう一つ統合ターミナルを起動し、以下のコマンドを実行してください。

Windows の場合

.\gradlew.bat watch

macOS、Linux の場合

./gradlew watch

Module/ES2015 で記述された src/main/js/app.js が監視され、修正を検知しブラウザで動作する形にコンパイルされ、実際に .html から読み込まれる resources/static/js/bundle.js に出力されるようになります。

ためしに app.js を書き換えてみると監視が動作し、bundle.js が書き換わるのが分かります。

開発時の手順は以上です。フローをまとめると次のようになります。

  1. VS Code でプロジェクトのフォルダを開く。
  2. 統合ターミナルで gradlew boouRun を実行する。
  3. JavaScript の開発をする際はもう一つ統合ターミナルを起動して gradlew watch する。
  4. ソースファイルを編集して開発を進める。

サンプルプロジェクトは Spring Boot のウェブアプリケーションとなっています。ソースコードを修正しながら VS Code の機能とプログラミングを楽しんでみてください。

Language Support for Java(TM) by Red Hat

vscode-java では現在、Java 編集時のリアルタイムコンパイルエラー検出、定義ジャンプ、インテリセンス(補完)などの基本的な機能がサポートされています。

まだクイックフィックスやソースのオートジェネレート系は弱いものの、auto import が実装されましたのでほとんどの場面で困ることはなくなりました。逆にこのほうが Java の勉強になっていいかもです… 😛

import の構成は解決できないパッケージ(赤波線)の上で一度クリックすることで表示される、電球アイコンから行うことができます。

JavaScript

VS Code は標準で JavaScript の編集が非常に強いエディタです。

package.json ファイルを自動で認識して、モジュール構成の JavaScript ファイルであれば適切に IntelliSense することができます。補完は TypeScript 用の型定義を見てくれるようで非常に快適です。

VS Code は Module/ES2015 でソースが書かれていることを認識しますので、例えば Vue.js ライブラリを import した状態で IntelliSense を発動させると次のように Vue がもつプロパティーを表示してくれたりします。(便利!)

また、利用するパッケージを定義する package.json の記述では、次のようにパッケージの名称やバージョンを補完することができます。(便利!)

プロジェクトで利用する JavaScript のライブラリを増やす手順は次のようになります。

  1. package.json の dependencies に(IntelliSenseをつかいつつ)必要なライブラリとバージョンを指定する。
  2. gradle watch  タスクを実行し、ライブラリを自動的にインターネットからダウンロードさせる。(watch タスクは必要な依存ライブラリ全てを動作するように bundle.js に固めてくれるため .html の .js 読み込み部分に修正の必要はない)
  3. JavaScript のソースコードで import を構成して、(IntelliSenseで補完しつつ)コーディングする。

非常に快適です。 🙂

ESLint

サンプルプロジェクトでは package.json の devDependencies に eslint を設定しています。node_modules に eslint があると、VS Code の ESLint 拡張が働くようになり、上のスクリーンショットのように JavaScript の誤りをリアルタイムに検出してくれます。

ソースコードが揃いますので入れておくと便利だと思います。

サンプルプロジェクトでは eslint の設定ファイルである .eslintrc.js を最小限にしていますので、必要に応じてルールを修正してみてください。

HTMLHint

ESLint と同様に node の htmlhint を活用した拡張です。 HTML のタグの閉じ忘れや誤ったマークアップなどをリアルタイムで指摘してくれます。

サンプルプロジェクトでは、テンプレートエンジンに Thymeleaf を使っていますが、このような HTML を壊さない系のテンプレートと非常に相性が良いと思います。

HTML & CSS

VS Code 標準で HTML の emmet 入力及び CSS の IntelliSense に対応しています。 VS Code の emmet は今年に入り 2.0 化され、プレビューができるなど便利になりました。

CSS の自動補完も i マークを押すことで対応ブラウザが出力されるなど便利になっています。

EditorConfig for Visual Studio Code

プロジェクトのルートファイルにある .editoerconfig ファイルをみて、ソースコードの文字コードや改行、タブ指定などを揃えてくれます。

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

最近はさまざまな OS で開発することが多く、ソースコードの体裁を揃えるために必要な拡張となっています。(今回も 3 OS で検証中、Windows の git の改行コード変換が auto になっていたため、この拡張に助けられました…)

VS Code で Java 開発を始めよう

VS Code による Java 開発は適当にフォルダをつくり、ビルドを入れれば始められるという手軽さが魅力です。

特に、Java はできるが JavaScript は苦手という方にも、JavaScript に対して一般的なプログラミング言語と同等なモジュール構成や補完機能が Java 開発環境内で同時にサポートされますので、楽しくモダンなフロントエンドを学べる良い環境になるのではないかと思います。

お正月休みの研究にいかがでしょうか。