REALITY chat for web - REALITY Advent Calendar #7

2021年12月7日 07:00

サーバエンジニアの阿部です。開発合宿で訪れた宿には24時間入れる足湯があったのですが、足元からじんわり温まるしのぼせずにゆっくり入っていられて良かったです。これがワーケーションか…。

この記事は REALITY Advent Calendar 2021 の7日目の記事です。開発合宿で作ったものについて軽く紹介したいと思います。

web でチャットを作ってみる

スマホでゲームをしていたり、PCで作業していたりする間って、スマホアプリ触りにくくないですか。私は普段家でスマホゲームをオートプレイ状態にしつつ PC で web を見ていることが多いのですが、その間スマホの他のアプリは使えないので不便に感じることも多いです。スマホメインのアプリも PC や web からも触れると使い勝手が良いのにな〜。

REALITY の web は公式配信の閲覧とコイン購入・口座登録などの一部機能しか提供していませんが、web でできることが増えればもっとコミュニケーションが活発になるかもしれない！

そんなわけで、今回の開発合宿では REALITY のチャット機能を web に移植して動かしてみました。大抵のチャットアプリは web / PC でも利用できるようになってますし、web にチャット機能があれば配信中でもメッセージのやり取りができて便利そうな気がします。

そして API は既に一通り揃っているので、合宿の短い開発時間でもそこそこ実装できるはず！（重要）

REALITY chat for web

そんな訳で、作ったのがこちらです！どーん！

スクリーンショット 2021-12-03 11.47.02

シンプルで洗練された UI ですね！どこかで見たことがある UI だとか言わない。良い UI というのはそれが標準になるものなんですよ。

機能としてはこれくらいを実装しました。

・チャット一覧の表示
・選択したチャットのメッセージ表示
・新規メッセージの送信 (テキストのみ)
・メッセージの自動受信
・プッシュ通知 (手動)

普通の機能ばかりなので特筆することもないのですが、チャット一覧を取ってきて、チャット名をクリックするとメッセージを確認できて、メッセージを投稿できて、ページを開いたままでも受け取ったメッセージが自動で反映される。正味1日の開発でしたが、最低限チャットアプリと呼べるくらいのものにはなったかな？

チャットなら通知欲しいよねということで、Service Worker を使ったプッシュ通知も実装しました。合宿では通知をサーバから自動で送るところまでは辿り着かなかったのでお試しレベルですが。Service Worker はページとは独立してバックグラウンドで動くため、ページを開いていなくても通知を受信できます。だいたいの主要ブラウザで動きますが、Safari だけは Push API をサポートしていません。かなしい。

自由研究

さて、今回の合宿は1日目の記事にもあるように「気になる技術の自由研究」が目的でした。そこで今回のチャット機能は既存の web のコードベースとは完全に独立させて、業務では普段使っていない Nuxt.js + Tailwind CSS で作ってみました。

Nuxt.js は Vue.js のフレームワークで、機能としてはサーバーサイドレンダリング (SSR) や静的サイト生成 (SSG) が代表的です。それ以外にも様々な便利機能が搭載されており、ディレクトリ構成に従って自動でルーティングをしてくれたり、import 文を書かずとも Component を自動で import してくれたりと非常に便利でした。これは開発体験良いですね。今の Vue 2 製の web に導入するのは既存のコードの移植が必要になるのでちと大変そうですが、開発効率も上がりそうなのでいつか導入してみたいところ。

合わせて試した Tailwind CSS はその名の通り CSS ライブラリ。

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
 <div class="flex-shrink-0">
   <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
 </div>
 <div>
   <div class="text-xl font-medium text-black">ChitChat</div>
   <p class="text-gray-500">You have a new message!</p>
 </div>
</div>

これは公式サイトに掲載されているコードですが、このように様々な class を指定することで UI を実装します。ごちゃごちゃ class 付けるの微妙では…と思って避けてたんですが、使ってみるとなかなか便利でした。

各 DOM 要素にちょっと style を付けるために毎回 class を定義する必要がなくなるため、名前を考える必要もないし CSS も肥大化しないのが良いです。Tailwind の class 名が覚えられず調べながら書くことになるのがやや大変でしたが、慣れると効率よく開発できそうだなと。こちらは部分的な導入もできそうなので、機会があれば業務でも使ってみたいですね。

明日のアドベントカレンダーは！

明日のアドベントカレンダーは、合宿の夜に「メタメタメタメタメタバース！」と歌いながらふしぎなおどりを踊っていた漫喫さんによる「Web会議でアバター参加する最強ツール」です！お楽しみに！