More Related Content Similar to Me-Mo 〜MESHとMonacaアプリを繋いだサイバー・フィジカルモバイルアプリ制作のためのブリッジ機能〜
Similar to Me-Mo 〜MESHとMonacaアプリを繋いだサイバー・フィジカルモバイルアプリ制作のためのブリッジ機能〜 (20) Me-Mo 〜MESHとMonacaアプリを繋いだサイバー・フィジカルモバイルアプリ制作のためのブリッジ機能〜2. サイバー・フィジカルモバイルアプリ
構築環境 Me-Mo の開発
東京工科大学 メディア学部 メディア学科
本間圭祐 岡崎博樹 上林憲行
IoT開発環境(MESH)とHTMLハイブリット
アプリ開発環境(Monaca)を繋いだ
2018/3/15情報処理学会第80回全国大会
早稲田大学 西早稲田キャンパスもくじ
1. はじめに
2. 研究目的
3. Me-Mo デザイン
• 設計方針
• MESH, Monacaの
メリット
4. 開発
• システム構成
• 実現方法
5. 制作した連携アプリ例
• 実演
6. おわりに
謝辞
参考文献
3. • アイデアを形にできる IoT ブロック
• HTMLハイブリッドアプリ開発環境
を組み合わせた
サイバー・フィジカルモバイルアプリを作る
ブリッジ機能 Me-Mo の開発を行った。
1. はじめに
サイバー・フィジカル
サイバー空間とフィジカル空間が
相互につながっていること
2
4. • アイデアを形にできる IoT ブロック
• HTMLハイブリッドアプリ開発環境
を組み合わせた
サイバー・フィジカルモバイルアプリを作る
ブリッジ機能 Me-Mo の開発を行った。
1. はじめに
2. 研究目的
3
26. ❷ 3つの選択肢
• データ連携
• お互いのデータを共有して使用する
• APIコール
• MESH, MonacaのAPIをそれぞれが呼び出して使用する
• 両者のAPIは公開されていないが、実現の可能性はある
• イベント連携
• それぞれのイベントを仲介する
• イベントドリブン方式の連携
26
27. ❷ 3つの選択肢
• データ連携
• お互いのデータを共有して使用する
• APIコール
• MESH, MonacaのAPIをそれぞれが呼び出して使用する
• 両者のAPIは公開されていないが、実現の可能性はある
• イベント連携
• それぞれのイベントを仲介する
• イベントドリブン方式の連携
27
MESHタグがイベントメインのため
30. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
30
31. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
31
32. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
32
• MESH SDKで制作したカスタムタグ
• Monacaアプリに任意の値を送信
• MESHレシピやタグの状態など
• Monacaアプリからの値も受け取れる
Me-Moタグ
MESH SDK
33. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
名前 2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
Me-Moタグを用いてMonacaアプリに
データを送ることでMESHを
機能として使えるようにしている
33
34. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
名前 2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
Me-Moタグを用いてMonacaアプリに
データを送ることでMESHを
機能として使えるようにしている
MESHレシピ・Monacaアプリ
に付け加えるだけなので、
既存のプログラムの変更がいらない 34
35. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
名前 2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
35
36. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
名前 2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
36
Firebase
• モバイルアプリのバックエンド機能
を提供するプラットフォーム(mBaaS)
• クライアントにリアルタイム同期
• MESHのデータをFirebaseに送り
Monacaアプリにリアルタイム同期
37. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
名前 2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
37
• リアルタイム同期
• 遠隔での連携が可能
• イベントドリブン方式の実現
• mBaaSでモバイルアプリ最適化
41. 参考文献 1/2
1. 吉田顕一:MESHBOOK 世界にひとつのメッシュブック MESHで始める 子どもと一緒に
電子工作, IoT, ロボット作りのレシピ集, デザインエッグ社 (2016).
2. アシアル株式会社・生形可奈子・岡本雄樹:Monacaで学ぶはじめてのプログラミング
∼モバイルアプリ入門∼, 学術研究出版 (2016).
3. Google, 自動運転車の正式プロトタイプを初公開. 顔つきがやや真面目に - Engadget
http://japanese.engadget.com/2014/12/22/google-self/
(2018年1月29日最終アクセス)
4. 『Pokémon GO』公式サイト
http://www.pokemongo.jp/ (2018年1月29日最終アクセス)
5. ポケモンGO, 売上1千億円突破でも, 先行きは暗い? - Forbes
https://forbesjapan.com/articles/detail/14946 (2018年1月29日最終アクセス)
6. ポケモンを現実世界でプレイできるアプリ「ポケモンGO(Pokémon GO)」でポケモンを
ゲットする方法&歩きまくるとタマゴがふ化して進化する新要素などが判明 - Gigazine
http://gigazine.net/news/20160325-pokemon-go-system/
(2018年1月29日最終アクセス)
7. MESH SDK
https://meshprj.com/sdk-jp/ (2018年1月29日最終アクセス)
8. MESHレシピ ‒ ソニー
https://recipe.meshprj.com/jp/ (2018年1月29日最終アクセス)
41
42. 参考文献 2/2
9. 遊びながら学ぶプログラミング教室『SWIMMY(スイミー)』
http://www.sai.co.jp/swimmy/ws/ (2018年1月29日最終アクセス)
10. 株式会社エス・エー・アイ
https://www.sai.co.jp/ (2018年1月29日最終アクセス)
11. Apache Cordova
https://cordova.apache.org/ (2018年1月29日最終アクセス)
12. Onsen UI 2
https://ja.onsen.io/ (2018年1月29日最終アクセス)
13. Firebase ‒ Google
https://firebase.google.com/?hl=ja (2018年1月29日最終アクセス)
14. さくらサーバー ‒ さくらインターネット
https://www.sakura.ne.jp/ (2018年1月29日最終アクセス)
15. Nifty Cloud Mobile Backend
https://console.mb.cloud.nifty.com (2018年1月29日最終アクセス)
16. Static website hosting who is fastest
https://www.savjee.be/2017/10/Static-website-hosting-who-is-fastest/
(2018年1月29日最終アクセス)
42
46. Me-Moはどうしたら使えるの?
1. Firebaseに登録する
2. サーバーのPHPプログラムをダウンロード
3. Firebase情報をPHPプログラムに書き込む
MESHからMonacaにデータを送る
4. Me-Mo送信タグをインポートする
5. MESH SDKでMe-Moタグを設定
6. MESHレシピをMe-Moタグと繋ぐ
7. MonacaでFirebase SDKを読み込み
リアルタイムで更新を読み取る
イベントを使用
8. Me-Moタグごとに任意の値
(送りたいデータ)を設定する
9. Monacaでデータを受け取った時の
処理を記述
10.MESHレシピでMe-Moタグを起動
11.Monacaアプリ, MESHで動作確認
MonacaからMESHにデータを送る
4. Me-Mo受信タグをインポートする
5. MESH SDKでMe-Moタグを設定
6. MESHレシピをMe-Moタグと繋ぐ
7. MonacaでFirebaseにデータを送る
処理を記述
8. MESHレシピでデータを
送った時の処理を作成
9. Monacaアプリ, MESHで動作確認
共通
46
47. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
47
48. MESH Monacaアプリ
設定した値を書込み
Database Write
3/s
更新を取得
Database Read
Firebase
更新を取得
Database Update
設定した値を書込み
Database Write
任意の値(下表)を送受信
するMe-Moカスタムタグ
Me-Moタグ
MESH
SDK
MESHレシピ
MESHタグ
MESHで制作
した作品
MESHの各タグ
作成したMESH
レシピ全体
Key 説明 Value(例1) Value(例2)
name 名前 button quiz
trigger アクション push correct
value 値 1 1
id 固有番号 1 1
Monacaアプリに送信する際に設定するデータと例
システム構成と機能
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
任意の値を設定
MESHに送信する際に
設定するデータと例
Key Value(例)
name button
trigger push
value 1
id 1
MESHから送られて来たデータ
Key 説明 Value(例)
Output
Index
タグ出力
番号
2
Monacaアプリから送られて来たデータ
必要であれば
任意の値を設定
Me-Moユーザー
MESHタグの値設定、レシピ作成、
Monacaアプリ作成等をする
1. 物理的な距離の影響を受けない
2. MESH, Monacaの独立性保持設計
48
55. Firebaseが本当に1番いいのか?
• mBaaS(mobile backend as a Service)なので
モバイルアプリに特化
(Monacaモバイルアプリを基軸として設計している)
• クライアントにデータをリアルタイム同期することができる
問題点
• MESHレシピから送ったデータをMonacaアプリにリアルタ
イム同期させることはできるが、Monacaアプリのデータを
MESHレシピにリアルタイム同期することはできない
• 現状では1秒∼3秒ほどかかる
• 本研究ではMonacaアプリを基軸とした場合のMe-Moを
対象としているため、MESHタグのセンサーをMonacaアプリに反
映させることを優先した
55
58. MESH, Monacaのリソース
58
MESH
• MESHタグ
• IoTセンサー
• サイバー・フィジカル
• 電子工作
• ビジュアルプログラミング
• プログラミングを必要としない
• 様々な連携タグ
• MESHレシピ
Monaca
• HTMLハイブリッドアプリ
• 生産性が高い
• 開発環境の提供
• インターネット上で開発で
きる
• 端末に依存しない
59. • アイデアを形にできる IoT ブロック
• HTMLハイブリッドアプリ開発環境
に注目し、これらを組み合わせた
サイバー・フィジカルモバイルアプリを作る
ブリッジ機能 Me-Mo の開発を行った。
結局何がしたいの?
2. 研究目的
59
サイバー・フィジカルモバイルアプリの
実現と普及に繋がる研究