推しアイデア
スマホのときとタブレットの時で表現できる幅が変わる
璃奈ちゃんボード
とあるアニメの表情を出すのが苦手な少女が表情を出すためのボード
作った背景
璃奈ちゃんボードかっこかわいくて再現したかった
推し技術
表情が出せない人のために音声から感情を分析したい
プロジェクト詳細
璃奈ちゃんボード
ラブライブ！虹ヶ咲学園スクールアイドル同好会に登場する天王寺 璃奈さんの使用する「璃奈ちゃんボード」の簡易再現プロダクト
kawaii
使用フロー
通常
- カメラモードやボイスモードを選択する
- 顔の前に持ってくる
- 表現しよう！
カメラモード
カメラ使用許可を出して顔の前に持ってくる！ スマホ・タブレットの外カメが顔を識別して表情を変化させる
https://youtu.be/PGeW4MoiGLE?si=jz2Eux7b2z-BFtEK&t=15
ボイスモード
右下の認識開始を押してから後はしゃべるだけ！ HumeAIを使用して感情分析して閾値を越した感情を表示させる
パネルモード
急に好きな表情を出したくなる時があるともいます
璃奈ちゃんも日常生活では特定のタイミングのみ出すことが一般的です
そんな時に声を出したり、表情を変えたりするのは大変です。
そのため表情一覧からタップしたら表示されるようにしました
->今回は笑顔を選択
エディター・ギャラリー
未実装ですが自分でゼロから作って人に共有する機能です
技術の話
アーキテクチャ
Draw.ioMCPやってみたけどプロンプト悪そう
- Vite + Reactベース
- tailwindでスタイリング
- Cloudflareにフロントをデプロイ
- 認証・DB・StorageはFirebaseを利用
- oxlint/oxfmtを使用
- 感情分析はHumeAIを使用
技術以外の話
利用シーン
感情を出すことが難しい時に使いましょう
余談系〜この先は見なくてもよいです〜
本家が作ったやつもある！
￥36,300で買える物理のちゃんとしたやつもあるが高い...
アニメ履修してて気づいた仕様変更
当初の仕様は自分の表情がパネル上に反映されるものを想定していた しかし、このプロダクト作成にあたりアニメニジガクを履修するとこのボードをつける理由は本当は表情が出すことが苦手だから表情をつけるための手段だったのです
そのため、仕様を途中で修正した 旧：「実際の表情→表示の表情」 新：「音声→感情→表情」
璃奈ちゃん周りのYoutube集
【ラブライブ！】りなりーの『璃奈ちゃんボード』シーンを集めてみた【虹ヶ咲学園】
要件外(スコープから外したこと)
- 手放しで装着すること →手軽に使いたいから専用機器によっていく手放し装着は違う気がする
