モジュール紹介

Arduinoでウェブサーバーを立ち上げる手順

どうもメガネです。

今回はMACアドレスのないArduinoでウェブサーバーを立ち上げる方法をメモっておこうと思います。

特に難しいこともないんですが、Arduinoで取得した値をブラウザで表示するまでの手順をまとめたものがなかったためまとめとして書いておきます。

また今回使用するArduino用のWifiシールドですが、

正規品ではないのでMACアドレスの記載がありません。

正規品はシールド裏面にシールが貼ってあってそこに記載されているらしいのですが、最初手に入れないと動かないものかと勘違いしており結構焦りました。。

ブラウザにアナログピンからの入力値を出力するまでの一連の手順を細かくまとめてみました。

今回使用するWifiシールド

今回使用するArduino用Wifiシールドは以下のものになります。

https://amzn.to/3kMgZ9z

型名は「keyestudio W5100 Ethernet Shield ks1056」になります。

本家より色合いかっこいいなと、個人的には思います。

正直本家の緑色よりこっちのビビットな黄色と黒のカラーリングの方が好みです。

蜂みたいな色使いです。

見た目

以下のような見た目です。

ちょっと公式の箱っぽいですね。

まぁ、シールドなのでArduino Unoとサイズは変わらない、といった感じです。

若干水晶発振子が曲がって取り付けられているなど見た目の問題はあるかもしれませんが、特に気になるほどではありません。

今回かったkeyestudio製のWifiシールドは、箱裏面に公式の説明サイトのリンクも掲載されています。

前部英語ですが、非正規品のメーカーとしてはかなり丁寧な対応だなぁ、と感じます。

https://wiki.keyestudio.com/index.php/Ks0156_keyestudio_W5100_Ethernet_Shield

スペック等

公式にあるスペックも一応まとめておきます。

項目スペック
デジタル入力 / 出力対応
アナログ入力 / 出力対応
microSDカード対応
リセットボタンあり
オンボードLEDあり
ネットワーク接続があるか示す確認LED
（パソコンの後ろで光ってるやつです。）		あり
TCP / IPプロトコル対応
サイズ－長辺
サイズ－短辺
サイズ－高さ		73[mm]
54[mm]
29[mm]

ボードの対応はArduino UNOとArduino MEGAの二つと記載があります。

keyestudioの公式サイトからの画像をお借りします。ここまで見ることはないと思いますが、ボード上の部品の対応は以下のようになっています。

ネットワークの状態を示すライトは以下のように設定されています。

項目内容
LD13 LED （HIGHで点灯、LOWで消灯）
PWR電源確認
リンクネットワークが接続され、データを送受信すると点滅
100Mネットワーク接続は100M/s
FULLDネットワーク接続は全2重通信
COLLネットワークが競合を検出すると点滅
RXネットワークがデータを受信すると点滅
TXネットワークがデータを送信すると点滅

実際に使った際は以下のように点灯します。

あまり確認することはないかと思いますが、視認はしやすいです。

シールドを使用してブラウザに値を表示させる（一連の手順）

コードを書き込む

Arduinoエディタを開き、以下のコードを書き込みます。

以下のコードは箱裏に記載されたQRコードで飛べるサイトに記載されています。

使用するライブラリは「<SPI.h>」「<Ethernet.h>」です。

#include <SPI.h>
#include <Ethernet.h>
//以下に自分で設定したMACアドレスを入力します。
//IPアドレスはローカルネットワークによって異なります。

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,129);  //自分のIPアドレスを入力する。

EthernetServer server(80);
void setup() {
Serial.begin(9600);
while (!Serial) {
; //シリアルポートの接続を待機する。Arduino Leonardoのみ必要な処理のようです。
}
//イーサネット接続とサーバー接続を開始。

Ethernet.begin(mac, ip);
server.begin();
Serial.print("server is at ");Serial.println(Ethernet.localIP());
}

void loop() {
EthernetClient client = server.available();
if (client) {
Serial.println("new client");

boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);

if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion
//of the response
client.println("Refresh: 5"); // refresh the page automatically every 5 sec
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html>");
// output the value of each analog input pin
for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
int sensorReading = analogRead(analogChannel);
client.print("analog input ");
client.print(analogChannel);
client.print(" is ");
client.print(sensorReading);
client.println("<br />");
}
client.println("</html>");
break;
}
if (c == '\n') {
// you're starting a new line
currentLineIsBlank = true;
}
else if (c != '\r') {
// you've gotten a character on the current line
currentLineIsBlank = false;
}
}
}
// give the web browser time to receive the data
delay(1);
// close the connection:
client.stop();
Serial.println("client disonnected");
}
}

コードは以上です。

次にブラウザを使用するために、IPアドレスとMACアドレスの設定を行っていきます。

IPアドレスを取得する

自分の使っているパソコンのIPアドレスは以下の方法で知ることができます。

１．「Windows + R」を同時に押す。

２．以下のようなウィンドウが開くので、入力欄に「cmd」と入力。

３．以下のようなコマンドプロンプトウィンドウが表示されるので、「ipconfig」と入力し
　　Enterキーを押す。

４．ネットワーク関係の各項目が表示されるので、
　　「IPv4 Address. . . . . 」という項目の数字を読み取る。

例：IPv4 Adress . . . . . . . 192.168.0.129

IPアドレスの最後の３文字を変更してコードに書き込む

ここで読み取ったIPアドレスを、先ほどのコード上部に入力します。

その後、
「.」で区切られた最後の３文字（今回なら129）を適当な数字に変えます。

適当に決める数字は０～２５５の範囲であれば何でもいいようです。

