画面上の好きな位置にメッセージを配置できるSNSをReactで作ってみた
はじめに
皆さんはサマーウォーズという映画をご存知でしょうか？こちらの映画に登場するSNSでは以下の画像のようにメッセージが表示されます。画面を覆い尽くすように表示される感じが魅力的ですね。今回はこちらのSNSをモチーフにしたWebアプリを作成してみました。
サマーウォーズに登場するSNS [1]
アプリについて
概要
今回作成したアプリです。
・ログイン
・投稿
・編集
・返信
・削除
などの基本的な機能を実装しています。
各機能について順にご紹介します。
主な機能
メッセージの投稿
1．画面右下の「+」ボタンをクリック
2．好きな位置を選択
3．内容を入力後、送信ボタンをクリック
の手順でメッセージを投稿できます。
各メッセージはposition: 'absolute'で配置しており、グレーの部分をクリックするたびにtopとleftのパーセンテージを計算しています。メッセージの投稿はリアルタイムで反映されるので、他のウィンドウ・端末から閲覧していると投稿時に瞬時に表示されます。
ちなみに今回のアプリではデザイン関連のライブラリを使用していないので、メッセージの投稿時などに表示されるスナックバーも自作しています。
メッセージの編集
1．メッセージ右上の「...」をクリック（メニューが開く）
2．メニューから「編集」を選択
でメッセージを編集できます。
投稿時と同様に送信ボタンをクリックした際にリアルタイムで反映されます。
ちなみにメニューが開く部分のコンポーネント（MUIで言うところのPopup）も自作しています。
メッセージへの返信
メッセージ右下の吹き出しアイコンをクリックするとメッセージへの返信内容がスレッド形式で表示されます。スレッド上部の入力欄から新しい返信を追加することもできます。
メッセージの削除
1．メッセージ右上の「...」をクリック（メニューが開く）
2．メニューから「削除」を選択
でメッセージを削除できます。
その他の機能
時間経過によるメッセージの非表示
メッセージで画面が埋め尽くされないように、投稿日時からの時間経過に合わせてメッセージが薄れていくようにしています。今の設定では投稿から1週間経過するとメッセージが完全に見えなくなります。メッセージのデータを削除しているわけではないので、自身の投稿一覧画面からはいつでもメッセージを見返すことができます。
ちなみにメッセージをピン留めすることで時間が経過しても薄くならない・非表示にならないようにしています。
メッセージのホバー
メッセージが重なっていくと下の方のメッセージが見えにくくなるので、ホバーしたメッセージが一番上に表示されるようになっています。
ライトモード・ダークモードの切り替え
ライトモード・ダークモードの切り替えができるようになっています。MUIのThemeのようなものを自作して色の切り替えを行なっています。
余談
URLが「board-ver-vue」となっていますが、こちらは元々Vue 2で作っていた頃の名残です。業務で使用する技術のキャッチアップのためVue 2で実装、個人学習のためVue 3へ移行し最終的にReactでリプレイスして現在に至ります。
※アプリの公開は現在停止しています
まとめ
今回はサマーウォーズに登場するSNSをモチーフにしたWebアプリを作成しました。一通りの機能が揃ったアプリが完成したので個人的には満足です。Firebaseに依存した作りになっている部分があったり、UI・UXも改善できる部分はあるので、勉強も兼ねていつかLaravel、GraphQL、AWSあたりの技術を使って作り直したいと思います。
参考文献
[1] 金曜ロードシネマクラブ：サマーウォーズ公開から10年。OZの世界は現代でどこまで実現された？徹底比較してみました！，https://kinro.ntv.co.jp/article/detail/20190718sw（参照2025-01-10）.
Discussion