質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

C++

C++はC言語をもとにしてつくられた最もよく使われるマルチパラダイムプログラミング言語の1つです。オブジェクト指向、ジェネリック、命令型など広く対応しており、多目的に使用されています。

Arduino

Arduinoは、AVRマイコン、単純なI/O(入出力)ポートを備えた基板、C言語を元としたArduinoのプログラム言語と、それを実装した統合開発環境から構成されたシステムです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

4844閲覧

arduino SDカードに登録したhtmlファイルをwebブラウザ上に表示できない件について

beansan

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

C++

C++はC言語をもとにしてつくられた最もよく使われるマルチパラダイムプログラミング言語の1つです。オブジェクト指向、ジェネリック、命令型など広く対応しており、多目的に使用されています。

Arduino

Arduinoは、AVRマイコン、単純なI/O(入出力)ポートを備えた基板、C言語を元としたArduinoのプログラム言語と、それを実装した統合開発環境から構成されたシステムです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/07/22 10:16

編集2017/07/23 04:33

arduinoを用いてwebサーバーを作ろうと考えております。
サンプルプログラム(webserver)は動いたため、自作したHTMLファイルをSDカードに保存し、arduinoとイーサネットシールド2を用いてPCのwebブラウザに表示させようとしています。
しかし、下記コードを記載してもブラウザ上に何も表示がされません。
打開策等ご教授いただけると幸いです。
なお、HTMLファイル、JSSファイル、JavascriptファイルはPC上に保存し、ブラウザで開いた際は正常に動作します。

〇arduinoプログラム

#include <SPI.h> #include <Ethernet2.h> #include <SD.h> // Enter a MAC address and IP address for your controller below. // The IP address will be dependent on your local network: byte mac[] = { 0x90, 0xA2, 0xDA, 0x10, 0xBF, 0x98 }; IPAddress ip(192, 168, 100, 222); // Initialize the Ethernet server library // with the IP address and port you want to use // (port 80 is default for HTTP): EthernetServer server(80); void setup() { // Open serial communications and wait for port to open: Serial.begin(9600); while (!Serial) { ; // wait for serial port to connect. Needed for Leonardo only } // start the Ethernet connection and the server: Ethernet.begin(mac, ip); server.begin(); Serial.print("server is at "); Serial.println(Ethernet.localIP()); } void loop() { // listen for incoming clients 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) { client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); client.println(); File file; file = SD.open("system_terminal.html"); if(file){ while(file.available()){ client.write(file.read()); } file.close(); } client.write(file); break; } if (c == '\n') { currentLineIsBlank = true; } else if (c != '\r') { currentLineIsBlank = false; } } } delay(1); client.stop(); Serial.println("client disconnected"); } }

〇シリアルモニタ出力

server is at 192.168.100.222 new client GET / HTTP/1.1 Host: 192.168.100.222 Connection: keep-alive Cache-Control: max-age=0 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate Accept-Language: ja,en-US;q=0.8,en;q=0.6 client disconnected new client GET /favicon.ico HTTP/1.1 Host: 192.168.100.222 Connection: keep-alive Pragma: no-cache Cache-Control: no-cache User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Accept: image/webp,image/apng,image/*,*/*;q=0.8 Referer: http://192.168.100.222/ Accept-Encoding: gzip, deflate Accept-Language: ja,en-US;q=0.8,en;q=0.6 client disconnected

SDカード内ファイル構造
system_terminal.html
program-can.js

-point.css
〇system_terminal.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="GENERATOR" content="HomuPage Writer Ver1.20"> <title>西城駅 連動画面</title> <script src="program/can.js" type="text/javascript" charset="UTF-8"></script> <LINK REL="stylesheet" HREF="program/point.css" TYPE="text/css"> </head> <body> <h2></h2> <canvas id="terminal"width="1900" height="900"></canvas> <br/> <script> var M10='N'; var M11='N'; var sinro_setting=[0,0,0,0]; rendo_gamen(sinro_setting); document.addEventListener('click', dosa); function dosa(pix){ dosa_10M(pix); dosa_11M(pix); dosa_1RA(pix); } </script> </body> </html>

〇JavaScriptファイルとCSSファイルは文字数制限に引っかかったため省略します。(必要でしたら別質問にて提示します。)

→原因追及結果
シリアルモニタを用いて原因追及を行っています。

#include <SPI.h> #include <Ethernet2.h> #include <SD.h> char *FILENAME="system_terminal.html"; // Enter a MAC address and IP address for your controller below. // The IP address will be dependent on your local network: byte mac[] = { 0x90, 0xA2, 0xDA, 0x10, 0xBF, 0x98 }; IPAddress ip(192, 168, 100, 222); // Initialize the Ethernet server library // with the IP address and port you want to use // (port 80 is default for HTTP): EthernetServer server(80); void setup() { // Open serial communications and wait for port to open: Serial.begin(9600); while (!Serial) { ; // wait for serial port to connect. Needed for Leonardo only } // start the Ethernet connection and the server: Ethernet.begin(mac, ip); server.begin(); Serial.print("server is at "); Serial.println(Ethernet.localIP()); } void loop() { // listen for incoming clients EthernetClient client = server.available(); if (client) { Serial.println("new client"); boolean currentLineIsBlank = true; while (client.connected()) { if (client.available()) { char c = client.read(); //Serial.println('111'); Serial.write(c); //Serial.println('222'); if (c == '\n' && currentLineIsBlank) { //Serial.println('333'); client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); client.println(); Serial.print('4'); File file; file = SD.open(FILENAME,FILE_READ); Serial.print('5'); if(file){ while(file.available()){ Serial.print(file.position()); Serial.print('6'); char buff=file.read(); Serial.print(buff); client.write(buff); } }else{ Serial.println("Error!!"); } file.close(); //client.write(file); //break; } if (c == '\n') { currentLineIsBlank = true; } else if (c != '\r') { currentLineIsBlank = false; } } } delay(1); client.stop(); Serial.println("client disconnected"); } }
server is at 192.168.100.222 new client GET / HTTP/1.1 Host: 192.168.100.222 Connection: keep-alive Cache-Control: max-age=0 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate Accept-Language: ja,en-US;q=0.8,en;q=0.6 45Error!!

