ENGINEER BLOGPhone Appliのエンジニアブログ

MESH × Street Viewで屋内運動アプリを開発してみた!

2020年7月27日


こんにちは。
2020年4月より新卒として入社し、6月からプロダクト本部 テクノロジーリサーチ部に配属となりました。後藤 大海 (ごとう ひろみ) と申します
今回は、配属先の研修課題の一環としてアプリを開発してみたのでご紹介したいと思います!

目次】
1.アプリ概要

2.技術的な内容

3.使用してみる!

4.終わりに


1.アプリ概要

MESH と Google Maps の Street View を使って屋内で楽しく運動できるアプリを制作しました。
MESH タグが人の動きを感知して Street View の画面を自動で切り替えていくので、屋内にいても屋外を歩いている気分を味わうことができます。

スクリーンショット 2020-07-16 19.16.48.png

そもそも MESH とは??

MESH タグ (ブロック) という小さなセンサーを無線で専用アプリと繋ぐことで、誰でも簡単にデジタルなものづくりを体験することができるツールです。MESH タグはさまざまな種類があり、シンプルにボタンを押すだけのものや人の動きに反応する機能を持つもの、明るさの変化を検知するものまで多種多様です。 (一個5000〜6000円。結構お高い。)

IMG_20200716_155540.jpg

たとえば、動きを検知する MESH タグを家の扉に取り付けることで、「家族が家に帰った時に自動で LINE にメッセージが届く」なんてこともできたりします。 IoT (モノのインターネット) と呼ばれる領域ですね!

今回は、「動きを検知する青いタグ」と「ボタンを押すと反応する緑色のタグ」を使用して開発しました。


二つのタグの役割

青い MESH タグ (動きタグ) を振る -> 画面の Street View が前に進む!

緑の MESH タグ (ボタンタグ) を押す -> 画面の Street View が旋回!


2.技術的な内容

全体像としてはこのようになっています。

スクリーンショット 2020-07-16 17.27.13.png

MESH が検知した動きをサーバ (Node-RED) POST し、サーバから WebSocket を使ってクライアント (ブラウザ) と通信します。
次からはサーバ側、クライアント側、 MESH 側に分けて解説していきます。


【サーバ】

Node-RED を使って実装しています。
フローは以下のようになっています。

スクリーンショット 2020-07-16 14.15.40.png

アプリの設定画面から使用するタグを選択することで、 Node-RED にタグ ID とクライアントの sessionID がセットで格納されます。
それ以降、 MESH のタグ ID に紐づけられたクライアントのみと Socket 通信を行います。


【クライアント】

今回は Google Maps をアプリに組み込むためにいくつかの API を使用しました。
使用していた API は主に二つです。

1. Maps JavaScript API

   Google Maps を JavaScript で操作することができる API
   サーバからの通信を受けて、 Google Maps の座標や向いている方角を動かすために使用。

2. Directions API

   ある地点から目的地までのルートを描画するために使用。

これらの API はインスタンス化を行うことで使用することが出来ます。
詳しくは公式を参照




【MESH】

Node-RED にデータを POST するために、カスタムタグが必要になります。
MESH SDK
から Node-RED に POST するカスタムタグを作成して、動きタグとボタンタグを繋ぎます。

スクリーンショット 2020-07-10 15.02.48.png
3.使用してみる!

アプリ URL から入って、個人プレイを選択。

スクリーンショット 2020-07-16 15.23.17.png

最初は MESH タグの設定を行います。
動きタグを振り、ボタンタグを押して Sign in


デフォルトでは弊社の最寄駅である神谷町に徒歩で向かうコースになっています。
それではいざ、、出社!!

スクリーンショット 2020-07-16 15.17.41.png


ランニングマシーンがあると最強ですが、家にはないので当然もも上げダッシュ一択です。

僕が入社したタイミングでは、新型コロナウイルスの影響で、全社員テレワークが実地されていました。
それは、もちろん新卒社員も例外ではありませんでした。
入社式、集合研修、 OJT までもがテレワークでの実施・・・
そんな『リモートワークネイティブ』とまで呼ばれた新卒社員ですが、たまにはオフィスが恋しくなる時だってあります。

そんな時、、
僕はこのアプリで出社してから、業務を開始するようにしています!


現在、コースは3種類用意してあります。
・東京神谷町にある CaMP を目指すコース
・山口県萩市にあるオフィスを目指すコース (萩市にある弊社オフィスにも僕と同じ新卒社員がいます!)
・ローマの観光地コロッセオを目指すコース (海外旅行に行きたかったという理由です!)
いずれは社内のメンバーの要望を聞いて、コースを追加していきたいですね!

実際に動いている動画も撮ってみたので是非ご覧ください。




4.終わりに

今回のアプリはあくまで配属後の研修課題ではありましたが、課題という重圧よりも作っていて楽しいという感情が強かったかなと思います!
Street View をマウスで動かすことなく自分の体で操作するというのは、これまで経験したことがなかったため、 API の使い方の幅広さに可能性を感じました。
機会があれば、今回のものより現実に近い感覚で使えるアプリを作ってみたいなと思います。