【Windows】serialport モジュールなどで node-gyp を使うとき、Visual Studio をインストールせずに使う

こんにちはー。

久しぶりの投稿となります。

というのは、パソコンを落としてしまって、ハードディスクを壊してしまったからです‥。
幸い、壊れているのはハードディスクだけだったので、それを交換したら動きました。

その交換するまでの間、パソコンを貸していただいて、それで開発をしていたのですが、
開発していたリポジトリで、「serialport」モジュールを使っていました。

しかし、このモジュールをビルドするときに、Visual Studio と python が必要だと思っていて、
Visual Studio 入れると一気に8GBとか使うので、
入れないでやる方法があったので紹介します。

Visual C++ Build Tools を使う

http://landinghub.visualstudio.com/visual-cpp-build-tools

これなんです。これが Visual Studio の代わりになります。
↑ で、「Download Visual C++ Build Tools」をクリックして、ダウンロードして実行、
すべてデフォルトのオプションでインストールします。

npm config を変更

$ npm config set msvs_version 2015 --global

これをやらないと、↓のエラーが出てしまいます。

MSBUILD : error MSB3428: Visual C++ コンポーネント "VCBuild.exe" を読み込めませんでした。この問題を解決するには、次のいずれかを行ってください。 1) .NET Framework 2.0 SDK イ
ンストールする。 2) Microsoft Visual Studio 2005 を
インストールする。 3) その他の場所にインストールされている場合、コンポーネントの場所をシステム パスに追加する。 [...\node_modules\serialport\
build\binding.sln]

これで Visual C++ Build Tools でビルドできます。

あと Python 2.7 もいれましょう

これも忘れずに!

ちなみに

serialport モジュールのページでは、Visual Studio をインストールする方法しか書いてありませんが、
node-gyp の Github では、Visual C++ Build Tools を使う方法が紹介されています。

https://github.com/nodejs/node-gyp

Sphero.js で、指定した時間だけ orb.roll をしたい

しばらく投稿してなくてすみません。

Cities Skylines にハマっていました。
え? 動かないんじゃないのだって?
VAIO の設定で、CPU を静かさ優先 -> パフォーマンス優先にしたら、なんとか動きました。
こんなに違うんだ・・
その代わり、パソコンがあったかい~☆し、めっちゃうなっています。
めっちゃ重いけど、めっちゃ面白いです。

さて、今回は、Sphero を Node.js から動かせるというすぐれもの、
Sphero.js に関する Tips ですー。
内容はタイトルの通り!

コード

var sphero = require("sphero");
var orb = sphero("xxx");

orb.connect(function() {
  function a() {
    orb.color("blue");
    orb.roll(100, 0);
    setTimeout(b, 100);
  }
  function b() {
    orb.color("red");
    orb.roll(0, 0);
    setTimeout(c, 100);
  }
  function c() {
    orb.color("green");
    orb.roll(100, 180);
    setTimeout(d, 100);
  }
  function d() {
    orb.color("yellow");
    orb.roll(0, 180);
    setTimeout(a, 100);
  }
  orb.color("black");
  setTimeout(a, 1000);
});

コードの解説

0.1 秒毎に、orb.roll を動かす or 止めると、
色を変えています。

最初は正常に動くのですが、だんだん遅れて、
最終的には止まってしまいました。

これでは、正確に 0.1 秒動くことができなくなってしまいます。

解決法

orb.roll で Sphero を動かす前に orb.ping をして、
通信ができるかどうか確認するとできました。

止まる前は orb.ping はしません。
してしまうと、0.1 秒後に止まると出来無いからです。

止まるときに通信できてなくて、
遅れてしまったらもうしょうがないですが・・

ぼくが試した感じでは、
そういうトラブルはなかったです。

VSCode のExtensionを開発してみる

こんにちは。
Visual Studio Code、使っていますか?
ぼくはこのエディタが大好きです。

今回は、このエディタの Extension(=プラグイン)の開発をしていきたいと思います。

※ node.js が必要です!

開発方法

  • TypeScript + Node.js でいけます。
  • ジェネレータは Yeoman でできています。

手順1: Yeomanを入れる。

npm install -g yo

また、VSCode Extension generatorも入れます。

npm install -g generator-code

手順2: ジェネレータを実行

> yo code
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |   Welcome to the Visual  |
   `---------´   |   Studio Code Extension  |
    ( _´U`_ )    |        generator!        |
    /___A___\    '--------------------------'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? first-ext
