6-3.環境センサ付スマートリモコン【屋外対応】

2020年5月12日

環境センサ付スマートリモコンの屋外対応版となります。回路図及び配線図は6-1.環境センサ付スマートリモコンと同じになりますので省略させて頂きます。
Scratch3、sLab-AI連携は未対応となりますのでScratch3、sLab-AI連携を利用する場合は6-1を利用して下さい。】

1.実現システムについて

今回、実現する内容は「屋外のスマホやパソコンなどの端末(以下、屋外端末という)からIoTキットのリモコン操作や環境センサ、カメラを利用できるようにすること」になります。
屋外端末からの利用については5-3でIFTTT経由での方法について説明してきましたが限られた利用方法でした。今回は屋内と同様の利用内容の実現を検討します。

本来IoT機器は専用クラウドにより管理されデータ管理や解析、制御などを行いますが、専用クラウドのような独自サーバ構築は費用もかかり運用も大変なことから工作キットと無料クラウドサービスで実現できるシステムを検討します。
また、利用時の利便性や環境準備の容易性などの観点から屋外端末はWebブラウザで利用できる方法を検討します。
(専用のアプリやプラグインなどは利用せず、EdgeやChrome、Safariなどの標準ブラウザ機能での実現を検討します)

1-1.Beebotte利用時の課題

実際のIoTシステム(クラウド管理)に近い構成として考えられるのは「Beebotte」を活用し屋外端末から宅内IoTキットを利用するシステムとなります。

まず、Beebottteに接続するためには屋外端末のWebブラウザからJavascript動作のMQTTで接続する方法が考えられます。
WebブラウザからMQTTを利用する場合はWebsocketを利用します(WebブラウザがMQTTプロトコルを未サポートのためプラグインなどが必要)が、BeebotteではWebSocket上のMQTTには認証サーバが必要(WebサーバでAuthエンドポイントの提供が必要)となります。Publicで誰でもアクセスできる状態であれば認証サーバは必要ありませんがセキュリティの問題があり実用できません

また、MQTTを利用せず制御のみREST-API利用(WebブラウザのJavascriptからの利用)も考えられますが「CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信」となりBeebottteで許可されていないので他サイトページを閲覧した状態からの制御は実現できません。(制御ボタンを表示するにはローカルファイルもしくは他サイトページでボタン表示させて実行する必要があります。)

従って、屋外端末からBeebotteへの直接アクセスにはセキュリティ機能が必要となるため利用できず他の方法を検討します。
(屋外端末からIFTTT経由のBeebotteは5-3で説明している通り利用可能ですが利用方法は限定的です)

1-2.実現システム

Beebotteを利用することが困難なため、IoTキットのWebサーバを屋外端末のWebブラウザから直接利用できるシステム構成で実現します。
本システム構成は独自サーバなども必要なく簡単に運用できます。また、IoT端末へのアクセス認証やDDNSなどITやインターネットのノウハウが広く深く必要となり学習面としても良い構成になります。

今回実現するシステムは上図のようになります。今回、実現する通信方式は赤線部分となり、以下の機能を実装することで利用可能となります。

本ページで新たに実現する機能
①宅内ルータにおける屋外からの通信許可 【ポート開放】
②屋外からのアクセス方法(URL固定化) 【DDNS利用】
③IoTキットのアクセス制御 【ID,パスワード認証機能】

【DDNSについて】
DDNSは”Dynamic Domain Name System”の略です。インターネットに接続される全ての端末はIPアドレスという住所を持っておりその宛先(IPアドレス宛)にパケット(データ)が送信されることでデータ通信を実現しています。
IPv4ではIPアドレスは”23.59.128.146″のように表示され、これがインターネット上の住所となります。ただ、一般的にはWebブラウザでIPアドレス自体を入力することがなく”asahi.com”のような人が理解しやすい文字列を用いてアクセスしています。このような文字列をドメイン名といい、DNS(Domain Name System)というシステムを用いてドメイン名とIPアドレスの変換を行っているため人がIPアドレスを意識せずにインターネットを利用できるようになっています。

