15分でできる！opnizハンズオン！ (rev1)

# はじめに

本記事はM5Stack系デバイスへのopnizセットアップから、Node.js SDKでLチカするまでのハンズオン記事となります。
コマンドを6つ実行するだけで、だいたい15分ほどで完了します（ほとんどインストールやコンパイルの待ち時間です）。



# 対象読者

* JavaScript / TypeScriptでIoTしてみたい方（C / C++は書きたくない）
* できるだけ安くIoTしてみたい方
* 正直M5Stack積んでる方



# 用意するもの

* M5Stackデバイス
	* 動作確認できているデバイスは[**こちら**](https://github.com/miso-develop/opniz-sdk-nodejs#%E5%AF%BE%E5%BF%9C%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9)
* USB Type-Cケーブル
	* デバイスをPCに接続する用
* PC
	* Windows / Mac / LinuxどれでもOK
	* Node.js v16以上をインストールしておいてください



# [opniz](https://github.com/miso-develop/opniz)とは

opnizとはM5StackといったESP32デバイスをNode.jsからobnizライクに遠隔制御するための、Node.js SDKおよびArduinoライブラリです。
しくみとしてはESP32デバイスおよびNode.js SDK間にてJSON形式のRPCメッセージをやりとりし、相互に定義されたメソッドを呼び合います。

![.](https://user-images.githubusercontent.com/22117028/274111780-1f1e22ec-66ac-4cd0-bee3-1a19ee2eb65c.png)

つまりはobnizっぽいことができるオープンソースIoTフレームワークです。

「[opniz Node.js SDK](https://github.com/miso-develop/opniz-sdk-nodejs)」「[opniz Arduino Library](https://github.com/miso-develop/opniz-arduino-m5unified)」で構成されます。



# ハンズオン

1. opnizデバイスのセットアップ（計12分）
	1.1. 作業ディレクトリの作成（30秒）
	1.2. opniz CLIのnpmインストール（3分）
	1.3. M5Stackデバイスへのテンプレートスケッチ書き込み（8.5分）
2. Lチカプログラムを動かしてみる（計1.5分）
	2.1. opniz Node.js SDKのnpmインストール（30秒）
	2.2. Node.js SDKコード作成（30秒）
	2.3. プログラムの実行（30秒）

## 1. opnizデバイスのセットアップ（計12分）

まずはopniz CLIを使ってopnizデバイスをセットアップします。

### 1.1. 作業ディレクトリの作成（30秒）

最初に作業ディレクトリを作成し、ディレクトリ移動します。

```sh
mkdir opniz-handson && cd opniz-handson
```

### 1.2. opniz CLIのnpmインストール（3分）

[opniz CLI](https://github.com/miso-develop/opniz-cli)をnpmインストールします。
opniz CLIはM5Stackデバイスへopniz Arduino Libraryのテンプレートスケッチを簡単に書き込めるツールです。

```sh
npm install opniz-cli
```

:::note warn
opniz-cliのインストール時にArduino CLI実行ファイルのダウンロードやESP32環境の構築を行うため、インストールに数分かかります。
:::

### 1.3. M5Stackデバイスへのテンプレートスケッチ書き込み（8.5分）

opniz CLIを使ってM5Stackデバイスへopnizテンプレートスケッチを書き込みます。

M5StackデバイスをUSBケーブルでPCと接続してください。
その後以下のコマンドを実行し対話モードで必要な情報を入力していきます。

```sh
npx opniz upload
```

ここで必要となる情報は以下のとおりです。

* デバイスのシリアルポート
* opnizデバイスが接続するWi-FiのSSID / パスワード
* opnizプログラムを実行するマシンのIPアドレス
* 書き込むM5Stackデバイスの種別
* opnizプログラムの通信ポート番号（デフォルトは`3000`）

このうちWi-Fiパスワード以外は自動的に情報を取得しリスト表示されるので選択するだけです。
opnizプログラムの通信ポート番号はデフォルトの`3000`のままでいいのでそのままエンターキーを押してください。

[opniz uploadコマンド実行イメージ]
![.](https://user-images.githubusercontent.com/22117028/148371155-569e2ae3-7655-4c5c-a38f-4d13dd1ada4b.gif)

:::note warn
GIF画像では書き込みがさくっと終わっていますが、コンパイル / 書き込みに数分かかります。
:::



## 2. Lチカプログラムを動かしてみる（計1.5分）

内蔵RGB LEDを使ってLチカするプログラムを実行してみましょう。
ディスプレイ搭載デバイスはLチカの代わりにDチカ（Displayチカチカ）してみましょう。

### 2.1. opniz Node.js SDKのnpmインストール（30秒）

[opniz Node.js SDK](https://github.com/miso-develop/opniz-sdk-nodejs)をインストールします。

```sh
npm install opniz
```

### 2.2. Node.js SDKコード作成（30秒）

以下のcurlコマンドでサンプルコードを直接ダウンロードします。

```sh:LED搭載デバイスの場合（M5ATOM Matrix / Lite / Echo / U、M5ATOMS3 Lite、M5Stamp Pico / S3等）
curl -fsSLk https://raw.githubusercontent.com/miso-develop/opniz-sdk-nodejs/main/examples/led.js > index.js
```

```sh:ディスプレイ搭載デバイスの場合（M5Stack / Core2、M5StickC、M5ATOMS3等）
curl -fsSLk https://raw.githubusercontent.com/miso-develop/opniz-sdk-nodejs/main/examples/display.js > index.js
```

### 2.3. プログラムの実行（30秒）

以下のコマンドでプログラムを実行します。

```sh
node index.js
```

デバイスのLEDが1秒おきに点滅すれば成功です。
ディスプレイ搭載デバイスの場合は`Hello World!`の文字が点滅すれば成功です。



# Next Step
お疲れさまでした！🎉
最後にopnizを使ったIoT開発の次のステップになるような情報をまとめましたのでご覧ください！

## [Examples](https://github.com/miso-develop/opniz-sdk-nodejs/tree/main/examples)
GitHubリポジトリにてExamplesを用意しています。
M5Stackデバイス備え付けの機能の使用例や、外部LED・サーボモーターの使用例があります。

* [Button](https://github.com/miso-develop/opniz-sdk-nodejs/blob/main/examples/button.js)
* [Display](https://github.com/miso-develop/opniz-sdk-nodejs/blob/main/examples/display.js)
* [IMU（加速度、ジャイロ）](https://github.com/miso-develop/opniz-sdk-nodejs/blob/main/examples/imu.js)
* [内蔵RGB LED](https://github.com/miso-develop/opniz-sdk-nodejs/blob/main/examples/led.js)
* [外部LED](https://github.com/miso-develop/opniz-sdk-nodejs/blob/main/examples/led-external.js)
* [サーボモーター](https://github.com/miso-develop/opniz-sdk-nodejs/blob/main/examples/servo.js)

## [APIドキュメント](https://miso-develop.github.io/opniz-sdk-nodejs/)
TypeDocで[APIドキュメント](https://miso-develop.github.io/opniz-sdk-nodejs/)を生成しています。
特に以下の2つのクラスのAPIが参考になると思います。

* [Class M5Unified](https://miso-develop.github.io/opniz-sdk-nodejs/classes/devices_M5Unified.M5Unified-1.html)
* [Class Esp32](https://miso-develop.github.io/opniz-sdk-nodejs/classes/devices_Esp32.Esp32.html)

## [opnizを用いたQiita記事](https://qiita.com/tags/opniz)
opnizを用いて実際に何かを作ってみたりした記事です。

* [opnizでつくる「CO2センサ（MH-Z19C）データのGoogle Spreadsheetsロギングシステム」](https://qiita.com/miso_develop/items/287706aa12e84d687c20)
* [LINEで手軽にIoT！　opniz × LINE Notifyを試してみる](https://qiita.com/miso_develop/items/bf79b14b838017587fe5)
* [LINEで手軽にIoT！　opnizを使ってLINE BotからM5ATOM Liteをコントロールしてみる](https://qiita.com/miso_develop/items/cccce48f8f87989be1d8)
* [M1 Macでopnizを試してみた - Lチカ編 (TIPS→すべて解消済)](https://qiita.com/kitazaki/items/489ff49beff8f09e92e4)
* [Spotify物理リモコンを作ってみた](https://qiita.com/miso_develop/items/149f475ce4b3f505a93c)
* [LINE Beaconをopnizでコントロールしてみる](https://qiita.com/miso_develop/items/ee6c560654c63c7b5d81)
* [opniz拡張実装方法解説#1 Node.jsからデバイスへのリクエスト拡張編](https://qiita.com/miso_develop/items/aa88befc7ce8a3bfc2ff)