レッスン：計測データをWebアプリに表示しよう.1(投稿日：2021年12月7日)

＜＜前へ
次へ＞＞

計測データをWebアプリに表示しよう

ソースコードの内容

<!doctype html>
<html lang="jp">
<head>
<title>MyIoTアプリ</title>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-database.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="col-12">
<div class="h3">Firebase IoT</div>
</div>
<div class="col-12">
<div id="Temp">--℃</div>
<div id="Hum">--%</div>
<div id="Press">--Pa</div>
</div>
</div>
</div>
<script>
var config = {
//自分の情報を入力
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
firebase.initializeApp(config);
// Get a reference to the database service
var database = firebase.database();
</script>
<script>
//データベースの参照
var Ref = database.ref();
//既存データを表示
Ref.on('value', function(obj){
var msg = obj.val();
console.log(msg);
console.log(msg["Temp"]);
var temp = document.getElementById("Temp");
temp.innerText = msg["Temp"] + "℃";
var hum = document.getElementById("Hum");
hum.innerText = msg["Hum"] + "%";
var press = document.getElementById("Press");
press.innerText = msg["Press"] + "Pa";
});
</script>
</body>
</html>
view raw test.html hosted with ❤ by GitHub

使用した電子部品

質問はログインをするとできるようになります。

回路図

【IoT】M5StickCで環境計測IoTシステムを構築しよう

#0 プロジェクトのゴールについて確認しよう.1

プロジェクトのゴールについて確認しよう

Arduino IDEのダウンロード方...

#1 ハードウェアの説明.1

ハードウェアの説明

#2 M5StickCのセットアップ.1

M5StickCのセットアップをしよう。

M5stickC用のボードマネージャURL↓<...

#3 M5tickCにプログラムを書き込んでみよう.1

M5tickCにプログラムを書き込んでみよう

#4 BME280とI2Cについて学ぼう.1

BME280とI2Cについて学ぼう

#5 BME280からデータを取得しよう.1

BME280からデータを取得しよう

動画に出てくるGitHubページ↓
http...

#6 Ambientに登録しよう.1

Ambientに登録しよう

#7 Ambientサンプルプログラムの解説.1

Ambientサンプルプログラムの解説

Ambientのサイト↓
https://ambi...

#8 アップロード用のプログラムを作成しよう.1

アップロード用のプログラムを作成しよう

#9 Ambientでデータを確認しよう.1

Ambientでデータを確認しよう

#10 ディスプレイに数値を表示しよう①.1

ディスプレイに数値を表示しよう①

#11 ディスプレイに数値を表示しよう②.1

ディスプレイに数値を表示しよう②

#12 Firebaseの解説と設定.1

Firebaseの解説と設定していこう

【Firebase入門】Firebaseについて学...

#13 RealTimeデータベースとそのプログラムを作成しよう.1

RealTimeデータベースとそのプログラムを作成しよう

IOXhop_FirebaseES...

#14 RealTimeデータベースを書き換えよう.1

RealTimeデータベースを書き換えよう

#15 計測データをFirebaseにアップロードしよう.1

計測データをFirebaseにアップロードしよう

#16 Webアプリを作成しよう.1

Webアプリを作成しよう

現在の動画

#17 計測データをWebアプリに表示しよう.1

計測データをWebアプリに表示しよう

#18 Chart.jsを使おう.1

Chart.jsを使おう

Chart.jsの公式サイト（ドキュメント）
https:/...

#19 Chart.jsについて理解しよう.1

Chart.jsについて理解しよう

#20 リアルタイムで変化するグラフを作成しよう.1

リアルタイムで変化するグラフを作成しよう

#21 グラフ表示を完成させよう.1

グラフ表示を完成させよう

#22 グラフの並びを整えよう（レスポンシブ対応）.1

グラフの並びを整えよう（レスポンシブ対応）

#23 数値の並びを整えよう（レスポンシブ対応）.1

数値の並びを整えよう（レスポンシブ対応）

#24 デプロイしてどの端末からも見れるようにしよう.1

デプロイしてどの端末からも見れるようにしよう

【Firebase-Webアプリ...

#25 プロジェクトを最後まで終わった人へ.1

プロジェクトを最後まで終わった人へ