謎解きアプリを作って妻にサプライズプレゼントした話
メリークリスマス！🎄
これまでのアドベントカレンダー、皆さん楽しんでいただけましたでしょうか？毎日、チームメンバーの熱い技術記事が投稿されており、どれもとても面白い内容ばかりでした。もしまだ目を通していない方がいれば、この機会にぜひ読んでみてください！
さて、ちょうどクリスマスということで、2年前のこの日に妻へのサプライズプレゼントとして謎解きアプリを作ったエピソードをお話ししたいと思います。プレゼントを直接渡すのではなく、謎解きの形式でアプリを通じて贈るというアイデアを形にしたものです。技術的というより少し個人的な話になりますが、最終日の記事として渡りに船と言いますか、このタイミングにぴったりだと思い執筆しました。
1. 背景（なぜアプリを作ることにしたのか）
クリスマスプレゼントは毎年必ず贈るわけではないのですが、ある日、妻がとあるYouTube動画を見ながら、藪から棒に言いました。
『こんなサプライズされてみたいなー』
その時は軽く聞き流してしまったものの、後日、イオンモールでバナナが好きな愉快なキャラクターのQRコード型スタンプラリーを見かけた時にアイデアが浮かびました。
ちょうどクリスマスが近く、妻が「謎解き」や「宝探し」が好きなことを思い出し、家の中を舞台にしたミニゲームのような体験型プレゼントを作ろうと考えました。
2. アプリの概要
謎解きアプリと言っても、非常にシンプルな仕組みです。
- 静的なWebページを数ページ作成。
- 各ページには1問ずつクイズを掲載。
- 各URLをQRコード化して、家の中に隠す。
- クイズを解くと、次のクイズページのQRコードの場所が分かる仕組み。
- つまり、WebサイトとQRコードを活用した簡単な宝探しゲームです。
以下が実際のクイズ画面の一例です：
クイズの答えは、どこの家にもいる「赤ピクミン」です。赤ピクミンの近くにQRコードを貼り付け、スマホでそれを読み取ると次のヒントページが表示される流れです。最後のクイズを解いて正解すると、プレゼントの隠し場所が分かるようになっています。
3. 準備と構築
Webページの作成
Webページの作成にはCreate React Appを使用しました。
静的なページをReactで構築し、ローカルホスティングにはViteのビルトインサーバを利用しました。通常は開発環境で使うものですが、同じWi-Fi環境下にあるため、スマホからもアクセス可能で手軽な方法でした。
QRコードの生成
各ページのURLをQRコード化。生成には無料のツールを利用しました。一応、URLは推測されないようにしましたが、特に意味はありません（笑）。
クイズを考える
クイズは全部で10問ほど。正直、この工程が一番時間がかかりました。内容は日常生活や家の中に関連したもので、直感的でありながら少し考える楽しさを意識しました。
QRコード＆プレゼントを配置する
ゲームのスタート地点は、クリスマスツリーのオーナメントに隠したQRコードです。これをスキャンすると、最初のクイズが表示される仕組みになっています。ただし、都合よく見つけてくれるわけではないので、『オーナメントを開けてみて』と促しました。
その他のQRコードは家の中のあちこちに隠し、クイズを解かないと次の場所がわからないよう工夫しました。準備は1週間前から進めましたが、幸運にも当日まで気づかれることなく完了できました。
4. ちょっとした工夫ポイント
せっかくクリスマスなので、画面に雪を降らせる演出を加えてみようと思いました。調べてみたところ、まさにうってつけのライブラリを発見。それがこちらです：
このライブラリは、簡単な定義だけでページ全体に雪を降らせることができます。以下は公式ドキュメントから引用したサンプルコードです。
import React from 'react'
import ReactDOM from 'react-dom'
import Snowfall from 'react-snowfall'
ReactDOM.render(
<div style={{ height: 400, width: 400, background: '#282c34', position: 'relative' }}>
<Snowfall />
</div>,
document.querySelector('#app'),
)
このコードをそのまま使えば、背景に雪が舞うエフェクトを手軽に追加できます。
画像元:https://github.com/cahilfoley/react-snowfall
5. 結び
結果的にサプライズは大成功でした。技術的にはシンプルで簡単なものですが、妻はとても楽しんでくれました。妻の職場でも話題にしたようで、『QRコード作れるん！？天才や！』と褒められ、なんともリアクションに困る結果となりました（笑）。ですが、妻が楽しそうに話してくれたことが何より嬉しかったです。
プレゼント自体もとても気に入ってくれたようです。何をプレゼントしたかは...内緒です🤫
さて、以上となります。皆さんがそれぞれの形で素敵なクリスマスを迎えられますように！
クリスマスツリーの下、息子のプレゼントが一つ多いことに、彼女はいつ気づくかな。
Discussion