obniz 1Yを使用して外出先から自宅のラズパイとJetson Nanoを操作してみた

# はじめに

obniz IoT コンテストが行われるので、obniz 1Yを申し込んでみました。
無事に届いたので、obniz 1Yを使用して外出先(リモート)から自宅のラズパイとJetson Nanoの電源操作やシリアルコンソールで操作してみました。

![Ex4BKn3UcAENfYw.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/f648470f-8dda-14fd-cbbf-96f896a8d76f.jpeg)

https://elchika.com/promotion/obniz2021/

# 背景

リモートから自宅のラズパイやJetson Nanoを操作する場合、自宅のネットワークにポートを開ける必要があります。

![スクリーンショット 2021-04-11 20.58.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/11f5fd9b-7c90-2838-6da3-3f507a906882.png)

自宅のネットワークにポートを開けるのはセキュリティのリスクがあるため、ポートを開けない代替手段手段として、ngrok、または、ARGO TUNNEL (cloudflared) などのサービスを使用して、自宅のネットワークからインターネットのサーバへアクセスすることで、リモートからの操作が可能になります。
しかし、ラズパイやJetson Nanoからアクセスする必要があり、また、サービスによって利用時間に制限があったり、リモートからのアクセス先（URL）が変わるので、不便な場合があります。

![スクリーンショット 2021-04-11 20.58.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/2b7f413f-1040-5ba1-ddb5-667265c23a21.png)

そこで、obnizを使用することで、obniz Cloud経由でリモートからのアクセスが可能になり、また、GPIOを使用してラズパイやJetson Nanoの電源を操作することもできるので、電気代を節約することができます。

![スクリーンショット 2021-04-11 20.58.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a7299f03-696f-a64a-55f4-9e48cc713460.png)

# 材料

obniz、ラズパイ、Jetson Nano以外に必要になる材料はジャンパワイヤのみで、obniz 1台でラズパイ、Jetson Nanoを2台まで操作可能です。
Grove - ジャンパワイヤ変換基盤と変換ケーブルを使用すると、操作する機器を変更する際にケーブルを間違えて挿すリスクを減らしたり、ケーブルの抜き差しを楽にすることができます。

![スクリーンショット 2021-04-11 21.07.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/050b8eb4-22e0-48c1-0c8a-15cf5acc6c6d.png)

# 構成(配線・接続)

![スクリーンショット 2021-04-11 21.47.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/bab18ec2-9907-37bc-a5cc-e3ff24c14dc9.png)

## Jetson Nano

Jetson Nanoは電源を入れても自動的に電源が入らないようにAUTO ON機能を無効にします。
AUTO ON機能を無効にするためには、AUTO ONとDISABLEのピンをジャンパーピンでショートします。
そして、UART RXD、UART TXD、PWR BTN、GNDをジャンパワイヤでobnizと接続します。

![スクリーンショット 2021-04-11 21.20.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/4205195e-63e7-b51a-f256-ca469b87efde.png)

## ラズパイ

ラズパイはGPIO3、GND、GPIO14、GPIO15をジャンパワイヤでobnizと接続します。
ラズパイはAUTO ON機能を無効にできませんので、一度起動した後にシャットダウンをして待機状態にします。
また、raspi-configコマンド(CLI)、または、Raspberry Piの設定(GUI)でシリアルコンソール機能を有効にする必要があります。

![スクリーンショット 2021-04-11 21.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8f205067-3e52-5a04-aa16-0d1d57c25709.png)

# obniz Cloud開発画面

obnizの開発者コンソールへログインして、HTMLプログラムからソースコードを入力します。
入力したソースコードはリポジトリに保存することができ、2回目以降はこちらから実行することが可能です。

![スクリーンショット 2021-04-11 22.24.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/ebcc84a6-d38b-c32e-0f87-22c6b213cfc8.png)

ソースコードを入力したあと、実行ボタンを押すと操作画面が表示されます。

![スクリーンショット 2021-04-11 22.53.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/c8595586-6a8f-d69b-86c9-ce8c59b56225.png)

