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

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

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

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

Q&A

1回答

2267閲覧

javascriptの実装方法

mnr-dx

総合スコア13

JavaScript

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

0グッド

0クリップ

投稿2018/10/28 02:42

編集2022/01/12 10:55

前提・実現したいこと

ESP8266と照度センサーを使用してmilkcocoaにデータを送信し、
その内容をブラウザ(スマホ)からグラフィカルに参照できる
仕組みをIoTの入門として作成しています。
まずは開発に使用しているPCのブラウザから参照、
その後、自分のスマホで外出先からも参照するところまで出来ればと考えています。

「IoTを使ってトイレを監視! 電子工作でトイレが使用中かチェックする仕組みを作ってみた」
のサイト(https://ics.media/entry/10746)を参照しています。

発生している問題・エラーメッセージ

PCおよびスマホから参照するアプリの具体的な構築方法をご教授いただけると幸いです。

若干のプログラム経験はあるため
ESP8266と照度センサーを使用してmilkcocoaにデータを送信し、その内容をmilkcocoaの
データストア上で確認するところまでは出来ました。

しかし、HTML、javascript等の知識が非常に乏しいため、
照度センサーの値に応じて一定値以上であれば「使用中」一定値未満であれば「空室」と
WEBブラウザやスマホから参照して表示する部分の実装の仕方が解りません。

ある程度知識を付けて出直すべきかもしれませんが、なにをどう調べていいかも
解らず途方に暮れています。

上記サイトから
index.html --------------- 操作用HTML
js --------------------- JavaScriptフォルダ
index.js
jquery-2.2.0.min.js
css -------------------- cssフォルダ
index.css
normalize.css
images ----------------- 画像フォルダ
occupied.png ---------「使用中」画像
vacant.png -----------「空室」画像 
をダウンロードして、
index.html 内の

<script src="//cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script> を <script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script> に書き換え、

index.js 内の
// var milkcocoa = new MilkCocoa('アプリIDを入力してください.mlkcca.com'); を
var milkcocoa = new MilkCocoa('実際のアプリIDに書き換え済.mlkcca.com'); に書き換えました。

その後、以下を実行(おそらく見当違いな操作ではないかと)しましたが、
ブラウザにグレーの画面が表示されるだけです。

  1. windows10 pro の IIS を有効に設定
  2. C:\Arduino\Run\htmlフォルダに上記のフォルダ構成で配置
  3. webブラウザ(chrome)のURL欄からC:\Arduino\Run\html\index.htmlを入力してEnter
ブラウザにグレーの画面が表示される

該当のソースコード

index.html

1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="robots" content="noindex"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Arduino & ESP-8266 & Light Sensor DEMO</title> 9 <link rel="stylesheet" href="css/normalize.css" /> 10 <link rel="stylesheet" href="css/index.css" /> 11 <script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script> 12 <script src="js/jquery-2.2.0.min.js"></script> 13 <script src="js/index.js"></script> 14</head> 15<body> 16<div id="wrapper"> 17 <div id="occupied"> 18 <img src="images/occupied.png" width="320" height="380" alt="" /> 19 </div> 20 21 <div id="vacant"> 22 <img src="images/vacant.png" width="320" height="380" alt="" /> 23 </div> 24</div> 25</body> 26</html>

index.js

1(function() { 2 // var milkcocoa = new MilkCocoa('アプリIDを入力してください.mlkcca.com'); 3 var milkcocoa = new MilkCocoa('実際のアプリIDに書き換え済.mlkcca.com'); 4 5 // センサーの閾値 6 // 設置する場所の明るさに合わせて0~1023の間の値を設定してください 7 var threshold = 700; 8 9 // 明るいかどうか 10 var isLight; 11 12 // 使用中 13 var occupied; 14 15 // 空室 16 var vacant; 17 18 $(function() { 19 occupied = $("#occupied"); 20 vacant = $("#vacant"); 21 22 // DataStore 23 var dataStore = milkcocoa.dataStore('esp8266/tout'); 24 25 isLight = false; 26 27 // ArduinoからMilkcocoaに値がSendされたら 28 dataStore.on("send", function(datum) { 29 lightCheck(datum.value.light); 30 }); 31 }); 32 33 /** 34 * 明るさを確認する 35 * @param value 0 〜 1023 36 */ 37 function lightCheck(value) { 38 console.log("Sensor Value = " + value); 39 if(value >= threshold) { 40 // 明るくなった 41 if(!isLight) lightOn(); 42 } 43 else { 44 // 暗くなった 45 if(isLight) lightOff(); 46 } 47 } 48 49 /** 50 * 明るくなったときに実行されます 51 */ 52 function lightOn() { 53 console.log("明るくなった"); 54 55 occupied.attr("class", "show"); 56 vacant.attr("class", ""); 57 58 isLight = true; 59 } 60 61 /** 62 * 暗くなったときに実行されます 63 */ 64 65### 試したこと 66 67■単純なhtmlの実行 68index.htmlの内容を"aaa"のみにしたものに置き換えた場合、ブラウザに"aaa"と表示される 69 70■IISでの物理パスの変更 71IISマネージャー で [Default Web Site]の[物理パス]を 72%SystemDrive%\inetpub\wwwroot から 73C:\Arduino\Run\html に変更してlocalhostにアクセスしましたが、見た目に変化なし 74 75■実行時のデベロッパーツールにおける警告およびエラーの確認 76警告① 77milkcocoa.js:2 The provided value 'ms-stream' is not a valid enum value of type XMLHttpRequestResponseType. 78t @ milkcocoa.js:2 79 80警告② 81milkcocoa.js:2 The provided value 'moz-chunked-arraybuffer' is not a valid enum value of type XMLHttpRequestResponseType. 82t @ milkcocoa.js:2 83 84エラー① 85/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found) 86 87 88### 補足情報(FW/ツールのバージョンなど) 89 90開発OS windows10 pro 91arduino IDE ver 1.8.7

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

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

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

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

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

guest

回答1

0

IIS で Web サーバーを立ち上げているのに、C:... でアクセスしたらファイルプロトコルでの通信になり、セキュリティ制約がかかって色々と読み込み失敗して動かないと思います。

Web サーバーのドキュメントルートを C:\Arduino\Run\html\ に設定した上で http://localhost にアクセスしましょう。

投稿2018/10/28 07:08

yhg

総合スコア2161

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

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

mnr-dx

2018/10/28 08:42 編集

早速のご回答、まことに有難うございます。 教えていただいたとおりにやってみましたが、やはりグレーの画面のままでした。 htmlまたはjavascriptの記述の記述に問題ありでしょうか。しかし、一歩前進した気がします。 IISマネージャー で [Default Web Site]の[物理パス]を%SystemDrive%\inetpub\wwwroot から C:\Arduino\Run\html に変更してlocalhostにアクセスしました。 上記の変更で正しいでしょうか?
yhg

2018/10/28 09:04

HTML自体には問題がないように思えます。 画像が表示されてない点から CSS も読み込めていると思いますので、JavaScript ファイルの読み込みに失敗しているか JavaScript の内容に問題があるかのどちらかだと思います。 ファイル読み込み成功してるかどうかは Chrome のデベロッパーツールの Network タブで確認できます。 また読み込み成功している場合は Milkcocoa の通信が発生するので、Network タブに Type が xhr のものが出てくると思います。
mnr-dx

2018/10/28 14:49

デベロッパーツールのNetwork タブには何も表示されず、下部に警告2件、エラー1件が表示されています。 内容は質問の「試したこと」に追記させていただきました。 javascriptの内容に問題があり、milkcocoaと通信できてない気がします。 もう少し確認していきたいと思います。よろしくお願いいたします。
mnr-dx

2018/10/29 13:50

試してみましたが警告、エラーともに変化ありませんでした。 そこでまたmilkcocoa.js v0.6.0に戻したところ、警告2件はそのままですが エラー1件が出なくなりました。 画面は相変わらずグレー一色のままです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問