15分でできる！opnizハンズオン！

:::note alert
本記事はv0.2.5以前のバージョンのopnizに対応した記事となります。
v0.3.0以降のバージョンのハンズオン記事は[**こちら**](https://qiita.com/miso_develop/items/e5eba99cfe8593c7ff64)をご覧ください。
:::

# はじめに

本記事はM5Stack系デバイスへのopnizセットアップから、Node.js SDKでLチカするハンズオン記事となります。
だいたい15分ほどで完了します。

M5Stack、M5Stick-C、M5ATOM Matrix、M5ATOM Liteが本記事の対象となります。



# 対象読者

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



# 用意するもの

* M5Stack、M5Stick-C、M5ATOM Matrix、M5ATOM Liteのいずれか
	* M5ATOM Lite推奨
	* M5Stackの場合は別途LEDと抵抗が必要です
* USB Type-Cケーブル
	* デバイスをPCに接続する用
* PC
	* Windows / Mac / LinuxどれでもOK
	* Node.js v15以上をインストールしておいてください



# [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-m5atom)」「[opniz Server](https://github.com/miso-develop/opniz-server)」で構成されます。



# ハンズオン

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

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

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

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

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

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

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

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

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

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

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

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

```sh
npx opniz upload
```

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

* デバイスのシリアルポート
* opnizデバイスが接続するWi-FiのSSID / パスワード
* opnizプログラムを実行するマシンのIPアドレス
* 書き込むデバイスの種別（`m5atom`、`m5stickc`、`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チカプログラムを動かしてみる（計5分）

内蔵LEDを使ってLチカするプログラムを実行してみましょう。

:::note warn
M5Stackの場合は内蔵LEDがないため、19番ピンとGNDへLEDと抵抗をつなげてください。
:::

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

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

```sh:M5ATOMの場合
curl -fsSLk https://raw.githubusercontent.com/miso-develop/opniz-sdk-nodejs/main/examples/blink/blink-m5atom.js > index.js
```

```sh:M5Stick-Cの場合
curl -fsSLk https://raw.githubusercontent.com/miso-develop/opniz-sdk-nodejs/main/examples/blink/blink-m5stickc.js > index.js
```

```sh:M5Stackの場合
curl -fsSLk https://raw.githubusercontent.com/miso-develop/opniz-sdk-nodejs/main/examples/blink/blink-m5stack.js > index.js
```

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

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

```sh
npm install opniz
```

### 2.3. プログラムの実行（1分）

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

```sh
node index.js
```

デバイスのLEDが1秒おきに点滅すれば成功です。

お疲れさまでした！