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

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

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

# 完成動画
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">EnOcean x Reactでセンサー値を可視化する <a href="https://t.co/2NdOKGKEc3">pic.twitter.com/2NdOKGKEc3</a></p>&mdash; がおまる@スマートスピーカーアプリ開発入門発売中！ (@gaomar) <a href="https://twitter.com/gaomar/status/1062526687190036480?ref_src=twsrc%5Etfw">2018年11月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 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](https://qiita-image-store.s3.amazonaws.com/0/154355/c1687cbc-14fc-f40b-f8bc-8caaf79587c9.png)

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


<img width="791" alt="s101.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/cbd2de56-4522-c9e8-b170-92b5187793ac.png">

```javascript: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にアクセスするために接続周りの設定を行います。

```javascript: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を編集します。

```javascript: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](https://qiita-image-store.s3.amazonaws.com/0/154355/917d049e-38f2-b7b9-0346-ca6c72d785a0.png)

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

```
$ npm run build
```

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

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

<img width="1565" alt="スクリーンショット 2018-11-14 12.21.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/73b36bfc-d0e7-a8b7-7605-a2af81086687.png">

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

<img width="705" alt="スクリーンショット 2018-11-14 12.26.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/798d1a39-98bb-709c-5d7f-15250d81bd1d.png">

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

<img width="1337" alt="スクリーンショット_2018-11-14_12_26_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/84eafeb1-4af6-1e80-16f6-e5887a9f8982.png">

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

<img width="564" alt="スクリーンショット 2018-11-14 12.26.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/154355/5ce8d6d7-4630-6c93-a943-5fe41f9fedbd.png">

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

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

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

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