操作画面のコマンド入力フォームと電源操作ボタンは2台に分けて表示しています。
コンソール出力の表示は1つですが、2台の区別は出力行の先頭の番号で分かるようにしています。

![スクリーンショット 2021-04-12 9.58.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/642fce34-b3a4-b0c6-f072-0ae4f5061d44.png)

## ソースコード

<details>
<summary>ソースコード</summary>
<div>

```html
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="/css/starter-sample.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.14.0/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>

<div id="obniz-debug"></div>
<div id="print"></div>

<br />
<form id="messageform1" class="text-center row">
  <div class="col-xs-4 col-md-3"></div>
  <div id="formarea" class="text-center col-xs-4 col-md-6">
    コンソール 1 <textarea id="textarea1" name="text" rows="1" cols="40"></textarea>
    <div class="text-center">
      <button id="send" class="btn btn-success" style="margin:20px">Send</button>
    </div>
  </div>
  <div class="col-xs-4 col-md-3"></div>
</form>

<div class="text-center">
  <button id="reset1" type="button" class="btn btn-primary">POWER ON</button>
</div>

<br />
<form id="messageform2" class="text-center row">
  <div class="col-xs-4 col-md-3"></div>
  <div id="formarea" class="text-center col-xs-4 col-md-6">
    コンソール 2 <textarea id="textarea2" name="text" rows="1" cols="40"></textarea>
    <div class="text-center">
      <button id="send" class="btn btn-success" style="margin:20px">Send</button>
    </div>
  </div>
  <div class="col-xs-4 col-md-3"></div>
</form>

<div class="text-center">
  <button id="reset2" type="button" class="btn btn-primary">POWER ON</button>
</div>

<script>
(async function(){
  var obniz;
  obniz = new Obniz('XXXX-XXXX');
  await obniz.connectWait();

  obniz.uart0.start({rx:2, tx:3, gnd:0});
  obniz.uart0.onreceive=function(data,text){
    console.log("1 > "+text);
  }

  obniz.uart1.start({rx:6, tx:7, gnd:4});
  obniz.uart1.onreceive=function(data,text){
    console.log("2 > "+text);  
  }

  $("#messageform1").submit(async e => {
    await e.preventDefault();
    let message = $("#textarea1").val();
    await obniz.uart0.send(message + "\n");
    console.log("1 < "+message);
    $("#textarea1").val("");
  });

  $("#messageform2").submit(async e => {
    await e.preventDefault();
    let message = $("#textarea2").val();
    await obniz.uart1.send(message + "\n");
    console.log("2 < "+message);
    $("#textarea2").val("");
  });
  
  $("#reset1").click(e => {
    obniz.io1.output(true);  // 出力
    obniz.io1.pull("5v");  // => pull-up;
    obniz.wait(500);  // デバイスにだけ待機の指示を送り、プログラム側は動作を続ける
    obniz.io1.output(false);  // output(false)では「0vを出力する」という出力が行われる
    obniz.io1.end();  // 出力の停止
    console.log("1 < RESET");
  });

  $("#reset2").click(e => {
    obniz.io5.output(true);  // 出力
    obniz.io5.pull("5v");  // => pull-up;
    obniz.wait(500);  // デバイスにだけ待機の指示を送り、プログラム側は動作を続ける
    obniz.io5.output(false);  // output(false)では「0vを出力する」という出力が行われる
    obniz.io5.end();  // 出力の停止
    console.log("2 < RESET");
  });

  $(window).on("beforeunload", async e => {
    await obniz.uart0.end();
    await obniz.uart1.end();
    await obniz.io1.end();
    await obniz.io5.end();
    await obniz.close();
    return;
  });
})();

</script>
  </body>
</html>
```

</div>
</details>

# まとめ

ハードウェア(デバイス)とソフトウェア(クラウドサービス)がセットになって提供されるobnizを使用すると、IoTを手軽で簡単に始められます。
では、良き obniz ライフを！