これをやり忘れると動かないので注意してください。

今回は適当に177で設定しました。

なおパソコンに表示されるIPアドレスは「ドット区切り：“.”」ですが、

Arduinoに書き込むときは、「カンマ区切り：“,”」なので注意してください。

//以下に自分で設定したMACアドレスを入力します。
//IPアドレスはローカルネットワークによって異なります。

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,0,177);//自分のIPアドレスを変更したうえで入力する。　←←ココだよぉ！！

IPアドレスの設定の範囲についてですが、

この範囲の理由はIPアドレスの仕様によるものらしく、日経XTECHのサイトで解説されていました。

https://xtech.nikkei.com/atcl/nxt/column/18/00780/052700002/#:~:text=%E3%80%8CIPv4%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%80%8D%E3%81%8B%E3%82%89%E5%A7%8B%E3%81%BE%E3%82%8B%E8%A1%8C,%E3%81%A8%E6%B1%BA%E3%81%BE%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%82%89%E3%81%A0%E3%80%82

IPアドレス設定は以上です。

・自分の環境のIPアドレスをコピーしてコンマ区切りでコードに書き込む。
・その後IPアドレスの最後の３文字を適当な数字に変更する。

MACアドレスを「設定」する

次にMACアドレスを決めていきます。

正規品だとMACアドレスがシールド裏面に記載してあるらしく、すでに決まっているらしいのですが、

互換品やその他非正規品のWifiシールドはMACアドレスの記載がないことが多いようです。

これを知らなくて必死に調べる方法を検索してましたね、、、、

なので自分適当に決めて設定する必要があります。

今回公式が出しているコードに記載された以下のMACアドレスをそのまま使用してみましたが、
問題なく動作しました。

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

ただこのままだとこのシールド使っているひと全員このアドレスなのか、、、
と思ったので、以下のように「0x」以下のDE、、、などを変更してみました。

byte mac[] = {0x02, 0x00, 0x00, 0x00, 0x00, 0x00 };

ちなみに決め方の基準なのですが、知恵袋の過去の質問に以下のようなものを見つけました。

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10154388995

ネットワーク関係は詳しくないので内容はよくわからなかったのですが、手順だけ抜き取ってまとめてみると、

  • 02で始まるMACアドレスは自由に設定できる
  • そのほかは下位の桁を変更して自由に決められる
  • 既存機器とのアドレスと重複しないように注意する

ということらしいです。

あんまりないかとは思いますが、ArduinoとWifiシールドで作成したウェブサーバーを家の中に10個くらい置きたい人は、下位の桁から00～10、、みたいに変更すればよい、ということですね。

MACアドレスの設定方法は以上です。

・02で始まるMACアドレスは自由に決められる。
・ほかの機器とかぶらないMACアドレスを自分で書き込む。

ルーターとWifiシールドを接続する

次にArduino用Wifiシールドとルーターを接続します。

以下のようにルーターのポートとシールドポートをケーブルで接続します。

Arduino本体もケーブルでパソコンと接続します。

接続はこれで完了です。

以下のように確認LEDが点灯していれば問題ないと思います。

ブラウザの設定をする

次ににブラウザの設定を行っていきます。

Arduinoで取得した値をブラウザに表示させるにはブラウザのウィンドウにIPアドレスを入力する必要があります。

１．ブラウザの新しいウィンドウを開きます。

２．上記のURL入力欄に、設定したIPアドレスを入力します。

入力の仕方としては、今回の例だと以下のようになります。

http://192.168.0.177/

設定したアドレスを「コンマ区切り：“,”」で入力します。

上記ではIPアドレスを、「http://」と「/」で囲んでいますが、なくても大丈夫なようです。

問題がある場合にはやってみるといいかもしれません。

動作確認

次に動作確認をしてみます。

以上までの流れで

  • コードの書き込み
  • IP/MACアドレスの設定
  • ブラウザの設定

が終わりました。

ブラウザに以下のように値が表示されていることを確認してみましょう。

おそらく5秒おきくらいに値が更新されるはずです。

現在アナログ入力ピンには何もつないでいませんが、

開放状態だと空間で適当に決まった電位が勝手に表示されるので確認は回路なしでもできます。

これでArduinoをWifiシールドを使用してブラウザに値を表示し、ウェブサーバーとして動作させるまでの手順は以上になります。

公式の表示部分のプログラムを変えれば温度や湿度などを表示させることも簡単にできると思います。

その他－コメント等

一応動作時の熱がそこそこあったため載せておきます。

測ってみたところ中心のICは60°程度になるので、取付の際は穴をあけたりファンを付けたりした方が無難かもしれません。

半導体的には壊れる温度ではありませんが、一日中箱の中で動作させたりする場合は少し危ないかもしれません。

まとめ

以上、MACアドレスのないArduino用のWifiシールドを使用してウェブサーバーとして動作させる方法についてまとめてみました。

目標はただ単に取得した値をブラウザに表示させるだけなんですが、IPアドレスやMACアドレスの決め方など結構わからないことが多かったので、少しでも参考になれれば幸いです。

純正以外のシールドを利用する人は参考にしてみてください。

またシールドとルーター間の通信速度がGbpsクラスだと動作しない、ということもあるようですが、今回使用したkeyestudio製のものは特に問題ありませんでした。

https://amzn.to/3AQy9bD

価格帯としてはかなり安い部類でしたが、特に品質等で問題になるところはありませんでした。

最安価格帯の商品については後日リンクを掲載しようと思います。

それでは。

モノづくり系カテゴリトップへもどる

-モジュール紹介
-, ,