がーりょっくないよん
Syunsuke Tamura
@tamushun
マル
@smaru1111
アイデアに関すること
画力ありきのゲームでは実力が拮抗しない
飲み会のゲームとして、お絵かき伝言ゲームが始まったとしましょう。
画力ありきのゲームなので、当然画力がある人が勝ち続きやすいゲームになってしまいますね。
そこで、私たちは画力無しでも平等に戦えるように、
絵を描く部分をプロンプトで生成AIに描いてもらうゲームにして、
より幅広い層に楽しんでもらえるようなゲームにしました。
実際に、生成AIに指示して絵を描いてもらうと、予想だにしない絵が生成されたりするので、盛り上がること間違いなし！
技術に関すること
技術選定について
今回のプロダクトではユーザの操作に反応して画面の描画を変える処理が頻繁に走ります そのため、ほとんどのページでSCRを採用することになり、Next.jsを採用してもあまり利点を活かすことが出来ないということで、Reactを採用しています
LINE Botを活用したOTP(One Time Password)認証の実装
現在普及しているOTPによる認証はemailやSMSを使用したものや、専用のアプリケーションを使用したものがほとんどです 今回、私たちはLINE Botを使用することで、ユーザにより身近なLINEでOTPの発行を行うことができるように実装しました
セキュリティ面
セキュリティ面で主に以下の点に注意して実装しました
- CookieによるSessionIDの管理
- HttpOnlyとSecureの属性を付与し、XSSや盗聴の対策を行なっています
- 上記の属性を付与する都合上、CORSによるAPI通信ができなくなるため、Yarpでリバースプロキシサーバを用意し、そこからリクエストの振り分けを行うようにしています
- SQLインジェクション対策
- DBに対してこちらの意図しない操作を行なわれないようにリクエストパラメータをDB操作に使用する際にはプレースホルダを使用するようにしています
query := fmt.Sprintf("insert into users (id, name, password, line_uid, icon_image_url) values (?, ?, ?, ?, ?)")
- DBに対してこちらの意図しない操作を行なわれないようにリクエストパラメータをDB操作に使用する際にはプレースホルダを使用するようにしています
プロダクトに関すること
WebSocketを使ったリアルタイム通信
参加者待機画面やゲーム進行の同期などで、リアルタイム性が求められるので、WebSocketを使ったリアルタイム通信を採用しました。
アトミックデザインの採用
フロントエンドを構成するコンポーネントをアトミックデザインを意識して細かく作成することで、今後機能追加やデザインの変更があった際に柔軟に対応できるように開発しています
ニューモフィズムデザイン
今回は、ニューモフィズムデザインというデザインを採用しました。
新鮮な見た目で、視覚的に興味を惹いてもらえるようになっています。
また、色のメリハリが弱いので、ボタンの色を使い分けたり、凹凸をうまく利用するなどして、ユーザビリティを高めたデザインにしました。
成長に関すること
ハッカソンで得た知識
CORSを起こさないためにリバースプロキシを使用しているが、それをAzure上で実現する方法が自分たちではわからなかったが、メンターにAzureFrontDoorを教えていただき、実現できました オルターブースの方々、ありがとうございました！！
ハッカソンでの反省点と改善
技術選定をMacを基準に考えていたため、ハッカソン期間中にWindows環境でのみ動作しないという問題が発生しました そこで、ハッカソン後、Windows環境で動作しない原因だと考えられた部分の技術選定を変更することで開発を継続することができるようにしました
開発時に起こったトラブルとその対応
チームメンバーの一人のPCのスペックが足りず、バックエンドとフロントエンドを同時に動かすことができないというトラブルが発生しました
そこで、バックエンド開発者のlocalhostをグローバルに公開し、リバースプロキシサーバのバックエンドのプロキシ先をその公開したアドレスに設定することでフロントエンド開発者が自PC上でバックエンドを起動せずに開発できるようにしました
一番の推しポイント！！
ゲームの流れ
- ログインする
- 部屋を作って、他の参加者に入ってもらいゲームを開始する
- お題が出されるので、そのお題に沿った生成プロンプトを書き込み、絵を生成する
- 他の参加者が生成された絵を見て、お題を当てる
- 3・４を繰り返し、点数を競う