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

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

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

目次

デモ

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

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

ポルポテストの主な機能

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

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

スマホ判定

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

let object = {

  getUA: function() {
    let ua = function(){
      let ua = navigator.userAgent;
      if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
        return 'スマホ';
      }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
        return 'タブレッド';
      }else{
        return 'PC';
      }
    }
    return ua();
  },

};

object.getUA();

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

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

window.addEventListener("deviceorientation", deviceorientationHandler);

function deviceorientationHandler(event) {
  const beta = event.beta;
  const gamma = event.gamma;
  const alpha = event.alpha;
}

24時間の時間測定

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

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

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

document.addEventListener('visibilitychange', function(){}, false);

おわりに

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