Help us understand the problem. What is going on with this article?

EnOceanのセンサー値をReactで可視化する

More than 1 year has passed since last update.

EnOceanで受信したデータをReactを使って可視化したいと思います。
まず、EnOceanのセンサー値をFirebaseにアップするところまでを下記URLを参考にして進めて下さい。

https://qiita.com/h-takauma/items/e81f46c9170fed1baa18

完成動画

1. Reactのcreate-react-appをインストール

Reactの開発が簡単にできるツールをインストールします。

$ npm install -g create-react-app

1-1. プロジェクトを作成する

コマンドを使ってプロジェクトを作成します。お好きなプロジェクト名を入力してください。

$ create-react-app toiletmanager

1-2. サーバーを開始する

作成されたプロジェクト名のフォルダへ移動してから下記コマンドを実行します。
サーバーが起動して http://localhost:3000 にアクセスするとReactアプリを確認することができます。

$ cd toiletmanager
$ npm start

2. ReactプロジェクトをFirebaseに対応させる

EnOceanでアップされたセンサーの状態をReactから取得してみたいと思います。
まず、ReactのプロジェクトにFirebaseが使えるようにモジュールをインストールします。

2-1. Firebaseのnpmをインストールする

Firebaseを使うためのモジュールをインストールします。

$ npm install firebase --save

2-2. srcフォルダにFirebase関連のファイルを作成する

srcの直下にfirebaseフォルダを作成してからconfig.jsファイルを新規で作成します。

apiKeyやプロジェクトIDなどはFirebaseから取得してきます。
Firebaseの左上のメニューにあるギアアイコンをクリックしてプロジェクトの設定をクリックします。
ウェブアプリにFirebaseを追加をクリックしてください。

s100.png

ポップアップが表示されるので、そこにかかれているキー名を対象箇所にコピペしてください。

s101.png

firebase/config.js
export const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "toiletmanager-xxxxx.firebaseapp.com",
    databaseURL: "https://toiletmanager-xxxxx.firebaseio.com",
    projectId: "toiletmanager-xxxxx",
    storageBucket: "toiletmanager-xxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxxxxx"
};

2-3. index.jsファイルを作成する

Firebaseにアクセスするために接続周りの設定を行います。

firebase/index.js
import firebase from 'firebase';
import { firebaseConfig } from './config.js';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseDb = firebaseApp.database();

3. App.jsファイルを編集する

編集する前に可視化でわかりやすくするための画像ファイルをいらすとや様からダウンロードしてきます。
今回はこちらの画像を使いました。

https://www.irasutoya.com/2017/04/blog-post_302.html

3-1. App.jsの編集

ダウンロードしたいらすとや様の画像ファイルをsrcフォルダ直下に保存してApp.jsを編集します。

App.js
import React, { Component } from 'react';
import open from './text_room_kushitsu.png';  // open画像
import close from './text_room_shiyouchu.png'; // close画像
import './App.css';
import { firebaseDb } from './firebase/index.js' // firebaseの設定ファイルを読み込み

const db = firebaseDb.ref('toilet/word'); // Firebaseのtoilet/word.jsonの値を取得

class App extends Component {
  constructor(props) {
    super(props);

    // サイトのタイトル変更
    document.title = "トイレセンサー"

    this.state = {
      toilet: ""
    }

    // Firebaseリアルタイム監視
    db.on('value', (snapshot) => {
      this.setState({
        toilet: snapshot.val()
      });
    });
  }

  render() {
    return (
      <div className="App">
      {
        this.state.toilet === '使用中'
        ? <img src={close} alt="close" width="50%"/>
        : <img src={open} alt="open"  width="50%"/>
      }          
      </div>
    );
  }
}

export default App;

3-2. 実行する

実行コマンドをたたいて、プログラムを実行します。

$ npm start

実行するとこのような画面になります。
react-image.001.png

3-3. ビルドする

公開するためにファイルをビルドします。

$ npm run build

ビルドするとbuildフォルダにファイルが出力されます。

4. Amazon S3にアップロードする

作成したファイルをAmazon S3にアップロードします。バケットを適当に作ってそこにアップロードしましょう。

スクリーンショット 2018-11-14 12.21.26.png

ファイルのアクセス許可もしておきます。
staticフォルダとindex.htmlファイルを選択して公開ボタンをクリックします。

スクリーンショット 2018-11-14 12.26.37.png

アプリにアクセスするURLを知るためにStatic website hostingを有効にします。

スクリーンショット_2018-11-14_12_26_47.png

インデックスドキュメントにindex.htmlと入力します。エンドポイントURLにアクセスすると作ったアプリを見ることが出来ます。

スクリーンショット 2018-11-14 12.26.55.png

5. httpsに対応する

昨今セキュリティ強化に伴いブラウザのURLがhttpsに対応していないと諸々使えなくなってきました。
こちらの記事を参考にして公開設定をおこないましょう。

https://qiita.com/THHacker/items/11eadffe6b3ce3491e3b

まとめ

Reactを使えば手軽にEnOceanのセンサー値を可視化することができました。
AmazonS3とCloudFrontでさらに簡単に静的サイトを公開することもできました。是非EnOceanを使って様々なセンサー値を可視化してみては如何でしょうか?

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/

h-takauma
様々なIoT機器の研究開発を行っています。 AWSの研究開発がメインです。LINE API Expert('19〜) 最近はスマートスピーカーに夢中です! 著書「スマートスピーカーアプリ開発入門」https://amzn.to/2o0KGWs
i-enter
「効果」をつねに提供します。スマホアプリ開発No.1の実績。最新のIoTに対応した開発も行います。
https://www.i-enter.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away