こんにちは、Yuiです。

先日はハロウィンでしたが、この自粛モードではなかなか外で仮装をして楽しむこともできないので、オンラインでハロウィンを楽しめるアプリをとみーさんと作りました！

今回はそのアプリについて書きます。

なかなかオフラインでハロウィンを楽しめない中、オンラインでハロウィンを楽しめるサービスを作りました！自由自在に顔を変換させて遊んでみてください！面白いと思ったら拡散して皆に知らせてくれると嬉しいです！https://t.co/LwxQx2EwmX pic.twitter.com/WL8ZFG8ogf
— Yui 🌘 Yuiko Ito (@yui_active) October 29, 2021

URL→https://ohmyface.ai/

使い方

使い方は以下のスライドの通りです。

まず、https://ohmyface.ai/ にアクセスすると今週の人気ランキングと全体のランキングを選ぶことができるようになっています。

このランキングはスタイルの変換数によって変動するようになっており、毎日21時に更新されます。

スタイルを選択したら、あとは変換したい画像をアップロードするだけです。
自動でローディングが走り、画像が変換されます。

※アップロードされた画像はサーバー側で保持することはありません。

構成

構成は以下です。

バックエンド...python
インフラ...AWS（API gateway, Lambda, dynamo DB, s3）
フロントエンド...Next.js + TypeScript + Chakra UI

ランキング機能実装のために、画像を変換する際にどのスタイルで変換されたかをタイムスタンプとともにpostするAPIを作り、データをdynamoに保存しています。

データを集計するために、上記の情報を元に変換数ごとに並び替えた状態でスタイルの情報を返却するLambda関数を作り、集計結果をdynamoの別テーブルに保存しています。
そのLambda関数はEventBridgeで一日に1回動かすようにしています。

そして、集計結果が保存されてるdynamoのテーブルにアクセスしてデータを取得するAPIを作って、クライアント側から呼び出してランキング順に表示しています。

フロントエンドに関してはいつものNext.js + TypeScriptで組みましたが、今回初めてChakra UIを使ってみました。
非常に使いやすかったので今後もリピートしようと思います。

あとがき

ハロウィンは終わっちゃいましたが、ハロウィン後も楽しめるアプリだと思うので、ぜひ遊んでいただけると嬉しいです！