Me-Mo MESHとMonacaアプリを繋ぐブリッジ機能

Keisuke@SXD.Media.TUT
2018.03.27

MESHの得意なことと、Monacaアプリの得意なことを組み合わせて、アイデアを生かしたサイバー・フィジカルモバイルアプリを作ることができる!

ソニーは、MESHレシピ及び投稿が、正確であるかどうか、有用なものであるかどうか、確実なものであるかどうか、ご使用になる皆様の目的に合ったものかどうか、安全なものであるかどうか、第三者の著作権、商標権等の知的財産権、財産、プライバシーもしくは肖像権その他の権利を侵害していないか等につきましては、一切保証致しません。したがって、MESHレシピ若しくは投稿を利用される際は、皆様の責任で利用してください。
レシピの生い立ち

もともとMESHのレシピとMonacaアプリを別々に作っていて、繋げて新たなものを作りたいという重いから生まれました。

このレシピで使う素材

作り方
1

Firebaseに登録し、任意の名前でプロジェクトを作成しましょう。https://firebase.google.com/

2

サーバーを利用するため、所持していない場合はさくらサーバーなどに登録しましょう。(利用料がかかります。)
https://github.com/KeisukeHomma/me-mo
こちらのプログラムをダウンロードし、テキストエディタでfirebase.phpを開きます。

3

Firebase Consoleの画面に戻ります。
firebase.phpの8行目と9行目にFirebaseのプロジェクトIDとデータベースシークレットの値を入力します。
プロジェクトID:設定>全般>プロジェクトID
データベースのシークレット(画像):設定>サービスアカウント>データベースのシークレット
これらが入力できたらフォルダごとサーバーに保存します。

4

次に、MESH SDKに登録し、Create new tagをクリックします。
https://meshprj.com/sdk-jp/
そして、importタブを選択します。
ここで、先ほどダウンロードしたファイルの中のme-mo.json内のコードを全てコピーし貼り付けて、Load jsonを押してください。
「me to mo recipi」という名前のカスタムタグができたと思います。
Codeをクリックし、Executeタブを開き、11行目にサーバーのfirebase.phpファイルのURLを入力しましょう。

5

先ほどMESH SDKで作ったカスタムタグを追加し、配置してください。

6

作ったカスタムタグを開いて、値を設定しましょう。
この場合はボタンを押すという処理なので、タグにはbuttonを、トリガーにはpressを入力します。
Valueにはトリガーの値を、Idにはタグごとの固有の数値を設定します。

7

ボタンを押してみてください。
MESHアプリのカスタム欄にあるログをみてみると、画像のようになります。

8

Firebase ConsoleのDatabaseをみると、押した最新の値がリアルタイムで登録されています。

9

Monacaに登録し、
https://monaca.mobi/directimport?pid=5ab741e0e7888583348b4567
のプロジェクトをインポートしてください。
app.jsを開いておきます。

10

Firebase ConsoleのProject Overview、ウェブアプリにFirebaseを追加をクリックし、var config = { ... } をコピーします。
monacaの画面に戻り、app.jsのvar configと置き換えます。すると、ボタンを押したという情報がアプリ画面上で確認できるようになりました。
デモは動画をご覧ください。

作者プロフィール
Keisuke@SXD.Media.TUT

MESHとMonacaを使う大学生

MESHってなに?

さまざまな機能を持ったブロック形状の電子 "MESHタグ" を"MESHアプリ" 上でつなげることにより、あなたの「あったらいいな」を実現できる。それがMESHです。 難しいプログラミングや電子工作の知識は必要ありません。IoT(モノ・コトのインターネット化)を活用した仕組みも簡単に実現します。

最新情報、楽しみ方やお得な情報を受け取ろう

ご利用規約およびプライバシーポリシーをご確認の上ご登録ください。