最近のほとんど全てのスマートフォン(以後「スマホ」)にジャイロセンサーが搭載されています。これによってスマホの傾きや加速度に基づく動きをスマホ自身で(つまりスマホ内のアプリケーションで)取得できるようになっています。

この機能は HTML(と JavaScript )をベースとするウェブアプリケーションからでも使うことができます。具体的には iPhone と Android によって若干の実装の違いがあったり、iPhone の場合は iOS のバージョンによって挙動が(結構頻繁に)変わったりして対応が大変といえば大変ですが、センサーの値を取得すること自体は JavaScript で可能です。つまりネイティブのコードを使わず、ウェブのアプリケーションからであってもスマートフォン自体の挙動を検知することが可能なのです。この辺りの詳細に関する情報は先日のブログにまとめているので、JavaScript の実装についてはこちらを参照ください:
iOS(特に 13 以降)でのモーションセンサー有効化


このモーションセンサー機能を視覚的に体験できるようなサービス(というか HTML ファイル)を作って公開してみました。

まず HTML ファイル自体はこちらの index.html ファイルを参照ください。基本的には外部ファイルを使わずに index.html ファイル1つだけで実装しています:
https://github.com/dotnsf/mos/


また実際の挙動を確認するにはこちらの URL に(スマホのウェブブラウザで)アクセスしてみてください:
https://dotnsf.github.io/mos/


使い方は、上述の github の README.md にも記載してありますが、一応こちらでも紹介しておきます。まずは利用するスマホが iPhone(iOS) で、そのバージョンが iOS 12.2 以上 13 未満の場合は事前に設定 - Safari で「モーションと画面の向きのアクセス」を ON に設定しておく必要がある点に注意してください:
2020011001


その上で上記 URL にスマホのウェブブラウザでアクセスします。ここで利用するスマホが iOS 13 以上の場合は以下のような「センサーの有効可」というバナーが上部についた画面が表示されるので、このバナーをタップします:
2020011101


すると「動作と方向へのアクセス」を許可するかどうか聞かれるので「許可」を選択してください:
2020011002


これでセンサーを利用する準備が完了です。iOS 13 以上でここまでの手順を実行するか、スマホが Android や iOS 13 未満の場合ははじめから以下のようなピンクの矩形が表示されるはずです:
2020011102


このピンクの矩形部分をホールド(指で押さえて、離さない状態)している間だけスマホのモーションセンサー値を取得します。試しにほんの一瞬だけタップしてすぐ離してみてください。以下のような2つの折れ線グラフが表示されるはずです↓:
img_taponce


これらの折れ線グラフですが、上はピンクの矩形部分をホールドしていた間の3軸ジャイロセンサーによる3次元加速度の推移です。上記例では8つのデータが記録されていますが、ほんの一瞬だけでもかなりの量のデータを取得します。ちなみに x が左右方向、y が上下方向、z が前後方向への加速度を表しています。

また下は同様に矩形部分をホールドしていた間のデバイスの傾きの推移(単位:度)です。上の例では前後方向が約50度、左右方向が約-5度の状態であったことがわかります。


もう少し実践的(?)な動きをしてみます。試しにスマートフォンを持って、その場で上半身だけ走る時のように両手を交互に前後に動かしてみた(足は全く動かさず)時に記録してみた時のグラフが以下です↓:
img_jog1


下のグラフから大きく手を振っていたことでスマホ自体が前後/左右方向へ傾いていたことがわかります。なおこの時は大きく3回手を前後させました。

次に同じようにその場で走るのですが、今度はその場で足も動かしてみました。実際には走らないのですが、トレッドミルを使っている時のようにその場で走る足踏みをしながら手を前後に動かす、という動作をした時の様子です(ちなみにこの時は5回手を前後させています)↓:
img_jog2

その場で走る動作をしているため上下運動が加わり、腕の前後運動のグラフと y 軸方向(上下方向)の加速度のグラフが同じような動きになっていることがわかります。

そして今度は「実際に走る」動作をしながら測定してみました↓:
img_jog3

実際に走って横方向への移動が加わっているため、x 軸方向への加速度が大きくなっていることがわかります。


また、今度はスマホを持って「縄跳び」をするような動きをしながら測定してみました↓:
img_nawatobi


この例では3回縄跳びを跳ぶような動作をしましたが、縄跳びを回す動きの様子が前後/左右のスマホの傾きとして現れており、ジャンプして着地する時の様子が y 軸の加速度に現れている様子が確認できます。


と、まあこんな感じのことが HTML と JavaScript だけで実現できています。このサンプルでは取得したモーションデータを単にグラフ化して表示しているだけですが、より実践的にはここで取得したデータを MQTT で送信してデータベースに記録したり、記録した内容を AI の学習データに使ったり、VR アプリに応用したり、・・・といったバックエンド連携と合わせての応用が考えられます。そんな実践で使えるモーションデータを自分のスマホを使って取得するサンプルとして紹介しました。改良に興味ある方やこのアプリの詳しい実装内容に興味ある方は index.html ファイルの中を参照いただければと思っています。