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

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

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

C言語は、1972年にAT&Tベル研究所の、デニス・リッチーが主体となって作成したプログラミング言語です。 B言語の後継言語として開発されたことからC言語と命名。そのため、表記法などはB言語やALGOLに近いとされています。 Cの拡張版であるC++言語とともに、現在世界中でもっとも普及されているプログラミング言語です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Arduino

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2347閲覧

Arduino M0 Pro, ESP-WROOM-02, MILKCOCOAの接続完了→ データのブラウザ表示

bobby2128

総合スコア42

C

C言語は、1972年にAT&Tベル研究所の、デニス・リッチーが主体となって作成したプログラミング言語です。 B言語の後継言語として開発されたことからC言語と命名。そのため、表記法などはB言語やALGOLに近いとされています。 Cの拡張版であるC++言語とともに、現在世界中でもっとも普及されているプログラミング言語です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Arduino

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/01/30 00:23

###前提・実現したいこと
「センサーでなんでもできるおもしろまじめ電子工作」という本の、
サンプルプログラムを用いて、Arduino M0 Pro, ESP-WROOM-02, MILKCOCOAを接続し、そのデータに応じた変化をブラウザに表示させるプログラムの実施を試みました。(サンプルコードは以下のURLの8.1です。以下のソースコード欄にも示しています。)
http://www.shuwasystem.co.jp/products/7980html/4660.html)

タイトル通り、Arduino M0 ProとESP-WROOM-02とMILKCOCOAの接続が完了したことを確認したのですが、そのデータをブラウザでどのように確認すればいいのかわかりません。
サンプルプログラムのフォルダ中(8.1のサンプル)にある、index.htmlをgoogle cromeで開いてみても特に変化がありません。以下に該当するプログラムを示します。

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

Arduino M0 Pro, ESP-WROOM-02, MILKCOCOAの接続完了→ データを反映した情報のブラウザ表示のやり方がわかりません

###該当のソースコード

c

1// ライブラリの読み込み 2#include "ESP8266.h" 3#include "Milkcocoa.h" 4#include "Client_ESP8266.h" 5 6// 転送スピード 7#define SERIAL_SPEED 115200 8 9/************************* WiFi Access Point *********************************/ 10 11// Wi-Fi SSID 12#define WLAN_SSID "bobby bobby" 13// Wi-Fi PASSWORD 14#define WLAN_PASS "555512345" 15 16/************************* Your Milkcocoa Setup *********************************/ 17 18// MilkcocoaのアプリID 19#define MILKCOCOA_APP_ID "uniixstvro4" 20// Data Store名 21#define MILKCOCOA_DATASTORE "toilet" 22 23/************* Milkcocoa Setup (you don't need to change this!) ******************/ 24 25#define MILKCOCOA_SERVERPORT 1883 26 27/************ Global State (you don't need to change this!) ******************/ 28 29// Create an ESP8266Client class to connect to the MQTT server. 30ESP8266Client wifi; 31 32const char MQTT_SERVER[] PROGMEM = MILKCOCOA_APP_ID ".mlkcca.com"; 33const char MQTT_CLIENTID[] PROGMEM = __TIME__ MILKCOCOA_APP_ID; 34 35Milkcocoa milkcocoa = Milkcocoa(&wifi, MQTT_SERVER, MILKCOCOA_SERVERPORT, MILKCOCOA_APP_ID, MQTT_CLIENTID); 36 37// センサーを接続するピン 38const int sensorPin = A0; 39 40// 光センサーの閾値 41const int threshold = 500; 42 43// 現在の明るさを保持 44boolean nowSensorState = false; 45 46// 切り替え前の明るさを保持する 47boolean sensorState = false; 48 49void setup() { 50 // パソコンとのシリアル通信のポートを開ける 51 Serial.begin(SERIAL_SPEED); 52 // Wi-Fiモジュールとのシリアル通信のポートを開ける 53 Serial1.begin(SERIAL_SPEED); 54 55 // Wi-Fi設定 56 setupWiFi(); 57 58 // Milkcocoaへ光センサーの値がpushされた 59 milkcocoa.on(MILKCOCOA_DATASTORE, "push", milkcocoaPushDataHandler); 60} 61 62/* 63 Wi-Fiを設定します 64*/ 65void setupWiFi() { 66 Serial.print("Connecting to "); 67 Serial.println(WLAN_SSID); 68 69 // シリアルポートの指定 70 wifi.begin(Serial1); 71 72 // Wi-Fiへ接続(成功するまで処理を繰り返す) 73 while (!wifi.joinAP(WLAN_SSID, WLAN_PASS)) { 74 delay(500); 75 Serial.print("."); 76 } 77 78 Serial.println("Wi-Fi connected"); 79 Serial.println("IP address: "); 80 // Wi-FiのローカルIPアドレスをシリアルモニターへ表示 81 Serial.println(wifi.getLocalIP().c_str()); 82} 83 84/** 85 * ループ処理 86 */ 87void loop() { 88 // Milkcocoaのループ処理を実行 89 milkcocoa.loop(); 90 91 // センサーの値 92 int sensorValue = analogRead(sensorPin); 93 94 Serial.print("Sensor Value : "); 95 Serial.println(sensorValue); 96 97 // センサーの値と閾値を比較 98 nowSensorState = sensorValue > threshold; 99 100 // 明るさに変化がなければloop()関数の始めに戻る 101 if (sensorState && nowSensorState || !sensorState && !nowSensorState) { 102 return; 103 } 104 105 // Milkcocoaへ送信するデータを作成 106 DataElement elem = DataElement(); 107 // lightというデータ名で値を追加 108 elem.setValue("lightState", nowSensorState); 109 // Milkcocoaへデータを送信 110 milkcocoa.push(MILKCOCOA_DATASTORE, &elem); 111 112 // 1秒処理を止める 113 delay(1000); 114} 115 116/* 117 * Milkcocoaへ光センサーの値がpushされた 118 */ 119void milkcocoaPushDataHandler(DataElement *pelem) { 120 // 明るさの状態を更新 121 sensorState = nowSensorState; 122}

