建築発明工作ゼミ2008: Processing-Arduino　ネットワーク制御

今回は、ProcessingのNetworkライブラリを使って、ネットワーク越しに複数のクライアントコンピュータから、サーバコンピュータに接続されたArduinoのサーボとLEDを操作することにします。ネットワーク上では、情報を提供する側となるサーバコンピュータに複数のクライアントコンピュータが接続されているような状態になります。

まず、上図のようにローカルネットワーク内での通信を行ってみます（後半にローカルネットワーク外からの通信サンプルを記載しておきました）。

ひとつのクライアントからサーバへ信号が送られると、サーボの角度やLEDの点灯状態が変化しますが、サーバはクライアントからの信号を受け取るだけではなく、現在のサーボの角度やLEDの状態（オン／オフ）についての情報も各クライアントへ送り返します。そうすることで、各クライアントは現在のサーボやLEDの状態を把握しながら制御することができます。
サーバコンピュータとクライアントコンピュータはインターネット越しに通信され、サーバコンピュータとArduinoはシリアル通信されます。

（Processingの画面：画面上半分がサーボ用スライダ、下半分がLED用ボタン）

Processingの画面には、上半分がサーボ用のスライダ、下半分にLED用のボタンを配置することにします。スライダは0~255の値を送信し、ボタンは押すとオン（緑）の状態になり、もう一度押すと白（オフ）に戻ります。あるクライアントがボタンを押せば、サーバとその他のクライアントのボタンの色も同時に変わります。サーバからのコントロールも可能です。

Arduinoでは、サーボの値とLEDの値をサーバコンピュータからシリアル通信を通してデータ受信します。以下のプログラムでは、サーボは３番ピンと接続しPWMで制御することにします（サーボ制御の方法については、「Arduino　サーボ制御」を参照して下さい）。LEDは１３番ピンに接続しデジタル出力でオン／オフ制御することにします。

Arduinoのプログラム：


//サーボ用変数を用意
int servoVal;
//LED用変数を用意
int ledVal;

void setup(){
  //シリアル通信開始
  Serial.begin(9600);
  //13番ピンをデジタル出力に設定
  pinMode(13,OUTPUT);
}

void loop(){
  //データが二個きたら（１個より多ければ）
  if(Serial.available()>1){
    //サーボの回転値として読み込む（0~255）
    servoVal=Serial.read();
    //LEDの点灯状態（0:OFF,1:ON）
    ledVal=Serial.read();
    //合図用データ送信
    Serial.print('A');
  }
  //3番ピン（PWM）：アナログ出力（サーボ）
  analogWrite(3,servoVal);
  //13番ピン：デジタル出力（LED）
  digitalWrite(13,ledVal);

  //0.02秒周期にする
  delay(20);
}

「サーバのプログラム」：
サーバ側のプログラムでは、ネットワークとシリアル通信の二つのライブラリが必要となります。スライダは横方向（X座標）に動かし256段階あるので、画面サイズの横幅も256ピクセルにしてあります。ドラッグのためのプログラムは、mouseDragged()を使わず、startDrag（名前は任意）というフラグを用意し、mousePressed()でマウスを押したときにフラグがtrueになり、ドラッグが開始されたことになり、mouseReleased()でマウスが放されたときにドラッグ終了になり、同時にフラグもfalseになるようにしておきます。つまりフラグstartDragによって、ドラッグしているかどうかを判別することになります。ドラッグしていなくてもマウスボタンを押し続けている限りドラッグ中と見なされるので、その間データを送信し続けます。
あまり高速での通信ができないためフレームレートを10にしています。環境に応じてフレームレートを調整してみて下さい（サーバとクライアントのプログラム両方）。
サーバとクライアントの間では、文字列で送受信しています。文字列に含まれるデータは：

サーボの値 + コンマ + LEDの値 + 改行コード

であり、たとえば

"155,1\n"

のような連続した文字列になります。サーボの値は0~255の数値、LEDの値は0か1になり、その間をコンマで区切り（デリミタ）、最後の部分に「\n」改行コードを付け加えて送信します。文字「\n」は、アスキーコード表で十進数の「10」に相当します。受信の際には、readStringUntil(10)を使うことで、改行コード「\n」つまり「10」までをひとまとまりのデータとして読み込み、その文字列データをtrim()で改行コードを取り除き、split()でコンマをもとに配列に分解し、int()で文字列の数値を整数化し、それぞれの値に代入します（文字列を分解して数値化する方法は「Arduino-Processing　シリアル通信５」でも説明してあります）。
サーバのプログラムが開始したら、「s」キーを押してArduinoとのシリアル通信を開始します。

