Help us understand the problem. What is going on with this article?

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

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

お疲れ様でした!

s-suefusa
IoTやってます。MyはんだごてとMyオシロ会社に置いてます。 AIやってます。後輩と一緒にUniboいじってます。 スマホアプリ作ってます。Monaca使います。 サーバーアプリ作ります。Node.jsでサクッと、中はJavaでジューシーに。 クラウドは会社のbaasを推しますが、個人的にはFirebaseかAWSか。 とにかく、フルスタックなエンジニアらしいです。
peoplesoftware
主にJavaやC#を使った受託開発や、BaaSなどのクラウドサービス、スマホアプリの自社開発を行っている会社です。※各記事の内容は個人の見解であり、所属する会社の公式見解ではありません。
http://www.pscsrv.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away