mesh(IoTブロック)とFirebaseのRealtime DatabaseとIFTTTを連携する[初心者向け90分コース]

目次

前置き

先日余っていた楽天ポイントでmesh( https://meshprj.com/jp/ )というデバイスを購入しました。

meshは子供でも電子工作を楽しめるように作られたデバイスで、IoTな電子工作やものづくりをお手軽に体験できます。

（少し良い値段なので、子供が自分で手を出すのは難しそうですが。参考:MESH商品一覧 | MESH（メッシュ））

meshはIFTTTと連携することができるので、色々遊びがいがありそうです。

早速Firebaseとの連携と試してみましたので、手順を残しておきたいと思います。

meshもFirebaseも今回が初体験でしたので、同じく初めて使う方の参考になれば幸いです。

ゴール

• meshからIFTTT経由でFirebaseのRealtime Databaseにデータを登録すること 

想定読者

• Firebaseを使ったことがない人
• meshを初めて使う人、もしくは使用歴が浅い人
• IFTTTの使用歴が浅い人

手順

1. meshの設定（残り90分）

この部分です。

初期設定

初期設定については公式のサポートページに動画付きで解説されていますので、そちらを参考にしてもらうのがいいと思います。

MESHの初期設定や使い方がわかりません。説明書はありますか？ – MESHサポート | 遊び心を形にできる、アプリとつなげるブロック形状の電子タグ

2. Firebase Realtime Databaseの設定（残り70分）

Firebaseプロジェクトの作成

FirebaseはGoogleが提供するバックエンド環境のサービスです。

Googleアカウントにログインしている状態で「 https://console.Firebase.google.com/?hl=ja 」にアクセスします。

料金について

デフォルトの状態では「Sparkプラン」という無料のプランになっています。

プランの詳細  https://Firebase.google.com/pricing/?authuser=0

 「プロジェクトを追加」を選択してプロジェクトを作成します。

必要事項を入力し、「プロジェクトを作成」を実行します。

プロジェクトができました。

 

Dababaseの初期設定

画面左のメニューから「Database」を選択

2018年11月現在、FirebaseのDatabaseは「Cloud Firestore」と「Realtime Database」の2種類から選択することができます。

「Cloud Firestore」はまだベータ版ですが、柔軟性と拡張性に優れているらしいです。

今回はWebhookを利用してデータを登録したいのでRealtimeDatabaseを選択します。

Realtime Databaseの「データベースを作成」を実行

「テストモード」を選択して「有効にする」をクリックします。

このテストモードは誰でもデータの読み書きができる状態になるので、セキュリティの観点からは望ましくありません。

今回はこの後に簡単に疎通確認などを行いたいのでテストモードを選択していますが、正式に運用する場合はセキュリティルールを適切に変更してあげる必要があります。 

データのツリー構造を作成します。

今回は下記のように設定しました。

疎通テスト

ここまででDatabaseの初期設定は完了しました。

curlで疎通テストをしてみます。curlが使えない環境の場合は、POSTリクエストを送信できる方法に読み替えて下さい。 

先ほど作成したDatabaseのツリー構造の上にURLが記載されています。この「URL＋ツリー構造」をリクエスト先とすることで、データを登録することができます。

また、Reatime Databaseはデータをjsonで管理しているので、作成したツリー構造はjsonファイルになっており、URLの末尾には「json」の拡張子をつけます。

 

このようなデータ構造になっている場合の疎通確認用curlコマンドは下記のようになります。

$ curl -X POST -H "Content-Type: application/json" -d '{"test1": "test2"}' https://sample-pjxxxxxxx.Firebaseio.com/items/item.json

curlコマンドを実行すると、Databaseの画面表示が代わり、データが登録されていることがわかります。

ここまででDatabaseの作成、初期設定、疎通確認が完了しました。

curlのリクエスト送信先URLは後ほどIFTTTの設定をする際も利用するのでメモを残して置いて下さい。

3. IFTTT設定（残り50分）

IFTTTは「gmailに来たメールをslackに通知する」といった具合にWebに繋がる各種アプリを連携させることができるアプリです。

”Applet”という単位で機能を作成し、”何をトリガーにして何を実行するか”という処理を設定することができます。

この部分です。 

IFTTTの初期設定

まずはIFTTT( https://ifttt.com/ )のWebサイトでアカウントを作成します。

Applet作成

meshアプリからデータを受信して、Firebaseにデータを送信するAppletを作成します。

Appletでは「何が起こった時に（this）」「何をするか（that）」を設定します。 

a. https://ifttt.com/my_Applets にある「New Applet」をクリック

 b. 「this」をクリック

 c. 検索機能を使い、meshアプリを選択

d. 「Event from MESH app received」を選択

e. Event IDの設定

Appletとmeshアプリをつなぐために必要なEvent IDを設定します。

meshアプリ側では「-」などが使えないようでしたので、アルファベットと数字だけでIDを決めてもらうといいと思います。

このEvent IDは後でmeshアプリ側で入力する必要があります。

今回は「SampleApplet」というEvent IDでAppletを作成します。 

f. 「that」をクリック

続いて「何をするか（that）」を設定します。 

g. 検索機能を使い「Webhooks」を選択

Webhooksの機能を使うことで、任意のHTTPリクエストを送信することができます。 

h. 「Make a web request」を選択 

i. HTTPリクエストの内容を設定する

URLには、Databaseの疎通確認の際使用したURLを入力します。

MethodはPOSTを選択します。

Realtime DatabaseのREST APIではPOST以外のMethodも利用することができます。その他のMethodの機能詳細についてはこちらをご参照下さい。

https://Firebase.google.com/docs/reference/rest/Database/

Content Typeはapplication/jsonを選択します。

Bodyには、POSTで送信するパラメータを指定します。入力欄下部にある「Add Ingredient」を使うことで、Meshで連携可能なデータを自動で入力してくれます。

入力した結果はこのようになります。

 「Finish」をクリックし、Appletを完成させます。

これでAppletが完成しました。

あとは作成したAppletとMeshのアプリを紐付ければ完成です。

4. meshアプリとIFTTTを連携させる（残り30分）

meshのアプリで、先ほど作成したIFTTTのAppletにデータ送信する設定をします。

この部分です。

meshアプリを起動し、「meshタグ」と「タイマー」とを操作スペースに並べます。

今回は温湿度を扱えるタグを使用します。

タイマーは「一定の間隔で」を選択します。今回は1分間隔に設定します。 

meshタグは「温度を確認する」を選択し、温度は0-50度に設定します。 

meshタグとタイマーをつなぎます。 

「連携タグ」の中から「IFTTT」を選択します。 

IFTTTのセットアップをします。

meshアプリとIFTTTの設定を行います。

「mesh及びIFTTTのIDとパスワードを使って連携する方法」と、「meshアプリ内で発行されるIFTTT Keyによって連携する方法」があります。

任意の方法で設定してもらったら良いのですが、自分が試した際にはIDパスワードによる認証の場合は上手く連携ができず、Appletの実行が上手くいかない場合があったのでIFTTT Keyによる認証をおすすめします。

「連携タグ」のセットアップが完了したら、IFTTTのタグをmeshタグとつなぎます。

IFTTTタグの設定でEvent IDと送信するデータを設定します。

Event IDはIFTTTのアプリでAppletを作成した際に指定したものです。

Textで指定した内容がIFTTTのAppletに渡され、IFTTTのAppletからFirebaseに送信されます。

5. テスト（残り5分）

これで全ての準備が整いました。全体の疎通テストをしてみたいと思います。

meshアプリで1分毎にタイマーを設定したので、1分間隔で処理が実行されます。

処理の実行状況はIFTTTのActivityから確認することができます。

送信するデータ形式や、送信先のURLが間違っているなどのエラーが発生した場合はこの画面からエラー内容を確認することができます。

登録されたデータを確認

最後にFirebase  Consoleで登録されたデータを確認してみましょう。

無事に温度が登録できていますね！

注意事項

今回、FirebaseのRealtime Detabaseでは、誰でもデータの追加と参照ができる設定になっています。扱うデータによっては誰からもアクセスできるのは問題ですし、多大なデータを送信されることで無料プランの枠を超えてしまうことも考えられます。

扱うデータの質やサービスの特性に合わせて適切なアクセス制御を実施することをおすすめします。 

具体的な設定内容については、Google公式の開発者向けチュートリアルが多数用意されているので、そちらを参考にしてもらうのが良いと思います。 

最後に

今回meshもFirebaseもIFTTTも初体験だったのですが、サーバの設定など気にすることなくサクサクと機能が作れるので楽しいですね。

温度と湿度のデータをFirebaseのHostingでグラフにして表示させたりもしたので、また別の記事で手順を残しておきたいと思います。