SDカード内のファイルを開封できていない可能性があります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

自己解決

自己解決しました。
下記コードにて動きました。

#include <SPI.h> #include <Ethernet2.h> #include <SD.h> char *FILENAME="index.htm"; byte mac[] = { 0x90, 0xA2, 0xDA, 0x10, 0xBF, 0x98 }; IPAddress ip(192, 168, 100, 222); EthernetServer server(80); void setup() { Serial.begin(9600); while (!Serial) { ; } Ethernet.begin(mac, ip); server.begin(); Serial.print("server is at "); Serial.println(Ethernet.localIP()); if (!SD.begin(4)) { Serial.println("ErrorSD!!"); return; } if (!SD.exists(FILENAME)) { Serial.println("ErrorFILE!!"); return; } Serial.println("Ready"); } void loop() { // listen for incoming clients EthernetClient client = server.available(); if (client) { Serial.println("new client"); boolean currentLineIsBlank = true; while (client.connected()) { if (client.available()) { char c = client.read(); //Serial.println('111'); Serial.write(c); //Serial.println('222'); if (c == '\n' && currentLineIsBlank) { //Serial.println('333'); client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); client.println(); Serial.print('4'); File file; file = SD.open(FILENAME,FILE_READ); Serial.print('5'); if(file){ while(file.available()){ Serial.print(file.position()); Serial.print('6'); char buff=file.read(); Serial.print(buff); client.write(buff); } }else{ Serial.println("ErrorFILEREAD!!"); } file.close(); //client.write(file); //break; } if (c == '\n') { currentLineIsBlank = true; } else if (c != '\r') { currentLineIsBlank = false; } } } delay(1); client.stop(); Serial.println("client disconnected"); } }

また、SD直下のファイルを.htmlから.htmへ変更しました。(どうやらhtmlを認識してくれないようで。)
またhtmファイルはcss及びjsファイルをすべてhtmファイルへ統合しました。(おかげで重いですが。)
同様に動かない方の助けになれば幸いです。

投稿2017/07/23 06:33

編集2017/07/23 23:36
beansan

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ElecDove

2017/07/23 07:12 編集

>どうやらhtmlを認識してくれないようで。 なるほど,と思いましたが,こうではないでしょうか ① もともとの名前が長すぎてArduino(やシールド,ライブラリ)が扱える名前の長さを超えていた可能性 ② 最近は気にすることはないですが,昔はファイル名8文字+拡張子3文字みたいな決まりがありましたので,拡張子3文字以外を受け付けない可能性 もしよろしければ,htmlファイルのファイル名をもっと短く,index.htmlなどとして試してみてください 追記:Fat形式では8.3フォーマットみたいですね
guest

0

SD.open()の前に、SD.begin()が必要です。

常に system_terminal.html の内容をブラウザに返すようですが、
ブラウザからリクエストされたファイルを返さなければならないのではないでしょうか?

投稿2017/07/23 04:14

編集2017/07/23 05:29
mkgt00

総合スコア165

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ArduinoのEthernetClientについては使ったことがないので一般論的な回答になります

まずは原因の切り分けをするべきだと思います
(最も,ソースを軽く読んでわかるようなバグがあればそちらを先に直すべきですが)

①SDカードからHTMLファイル等は読み込めているのか
->client.write(file.read());としている部分を
char buff = file.read();
client.write(buff);
Serial.print(buff);
等とします
シリアルモニタにファイルの内容がそのまま出てくるようであればファイル読み込みには問題がないと推定できます.(日本語は文字化けすると思いますが)

②ブラウザとのコネクションが確立しているか確認します
→簡易的にはブラウザの開発者ツール(たいていはF12キーを押下)で見れます.
ここで,レスポンスヘッダがちゃんと流れてきているかどうか確認してください
レスポンスヘッダがあればコネクションはうまくいっている可能性が高いです.

③ブラウザにHTMLが送信されているかの確認
→htmlにエラーがあったりすると場合によっては何も表示されないことがあります
(最近のブラウザではめったにありませんが)
HTMLファイルを開くと問題がないとのことなのでファイルには問題がないと思いますが,
ほかにどんな要因があるかわからない場合は念のため確認します.
ブラウザでアクセスした後,「ソースの表示」を押します.
(ChromeやFirefox,IEなら右クリックメニューにあったと思います)

投稿2017/07/22 16:22

編集2017/07/22 16:27
ElecDove

総合スコア254

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問