《DNSシステムによる名前解決》
asahi.com <==> 23.59.128.146

DDNSはDNSをダイナミックに行うことができるということでクライアント端末からドメイン名とIPアドレスのデータをインターネットに登録できるようにすることをいいます。
今回、DDNSを用いる理由はISPから自宅に払い出されるIPアドレス(グローバルIPアドレス)は接続する度に変更になる可能性があり、IPアドレスを覚えておいても使えなくなる可能性があるためです。
DDNSを用いることでIPアドレスが変更になった場合でもドメイン名でアクセスすることで毎回自宅に接続できるようになります。
例えば自宅のドメイン名とIPアドレスが以下のような場合に「153.182.90.7」はISPに接続する度に変更される可能性がありますが、変更に応じてIPアドレス情報を最新化すれば「iotkit.dip.jp」というドメイン名を利用することで常に自宅にアクセスできるようになります。

iotkit.dip.jp <==> 153.182.90.7

1-3.セキュリティ

Webブラウザから利用できるプロトコルはHTTPもしくはHTTPSを利用したアクセスが基本となります。
ただし、HTTPSはWebサーバ側でドメインや証明書取得が必要で費用がかかることや定期的な証明書更新などが必要なため、IoTキットでHTTPS(Web)サーバを構築するのは現実的ではありません。そのため、今回はHTTPを利用します。
また、アクセス認証には追加デバイスやカード表などが不要なID,パスワード認証により実現します。
ただ、HTTPにてID,パスワード認証を行う場合、公衆Wi-FiなどではWi-Fiパスワードが共有されておりHTTPなどの暗号化されていない通信ではID,パスワードが簡単に盗み取られてしまいます。(同じWi-FiのSSIDに接続した端末間では他の端末通信をキャプチャでき中身を見ることができます。)
そのため、ログイン認証のセキュリティ対策として以下の機能を実装します。(今回提供するソフトウェアで実装しています。)

ログイン認証(ID,パスワード認証)のセキュリティ対策
  1. ログインID及びパスワードはハッシュ化して通信し認証
  2. 通信されるハッシュ化ID、パスワードは1分毎に変更
  3. ログイン認証したIPアドレスのみアクセス許可(IPアドレスによるアクセス制御)
  4. アクセスがない場合に1分間で自動ログアウト
  5. 3回ログイン失敗で30秒の本体機能停止(ID、パスワード無限調査対策)
  6. Webサーバのポート番号を80から777へ変更

ハッシュ化の計算にはSHA256を用いています。ハッシュ化は不可逆なため元の文字列に復元することが困難となっています。また、ハッシュ化された文字列は毎回同じためWebブラウザとIoT端末で同じように計算することで認証することが可能となります。
今回、ハッシュ化文字列を1分毎に変更するため時刻とID,パスワードを組み合わせてハッシュ化しています。このため、前後30秒の時間差は許容するようにプログラムしていますが、時間差が大きくなる可能性もあるためログイン画面上部で時間を表示して確認できるようにしています。(時間差が30秒以上からログインできない事象が発生し1分30秒以上で完全にログインできなくなります。)

また、Webサーバのポート番号を80番から変更しています。インターネットの世界ではIANAという機関が番号管理を行っていてWebサーバは80番ポートと決めています。そのため、80番ポートはセキュリティホールがないか世界中のハッカーから常にチェックされています。そのため80番ポートを外すだけでもセキュリティリスクは軽減できます。ただ、Webアクセス時に「http://iotkit.dip.jp:777」のように「:777」とポート番号を明記する必要が出てきます。80番ポート時は省略可能ですので通常はつけていませんが「http://iotkit.dip.jp」は「http://iotkit.dip.jp:80」と同じ意味です。制御ソフトも公開していますので「777」を自由な番号に変更して運用頂いても問題ありません。

