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

※タイトル長いよ！
#はじめに
RaspberryPiZeroWのアプリ開発するのに、さて開発環境どうしようという事で、試してみました。
#やりたい事と制約の整理
- RaspberryPiZeroWを使用する
- GPIOにモジュールを接続して制御するプログラムを作成する
- Node.jsで開発する
- 開発効率を考慮してIDEを利用したい
- RaspberryPiZeroWにIDEを搭載しても(処理速度的に)重すぎて使い物にならない
- WindowsやMacローカルで開発しようにもGPIOが無いため、デバッグは実機(RaspberryPi)で動作させたい
- まずはLチカで

#構成
という事で、こういう構成で開発環境を構築していきます。
![rpi.jpg](https://qiita-image-store.s3.amazonaws.com/0/165224/3d2dfa5d-ef04-76ca-846b-a85c603a5fdb.jpeg)

#準備
##RaspberryPiZeroW側
ZeroWには執筆時点最新の「[RASPBIAN STRETCH LITE](https://www.raspberrypi.org/downloads/raspbian/)」をインストールしておきます。
WiFi、OTG、SSHの有効化などは事前に行っておいてください。
Node.jsはnodebrewでセットアップしておきます。
「[Raspberry Pi Zero WでNode.js＋SQLite3を動かしてみた](https://qiita.com/s-suefusa/items/6f4b1df1781c82999816)」にセットアップ手順を執筆していますので、参考にしてください。
##Mac側
「[WebStorm](https://www.jetbrains.com/webstorm/)」を使用しますのでインストールしておきます。
私は日本語化して使用していますので、必要があれば「[Pleiades プラグイン](http://mergedoc.osdn.jp/)」で日本語化しておいてください。
また、Mac側でもnpmを使用しますので、nodebrew等でNode.jsとnpmをインストールしてください。
RaspberryPiZeroWをUSBケーブルでつなぎ、SSHでログインできることを確認しておきます。

#WebStormで空のプロジェクトを作成する
WebStormで空のプロジェクトを作成します。
<img width="889" alt="スクリーンショット 2018-02-18 22.07.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/9222f071-b5ab-85c6-6768-0af0dac2b686.png">

#package.jsonを作成する
npm initコマンドでpackage.jsonを作成します。
<img width="708" alt="スクリーンショット 2018-02-18 22.11.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/f35651c6-105d-7c28-8f44-d438ec0e922e.png">

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

#Node.jsコアライブラリを有効化する
メニュー -> WebStorm -> Preferences -> 言語＆フレームワーク -> Node.jsおよびNPMからコーディング支援を有効化します。
![スクリーンショット 2018-02-18 22.13.34.jpg](https://qiita-image-store.s3.amazonaws.com/0/165224/5cbcc31b-5f9c-d2c1-6b8b-cebebaf1722b.jpeg)
<img width="1205" alt="スクリーンショット 2018-02-18 22.20.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/8b7b0a4f-2724-7374-cb1a-74c1601a26ff.png">

#Lチカ用ライブラリ「rpi-gpio」を導入する
npmコマンドでプロジェクトに「rpi-gpio」を追加します。

```
$ npm install rpi-gpio --save
```
<img width="1167" alt="スクリーンショット 2018-02-18 22.25.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/8a905905-bb4e-ece3-7b54-2fb7d6915f01.png">

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

#Lチカサンプルプログラムを書く
index.jsファイルを作成し、rpi-gpioの[GitHub](https://github.com/JamesBarwell/rpi-gpio.js)にあるサンプルコードをコピペします。

```javascript
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
```

<img width="866" alt="スクリーンショット 2018-03-05 22.00.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/59f27d85-ee47-6732-e2b6-c736c66bebb6.png">

#デプロイの構成を作成する
WebStorm側でデプロイ先を設定します。
メニュー→ツール→デプロイ→構成　を開きます。
デプロイ画面で「＋」ボタンをクリックします。

<img width="884" alt="スクリーンショット 2018-03-05 22.08.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/ac6cbf72-e1ac-83fc-e394-1a83bf7bf9e0.png">

名前は適当に。。。
型はSFTPを選択します。

<img width="743" alt="スクリーンショット 2018-03-05 22.13.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/a5bdbdc8-2fb0-3d87-565b-9e908625022a.png">

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

<img width="912" alt="スクリーンショット 2018-03-05 22.16.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/71aca6f4-3abb-cf28-a169-4f2608b562d7.png">

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

<img width="912" alt="スクリーンショット 2018-03-05 22.18.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/6be57c73-a91b-7701-a9a7-c1e9bb06a75c.png">

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

<img width="912" alt="スクリーンショット 2018-03-05 22.27.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/9b579191-22cd-9bb1-1783-8b0fa6f209b7.png">

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

設定が出来たら、プロジェクトを右クリックして、メニューからアップロードします。
<img width="323" alt="スクリーンショット 2018-03-05 22.29.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/135b04d6-2ce9-efdd-f1f7-f2d0d80c82c5.png">

ファイルが転送されます。
<img width="952" alt="スクリーンショット 2018-03-05 22.30.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/a1bf58bf-73f1-11cb-e4eb-499fc2454c5f.png">

デプロイの設定で「自動アップロード」を有効にしておくと便利です。
<img width="402" alt="スクリーンショット 2018-03-05 22.31.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/548ff46f-645a-5586-4d6b-4590d8c4e2ee.png">

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

```
$ cd /home/pi/node-led-sample/
$ npm install
```

<img width="866" alt="スクリーンショット 2018-03-05 22.36.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/d1f964a5-b324-b755-b629-cc384ffb64f7.png">


#リモートデバッグ実行の構成を作成する
メニュー→実行→デバッグ→デバッグの構成 でindex.jsの実行構成を作成します。
「＋」ボタンをクリックして、Node.jsを選択します。
名前、JavaScriptファイルは「index.js」としておきます。

<img width="1183" alt="スクリーンショット 2018-03-05 22.41.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/c7f13b0b-989c-f17d-0dfd-8150ef84cfe2.png">

Nodeインタープリターの後ろの「...」をクリックします。
<img width="662" alt="スクリーンショット 2018-03-05 22.42.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/49a4e909-d87f-28b0-8ed7-49f830c5b263.png">

「＋」ボタンをクリックして、「リモート追加」を選択します。
SSH資格情報を設定します。
<img width="900" alt="スクリーンショット 2018-03-05 22.53.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/52b7cbcc-e11f-dd32-8858-5d7a56f4a509.png">

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

<img width="662" alt="スクリーンショット 2018-03-05 22.54.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/020ec952-8f5e-4aa5-4740-8d9c313b84b9.png">

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

最終的にデバッグの構成は下記のようになります。
<img width="1183" alt="スクリーンショット 2018-03-05 22.55.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/091b5c67-02fd-a408-25e4-395dddd74b3a.png">

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

#GPIOとLEDを配線する
サンプルソースでは7番ピン（GPIO4）をON/OFFしますので、LEDに適切な抵抗器とLEDをブレッドボードに配線します。
配線図は省略します。

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

LEDがチカチカします！！

![IMG_4390.JPG](https://qiita-image-store.s3.amazonaws.com/0/165224/14961307-d4de-201f-aa8e-9566a381e596.jpeg)





コンソールにはリモート実行のコンソールログが出力されます。
<img width="1313" alt="スクリーンショット 2018-03-05 23.04.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/165224/eb322213-f289-125c-433c-77d65de35256.png">

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

お疲れ様でした！