java

1// Milkcocoa App ID 2var MILKCOCOA_APP_ID = "uniixstvro4"; 3 4// Milkcocoa Data Store 5var MILKCOCOA_DATASTORE = "toilet"; 6 7// Milkcocoa 8var milkcocoa = new MilkCocoa(MILKCOCOA_APP_ID + ".mlkcca.com"); 9 10// Milkcocoa Data Store 11var dataStore = milkcocoa.dataStore(MILKCOCOA_DATASTORE); 12 13// 使用中画面 14var occupied = document.getElementById("occupied"); 15 16// 空室画面 17var vacant = document.getElementById("vacant"); 18 19// 過去1件のデータ取得 20dataStore.stream().size(1).next(function (err, data) { 21 // 取得が成功したら 22 if (!err) { 23 var obj = data[0]; 24 25 // 明るさの状態を取得 26 var lightState = obj.value.lightState; 27 // 画面の切り替え 28 changeView(lightState); 29 } 30}); 31 32// ArduinoからMilkcocoaに値がpushされたら 33dataStore.on("push", function (data) { 34 // 明るさの状態を取得 35 var lightState = data.value.lightState; 36 // 画面の切り替え 37 changeView(lightState); 38}); 39 40/** 41 * 画面を切り替えます。 42 */ 43function changeView(lightState) { 44 // 明るくなった 45 if (lightState) { 46 lightOn(); 47 } 48 // 暗くなった 49 else { 50 lightOff(); 51 } 52} 53 54/** 55 * 使用中画面に切り替えます。 56 */ 57function lightOn() { 58 occupied.style.display = "block"; 59 vacant.style.display = "none"; 60} 61 62/** 63 * 空室画面に切り替えます。 64 */ 65function lightOff() { 66 occupied.style.display = "none"; 67 vacant.style.display = "block"; 68}

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 6 <meta name="robots" content="noindex"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 9 <title>Arduino & ESP-WROOM-02 & Milkcocoa & IoT DEMO</title> 10 11 <link rel="stylesheet" href="css/normalize.css" /> 12 <link rel="stylesheet" href="css/index.css" /> 13 14 <script src="//cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script> 15 <script defer src="js/index.js"></script> 16</head> 17<body> 18<div id="wrapper"> 19 <!-- 使用中に表示させる画面 --> 20 <div id="occupied"> 21 <img src="images/occupied.png" width="320" height="380" alt="" /> 22 </div> 23 <!-- 空室中に表示させる画面 --> 24 <div id="vacant"> 25 <img src="images/vacant.png" width="320" height="380" alt="" /> 26 </div> 27</div> 28</body> 29</html>

###試したこと
フォルダ内にある、index.htmlをgoogle chromeで開き、待機した。
有効な手段は特に思い浮かんでいないです。

###補足情報(言語/FW/ツール等のバージョンなど)
Arduino M0 Pro
ESP-WROOM-02 開発ボード(switch science)
milkcocoa
Aruduino IDE 1.8.0

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

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

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

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

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

guest

回答2

0

ベストアンサー

'local host' ではなく 'localhost' とスペースなしで設定してください。

あと、ローカルのウェブサーバーですが、簡単に立てられる
Web Server for Chrome
というものがあります。
これは、フォルダを設定すると、そのフォルダをドキュメントルートとしてローカルウェブサーバーを立てられるものです。

投稿2017/01/30 07:41

turbgraphics200

総合スコア4267

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

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

bobby2128

2017/01/30 08:40

ありがとうございました。無事に表示されました。
guest

0

フォルダ内のファイルを直接開いたのでは動作しないと思います。
こちらに書かれているように、オリジンの設定(ローカルで確認する場合は'localhost')をし、ローカルでウェブサーバーを起動してhttp://localhost/index.htmlといったURLでファイルを開くと動作すると思います。

投稿2017/01/30 00:45

turbgraphics200

総合スコア4267

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

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

bobby2128

2017/01/30 07:35

turbgraphics200様 こんにちはお世話になります。早々のご回答をいただきまして誠にありがとうございます。 許可Originの欄には、「local host」と「127.0.0.1」が記載されている状態です。 ローカルでウェブサーバーを起動する方法がまだわからないので、自信で以下のようなサイトを見つけましたが、このように行う必要があるのでしょうか。容易な手法についてご助言をいただけすと幸甚に存じます。 http://qiita.com/higuma/items/b23ca9d96dac49999ab9 お手数おかけいたしますが、よろしくお願いいたします。
turbgraphics200

2017/01/30 07:41

すいません、リンクを有効にしたいがために回答にて返答します。
bobby2128

2017/01/30 07:49

turbgraphics200様 連投で申し訳ございません。許可Originの方に、example.comを追加いたしました。 これらを用いてwebブラウザから容易にアクセスすることは可能でしょうか。 その際、ブラウザ(google crome)のURL欄には何を入力すれば適切でしょうか。
turbgraphics200

2017/01/30 07:57

できません。もし、example.comでアクセスさせる場合はバーチャルホストや、hostsの設定が必要となってきます。'localhost'はすでにOS自体が設定しているためすぐに使用できます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問