Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
65
Help us understand the problem. What is going on with this article?
@okumura_daiki

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

More than 1 year has passed since last update.

クソアプリ 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イベントの許可を取得する方法

クソースコード

おわりに

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

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

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

65
Help us understand the problem. What is going on with this article?
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
okumura_daiki
ソフトウェアエンジニャア
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
65
Help us understand the problem. What is going on with this article?