LoginSignup
1
4

More than 5 years have passed since last update.

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

Posted at

前置き

先日余っていた楽天ポイントでmesh( https://meshprj.com/jp/ )というデバイスを購入しました。
meshは子供でも電子工作を楽しめるように作られたデバイスで、IoTな電子工作やものづくりをお手軽に体験できます。
(少し良い値段なので、子供が自分で手を出すのは難しそうですが。参考: 商品一覧
meshはIFTTTと連携することができるので、色々遊びがいがありそうです。
早速Firebaseとの連携と試してみましたので、手順を残しておきたいと思います。
meshもFirebaseも今回が初体験でしたので、同じく初めて使う方の参考になれば幸いです。

ゴール

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

想定読者

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

手順

1. meshの設定(残り90分)

この部分です。
image.png

初期設定

初期設定については公式のサポートページに動画付きで解説されていますので、そちらを参考にしてもらうのがいいと思います。
MESHの初期設定や使い方がわかりません。説明書はありますか?

2. Firebase Realtime Databaseの設定(残り70分)

image.png

Firebaseプロジェクトの作成

FirebaseはGoogleが提供するバックエンド環境のサービスです。
Googleアカウントにログインしている状態で「 https://console.Firebase.google.com/?hl=ja 」にアクセスします。

料金について

デフォルトの状態では「Sparkプラン」という無料のプランになっています。
プランの詳細 https://Firebase.google.com/pricing/?authuser=0
image.png

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

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

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

Dababaseの初期設定

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

2018年11月現在、FirebaseのDatabaseは「Cloud Firestore」と「Realtime Database」の2種類から選択することができます。
「Cloud Firestore」はまだベータ版ですが、柔軟性と拡張性に優れているらしいです。
今回はWebhookを利用してデータを登録したいのでRealtimeDatabaseを選択します。
Realtime Databaseの「データベースを作成」を実行
image.png

「テストモード」を選択して「有効にする」をクリックします。
このテストモードは誰でもデータの読み書きができる状態になるので、セキュリティの観点からは望ましくありません。
今回はこの後に簡単に疎通確認などを行いたいのでテストモードを選択していますが、正式に運用する場合はセキュリティルールを適切に変更してあげる必要があります。
image.png

データのツリー構造を作成します。今回は下記のように設定しました。
image.png

疎通テスト

ここまででDatabaseの初期設定は完了しました。
curlで疎通テストをしてみます。curlが使えない環境の場合は、POSTリクエストを送信できる方法に読み替えて下さい。
先ほど作成したDatabaseのツリー構造の上にURLが記載されています。この「URL+ツリー構造」をリクエスト先とすることで、データを登録することができます。
また、Reatime Databaseはデータをjsonで管理しているので、作成したツリー構造はjsonファイルになっており、URLの末尾には「json」の拡張子をつけます。
image.png

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

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

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

ここまででDatabaseの作成、初期設定、疎通確認が完了しました。
curlのリクエスト送信先URLは後ほどIFTTTの設定をする際も利用するのでメモを残して置いて下さい。

3. IFTTT設定(残り50分)

IFTTTは「gmailに来たメールをslackに通知する」といった具合にWebに繋がる各種アプリを連携させることができるアプリです。
”Applet”という単位で機能を作成し、”何をトリガーにして何を実行するか”という処理を設定することができます。
この部分です。
image.png

IFTTTの初期設定

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

Applet作成

meshアプリからデータを受信して、Firebaseにデータを送信するAppletを作成します。
Appletでは「何が起こった時に(this)」「何をするか(that)」を設定します。

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

b. 「this」をクリック
image.png

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

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

e. Event IDの設定
Appletとmeshアプリをつなぐために必要なEvent IDを設定します。
meshアプリ側では「-」などが使えないようでしたので、アルファベットと数字だけでIDを決めてもらうといいと思います。
このEvent IDは後でmeshアプリ側で入力する必要があります。
今回は「SampleApplet」というEvent IDでAppletを作成します。
image.png

f. 「that」をクリック
続いて「何をするか(that)」を設定します。
image.png

g. 検索機能を使い「Webhooks」を選択
Webhooksの機能を使うことで、任意のHTTPリクエストを送信することができます。
image.png

h. 「Make a web request」を選択
image.png

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で連携可能なデータを自動で入力してくれます。

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

「Finish」をクリックし、Appletを完成させます。
これでAppletが完成しました。
あとは作成したAppletとMeshのアプリを紐付ければ完成です。

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

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

meshアプリを起動し、「meshタグ」と「タイマー」とを操作スペースに並べます。
今回は温湿度を扱えるタグを使用します。
image.png

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

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

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

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

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

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に送信されます。
image.png

5. テスト(残り5分)

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

meshアプリで1分毎にタイマーを設定したので、1分間隔で処理が実行されます。
処理の実行状況はIFTTTのActivityから確認することができます。
image.png

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

登録されたデータを確認

最後にFirebase Consoleで登録されたデータを確認してみましょう。
無事に温度が登録できていますね!
image.png

注意事項

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

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

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

最後に

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

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

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4