Processing サーバのプログラム：


//ネットワークライブラリの取り込み
import processing.net.*;
//シリアル通信ライブラリの取り込み
import processing.serial.*;

//サーバのインスタンス
Server server;
//クライアントのインスタンス
Client client;
//シリアル通信のインスタンス
Serial port;

//サーボの変数
int servoVal;
//LEDの変数
int ledVal;
//ドラッグ中かどうかのフラグ
boolean startDrag=false;

void setup(){
  //画面サイズ
  size(256,200);
  //フレームレートを遅めに設定
  frameRate(10);
  //サーバの設定（ポート：12345）
  server = new Server(this, 12345);
  //シリアルポート設定
  port=new Serial(this,"/dev/tty.usbserial-A4001Kjl",9600);
  //矩形描画を中央配置に設定
  rectMode(CENTER);
  //外形線なし
  noStroke();
}

void draw() {
  //クライアントからのデータ受信
  client = server.available();
  //クライアント受信内容が空ではないとき
  if (client != null) {
    //文字列データの読み込み（改行コードまで）
    String input=client.readStringUntil(10);
    //文字列データの改行コードを取り除く
    input=trim(input);
    //文字列データを整数の配列に変換
    int[] data = int(split(input, ','));
    //配列の最初の値をサーボ変数に代入
    servoVal=data[0];
    //配列の次の値をLED変数に代入
    ledVal=data[1];    
  }
  
  //ドラッグ中
  if(startDrag){
    //サーボ変数にマウスX座標値を代入（最小値:0、最大値:255）
    servoVal=constrain(mouseX,0,255);
    //クライアント側へ送信（サーボの値、コンマ、LEDの値、改行コード）
    server.write(servoVal+","+ledVal+"\n");
  }
  
  background(0);//背景（黒）

  fill(80);//スライダ溝の塗色（グレー:80）
  rect(width/2,50,width,50);//スライダ溝の矩形描画
  fill(255);//スライダの塗色（白）
  rect(servoVal,50,10,50);//スライダの矩形描画

  //LEDボタンの色切替（0:オフ,1:オン）
  if(ledVal==1){  //オンの場合
    fill(0,255,0);//緑にする
  }else{          //オフの場合
    fill(255);    //白にする
  }
  //LED用のボタン描画
  rect(width/2,150,50,50);
}

//シリアル通信処理
void serialEvent(Serial p){
  //合図用データが１個来た場合（０個より多い場合）
  if(port.available()>0){
    //合図用データを読込んバッファを空にする
    port.read();
    //サーボの値とLEDの値をシリアル通信で出力
    port.write(servoVal);
    port.write(ledVal);
  }
}

//キーを押した場合
void keyPressed(){
  //「s」キーの場合
  if(key=='s'){
    //シリアル通信開始用データ送信
    port.write(servoVal);
    port.write(ledVal);
  }
}

//マウスボタンを押した場合
void mousePressed(){
  //LED用のボタン矩形内にマウスがある場合
  if(mouseX>width/2-25 && mouseX<width/2+25 && mouseY>125 && mouseY<175){
    //LED点灯切替処理
    if(ledVal==0){//オフの場合
      ledVal=1;   //オンにする
    }else{        //オンの場合
      ledVal=0;   //オフにする
    }
    //クライアント側へ送信（サーボの値、コンマ、LEDの値、改行コード）
    server.write(servoVal+","+ledVal+"\n");
  }
  //スライダ部分の場合
  if(mouseY>25 && mouseY<75){
    //ドラッグのフラグをtrueにする
    startDrag=true;
  }
}

//マウスを放した場合
void mouseReleased(){
  //ドラッグのフラグをfalseにする
  startDrag=false;
}

「Processing クライアント側のプログラム」：


//ネットワークライブラリを取り込む
import processing.net.*;
//クライアントのインスタンス
Client client;

//サーボ用変数を用意
int servoVal=127;
//LED用変数を用意
int ledVal=0;
//ドラッグ中かどうかのフラグ
boolean startDrag;

void setup() {
  size(256, 200);
  frameRate(10);
  //サーバのIPアドレス、ポートの設定
  //（「10.0.1.2」の部分は適宜変更）
  client = new Client(this, "10.0.1.2", 12345);
  rectMode(CENTER);
  noStroke();
}

