チャット背景エフェクト&声の試聴機能を作ってみた REALITY Advent Calendar #16
REALITY Advent Calendar 16日目担当、サーバチームのdaidaiです。
自分は今年の8月に入社しまして、今回初めて2泊3日の開発合宿に参加したので、合宿で開発したものを紹介していきます。
今回の開発テーマ
自分はサーバチームに所属していますが、サーバサイド以外の分野でも触れる部分を増やしたいという思いを以前から抱いていました。そこで今回運良くネイティブに手を出せる絶好の機会が来た！、ということで今回初めてKotlinでのAndroid開発に挑戦することに。
ちなみに合宿前の準備としては、Google公式のチュートリアルを2週しつつ、REALITYのAndroid周辺リポジトリの最低限のセットアップのみをした状態で臨んでいます。
というわけで今回はクライアント側メインで、ビジュアル的に映えるものをテーマに2つ実装してみました！
開発したもの1つ目. チャット背景エフェクト
1つ目は、チャット画面で特定の文字を入力したときに、背景にアニメーションエフェクトが表示される楽しい機能です。今回は「花火」と入力すると、花火が打ち上がるようにしてみました!
次に技術面についてですが、こちらは実装としてはかなりシンプルです。
まずLottieという、ベクターアニメーション表示用のライブラリを使います。ご存知の方もいるかもしれませんが、これはLottieFile(実態はjsonファイル)という形式のファイルにベクターアニメーションを定義し、それを使ってアニメーション表示できる便利ライブラリです。
そして背景アニメーションで表示するLottieFileを用意しつつ、チャット画面Viewの背景レイヤにLottieAnimationViewを定義しておきます。そして、特定の文字列がチャットで送信されるときにLottieAnimationViewを表示状態にして、アニメーションを開始させています。
ちなみに今回の LottieFile はマーケットプレースに落ちているものではなく、なんとPdMのむくどりんさんにAfter Effectsで素材作成していただきました！(むくどりんさんに𝑩𝑰𝑮 𝑳𝑶𝑽𝑬…)
それからこの機能開発ついでにアプリのアーキテクチャやKotlin自体の勘所、開発環境へのアプリ配布方法等の知見を得られたのも大きいです。Androidチームのドキュメンテーションも詳しく記載されていたので、ほぼ詰まることなくスムーズに進められました。
開発したもの2つ目. 声の試聴機能
先ほどの背景エフェクト機能はかなりサクッと実装が終わってしまったので、もう一つ実装してみました。
２個目はプロフィールに自分の声を登録して、他の人が聴けるようにする機能です。現在のREALITYは、視聴者の属性情報が分かる面が配信枠かプロフィール情報くらいしかありません。例えばカワボの配信者がいたとしても、配信を聞くまではカワボであることが認知できません。ということで、プロフィール画面に短尺音声を登録して、誰でも再生できるプロトタイプを実装しました!
最初に、実際のスクショをお送りします。
まず下記のようにプロフィールページに音声の編集ボタンを錬成して、音声録音画面に飛べるようにしました。
ボタンを押すと録音画面に遷移し、録音開始後にstopすると、下記のような確認画面が出ます。ここで保存前のプレビュー再生や録音再試行もできます。
そして録音が終わると、下記のようにプロフィール画面に再生ボタンが現れ、実際に音声を聞くことができます。
ちなみにプロフィール画面はJetpack Composeで宣言的にUI定義されていたのですが、そもそもJetpack Composeの概念自体知らなかったのでボタンを一個追加するだけでも結構時間が溶けました。
次に音声録音〜アップロードフローの紹介です。まず音声の録音についてはAndroid標準のMediaRecorderを使って、AAC 1chで.m4aファイルに録音しています。アップロードについては下記画像のシーケンス通りで、サーバからアップロード用の一時的なURLを取得し、そのURLに対して.m4aファイルをアップロードしています。
再生時はAPIから.m4aの再生URLを取得し、それをシンプルにMediaPlayerで再生しています。
ちなみに実装時、なかなか再生できなくて詰まってたところをAndroidチームのマネージャのメタおじさんが助けて下さいました。メタおじさんに𝑩𝑰𝑮 𝑳𝑶𝑽𝑬…(ちなみにストレージ側のアクセス制限が厳しすぎるのが原因でした)
まとめ
始めてガッツリAndroidを開発しましたが、超楽しかったです！先述しましたがAndroidチームのドキュメンテーションが結構しっかりしていたのでスムーズに開発を進めることができました。それから今回でAndroidのなんとなくのアーキテクチャや開発フロー、開発環境への配布方法等が把握できたのもなにより大きかったので実りある合宿でした。今後の業務にも活かしていこうと思います。
あと何より合宿会場の土善旅館さんが最高でした！爆速インターネット & 4Kモニタ複数完備 & ご飯が美味しい & マッサージチェア付き & 都内からのアクセス良しというスペックで、毎年行きたいと思えるレベルで居心地が良かったです。
最後に
明日17日目の記事は、サーバチームの頼れるテックリードの落合さんです！
お楽しみに。