炎魔法「フィンガーフレアボムズ」

5本指を立てたら 魔法が撃てた

カメラに手のひらを向けて、5本の指を立ててください。約0.45秒で魔法陣が現れ、炎魔法が発動します。指を閉じれば、もう一度撃てます。

詠唱不要。杖も不要。必要なのは、あなたの右手か左手です。

ここで魔法を撃つ

無料・登録不要

光の点滅に注意
白いフラッシュ、点滅、画面の揺れを含みます。光の刺激や画面の動きが苦手な方は、体験をお控えください。効果音は初期状態でOFFです。

5本指を立てたら魔法が撃てたの操作イメージ

カメラの許可が必要です。マイクは使いません。

カメラは停止しています。

使い方

  1. 手のひらをカメラに向ける

    開始ボタンを押してカメラを許可し、片手を画面に収めます。指先が重ならないように、手のひらを正面に向けてください。

  2. 指を立てて炎を出す

    立てた指の先に炎が出ます。右上の「立てた指」で、何本認識されているか確認できます。

  3. 5本立てて魔法を撃つ

    5本を立てたまま約0.45秒待つと、炎魔法「フィンガーフレアボムズ」が発動します。魔法陣と爆発が出れば成功です。音を出したい場合は、画面下の「効果音 OFF」を押してください。

  4. 指を閉じて、もう一発

    指を2本以下にして約0.35秒待つと、次の魔法を撃てるようになります。前の演出が終わったら、また5本立ててください。MP切れはありません。

手を斜めにすると、指を伸ばしていても認識されないことがあります。背景をすっきりさせ、手のひらを正面に向けてください。体験を止めたいときは、画面下の「カメラを停止」を押します。

どんな仕組み?

手の21か所の座標から、指の関節角度と手首から指先までの距離を調べ、伸びている指を判定します。立った瞬間に火花を、伸ばしている間は炎の粒子を描画します。効果音は音声ファイルを再生するのではなく、Web Audioで合成しています。

この体験は、ml5.jsp5.jsを使って制作しています。手の認識は環境によって揺れたり途切れたりするため、正確な計測や判定には使用しないでください。

困ったときは

5本を伸ばしても発動しません。

右上のカウンターが5/5になっているか確認してください。親指を十分に開き、手のひらを正面に向けたまま約0.45秒維持します。

続けて発動させるには?

一度、伸ばした指を2本以下にして約0.35秒保ちます。その後、前の演出が終わってから5本を伸ばしてください。

音が出ません。

初期状態では効果音がOFFです。体験画面の「効果音 OFF」を押すとONになります。端末の音量や消音設定も確認してください。

カメラが起動しない・手が認識されないときは?

HTTPSのページで開き、ブラウザのサイト設定からカメラ利用を許可してください。他のアプリがカメラを使っている場合は終了します。明るい場所で、指先まで画面に収め、手と背景が重ならないようにすると認識しやすくなります。通信制限や拡張機能によって認識モデルを読み込めない場合もあります。

スマートフォンでも使えますか?

カメラに対応するブラウザを想定していますが、端末やブラウザによって動作速度・全画面表示の対応は異なります。両手を使う体験では端末を安定した台に置いてください。SNSアプリ内のブラウザで動かない場合は、通常のブラウザで開き直してください。

映像や音声は送信されますか?

本アプリには、カメラ映像・切り取り画像・手の座標をサーバーへ送る処理を設けていません。手の認識と描画はブラウザ内で行い、マイクは使用しません。ただし、ライブラリや認識モデルの読み込み、Google Analyticsによる利用状況の解析のため、外部サービスへ接続します。詳細は「カメラとデータについて」をご確認ください。