待ち合わせがスムーズになるWebアプリを作った

find.cateiru.com

どういうもの?

  • 相手の位置が矢印と距離で表示します。
  • Waaaaay!のWebアプリ版と思ってもらえればイメージしやすいと思います。
  • Androidは動作未確認です。多分うまく動かなさそうです。

使い方

  • 待ち合わせを作成を押して新しく待ち合わせを作成します。
  • ID、もしくはURLを相手に共有します。相手は、トップページからIDを直接入力するかURLにアクセスします。
  • 相手の位置情報が共有され矢印が相手に向き距離が表示されます。

技術的な解説など

相手との距離を算出する

位置情報の取得には位置情報APIを使用しています。位置情報APIでは自身の端末の緯度経度を取得することができます。

自分と相手の緯度経度情報を使用して距離を求めます。計算は愚直に三平方を使ってしまいたいところですが、地球は楕円状であるため三平方だと距離が離れると結構な誤差が生じてしまいます。そのため、地球の形状を考慮したヒュベニの近似式という計算式を使用して緯度経度から絶対距離(メートル)を算出しています。

相手の向きがわかる機能

位置情報APIDeviceOrientation APIを使用しています。

向きがわかるようにするためにはまず自身が向いていいる方位がわかる必要があります。そのため、DeviceOrientation APIを使用してz座標を求めます。計算方法などは以下の記事を参考にしました。

one-it-thing.com

これだけではただのコンパスであるため、これにプラスして位置情報から向きを求めます。
JavascriptにはMath.atan2という便利なメソッドが用意されています。これを使用することで角度θが求められます。

// 緯度経度では開始位置が上であるため座標を90度回転する
const y = -(target.lon - current.lon);
const x = target.lat - current.lat;
const d = Math.atan2(y, x);

return d * (180 / Math.PI); // 弧度法を度数法に変換する

相手と通信する機能

位置情報を相手と共有するのは、socket.ioを使用しています。もともと、firebaseのリアルタイムリスナーをしようかと考えましたがfirebase上に位置情報を保存しておきたくないためsocket.ioを採用しました。

バックエンドはGAE上にデプロイされています(Websocketはフレキシブルモードであるため現在はポーリングで通信しています)。

さいごに

これは、もともと別のプロジェクトで使うものでしたが単体でも十分有用であったため単独アプリとして作成しました。ぜひご利用ください!
また、雑に作っているのでissueやPRいただけると嬉しいです!

github.com