Firebaseって何なの？
って方は、Qiitaで超絶わかりやすくあげている方がいるのでそっちを参照しましょう！
FirebaseのRealtime Databaseのざっくり概要 - Qiita
個人的に作っているアプリで簡単にリアルタイムにデータが同期される機構を組み込みたく調べていたところ、Firebaseにたどり着いたのでまずはざっくり概要をまとめました。
Firebaseとは
Googleが運営しているMBaas...
qiita.com
@seiya1121さんって方が書いています。
まずはFirebaseの登録をする
Firebaseの公式チャンネルからやり方が詳しく上がっているので、参照しましょう（ただし、筆者は順序どうりやってもできなかったので、その点は後程書きますね）
今回は、FirebaseのRealtime databaseを使っていくよ
Getting Started with Firebase on the Web – Firecasts
筆者がつまずいたところ
さあ、Youtubeの通りにやったし大丈夫だろう！
と思うと。。。あれ？できないし、なんで！
って私のようになった人に参考になればいいです！
こんな風にコードが生成されたのでは、ないでしょうか？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#config-web-app --> <script> // Your web app's Firebase configuration var firebaseConfig = { apiKey: "********-****_****-***", authDomain: "*****-****.firebaseapp.com", databaseURL: "https://*******.firebaseio.com", projectId: "***********", storageBucket: "***********.appspot.com", messagingSenderId: "680***********666118", appId: "1:***********8:web:2d2***********ac81" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> |
これだけでできると言っているのにできない？「おかしいな」と思った私は、血眼になって画面を探すと・・・
<script src=”https://www.gstatic.com/firebasejs/6.3.1/firebase-app.js”></script>
が違うことに気が付いたんです。（もしかしたら常識かもしれませんが笑）
<script src=”https://www.gstatic.com/firebasejs/6.3.1/firebase.js”></script>
が正解だったんですよね。
まさか「-app」がいらないなんて・・・たったそれだけで問題は解消！
やったー！！
配線方法
こちらに関しては、スイッチサイエンスさんの方でめっちゃ詳しく書いてあるので参考にしましょう！
こういった配線方法の詳細も販売元で丁寧に書いてあるんですね～関心
BME280 – スイッチサイエンス
trac.switch-science.com
プログラム
今回は、BME280をM5Stackにつなげました。
マイコン側のプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 |
#include <Wire.h> #include <IOXhop_FirebaseESP32.h> //Firebase and WiFi define #define FIREBASE_HOST "https://*****.firebaseio.com" //自分のものを使う #define FIREBASE_AUTH "sJn*******************ywFO" #define WIFI_SSID "自分のWIFIのSSID" #define WIFI_PASSWORD "自分のWIFIのパスワード" #define BME280_ADDRESS 0x76 unsigned long int hum_raw,temp_raw,pres_raw; signed long int t_fine; uint16_t dig_T1; int16_t dig_T2; int16_t dig_T3; uint16_t dig_P1; int16_t dig_P2; int16_t dig_P3; int16_t dig_P4; int16_t dig_P5; int16_t dig_P6; int16_t dig_P7; int16_t dig_P8; int16_t dig_P9; int8_t dig_H1; int16_t dig_H2; int8_t dig_H3; int16_t dig_H4; int16_t dig_H5; int8_t dig_H6; void setup() { //Fiwi setup Serial.begin(9600); // connect to wifi. WiFi.begin(WIFI_SSID, WIFI_PASSWORD); Serial.print("connecting"); while (WiFi.status() != WL_CONNECTED) { Serial.print("."); delay(500); } Serial.println(); Serial.print("connected: "); Serial.println(WiFi.localIP()); Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH); uint8_t osrs_t = 1; //Temperature oversampling x 1 uint8_t osrs_p = 1; //Pressure oversampling x 1 uint8_t osrs_h = 1; //Humidity oversampling x 1 uint8_t mode = 3; //Normal mode uint8_t t_sb = 5; //Tstandby 1000ms uint8_t filter = 0; //Filter off uint8_t spi3w_en = 0; //3-wire SPI Disable uint8_t ctrl_meas_reg = (osrs_t << 5) | (osrs_p << 2) | mode; uint8_t config_reg = (t_sb << 5) | (filter << 2) | spi3w_en; uint8_t ctrl_hum_reg = osrs_h; Serial.begin(9600); Wire.begin(); writeReg(0xF2,ctrl_hum_reg); writeReg(0xF4,ctrl_meas_reg); writeReg(0xF5,config_reg); readTrim(); // } void loop() { double temp_act = 0.0, press_act = 0.0,hum_act=0.0; signed long int temp_cal; unsigned long int press_cal,hum_cal; readData(); temp_cal = calibration_T(temp_raw); press_cal = calibration_P(pres_raw); hum_cal = calibration_H(hum_raw); temp_act = (double)temp_cal / 100.0; press_act = (double)press_cal / 100.0; hum_act = (double)hum_cal / 1024.0; Serial.print("TEMP : "); Serial.print(temp_act); Serial.print(" DegC PRESS : "); Serial.print(press_act); Serial.print(" hPa HUM : "); Serial.print(hum_act); Serial.println(" %"); // update TEMP value Firebase.setFloat("/BME280/TEMP", temp_act); // handle error if (Firebase.failed()) { Serial.print("setting /TEMP failed:"); Serial.println(Firebase.error()); return; } // update PRESS value Firebase.setFloat("/BME280/HUM", hum_act); // handle error if (Firebase.failed()) { Serial.print("setting /HUM failed:"); Serial.println(Firebase.error()); return; } // update HUM value Firebase.setFloat("/BME280/PRESS", press_act); // handle error if (Firebase.failed()) { Serial.print("setting /PRESS failed:"); Serial.println(Firebase.error()); return; } delay(5000); } void readTrim() { uint8_t data[32],i=0; Wire.beginTransmission(BME280_ADDRESS); Wire.write(0x88); Wire.endTransmission(); Wire.requestFrom(BME280_ADDRESS,24); while(Wire.available()){ data[i] = Wire.read(); i++; } Wire.beginTransmission(BME280_ADDRESS); Wire.write(0xA1); Wire.endTransmission(); Wire.requestFrom(BME280_ADDRESS,1); data[i] = Wire.read(); i++; Wire.beginTransmission(BME280_ADDRESS); Wire.write(0xE1); Wire.endTransmission(); Wire.requestFrom(BME280_ADDRESS,7); while(Wire.available()){ data[i] = Wire.read(); i++; } dig_T1 = (data[1] << 8) | data[0]; dig_T2 = (data[3] << 8) | data[2]; dig_T3 = (data[5] << 8) | data[4]; dig_P1 = (data[7] << 8) | data[6]; dig_P2 = (data[9] << 8) | data[8]; dig_P3 = (data[11]<< 8) | data[10]; dig_P4 = (data[13]<< 8) | data[12]; dig_P5 = (data[15]<< 8) | data[14]; dig_P6 = (data[17]<< 8) | data[16]; dig_P7 = (data[19]<< 8) | data[18]; dig_P8 = (data[21]<< 8) | data[20]; dig_P9 = (data[23]<< 8) | data[22]; dig_H1 = data[24]; dig_H2 = (data[26]<< 8) | data[25]; dig_H3 = data[27]; dig_H4 = (data[28]<< 4) | (0x0F & data[29]); dig_H5 = (data[30] << 4) | ((data[29] >> 4) & 0x0F); dig_H6 = data[31]; } void writeReg(uint8_t reg_address, uint8_t data) { Wire.beginTransmission(BME280_ADDRESS); Wire.write(reg_address); Wire.write(data); Wire.endTransmission(); } void readData() { int i = 0; uint32_t data[8]; Wire.beginTransmission(BME280_ADDRESS); Wire.write(0xF7); Wire.endTransmission(); Wire.requestFrom(BME280_ADDRESS,8); while(Wire.available()){ data[i] = Wire.read(); i++; } pres_raw = (data[0] << 12) | (data[1] << 4) | (data[2] >> 4); temp_raw = (data[3] << 12) | (data[4] << 4) | (data[5] >> 4); hum_raw = (data[6] << 8) | data[7]; } signed long int calibration_T(signed long int adc_T) { signed long int var1, var2, T; var1 = ((((adc_T >> 3) - ((signed long int)dig_T1<<1))) * ((signed long int)dig_T2)) >> 11; var2 = (((((adc_T >> 4) - ((signed long int)dig_T1)) * ((adc_T>>4) - ((signed long int)dig_T1))) >> 12) * ((signed long int)dig_T3)) >> 14; t_fine = var1 + var2; T = (t_fine * 5 + 128) >> 8; return T; } unsigned long int calibration_P(signed long int adc_P) { signed long int var1, var2; unsigned long int P; var1 = (((signed long int)t_fine)>>1) - (signed long int)64000; var2 = (((var1>>2) * (var1>>2)) >> 11) * ((signed long int)dig_P6); var2 = var2 + ((var1*((signed long int)dig_P5))<<1); var2 = (var2>>2)+(((signed long int)dig_P4)<<16); var1 = (((dig_P3 * (((var1>>2)*(var1>>2)) >> 13)) >>3) + ((((signed long int)dig_P2) * var1)>>1))>>18; var1 = ((((32768+var1))*((signed long int)dig_P1))>>15); if (var1 == 0) { return 0; } P = (((unsigned long int)(((signed long int)1048576)-adc_P)-(var2>>12)))*3125; if(P<0x80000000) { P = (P << 1) / ((unsigned long int) var1); } else { P = (P / (unsigned long int)var1) * 2; } var1 = (((signed long int)dig_P9) * ((signed long int)(((P>>3) * (P>>3))>>13)))>>12; var2 = (((signed long int)(P>>2)) * ((signed long int)dig_P8))>>13; P = (unsigned long int)((signed long int)P + ((var1 + var2 + dig_P7) >> 4)); return P; } unsigned long int calibration_H(signed long int adc_H) { signed long int v_x1; v_x1 = (t_fine - ((signed long int)76800)); v_x1 = (((((adc_H << 14) -(((signed long int)dig_H4) << 20) - (((signed long int)dig_H5) * v_x1)) + ((signed long int)16384)) >> 15) * (((((((v_x1 * ((signed long int)dig_H6)) >> 10) * (((v_x1 * ((signed long int)dig_H3)) >> 11) + ((signed long int) 32768))) >> 10) + (( signed long int)2097152)) * ((signed long int) dig_H2) + 8192) >> 14)); v_x1 = (v_x1 - (((((v_x1 >> 15) * (v_x1 >> 15)) >> 7) * ((signed long int)dig_H1)) >> 4)); v_x1 = (v_x1 < 0 ? 0 : v_x1); v_x1 = (v_x1 > 419430400 ? 419430400 : v_x1); return (unsigned long int)(v_x1 >> 12); } |
今回はhtmlで取り出したので、そちらのプログラミングも書いておきます。
Xserverを使っています。最初はFirebaseでHostingしないとできないのかと思いましたが、どこでもできるらしいですね。
ほんとすごいFirebase!!
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>環境データ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="con"> <div class="flex"> <h1>時刻:</h1> <h1 id="time"></h1> </div> <div class='flex'> <h1>気温:</h1> <h1 id="TEMP" class="font_red"></h1> </div> <div class='flex'> <h1>湿度:</h1> <h1 id="HUM" class="font_red"></h1> </div> <div class='flex'> <h1>気圧:</h1> <h1 id="PRESS" class="font_red"></h1> </div> </div> <script src="https://www.gstatic.com/firebasejs/6.3.1/firebase.js"></script> <script> // Your web app's Firebase configuration var firebaseConfig = { apiKey: "*********", authDomain: "********.firebaseapp.com", databaseURL: "https://********.firebaseio.com", projectId: "********", storageBucket: "********.appspot.com", messagingSenderId: "********", appId: "1:********" }; firebase.initializeApp(firebaseConfig); var HUM = document.getElementById('HUM'); var PRESS = document.getElementById('PRESS'); var TEMP = document.getElementById('TEMP'); var dbRef = firebase.database().ref('/BME280'); dbRef.child('HUM').on('value', snap=>HUM.innerText = snap.val()); dbRef.child('PRESS').on('value', snap=>PRESS.innerText = snap.val()); dbRef.child('TEMP').on('value', snap=>TEMP.innerText = snap.val()); </script> <script> time(); function time(){ var now = new Date(); document.getElementById("time").innerHTML = now.toLocaleTimeString(); } setInterval('time()',1000); </script> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.flex { display: flex; } .font_red{ color: #ce371c; } .con{ border-radius: 5px; background: #1cb3ce; width:auto; padding-left: 25px; padding-top: 1px; } |
FIREBASE_HOSTとFIREBASE_AUTHの取得方法
firebase_hostの取得方法
firebase_authの取得方法
こんな風に表示されるよ
しかもFirebaseのRealtime databaseを利用しているから、更新を押さなくても数字が変化するのが面白いよね
参考ページ
Firebase Realtime Database のデータ保存、取得、ストリーミング受信実験( ESP32 , M5Stack ) | 3ページ目 (5ページ中) | mgo-tec電子工作
時代は Firebase です。特に Realtime database はストリーミング配信の EventSource / Server-Sent Events をサポートし、スマホのブラウザに即データを反映してくれます。ESP32 や M5Stack でもＯＫ。更に、HTTPリクエストでデータを書き換え・・
www.mgo-tec.com
コメント