Edited at

MacのWebStormからリモートでRaspberryPiZeroWのNode.jsを使ってLチカしてみた

More than 1 year has passed since last update.

※タイトル長いよ!


はじめに

RaspberryPiZeroWのアプリ開発するのに、さて開発環境どうしようという事で、試してみました。


やりたい事と制約の整理


  • RaspberryPiZeroWを使用する

  • GPIOにモジュールを接続して制御するプログラムを作成する

  • Node.jsで開発する

  • 開発効率を考慮してIDEを利用したい

  • RaspberryPiZeroWにIDEを搭載しても(処理速度的に)重すぎて使い物にならない

  • WindowsやMacローカルで開発しようにもGPIOが無いため、デバッグは実機(RaspberryPi)で動作させたい

  • まずはLチカで


構成

という事で、こういう構成で開発環境を構築していきます。

rpi.jpg


準備


RaspberryPiZeroW側

ZeroWには執筆時点最新の「RASPBIAN STRETCH LITE」をインストールしておきます。

WiFi、OTG、SSHの有効化などは事前に行っておいてください。

Node.jsはnodebrewでセットアップしておきます。

Raspberry Pi Zero WでNode.js+SQLite3を動かしてみた」にセットアップ手順を執筆していますので、参考にしてください。


Mac側

WebStorm」を使用しますのでインストールしておきます。

私は日本語化して使用していますので、必要があれば「Pleiades プラグイン」で日本語化しておいてください。

また、Mac側でもnpmを使用しますので、nodebrew等でNode.jsとnpmをインストールしてください。

RaspberryPiZeroWをUSBケーブルでつなぎ、SSHでログインできることを確認しておきます。


WebStormで空のプロジェクトを作成する

WebStormで空のプロジェクトを作成します。

スクリーンショット 2018-02-18 22.07.04.png


package.jsonを作成する

npm initコマンドでpackage.jsonを作成します。

スクリーンショット 2018-02-18 22.11.03.png

ひとまずLチカするだけならデフォルトの内容で良いと思います。


Node.jsコアライブラリを有効化する

メニュー -> WebStorm -> Preferences -> 言語&フレームワーク -> Node.jsおよびNPMからコーディング支援を有効化します。

スクリーンショット 2018-02-18 22.13.34.jpg

スクリーンショット 2018-02-18 22.20.59.png


Lチカ用ライブラリ「rpi-gpio」を導入する

npmコマンドでプロジェクトに「rpi-gpio」を追加します。

$ npm install rpi-gpio --save

スクリーンショット 2018-02-18 22.25.07.png

xcodeが入っていないとエラーになってしまいますが、Macで動かしたいわけでは無いので無視して進めます。


Lチカサンプルプログラムを書く

index.jsファイルを作成し、rpi-gpioのGitHubにあるサンプルコードをコピペします。

var gpio = require('rpi-gpio');

var pin = 7;
var delay = 2000;
var count = 0;
var max = 3;

gpio.setup(pin, gpio.DIR_OUT, on);

function on() {
if (count >= max) {
gpio.destroy(function() {
console.log('Closed pins, now exit');
});
return;
}

setTimeout(function() {
gpio.write(pin, 1, off);
count += 1;
}, delay);
}

function off() {
setTimeout(function() {
gpio.write(pin, 0, on);
}, delay);
}


RaspberryPiZeroWにリモート実行用のディレクトリを作成する

ZeroW側に実行用のディレクトリを作成しておきます。

$ ssh pi@raspberrypi.local

pi@raspberrypi.local's password:
$ mkdir /homme/pi/node-led-sample

スクリーンショット 2018-03-05 22.00.23.png


デプロイの構成を作成する

WebStorm側でデプロイ先を設定します。

メニュー→ツール→デプロイ→構成 を開きます。

デプロイ画面で「+」ボタンをクリックします。

スクリーンショット 2018-03-05 22.08.47.png

名前は適当に。。。

型はSFTPを選択します。

スクリーンショット 2018-03-05 22.13.52.png

デプロイの構成は下記を参考に設定してください。

スクリーンショット 2018-03-05 22.16.37.png

マッピングは先ほど作成したディレクトリを設定します。

スクリーンショット 2018-03-05 22.18.02.png

除外パスに「ローカル・パスの追加」で「node_modules」を追加しておきます。

スクリーンショット 2018-03-05 22.27.24.png

ワーニングが出ていますが、ひとまず無視で。。

設定が出来たら、プロジェクトを右クリックして、メニューからアップロードします。

スクリーンショット 2018-03-05 22.29.10.png

ファイルが転送されます。

スクリーンショット 2018-03-05 22.30.27.png

デプロイの設定で「自動アップロード」を有効にしておくと便利です。

スクリーンショット 2018-03-05 22.31.24.png


リモートでnpmインストールしておく

リモート側にソースファイルとpackage.jsonが転送されましたので、リモート側のnodeモジュールをインストールします。

$ cd /home/pi/node-led-sample/

$ npm install

スクリーンショット 2018-03-05 22.36.50.png


リモートデバッグ実行の構成を作成する

メニュー→実行→デバッグ→デバッグの構成 でindex.jsの実行構成を作成します。

「+」ボタンをクリックして、Node.jsを選択します。

名前、JavaScriptファイルは「index.js」としておきます。

スクリーンショット 2018-03-05 22.41.12.png

Nodeインタープリターの後ろの「...」をクリックします。

スクリーンショット 2018-03-05 22.42.10.png

「+」ボタンをクリックして、「リモート追加」を選択します。

SSH資格情報を設定します。

スクリーンショット 2018-03-05 22.53.00.png

nodebrewでnodeをインストールしている場合は、Node.js interpreter pathは「/home/pi/.nodebrew/current/bin/node」を設定します。

スクリーンショット 2018-03-05 22.54.35.png

リモートのnode.jsが選択できるようになっているので、これを選択してOKします。

最終的にデバッグの構成は下記のようになります。

スクリーンショット 2018-03-05 22.55.27.png

パス・マッピングが設定されていることを確認します。


GPIOとLEDを配線する

サンプルソースでは7番ピン(GPIO4)をON/OFFしますので、LEDに適切な抵抗器とLEDをブレッドボードに配線します。

配線図は省略します。


デバッグ実行する

実行→デバッグ'index.js'をクリックします。

LEDがチカチカします!!

IMG_4390.JPG

コンソールにはリモート実行のコンソールログが出力されます。

スクリーンショット 2018-03-05 23.04.19.png

ブレークポイントももちろん使えますよ。

お疲れ様でした!