ArduinoをWebパターンロックで保護 - 簡単セットアップとリモート制御

必要な部品と材料

Arduino UNO	×1
PHPoC WiFi Shield for Arduino	×1
Seeed サーボモーター SG92R	×1
ジャンパーワイヤー	×1

このプロジェクトについて

はじめに

初心者の方は、以下のチュートリアルを先に読むことをおすすめします：

• Arduino - モーター
• Arduino - サーボモーター
• Arduino - WiFi

スマートフォンのロック解除パターンをご存知でしょうか。この機能がArduinoでも利用できるようになりました。不正なユーザーによるArduinoの制御や監視を防止します。

このプロジェクトのコードは他のアプリケーションにも自由に再利用できます。わかりやすくするため、ここではサーボモーターの制御を例として紹介します。

このアイデアは、PHPoCプラットフォーム向けに書かれた2つのプロジェクトから着想を得ています：

• Webベースのパターンロック for IoTデバイス
• WebSocketとグラフィックUIによるサーボモーター制御

これらをArduino用にアレンジしました。

このプロジェクトでは、以下の理由でPHPoC WiFi Shieldを使用してArduinoをインターネットに接続しています：

• PHPoC ShieldはWebSocketをサポートしており、このプロジェクトに適しています
• PHPoC Shieldには専用の組み込みWebサーバーがあり、組み込みWebアプリケーションをシールド上に保存できます

PHPoC Shieldにはいくつかの組み込みWebアプリケーションがあり、Webプログラミングの知識がなくてもArduinoの制御・監視が可能です。また、Webアプリケーション開発のスキルがあるユーザーは、独自のWebアプリケーションを開発してPHPoC Shieldに保存できます。

デモンストレーション

Webブラウザでパターンを描画し、認証後にサーボモーターを制御する様子をご覧いただけます。

データフロー

Webブラウザ ↔ PHPoC WiFi Shield ↔ Arduino

仕組み

ユーザーがWebブラウザでパターンを描くと、そのパターンは文字列にマッピングされます。このパターン文字列はWebSocket経由でPHPoC Shieldを通じてArduinoに送信されます。

Arduinoが入力パターン文字列を受信すると、Arduinoにハードコードされたパターン文字列と比較します。一致する場合、Arduinoはクライアント（Webブラウザ）に「ACCEPTED（202）」コードを返し、認証済み変数をtrueに設定します。一致しない場合は「DENIED（401）」コードを返し、変数をfalseに設定します。

ユーザーから制御コマンドを受信した際、Arduinoはまず認証済み変数の値を確認します。trueであれば対応するタスクを実行し、falseであれば「DENIED」コードをクライアントに送信します。

パターンのマッピング

パターンは文字列にマッピングされます。上図の例では、パターン文字列は「1, 4, 8, 6, 3」となります。

タイムアウトが設定されています。一定時間ユーザーの操作がない場合、認証が期限切れとなり、再度パターン入力が必要になります。

ソースコード構成

• ArduinoUnlockExample.ino: Arduino IDEでコンパイル・アップロード
• unlock.php: Webアプリケーションコード。PHPoC DebuggerでPHPoC Shieldにアップロード

必要な作業

• PHPoC ShieldのWiFi設定（SSIDとパスワード）
• PHPoC Shieldへの新しいUIのアップロード
• Arduinoコードの作成

PHPoC ShieldのWiFi設定

こちらの手順を参照してください。

新しいWeb UIのPHPoC Shieldへのアップロード

• PHPoCソースコード unlock.php をダウンロード（コードセクション参照）
• サーボモーター制御用の以下2つの画像をダウンロード

• こちらの手順に従ってPHPoC Debuggerでアップロード（PHPoC Shield上の既存ファイルは削除しないでください）

Arduinoコードの作成

• Arduino IDEでPHPoCライブラリをインストール
• コードセクションのソースコードを参照
• Arduino IDEでコンパイル・アップロード

動作確認

• Arduino IDEのシリアルモニターボタンをクリックしてIPアドレスを確認
• Webブラウザで https://IPアドレスを置換/unlock.php にアクセス
• 「Connect」ボタンをクリックしてテスト

初心者向けおすすめArduinoスターターキット

Arduinoキットをお探しの方は、「初心者向けベストArduinoキット」をご覧ください。

関数リファレンス

• Arduino - Servoライブラリ
• Servo.attach()
• Servo.write()
• Servo.writeMicroseconds()
• Servo.read()
• Servo.attached()
• Servo.detach()
• Serial.begin()
• Serial.println()
• delay()
• millis()
• for文
• while文
• if-else文
• loop()
• setup()
• String.toInt()
• String.substring()
• String.indexOf()
• String.remove()
• String.equals()

コード

unlock.php (PHP)

Webユーザーインターフェース

<!DOCTYPE html>
<html>
<head>
<title>Arduino - PHPoC Shield</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<style>
body { text-align: center; font-size: width/2pt; }
h1 { font-weight: bold; font-size: width/2pt; }
h2 { font-weight: bold; font-size: width/2pt; }
button { font-weight: bold; font-size: width/2pt; }
</style>
<script>
// パターンロックとサーボ制御のJavaScriptコード
// 詳細は元のソースコードを参照
</script>
</head>
<body>
<h1>Arduino - Web Pattern Unlock</h1>
<div id="unlock_area" style="display:block;">
<canvas id="unlock"></canvas>
</div>
<div id="control_area" style="display:none;">
<canvas id="servo"></canvas>
<p>Angle : <span id="debug">0</span></p>
</div>
<h2>
<p>WebSocket : <span id="ws_state">null</span></p>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
</h2>
</body>
</html>

ArduinoUnlockExample (Arduino)

/* Arduino Webサーバー - パターンロック */
#include "SPI.h"
#include "Phpoc.h"
#include <Servo.h>

#define CMD_AUTH 0
#define CMD_CTRL 1
#define ACCEPTED "202"
#define UNAUTHORIZED "401"

PhpocServer server(80);
Servo servo;
String pattern;
bool authenticated;
unsigned long timeout;
unsigned long lastActiveTime;

void setup() {
  Serial.begin(9600);
  while(!Serial) ;
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("web_pattern");
  Serial.print("WebSocket server address : ");
  Serial.println(Phpoc.localIP());
  servo.attach(8);
  servo.write(90);
  pattern = String("1,4,8,6,3");
  authenticated = false;
  timeout = 10000;
  lastActiveTime = 0;
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    String data = client.readLine();
    if(data) {
      int pos = data.indexOf(':');
      int cmd = data.substring(0, pos).toInt();
      if(cmd == CMD_AUTH) {
        String reqPattern = data.substring(pos+1);
        reqPattern.remove(reqPattern.indexOf(13));
        reqPattern.remove(reqPattern.indexOf(10));
        if(pattern.equals(reqPattern)) {
          authenticated = true;
          sendResponse(ACCEPTED, 3);
          lastActiveTime = millis();
        } else {
          authenticated = false;
          sendResponse(UNAUTHORIZED, 3);
        }
      } else if(cmd == CMD_CTRL) {
        if(authenticated) {
          int angle = data.substring(pos+1).toInt();
          angle = map(angle, 90, -90, 0, 180);
          servo.write(angle);
          lastActiveTime = millis();
          Serial.println(angle);
        } else {
          sendResponse(UNAUTHORIZED, 3);
        }
      }
    }
  }
  if (authenticated && ((millis() - lastActiveTime) > timeout)){
    authenticated = false;
    sendResponse(UNAUTHORIZED, 3);
  }
}

void sendResponse(char *data, int len) {
  server.write(data, len);
}

回路図