sakura.ioで家の外から施錠確認をする(IoT)-ソフト編

前回まで

前回は,ドアの施錠を確認するためにちょっとした回路を組みました.

 

今回の概要

完成形

さびしいUI

すること

今回はいよいよソフトウェアに入っていきます.

Arduino側のプログラム作成と,環境構築とNode-REDを使ったノードベースプログラミングについて少し見ていきたいと思います.

さくらインターネットが基礎をわかりやすく解説したスライドを公開しているので,それを参考にしていきます.【最新版誘導用】sakura.io handson:https://www.slideshare.net/sakura_pr/sakuraio-handson

製作

sakura.ioの準備

https://sakura.ioにアクセスして右上のログインをクリックします.

自分のアカウントでログインします.

ログインしたらプロジェクト追加をクリックしてください

名前は適当でいいです.

 

ホームに戻った後,モジュールの追加をクリック

ここで入力する登録用IDと登録用パスワードは通信モジュールの紺色のシールをはがして確認してください.

再度ホームに戻って,サービス追加をクリックします.

今回は一番上の「WebSocket」を選択します.

名前を適当に決めてください.

URLは後でサービスと連帯するときに使うので,メモ帳にでもコピペしておくといいと思います.

 

Arduinoの準備

さくらインターネットからArduino用のライブラリが提供されているので今回使用します.

Arduino IDEをインストールしていない方は,公式からダウンロードしてインストールしてください.https://www.arduino.cc/en/Main/Software(寄付してもいいと思いますが,JUST DOWNLOADで寄付なしでいけます)

IDEを起動して,「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理」

検索バーに「sakura」と入力すればそれらしきライブラリがヒットします.インストールしてください.

画像はインストール済み

インストールできたら「ファイル」→「スケッチ例」→「SakuraIO」→「Standard」をクリックし,そのままArduinoに書き込みます.

上手くいけば,シリアルモニタが以下のようになります.

先ほどのsakura.io サービス連携の編集のページの下の方に届いたデータが表示されます.

簡易表示モードに切り替え⇔詳細表示モードに切り替え とトグル選択できます.

さくらのクラウドと連帯

さくらのクラウドログインページにアクセスします.

右上あたりの「コントロールパネルログイン」をクリック.

自分のアカウントでログインします(普通は左側:さくらインターネット会員).

アカウントを作成します.

自分の好きなように決めてください.

ホームに戻って,さくらのクラウド(IaaS)をクリック(サービスの中の左上).

右上のバーの「追加」をクリック.

サーバーを作成します.右上のシンプルモードのチェックを外してください

変更がある点だけピックアップします.詳しくは,さくらインターネット作成のスライドを確認してください.

「アーカイブ選択」は「CentOS 7.x  ・・・」を選択してください.

今回はCentOS 7.4 64bit

「管理ユーザのパスワード」,「ホスト名」は適当に決めてください.

「配置するスタートアップスクリプト」は”Node-RED”を選択します.

「Node-REDのWeb UIポート番号」は,”80″を選択します.

ログインID,ログインパスワードは適当に決めてください.

下までスクロールすると作成をクリックします.以下の3つの項目がすべて成功すればサーバ作成が完了です.

左のリストの一番上「サーバ」をクリックすると,先ほど作成したサーバが表示されます.そして,画像赤丸のインターフェースというところの値がIPアドレスです.作成したサーバの上で右クリックをすると「IPアドレスをコピー」という項目が選択できるので選択します.

ブラウザで新しいタブを開いて,そのIPアドレスを貼り付けて移動すると,Node-REDのログイン画面が表示されます.先ほどのサーバ作成時に決めたユーザ名,パスワードでログインします.

ログインしたら左側のリスト(ノードパレット)から”WebSocket”ノードを中央の真っ白な部分(シート)へドラッグアンドドロップします.

“WebSocket”ノードをダブルクリックして,画像の赤丸(鉛筆マーク)をクリックします.

URLにはsakura.ioで連帯サービスを作成したときに表示されたアドレス(wss://api.sakura.io~)を指定します.「送信/受信」は”ペイロードを送信/受信”を選択します.

できたら,交信をクリックします.

種類は”接続”を選択,名前は適当に決めてください.完了をクリックします.

左にあるノードパレットから,”debug”ノードをドラッグアンドドロップします.”WebSocket”ノードの左端の丸から,”debug”ノードの右端の丸までドラッグアンドドロップで接続してください.

 

画面右上の”デプロイ”ボタンをクリックしてください.

デプロイボタンの下の”デバッグ”タブをクリックすると,無線モジュールというかsakura.ioからデータが送られてきます.

ここで,”debug”ノードを削除します.そして,右上角にあるボタンから「パレットの管理」を選択します.

“ノードを追加”タブを選択し,検索バーに”node-red-dashboard”と打ち込み,一番上の「node-red-dashboard」の右下の”ノードを追加”をクリックしてください.

これがブラウザから見た時のGUIのパーツになります.

次に,右上角のボタンから,「読み込み」→「クリップボード」を選択して,以下の画像下にある文字列(JSON形式)をコピーして,貼り付けてください.

 

そうしたら,先ほどの”WebSocket”ノードにつなげてください.

問題なければ画面右上のデプロイをクリックします.

ブラウザで ”IPアドレス/ui” でアクセスすると,しょぼすぎるUIが表示されます(IPアドレスはNode-REDにアクセスしたときと同じ).

Arduinoに戻る

今までのコードを変更します.5秒ごとにセンサの状態を送信するので,反映されるまで若干のタイムラグがあります.

以下のコード,私的にはコピペOKですが,さくらインターネット的にどうなんでしょう.

で動きます.ブラウザで確認してみましょう.

おわりに

前半はさくらインターネットのハンズオンのスライドと同じことをしているので,わからないところがあればそちらをご覧ください.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です