LoginSignup
32

More than 5 years have passed since last update.

Chromeデベロッパーツールでスマホのジャイロセンサーをエミュレートする

スマホはセンサーの塊!

以前、ICS MEDIAの記事「スマートフォンはセンサーの塊!
たった数行のHTML5とJSで扱えるセンサーまとめ(デモ・動画あり)
」で、Webの技術でスマホのセンサーへアクセスする方法を紹介しました。その中でも使用頻度が高め? なジャイロセンサーのエミュレートをChromeのデベロッパーツールでやっちゃおう! というお話です :iphone:

ジャイロセンサーのエミュレートはデベロッパーツールのSensorsでできる

ジャイロセンサーのエミュレートはデベロッパーツールのSensorsからできます。

まずは、作成したアニメーションをChromeで表示し、デベロッパーツールを開きます。

デベロッパーツールが開いたら、ウィンドウの右上にある「・・・」の中にある「Show console」をクリックしてconsoleを開きます。

consoleが開いたら、consoleの左上にある「・・・」の中に「Sensors」があるのでクリックして開きます。

cap1.png

これが「Sensors」で、この中の「Orientation」がジャイロセンサーです。

cap2.png

「Orientation」は標準で「Off」になっているので、セレクトボックスから「Custom orientation」を選択します。

cap3.png

alpha、beta、gammaの値を直接入力したり、右側のスマホ部分をドラッグでぐるぐると操作できます。

anime.gif

実機確認の回数が激減

ジャイロセンサーの搭載されていない環境(パソコンなど)で開発していると、実機での確認が増えます。このSensorを使えば、動作しているのかどうかを確認できるので便利です。ですが、ジャイロセンサーの感度やユーザーの体感は実機でしか試せないので、最後はちゃんと実機で確認しましょう :smile:

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
32