上記セキュリティを実装していますが完全なセキュリティを保証するものではありませんので利用に関しては各ユーザ様の責任と判断において運用をお願いします。

1-4.屋外と屋内利用について

屋外端末はWebブラウザの利用で実現していますが屋外と屋内でアクセスURLを分ける必要があります。以下の2つを使い分けてアクセスして下さい。

【屋外】DDNSで登録したURL (例:http://iotkit.dip.jp:777)
【宅内】IPアドレスのURL (例:http://192.168.1.123:777)

上記2つをブックマークに登録するなどして利用をお願いします。

2.システム構築(機能追加)手順

システムを構築するため以下の手順を実施する必要があります。
(電子工作の回路図と配線は6-1と同じため既に完了している前提で説明しています。)

2-1.宅内ルータのポート開放
2-2.DDNS設定
2-3.スケッチ(ソフトウェア)設定及び書込

以下に「2-1.宅内ルータのポート開放」と「2-2.DDNS設定」について以下に追加手順を説明しています。
「2-3.スケッチ(ソフトウェア)設定及び書込」については「3.スケッチ(制御ソフトウェア)」で説明します。

2-1.宅内ルータのポート開放

現在ご利用の宅内ルータにてWebサーバ(ポート番号:777)のポート開放が必要となります。ポート開放設定に関してはお使いの宅内ルータで異なりますのでいくつかの設定例をご紹介します。
設定内容は「宅内ルータWAN側のグローバルIPアドレス・ポート番号に届いたパケットをLAN側のIPアドレス(ポート番号)宛に通信する機能」となります。
(以下の設定例はIoTキットのIPアドレスが「192.168.1.123」、Webサーバポート番号が「777」の場合の例となります。)

●PR-S300NE 静的マスカレード設定
 左側のメニューから「詳細設定」、「静的マスカレード設定」をクリックし、設定する「エントリ番号」の「編集」をクリック
(設定内容)
 変換対象プロトコル
 変換対象ポート:777
 宛先アドレス:192.168.1.123

●PR-S300HI 静的マスカレード設定
 左側のメニューから「詳細設定」、「静的マスカレード設定」をクリックし、設定する「エントリ番号」を選択
(設定内容)
 接続インタフェース名:メインセッション【通常(環境により変更)】
 宛先アドレス:192.168.1.123
 変換対象アドレス:自分のWANIPアドレス(選択)
 対象プロトコル:TCP
 宛先ポート:777
 変換対象ポート:777

●Aterm WR8150N ポートマッピング設定
「詳細設定」から「ポートマッピング設定」
(設定内容)
 LAN側ホスト:192.168.1.123
 プロトコル:TCP
 ポート番号:777 - 777 (anyはチェックしない)
 優先度:10 (1-50まで何番でも良いです)

2-2.DDNS設定

DDNSサーバは無料サービスのieServerを利用させて頂きます。まずは登録方法について説明させて頂きます。

(1)ieServerにアクセスし「新規ユーザ登録」をクリックします。

(2)「ダイナミックDNSサービス利用を申し込む(通常接続)」をクリックします。
(本来はSSL・暗号化接続が望ましいですが漏洩などのセキュリティ脅威とシステム安定性などの観点から今回は総合的に「通常接続」とさせて頂きます)

(3)利用するドメイン名情報とメールアドレスなどを入力します。メールアドレス、パスワードは任意で問題ありません。
下図では、ユーザ(サブドメイン)名:iotkit、ドメイン名:dip.jpと設定していますので、アクセスするドメイン名は「iotkit.di.jp」となります。利用したいユーザ(サブドメイン)名とドメイン名を選択して設定して下さい。
(ユーザ(サブドメイン)名:iotkit、ドメイン名:dip.jpは今回利用していますので同じ文字列は利用できません。各自利用したいドメイン名を入力して下さい)

(4)設定をクリックし完了すると下図の画面に切り替わりますので完了が表示されることを確認してください。

3.スケッチ(制御ソフトウェア)

スケッチはこちらからダウンロードして下さい。

3-1.環境設定

環境設定はConfig.hに以下のようにまとめていますので、利用する環境に応じた内容に設定して利用してください。緑色####で区切られた箇所は利用する場合に必ず設定が必要になります。

DDNS設定は本ページの「2-2.DDNS設定」を参照下さい。
IFTTT設定は「5-1.人を検知してリモコン制御とメール送信 (IFTTT)」を参照下さい。
Beebotte設定は「5-2.屋外からの通信(プッシュ通知)」を参照下さい。

また、最後の本体ログイン設定(cnflogid,cnflogps)ですが「eeprom」という設定は装置設定(ログイン)(下図参照)で設定した値が有効にする設定となります。
装置設定(ログイン)(下図参照)で設定した値はEEPROMに書き込まれ、ログイン時はその値が利用されます。ただし、EEPROMに有効な値が設定されていない場合などは「eeprom」の文字列自体がID,パスワードとなります。そのため初期ログインのID,パスワードは「eeprom」となります。
パスワード忘れの場合もこの値(cnflogid,cnflogps)を書き換えてEEPROMの値を無効化し本Config(cnflogid,cnflogps)に設定した文字列でログインしてEEPROM情報を書き換えてから「eeprom」値に戻すなどの対応を実施して下さい。

3-2.スケッチ及びDataフォルダ書込方法【注意】

関連するソフトウェアはDataフォルダ(SPIFFS)とスケッチの2つをESP32開発ボードに書き込む必要があります。そのため、ArduinoIDEでは以下の2つの方法で書き込んで下さい。
(1)SPIFFS書込
SPIFFSデータのアップロード(書込)方法の(5)の手順を実施
(2)スケッチ書込方法
本体への書き込み方法の(2)の手順を実施

3-3.動作確認

スケッチ書き込み後にWebブラウザで「http://192.168.1.123:777」(設定したIPアドレス:ポート番号)でアクセスして下さい。
(下図はパソコンやスマホでアクセスしたWebブラウザ画面となります。HTTPは80番ポートが標準で利用されるため異なる場合は「:777」で指定しアクセスします)
また、画面のボタン数やデザインなども自由に変更可能ですので、オリジナルのIoT端末を製作して下さい。

3-4.トラブルシュート

(1)書込が完了しない
コンパイルもしくは書込時にエラー「xxxxxx.h: No such file or directory」が発生する場合はこちらを参照して対処して下さい。

(2)書込完了後にWeb画面が見れない
Webブラウザで画面が確認できない場合は起動時のシリアルモニター表示を確認しながらこちらを参照しトラブルシュートしてください。

(3)DDNSの登録確認【”DDNS_CONNECT=true”でキット起動時】
実際に登録されているかをパソコンより確認します。DNSデータがインターネット内を伝搬する場合に時間を要する場合がありますので最初のIoTキット起動後(シリアルモニタにて起動時に”DDNS-OK”が表示されることを確認)、数十分後に確認して下さい。
Windows端末でコマンドプロンプト(Windowsマーク+rコマンドで「cmd」入力しリターン)で「nslookup xxxxxx.dip.jp」(設定したドメイン)と入力しIPアドレスが取得できることを確認してください。
(Mac端末の場合はターミナルで同様の確認が可能です。nslookupコマンドは同様に利用可能です)
なお、自宅のグローバルIPアドレスはCMANのサイトで表示されるのが現在利用しているグローバルIPアドレスとなりますので、このIPアドレスが登録されていることを確認します。
【iotkit.dip.jpは既に今回利用したため利用できません。設定した情報でコマンド入力及び確認してください。】

上記「DDNS」設定が確認でき「ポート開放」が正常に完了していた場合に屋外スマホ(もしくはパソコンなど)からWebブラウザで、「http://xxxxx.dip.jp」(設定したドメイン)で屋内同様にsLab-Remo2のWeb画面での操作が利用可能となります。