re:Invent2023の展示物（LiteZilla）が楽しそうだったのでWebアプリとして作ってみた

こんにちは、CX事業本部のmorimorikochanです。

re:Invent2023が、先日12月1日まで開催されていましたが、皆さんは参加されましたか？
私は参加していないのですが、re:Invent2023の会場でとても興味を惹かれるものがありました。

これはLiteZillaという製品で、カラフルな棒を穴に差し込んでいくとドット絵を作ることができる展示物みたいです。めちゃくちゃ面白そうですよね。

re:Inventに参加されている人がみんなでワイワイドット絵を作っているのがめちゃくちゃ羨ましかったので、APIGatewayの素振りも兼ねてWebアプリとして作ってみました

各マスをクリックすると、そのマスの色が変化していきます。
右上にクラスメソッドのロゴも作ってみましたがいい感じに再現できてますね。（cの一部分が誰かに青色に塗りつぶされてますが無視してください）

こだわりポイント

色がカラフルでポップな感じですが、ブラウザ越しでみた際にもそういうような印象を持たせたかったので、筒から光が漏れ出てるような感じでCSSで装飾し、別の色に変化する際にアニメーションを入れてみました。

また、みんなで作業してるワイワイ感を出すために、多人数同時編集の機能も入れてみました。
技術的には、WebSocketを利用して実現させています。

技術構成

フロントエンドはReact+Viteを利用して構築しています。
Viteは初めて使うのですが、CRAと比較すると開発環境の立ち上げやビルドの実行が早すぎて開発がとても捗りました。
バックエンドはWebSocket APIを利用したAPIGatewayを前段に配置し、WebSocketの接続を管理させています。WebSocketの接続/切断および任意のメッセージをLambdaで処理させています。また、Lambdaの関数はRustで実装しています。
API GatewayのWebSocket APIの設定でだいぶつまずきましたが、以下の記事が大変参考になりました。

インフラ構成の管理はCDK(TypeScript)で行いました。
CDKではNodejsFunctionのように、Rustのビルドまで自動で行ってくれるL2コンストラクタを探していたのですが、rnag/rust.aws-cdk-lambdaが利用できました。

感想

オンラインで多人数でわちゃわちゃできるwebアプリってとっても面白いですよね。
作っている最中に、以前参加したフェリーハッカソンというイベントであるチームの「フェリーに乗っている人全員で同時に対戦できるオセロのwebアプリ」というアイデアに当時衝撃を受けたことを思い出しました。
最近はNintendoSwitchでもTETRIS99やF-ZERO99などの多人数で遊ぶゲームがどんどんリリースされています。
いつかそういうサービス・アプリケーションの開発に関われると楽しいだろうなぁと感じました。

今回作ったものはまだまだ改善すべきところがいっぱいあるので、余裕を見つけてちょこちょこ改善していければ良いなと考えてます。