ポルポテストを作ってみた

ポルポテストを作ってみた

ジョジョの奇妙な冒険は見たことなんですけど、Twitterで見かけてアイディアとして面白いと思ったので、自分でもポルポテストを作成してみました。

デモ

こちらで動作確認できます。

See the Pen jojo-polpotest by mizusawa (@webty_mizusawa) on CodePen.

ポルポテストの主な機能

ポルポテストの主な機能は、以下の4つがあげられます。これらの機能さえを実装できれば再現は可能できます。

  • スマホ判定(UAの判別)
  • ジャイロセンサーの値取得
  • 24時間の時間測定
  • ブラウザタブの切り替わり判定

スマホ判定

実際のポルポテストは、UAと画面サイズでスマホ判定していますが、今回は、UAだけでスマホの判定をします。

ジャイロセンサーの値取得

ジャイロセンサーは、deviceorientationイベントで値を取得することができます。

24時間の時間測定

JSでの日付処理は、moment.jsを用いるのがラクだと思います。使い方は、公式ドキュメントを参照してください。

ブラウザタブの切り替わり判定

ブラウザタブの切り替わりは、visibilitychangeイベントで取得可能です。

おわりに

これらを組み合わせることで簡単に実装できます。ジャイロセンサーを初めて使ってみたのですが、スマホを傾けたら値が変わるのって結構楽しいですね!スマホゲームでも、ジャイロを使ったもので遊んだことなかったので、新鮮でした!