推しの非公式誕生日企画を手伝った話
https://2021birthday.shionchan.fan
↑これを作った話です。(※iOSだと動きません;;)
経緯
元々今回は自分が作らない感じだったんですけど、依頼相手が見つからず自分が作ることになりました。
そのため、3周年企画と比べると製作期間がだいぶ短かったです。
技術スタック
フレームワークがNext.js、UIライブラリとしてChakraUI、ホスティングにAmplifyを使っています。
Next.js
3周年企画をVueメインで作ったとき、SFCは構造化が難しい、OGPが面倒という学びがあったため、Next.jsを採用しました。
Chakra-UI
元々、頼まれたとしてもメッセージを表示する普通のWebサイトかなと思っていたので、ChakraUIを使って依頼されて3日くらいで作ってやろうと企み準備していました。が、提案されたのは寄せ書き風の展示だったのであまり活かせなかったです。
Amplify
Amplifyを使っている理由は、AWSのアカウントが既にあって、決済の登録やらを新規にする必要がなかったからです。
lambdaでAPIも立ててくれるっぽいし、ドメインもRoute53と連携してくれるしでとても便利。
実装しきれなかったところ
データの自動更新
12/08が誕生日で、翌日の0時まで寄せ書きの募集をかけていたので何度かデータを手動で更新する必要がありました。
CSVと画像フォルダを元に、twitterAPIを叩いたりしてjsonを出力し、publicに画像を配置する作業をpythonで書いていたのですが、amplifyのビルド環境でpythonを実行させるのが面倒でローカルで動かしていました。
それらの処理をjavascriptで書いていれば、csvと画像を用意してプッシュするだけでデータを更新させるのが簡単にできたので失敗でした。
iOS対応
自分がiOS端末を持っていないので人に試してもらっただけですが、おそらくはwebkitで動いているブラウザで動作しないようです。
windowsでwebkitブラウザを動かせる環境を探してみたのですが、webkit on windowsというものしか見つからず、これを自分でビルドするしか試す方法がなさそうです。
普段の開発はwsl2を使っているため、windowsの開発環境に疎くビルドに成功できていません。シオンちゃんのスマホがiPhoneなので、今後も考えると検証環境は整えたいです。
あと、AWS Device Farmという様々なデバイスを試せるサービスも使ってみたのですが、あくまでテスト用といった感じで、これを使いながらデバッグするのは厳しそうでした。
感想
急いで作るハッカソン的な楽しさはありましたが、締め切りに余裕があったほうが精神的に良いな~と思いました。
それと、前回と違いエンジニアが一人だったのでこれすごい!だとか、これ使いにくい!みたいな話ができなくて寂しかったです。
あと、企画のたびにこういうのを作ってくと途絶えたときに悲しくなるるし、自分が代替可能な存在じゃないと自我が暴走するので、後継者を育てていったほうがいいのかなとちょっと思います。