Help us understand the problem. What is going on with this article?

ジャンケンが弱い僕はタブレットと合体した

クソアプリ Advent Calendar 2019 7日目の記事です。

はじめに

僕はジャンケンが弱い。1対1の心理戦では尚更だ。

しかし悲しいことに、世の中ジャンケンで決めることは多い。

テレビのチャンネル権、給食で余ったデザート、どちらが風呂掃除をするか・・・
人生においてここぞという決め事はいつもジャンケンで負けてきた。

このままでは負けっぱなしの人生だ。

次にこの手を出そうと頭で考えると負けてしまう・・・
自動でジャンケンしてくれるロボットアームがあったらいいのに・・・

そこで僕は自動で手を出してくれるアプリを作ることにした。

※ AIとか機械学習で勝率をあげるとかそういう技術レベルの高いことはやっていません。あらかじめご了承ください。

作ったもの

animation.gif
振ってジャンケン!
https://okmr-d.github.io/shake-janken/

スマホやタブレットを振ることで、ジャンケンの手をランダムで出してくれるWebアプリです。

これでもう次にどの手を出すか迷う必要はありません。

手の上にタブレットを置けばまるで自分の手のよう。相手にも違和感を与えることなく真剣勝負ができます。

ジャンケンする友達がいなくても大丈夫。スマホ片手に一人でもジャンケンができます。暇つぶしにはもってこいです。

端末の加速度センサーを利用するため、対応しているスマホやタブレットでご覧ください。ホーム画面に追加することで全画面で遊べます。

【注意事項】
・端末を振る際は落として壊さないよう十分ご注意ください。壊れても責任は負いかねます。
・本当に大事な場面でこのアプリを使うことは推奨しません。使って負けても責任は負いかねます。

工夫したこと

背景を透過した

この画像を背景に使うことで、人によっては端末が透けて見えます。
透過画像.png

振ったことをわかりやすくした

振った時に同じ手が連続で出た場合、画面に変化がないとうまく振れなかったように感じてしまうため、振ったタイミングに一瞬だけ背景色を変えるようにしています。
画像.jpg

技術解説

デバイスが振られたことを検知する

Webブラウザでシェイクジェスチャーを検知するには、 DeviceMotionEvent を利用してデバイスの加速度情報を取得し、計算して判定します。

シェイク判定の例
const threshold = 5 // 判定のしきい値
const last = { x: null, y: null, z: null } // 前の時点のデータ

const deviceMotionHandler = (event) => {
  // X、Y、Z 上のデバイスの加速度を重力度込みで与えるオブジェクト(m/s2)
  const current = event.accelerationIncludingGravity

  // 初回だけ
  if (last.x === null && last.y === null && last.z === null) {
    last.x = current.x
    last.y = current.y
    last.z = current.z
    return
  }

  // 現時点の座標と前の時点の座標の差分
  const deltaX = Math.abs(last.x - current.x)
  const deltaY = Math.abs(last.y - current.y)
  const deltaZ = Math.abs(last.z - current.z)

  // シェイク判定(差分がしきい値を超えた)
  if (deltaX > threshold || deltaY > threshold || deltaZ > threshold) {
    // シェイクされた!!!
  }

  // 現時点の座標を更新する
  last.x = current.x
  last.y = current.y
  last.z = current.z
}

window.addEventListener('devicemotion', deviceMotionHandler, false)

iOS 12 だとユーザーの設定変更が必要だったり、 iOS 13 からはパーミションの取得が必要だったりするので、別記事にまとめてあります。
iOS13+のSafariでdevicemotionやdeviceorientationイベントの許可を取得する方法

クソースコード

https://github.com/okmr-d/shake-janken

おわりに

世の役に立たないクソアプリを作るはずが、ジャンケン弱者を救う役立つアプリを生み出してしまいました。

クソアプリ Advent Calendar 今年も大人気ですね。明日も楽しみです。

よろしければ去年の作品もご覧ください。
「通知止まらんwww」を体験できるアプリを作った

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away