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 年版を記載しましたのでご参照ください。

http://another.maple4ever.net/archives/2321/


Visual Studio Code Advent Calendar 2016 の 12日目です!

ここのところずっとウォッチしていました、Visual Studio Code(vscode)で利用可能な PHP サポート拡張になります “vscode-php-intellisense” が完成度をあげ、かなり良い感じになっています。 🙂

https://github.com/felixfbecker/vscode-php-intellisense

Advanced PHP IntelliSense for Visual Studio Code. In opposite to the included PHP IntelliSense and other PHP extensions, this uses an AST to parse the source code instead of relying on naive regular expression parsing.

少し前まで PHP をかくときは、Eclipse の PHP Developer Tools を使っていましたが、vscode-php-intellisense がほぼ同様の機能を実装しましたので、検証しながら乗り換えをしております。

以下、vscode-php-intellisense で WordPress を読ませて動作させている様子です。(サイトの横幅の関係でスクリーンキャストがつぶれてしまいましたので、見づらい場合は画像をクリックしてフルサイズでご覧ください)

まずはエラーチェック。構文間違えなどをリアルタイムに指摘してくれます。

error

定義ジャンプ。PHPDoc が表示でき、関数・メソッドの定義位置に F12 でジャンプします。これがないと困ります 🙂

jump

「定義をここに表示」と「参照先検索」機能。「ここに表示」はインラインで関数定義の内容をぱらっとみるとき便利です。また、PHP は動的型付け言語なので完全ではありませんが、呼び出し元検索があるのは嬉しい部分です。

ref

最後は入力補完。 PHP の標準関数を補完しています。 PHPDoc を表示しながら、引数が入力できます。

comp

ユーザ定義関数の補完も現在 master ブランチでは可能になっています。 コメントアノテーションもみて、参照を解決しているのが分かります。

https://github.com/felixfbecker/php-language-server/pull/165

comp2

Ecipse PDT や PHPStorm 並の機能です。すごい。

このペースでいきますと、おそらく年内にはユーザ定義関数の補完も実装が完了し使える形になると思います。つまりは、WordPress や baserCMS のテンプレートタグの補完が可能になります。 😀

ユーザ定義関数補完以外は既に動作するものが Marketplase にリリースされていますので、まずは導入してアップデートを楽しみに待ちましょう。 🙂

https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

Advanced PHP IntelliSense for Visual Studio Code.
In opposite to the included PHP IntelliSense and other PHP extensions, this uses an AST to parse the source code
instead of relying on naive regular expression parsing.

その他の機能のスクリーンキャストは以下で見ることができます。(ぼくのへたなアニメよりずっと分かりやすいのでぜひご覧ください…)

https://github.com/felixfbecker/vscode-php-intellisense

さて、この拡張は同じ作者の方がかかれている PHP 7 で実装された php-language-server を利用して動作しています。(このため、拡張を動作させるには vscode を動かすマシンに PHP 7 が導入され、パスが通っている必要があります)

この親となっている php-language-server ですが、これは Microsoft Language Server Protocol の実装です。

Language Server Protocol は、エディタ(IDE)と言語解析器をつなぐための共通プロトコルですので、今後 php-language-server は vscode 以外のテキストエディタと接続できる可能性があります。 (既に Eclipse Che が PHP サポートの実装に php-language-server を使っています)

逆に Visual Studio Code から見た場合、新しく追加された言語サーバーに接続することで、どんどん対応言語を増やすことができる仕組みです。(現在 vscode は Language Server Protocol クライアントのリファレンス実装のような形になっています)

vscode と Language Server Protocol を使って対応されている言語の一覧は以下で見ることができます。

https://github.com/Microsoft/language-server-protocol/wiki/Protocol-Implementations

Language Maintainer Repository
PowerShell MS VS Code PowerShell extension
C++ MS VS Code C++ extension
C# OmniSharp Many integrations, repository
JSON MS Bundled with VS Code
CSS/LESS/SASS MS Bundled with VS Code
Xtext language framework Eclipse Eclipse Xtext
Crane PHP HvyIndustries VS Code Extension
PHP Felix Becker php-language-server
Haxe Dan Korostelev (@nadako) VS Code Haxe extension
Java (javac) @georgewfraser Javac based Java support
RAML RAML Workgroup raml-language-server Work in Progress
API Elements Vincenzo Chianese(@XVincentX) vscode-apielements
groovy Palantir groovy-language-server
Java (Eclipse) Eclipse, RedHat java-language-server, becoming Eclipse JDTLS
OCaml/Reason freebroccolo ocaml-language-server
Go Sourcegraph sourcegraph-go
Rust Jonathan Turner rustls
Scala Iulian Dragos dragos-vscode-scala
Polymer Polymer Team polymer-editor-service

まだまだ未完成のものもありますが、PowerShell などは完成形になっていてかなり使いやすいです。 標準の PowerShell ISE より良いかも?

というわけで、このような言語サポートも手伝って Visual Studio Code は愛用のエディタになりました。開発も活発なので今後も楽しみです。 😀

OSC 北海道 2015 WordBench 札幌 & baserCMS ユーザ会セミナー・ブース出展

6/13(土) OSC 北海道 2015 2日目に、WordBench 札幌と baserCMS ユーザ会の名前で、セミナーとブース出展を行ってまいりました。 🙂

今年のセミナーは WordPress を WP Multibyte Patch プラグインでおなじみ tenpuraさん(倉石さん)にお願いし、ぼくのほうは baserCMS のセミナーを担当させていただくという布陣で参加しています。

baserCMS のほうは、朝一番ということもあり、もしかして 10名くらいしか来られないのではないかと思っていたのですが、実際には倍以上の方が来場され、最後に質問もたくさん頂き、感謝、感謝でありました。

「ウェブサイト構築基盤、コーポレートサイトにちょうどいいCMS、baserCMSの紹介」というお題で、セミナーで使いましたスライドをこちらで公開します。

tenpura さんは「WordPress 最新情報、プロジェクト参加・貢献のご案内」ということでセミナーをされました。

WordPress でお金を稼いだことがある方は?

その中で、WordPress に貢献したことがある方は?

から「やべぇ、怒られるのか!?」と思わせるに十分な導入部は、

「貢献しよう」ではなく「貢献できます」

「押しつけがましいのは好きではないです。」

「こ、貢献してあげても、いいんだからね。」

というくだりに続き、オープンソースの本質をつく、OSC ならではのとても面白いセミナーとなりました。

セミナー中、最新 WordPress リリースリーダーをされた高橋大輔さんと、現存する最古の開発者(!?!?)としてぼくが並ぶ一幕もあり OSS の面白さを再確認することができました。(なんと年齢差 22 歳・・・ よぼよぼ。。)

さて、ブースのほうの話題ですが、baserCMS は今回なんと福岡から、開発リードをされています、江頭さんが来てくれまして、盛大に出展することができました。(ありがとうございました!)

手前から、baserCMS、WordBench 札幌、SaCSS ブースと仲良く並んでおります。 🙂

いつもお世話になっている、SaCSS ハムさんシール。 🙂

というわけで、数えてみたら OSC 北海道参加を続けて今年で 5年目でした。ネクストジェネレーションの活躍を楽しみに、来年もがんばろ〜。 🙂

セミナー・ブース関係者のみなさま、OSC 関係者のみなさま、今年もありがとうございました!お疲れ様でした!