はじめに
地元の溝の口を舞台にした謎解き街歩きアプリ「みぞのくち@謎解きタイムトラベル」をReactで個人開発しました。企画から開発、デプロイまでの過程で学んだことを共有します。
開発動機
こちらはユーザーに触ってもらいたいというところが開発目標です。。。
具体的には１００人くらい、、できたらフィードバックももらいたい
これからそういった活動していきたい人の助けにでもなればと思い記事書いています。
作ったもの
みぞのくち@謎解きタイムトラベル
https://mizonokuchi-nazo.com
溝の口の街を実際に歩きながら楽しむ謎解きアプリです。スマホで参加し、現地のスポットを巡りながら謎を解いていきます。難易度はかなり低めに設定しています
下図はタイトル画面ですね。AI(私はcopilot)を駆使すればそれっぽい画像は作れますね。
技術選定
フロントエンド React：普段はAngularを使ってますが、これくらいの開発規模ならばReactのほうが早いですね。
ホスティング Netlify：無料で使いやすい。Vercelでもよかったかも
ドメイン取得 お名前ドットコム：ドメインが気にならないなら不要ですね
ユーザー分析 GA4：初利用でしたが、簡単でした。本格的な分析？したければ複雑になるのかな
フィードバック google-form：フロントエンド完結にしたかったのでアンケートはこちらで
つまずいたポイントと解決策
1.お名前.comでのDNSサーバ設定
問題：ドメイン取得後、ブラウザからアクセスできない
解決策：
①Netlifyでカスタムドメインを追加
②Netlifyが「このNSに変更して」と言ってくるので、メモする（例：dns1.p01.nsone.net など）
③お名前.comにログイン → ドメイン設定 → ネームサーバー変更
＊反映まで数時間～最大72時間かかることもある
詳しいところはこちらを参考にさせていただきました。
https://takayyz.com/blog/configure-customdomain-on-netlify/
2. GA4導入
それほど多くの人にアンケート答えてもらえるとおもわなかったので、GA4を導入。
何人くらいがアクセスしてくれたかを参考にしてました。あとは、どこらへんで離脱してしまったのかなど。
導入方法：
index.jsで初期化。あとは全画面共通で表示されるコンポーネント(header,footerなど)でpageviewイベントを飛ばすようにしておけば、完了ですね。あとはパスと
詳しい設定方法はこちらを参考にさせていただきました。
https://zenn.dev/kazuki23/articles/35f9227e5c45b2
どのように使えばより効率的にデータ収集できるかなど詳しい人教えてほしいです
// index.jsで初期化（一度だけ）
import ReactGA from 'react-ga4';
ReactGA.initialize('G-XXXXXXXXXX');
// ページ遷移ごとに送信
ReactGA.send({ hitType: "pageview", page: pathname });
おわりに
アプリ完成してリリースして、１週間ほどたちました。
成果としては、こんな感じでした！！
- 利用者数: 300人（想定の3倍！）
- 完走率: 9%（27人/300人）
- アンケート回答率: 30%（8人/27人）
他人から見ると少ないと感じるかもですが、初めて自分が作ったものを触ってもらうのは感動でした
(アンケートではなかなか辛辣な意見もありましたが( ´∀｀ ))
今後、開発活動行う方の助けになれば幸いです！！
関連リンク
アプリ：https://mizonokuchi-nazo.com
何か質問があればコメントでお気軽にどうぞ！