void draw(){
  //サーバからのデータ受信
  if (client.available() > 0) {
    String input = client.readStringUntil(10);
    input = trim(input);
    int[] data = int(split(input, ','));
    print(data);
    servoVal=data[0];
    ledVal=data[1];
  }

  //ドラッグ中の処理
  if(startDrag){
    servoVal=constrain(mouseX,0,255);
    client.write(servoVal + "," +ledVal + "\n");
  }

  //描画処理
  background(0);
  fill(20);
  rect(width/2,50,width,50);
  fill(255);
  rect(servoVal,50,10,50);
  if(ledVal==1){
    fill(0,255,0);
  }else{
    fill(255);
  }
  rect(width/2,150,50,50);
}


void mousePressed(){
  if(mouseX>width/2-25 && mouseX<width/2+25 && mouseY>125 && mouseY<175){
    if(ledVal==0){
      ledVal=1;
    }else{
      ledVal=0;
    }
    //サーバへ送信（サーボの値、コンマ、LEDの値、改行コード）
    client.write(servoVal + "," +ledVal + "\n");
  }

  if(mouseY>25 && mouseY<75){
    startDrag=true;
  }
}

void mouseReleased(){
  startDrag=false;
}

クライアント側のプログラムでは、setup(){...}内でサーバのIPアドレスを指定する必要があります。上のプログラムでは「10.0.1.2」になっていますが、適宜変更してください。通常ローカルネットワークであれば「127.0.1.2」や「192.168.1.2」、あるいはルーターやAirMacなどを使っていれば、「10.0.1.2」などになっているかもしれません。サーバに設定したコンピュータのIPアドレスを調べるには、MacOSXであれば、「システム環境設定>ネットワーク」を開き、AirMacを使用している場合は「AirMac」を選択、ケーブル接続している場合は「内蔵Ethernet」を選択し、「TCP/IP」タグを選択すると２段目あたりに「IPアドレス：10.0.1.2」などと表示されています。Windowsの場合は、コマンドプロンプトを開いて、「ipconfig」と打ってリターンすれば、幾つかの情報が現れ「IP Address....10.0.1.2」などと表示されるはずです。

「外部からの接続方法」：
ルータを通してインターネットに接続している場合、ローカルネットワーク外から通信するには、ルータのポートマッピングやサーバコンピュータのファイヤーウォールの解除設定する必要がでてきます。
通常、インターネットプロバイダからグローバルIPアドレスがひとつ与えられています。各自のパソコンからグローバルIPアドレスを調べるには以下のようなサイトで調べることができます。
http://dog.tele.jp/lookup.php
「あなたのパソコンのグローバルIPアドレスは」と書かれている場所に表示されるはずです。
あるいは、
http://www.ugtop.com/spill.shtml
のサイトの「現在接続している場所（現ＩＰ）」の欄に同じアドレスが表示されるはずです。
このグローバルIPアドレスをメモしておきます。

「接続例」：
以下は、ローカルネットワーク内のひとつのコンピュータをサーバに設定し、ローカルネットワーク外から通信をするための接続例です。例えば、仕事場や学校のコンピュータから、自宅にあるサーバに設定したコンピュータにアクセスする方法です。

上画像では、ADSLモデム-ルータを使用してインターネットに接続しており、さらにそのADSLモデム-ルータにAirMacをケーブルで接続しています。そして複数あるコンピュータは、AirMacの無線通信でインターネットに接続しています。
このネットワークのグローバルIPアドレスは、先ほど調べた方法により「219.196.xxx.xxx」になっています（実際のアドレスに置き換えてください）。「モデム-ルータ」によって、グローバルIPアドレスがプライベートIPアドレスに変換され、複数のプライベートIPアドレスに分けられます（「192.168.xxx.xxx」のようなアドレス）。さらに、AirMacにおいてもルータ機能があるため、さらに細かなプライベートIPアドレスに分けられます（「10.0.1.xxx」のようなアドレス）。
ここでは、二つのルータによって二段階にIPアドレスが割り振られていますが、AirMacを「ブリッジモード」に切り替えることで、以下のようにAirMacのルータ機能を使わないネットワークに変更することができます。

「ブリッジモード」：
「ブリッジモード」は、コンピュータから「AirMacユーティリティ」を開いて変更することができます（ただし、変更できる権限が必要です）。「ブリッジモード」にすることで、AirMacはIPアドレス（「10.0.1.xxx」のようなアドレス）を割り振らなくなるので、元々の「モデム-ルータ」が割り振るアドレスを使うことにします（「192.168.xxx.xxx」のようなアドレス）。ただし、このままだと「モデム-ルータ」が自動的にプライベートIPアドレスをそれぞれのコンピュータに割り振ってしまうので、使用しないコンピュータなどがあるときは、プライベートIPアドレスが入れ替わってしまうことがあります。
そのため、サーバにしたいコンピュータには固定したIPアドレスを与えます。以下のように「コンピュータC」に固定のIPアドレス「192.168.3.10」を与えて、サーバとして機能させることにします。