? What's the identifier of your extension? first-ext
? What's the description of your extension? first-ext
? What's your publisher name? xxx
? Initialize a git repository? No
   create first-ext\.vscode\launch.json
   create first-ext\.vscode\settings.json
   create first-ext\.vscode\tasks.json
   create first-ext\typings\node.d.ts
   create first-ext\typings\vscode-typings.d.ts
   create first-ext\test\extension.test.ts
   create first-ext\test\index.ts
   create first-ext\.vscodeignore
   create first-ext\.gitignore
   create first-ext\README.md
   create first-ext\vsc-extension-quickstart.md
   create first-ext\tsconfig.json
   create first-ext\src\extension.ts
   create first-ext\package.json


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.

Extension の形式は、TypeScript がおすすめです。
開発するとき、インテリセンス君が強力に働いてくれて便利だからです。

その後、名前、識別子、説明、開発者名、Git と聞かれます。
今回は、Git の設定は n にして置きました。

ずらーとモジュールがインストールされます。

手順3: Extension を実行

> cd first-ext
> code .

code . がうまくいかない時は、
first-ext フォルダを VSCode で開いてください。

ジェネレータを実行した状態で、
Hello world が試せるようになっているので、
作った Extension を実行してみましょう。

左側のデバッグボタン(虫)をクリック、緑色の再生ボタンをクリックします。
(ちなみに F5 キーでもいけますー
すると、デバッグ用の VSCode がもう一つ起動します。

vscode-ext-debug

この状態で、Extension をテスト(=実行)できるわけです。

デバッグ用に開いた VSCode で、Ctrl + Shift + P をしてコマンドパレットを開きます。
Hello world と入力しEnter キーを押してみましょう。

vscode-ext-command

Hello world というメッセージが表示されます。

vscode-ext-info-message

この動きは、すべて今作った Extension で動いています。

では、どういう仕組みで動いているのか見てみましょう。

手順4: 動く仕組みは・・?

vscode-ext-nagare
↑ ざっくりとした流れの画像

いまデバッグしていたウインドウは閉じて、
先ほどのプラグインを開いたウインドウに切り替えましょう。

まず、コマンドパレットで「Hello World」と入力しましたね。
これはpackage.json の、contributes.commands から取得されています。

vscode-ext-package.json

ここでは、コマンドパレットでHello Worldが実行されたら、
extension.sayHelloを実行すると書いてあります。

では、この extension.sayHello はどこにあるのでしょう。
src/extension.ts を開いてみましょう。

vscode-ext-extension.ts

activate 関数の中に、
vscode.commands.registerCommand(...)を呼び出している行があります。(17行目)
ここでは、extension.sayHello コマンドが呼び出されたら、
第二引数のコールバック関数を実行する、となっています。

コールバック関数には、
vscode.window.showInformationMessage('Hello World!')
と書かれています。
これは、指定された文字列を先ほどのようなメッセージで表示する関数です。

手順5: 少し変えてみる

extension.ts を、少し変更してみましょう。

let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
  // The code you place here will be executed every time your command is executed

  // Display a message box to the user
  vscode.window.showErrorMessage('Hello Error Message!');
});

似た関数で、showErrorMessage という物があります。
これは、エラーを表示する関数です。

実行してみましょう。手順は先程と同じです。
(F5キーでもいけるよ)

同じように、Ctrl+Shift+P から Hello World を選ぶと、

vscode-ext-show-err-msg

エラーメッセージ出現!

まとめ

このように、Extension は、
TypeScript + Node.js で開発できます。

また、公式サイトにも英語ですが、
Extension の作成方法が載っているので、
見てみてください。

GulpでTaskに引数を使う

Gulpで、タスクをより便利にしたいとき、引数が使いたくなります。
こんな感じです。

gulp build --dev

これは、npmのモジュール、「minimist」を使うとできます。

npm i minimist
var minimist = require("minimist");
gulp.task("build", function() {
  var env = minimist(process.argv.slice(2));
  if (env.dev) {
    // --devが入っているとき
  } else {
    // 通常時
  }
});

–と-の違い

次のようなコマンドにしてみます

gulp build -dev

--dev ではなくて、 -dev を使ってみました。

こうするとどうでしょう。 env 変数の中を見てみます。

d、e、v オプションに分かれている
d、e、v オプションに分かれている

d、e、vに分かれています。つまり、

gulp build -d -e -v

とやったのと同じになるらしいです(今知った)!

ちなみに --dev でやると・・

devオプションになっています!!

参考

JavaScript - gulp.jsのコマンドライン引数で、環境別にminify条件を切り替える - Qiita
フロントエンド開発効率化のため、この度初めてタスクランナーを使ってみました。最近はGruntよりgulpの方が盛り上がってるようなのでgulpを選択。javascriptの開発をし...