画面バキバキ

つくりの話

ヒビは4つの層でできている

ヒビは画像ではなく、タップするたびにその場で線を組み立てています。お手本にしたのは本物のガラスの割れ方で、次の4つを重ねています。

• 放射ヒビ：タップした点から5〜8本、放射状に伸びるギザギザの線。根元が太く、先端は髪の毛ほどに細くなります
• 枝：放射ヒビの途中から1〜2本ずつ分かれる短い線
• クモの巣：隣り合う放射ヒビどうしをつなぐ、内側に少したわんだ線を2〜3周。ところどころ、わざとつながない区画を残しています
• 白い芯：衝撃を受けた点に、細かいヒビが密集して白く濁った部分

本物らしく見せるコツは2つありました。ひとつは、線を短く区切って向きを少しずつ乱しながら、元の方向へ軽く引き戻すこと。細かくはジグザグに、全体ではまっすぐ進むので、本物のヒビの走り方になります。もうひとつは、枝を根元からではなく途中より先から生やすこと。根元から枝分かれすると木の枝に見えてしまい、ガラスに見えなくなります。クモの巣を円にせず「放射ヒビと放射ヒビをつなぐ線」にしたのも、本物の同心状のヒビが放射ヒビにぶつかって止まるからです。

カウンターの「本 ヒビ」は、この放射ヒビの本数を数えています。

ヒビが揺れていた失敗

最初の版では、タップしたときの白い光が消えていく間、ヒビがわずかにぷるぷる揺れていました。クモの巣の形を、描き直すたびに乱数で作り直していたのが原因です。いまはヒビの形をタップの瞬間に全部決めて保存し、あとはそれを描き直すだけにしています。何度描いても同じ形なので、ヒビは消えずに増えていきます。

砕け方と音

砕けるときは、その時点のヒビ入りの画面をそのまま40枚の破片に切り分けます。破片の境目は少しずつずらしてあるので、タイルではなく割れたガラスの形になり、画面の中心から外へはじけてから下へ落ちていきます。砕けた瞬間には画面が一瞬白く光ります。

音はすべてブラウザの中で合成しています。ヒビのときは短い「パキッ」、砕けるときは長めの「バリーン」に、破片が落ちる「チリン」という小さな高い音を数回重ねています。

いちばん効くのは手の中の振動

対応している端末では、ヒビのたびに短く1回、砕けるときは短い振動のあとに長い振動が続きます。持っている人には、画面より手のひらのほうが本当っぽく伝わります。振動が出ない端末（iPhone の Safari など）でも、音と絵だけで成り立つようにしてあります。

全画面と、そこからの出口

ドッキリには全画面が欠かせません。全画面にできるブラウザでは本物の全画面に、iPhone の Safari のようにできないブラウザでは、ページの上に画面いっぱいの黒い板をかぶせて全画面に見せています。

全画面ではボタンが見えなくなるので、振る・長押しだけで砕いて直せるようにしました。右上には目立たない「✕ とじる」も置いています。仕掛けられた人がパニックになったまま抜け出せないのは、笑えないからです。

iPhone で振って砕くには「動作と方向」の許可が要ります。この許可は「ドッキリ開始」を押したときに聞くようにしています。友達に渡したあとで許可の画面が出ると、ネタがばれてしまうからです。

振ったかどうかは、スマホにかかる力の強さで判断しています。手に持って歩くくらいでは反応せず、ぐっと振ったときだけ砕けます。

楽しみ方

• 仕込み方：「ドッキリ開始」で全画面にしてから、「ごめん、これ見てくれる？」と手渡します。触った瞬間に振動つきでヒビが走ります。
• ひと言そえる：渡すときに「落とさないでね」と言うと、相手は丁寧に持ちます。丁寧に持ったのに割れる理不尽さで、リアクションが大きくなります。
• タイミング：集まりの序盤はみんな自分のスマホを見ていて気づかれやすく、終盤は反応が鈍くなりがち。料理がひと段落した中盤が狙いどきです。
• ヒビの本数に挑戦：連打してヒビを何本まで増やせるか。自己ベストが残ります。

仕込むときの約束

• ネタばらしまでがドッキリです。 相手が笑って終わるところまで見届けてください。
• 運転中・仕事中の人や、気持ちが弱っている人には仕込まないでください。
• 動画を撮ったら、使う前に本人に確認を。ネタばらしなしで SNS に流すのはやめましょう。