「固定IPアドレスにする」：
各コンピュータ上のIPアドレス設定では、「DHCPサーバを参照」や「DHCPサーバを使用」というように、ルータから自動的にIPアドレスが割り振られる設定になっていることが多いと思います。MacOSXの場合、「システム環境設定>ネットワーク」へ行き、AirMac（あるいはEthernet：現在インターネットに接続している方法を選択）を選択し、「TCP/IP」の項目内で設定できます。サーバ用に使うコンピュータにおいては、このIPアドレス設定の部分を、「手入力」に変更し、指定したIPアドレスを使うように設定し直します。
Windows XPの場合は、「コントロールパネル>ネットワーク接続」で、使用しているネットワーク接続（「ワイヤレスネットワーク接続」など）のプロパティを右クリックで開き、「インターネットプロトコル（TCP/IP）」を選択しプロパティボタンを押し、「IPアドレスを自動的に取得する」に設定されている部分を「次のIPアドレスを使う」に切り替えて、以下の設定を入力していきます。

上図の場合は、ルータのIPアドレスが「192.168.3.1」になり、AirMacが「192.168.3.2」、以下に続く各コンピュータは「192.168.3.3」、「192.168.3.4」というように最後の数値がひとつずつ増えていきます。IPアドレスが重ならないように、固定するIPアドレスを「192.168.3.10」に設定しておきます（1~254まで可）。サブネットマスクは自動的に「255.255.255.0」になるはずです。ルータのIPアドレス（ゲートウェイ）は、「DHCPサーバを参照」の時と同じなので「192.168.3.1」を記入します。「DNS」あるいは「DNSサーバ」の項目については、先ほど調べたグローバルIPアドレスである「219.196.xxx.xxx」を記入します（グローバルIPアドレスは、実際に調べたアドレスを入れてください）。サーバ用のコンピュータの設定は以上です。

「ポートマッピング設定」：
もうひとつしなければならないことは、ポートマッピング（ポート転送／ポートフォワーディング）の設定です。回線に接続しているルータ自体の設定を変更する必要があります。通常コンピュータ上のブラウザからルータのアドレスにアクセスし操作するようになっています（各ルータのマニュアルを参照してください）。大抵の場合は、「詳細設定」のような項目に入っていると思います。
プロトコル、ポート、転送先のIPアドレス（先ほど固定したサーバ用のIPアドレス）を入力する必要があります。プロトコルは「TCP/UDP」を選択し、WAN側とLAN側のポートは同じものを入れておきますが、今回の場合Processingのコードでポートを「12345」に設定しておいたので、それを入力することにします（「12345」〜「12346」までというように範囲指定する入力にしておきます）。転送先IPアドレスは、固定した「192.168.3.10」を入力しておきます。ポートマッピングの設定は以上です。尚、ポートは、0~65535までの番号が入れられますが、0~1023までは使用目的が決められているので、あまりつかわない方がいいと思います。

ポートマッピングによって、ポート「12345」（あるいは「12346」）を通してローカルネットワーク外からグローバルIPアドレス「219.196.xxx.xxx」に送られた信号は、サーバ用コンピュータのプライベートIPアドレス「192.168.3.10」に転送されることになります。

Processingのクライアント用のプログラム内の、


client = new Client(this, "219.196.xxx.xxx", 12345);

IPアドレス部分をグローバルIPアドレス「219.196.xxx.xxx」（実際に調べたアドレスを入れてください）に書き換えればローカルネットワーク外から通信できるようになります。

参照：YahooBBのモデムのポート転送設定方法

「外部から通信できない場合」：
ファイヤーウォールによって、外部からの通信をブロックしている場合があるので、ファイヤーウォール設定を解除して通信してみてください。ただし、セキュリティ上危険になるので注意してください。

尚、同じローカルネットワーク内にある別のコンピュータからは通信できないので（例えば上図の「コンピュータA」とサーバの「コンピュータC」との通信はできない）、異なるグローバルIPアドレス（外部）から通信してください。「コンピュータA」と「コンピュータC」を通信させる場合は、前半で説明したローカルネットワーク内での通信方法を利用してください。