▼個人開発
期間：2023年4月 – 現在（11ヶ月）
地図上でリアルタイムにアーティストのライブ情報を探せるWebサービス"LiveGT"を一人で個人開発。 広告代理店時代の経験を生かしてよりモダンなUIを目指し、適切なボタン配置や各種モーダルへの導線設計を実施。 法的要件をクリアするため法律事務所と連携して仕様の変更や新規機能の実装などを進める。
技術スタック
・React.js 18.2.0
・Node.js 18.13.0
・Express.js 4.18.2
・MongoDB
実装に苦労した機能
・地図操作
Leaflet.jsを使用してMapTilerの地図タイルを操作
ライブハウスのリンクや都道府県をクリックすることで地図の遷移を行うが、モーダル・画面の遷移を行うたびに地図が微妙に動いてしまったり初期位置に戻るなどしたもののuseEffectで地図の移動を厳密に管理することで解消
・ライブ情報のフェッチ
必要な分のみライブ情報をフェッチするために表示する地図タイル内の座標のライブ情報のみをリクエスト
ライブ情報を重複して取得しないよう地図タイル・ライブ情報を一意のIDで管理し、フェッチングの最適化を図る
・ユーザー認証
チケットの返金申請ステータスや申請理由を申請者とチケット販売者以外が見られないようにフェッチングのたびに認証を行い、サーバー上でDBから取得したオブジェクトを整形してレスポンス
LiveGTの管理システムにワンタイムパスワードを導入。セキュリティを担保するため一定数以上認証に失敗すると、登録されたメールアドレスに通知を出すように設計
・チケット決済
チケット決済にはStripeを利用。チケット購入に必要なチェックアウトセッションの作成や送金・返金に関してサポートに問い合わせて導入を進める
チケットの過剰販売を防ぐためのDBスキーマ設計や各APIに在庫確認プロセスを導入
チケット販売者への売上金送金・送金レポートの送信ロジックの構築
・チケット(QRコード)管理
チケット購入に際してメールにimgタグでQRコードを表示するのに苦労
セキュリティ上QRコードを画像でサーバーに保存することを避け、毎回暗号化してQRコードを発行し、QRコード認証のたびに復号する方法を採用
・ライブ映像の配信
当初はアーティストが投稿する過去のライブ映像をクラウド(BackBlaze)に保存し、リクエストに基づいてクライアントに配信する仕様をとっていたものの、データ転送量が多く、費用の面から動画配信ロジックを再検討。YouTubeを利用して動画を配信する形で着地
・DB設計
当初はライブ情報スキーマのフィールドに直接販売したチケットの情報を格納していたものの、ドキュメントサイズや拡張性の問題からチケットを別スキーマで管理
複雑なクエリでの取得が多いスキーマに関しては検索性能を向上させるためインデックスを追加