【個人開発】ビンゴアプリを作った話

作ったきっかけ

今年の３月頃に行われたとある行事の際にビンゴをやることになり、そのためにネットにあるのではなく独自でアプリを作ろうと思ったのがきっかけです。この頃は生のjavascriptをゴリゴリ触っていたのである程度の機能はできました。

初期リリース時の機能など

初期リリースはビンゴカード、ビンゴマシーンの機能を作りました。また行事ではビンゴカードを印刷したいとのことだったのでビンゴカードの一斉印刷用のページを作りました。ただ、パフォーマンスを考えていなかったので必要数を印刷するために印刷プレビューの前に固まってしまうことも続出しました。ビンゴマシーンの方はスクリーンに投影して行うために操作画面を分けられるようにしました。これにはこのときにchromeのCanaryチャンネルで利用できた任意の要素をピクチャーインピクチャーできるdocumentPictureInPictureを使いました。ただし、それ以外のブラウザも対応するために普通のサブウィンドウも利用できるようにしました。

Next.jsへの移行作業1

その後、検索に少しずつ引っかかってきたときにNext.jsに移行し始めました。このときは私の技術がなかったのでビンゴカードのみを移行しました。このときに一般的なビンゴカードにあるBINGO列の機能をつけました。

Next.jsへの移行作業2

最近になり、検索による流入も増えてきて他のアプリでもNext.jsを使ってきた事によって技術を身に着けてきたのでビンゴマシーン本体も移行しました。このビンゴアプリの特徴であるビンゴマシーンの操作画面分離のところで苦労しましたが、最後は親のDOMのclickイベントを発火されることでなんとか解決しました。

また、設定機能はrecoil永続化を使用しました。

やろうとして諦めたこと

Next.js移行時にやろうとして諦めたことはビンゴカードページとビンゴマシーン本体との連携です。最初は連動できればビンゴになった人数が運営者からわかると便利かなって思ったのですが、サーバーを準備、管理するのが大変だったので諦めました。

最後に

もしイベントでビンゴを行うときにはぜひこのアプリをご利用ください。