チャットアプリ(画像・PDF送信、ビデオ通話機能付き)
デモアプリ作成の目的
クローズドなSNSを構築する機会があり、その際にリアルタイム通信に関する技術調査を行なっていました。
今回はWebSocketsの技術を使ったSocket.ioというOSSを用いてリアルタイムメッセージ通信の仕組みを構築しました。イメージとしてはSlackやChatwork、Discordに近いものを想定しています。
お客様固有の要件を除き一般的なチャットアプリに求められる最低限の機能を実装しデモアプリとしてご紹介いたします。
アプリの機能紹介の後にどのような作業をどのぐらいの期間で実装したかもまとめましたので、似たような要件のアプリ構築を弊社にご依頼いただく際の参考として頂けましたら幸いです。
構築したアプリの紹介
サイトの作成
まず最初にサイトを作成します。テーマや目的に合わせたメッセージのやり取りをするチャンネルをまとめる役割としてサイトというものが存在します。サイトを作成したのちにユーザーを招待しチャンネルごとにメッセージのやり取りを行なっていきます。
サイトの作成にはサイト名とアイコンを設定します。これらの設定は後から変更することも可能です。
サイトが作成されるとテキストのチャンネルに#generalというチャンネルが表示されます。
ユーザーの招待
作成したサイトにユーザーを招待します。生成された招待用のリンクをメールなどでお知らせし、クリックするとサイトにアクセス可能となります。
本来であればメール送信の機能も付けるべきではありますが、今回は時間の都合上、省略しています。
またこのアプリはダークモード対応となっており、好みに合わせて変更することも可能です。
メッセージの送信
メッセージ送信は非常にシンプルで入力欄にテキストを入れ「Shift + Enterキー」で送信されます。WebSocketsという通信技術を用いることでサイトに参加しているユーザーにはリアルタイムにメッセージが配信されます。
今回の動画では左と右で別々のユーザーを表示しております。
左側のユーザーが入力し送信した後、すぐに右側のユーザーにも表示されることが確認できるかと思います。
また、入力欄の右側にはアイコンがありアイコンをクリックすると絵文字の一覧が表示されますのでメッセージに絵文字をつけて送信することも可能です。
チャンネルの運用が長くなってくるとメッセージの量も多くなるため、画面の初期表示段階でのメッセージの取得範囲を絞っております。（最新の日時のメッセージを起点に十数件を取得）また過去のメッセージを読む際にスクロールをすることとなりますが、スクロールのタイミングで過去のメッセージを追加で表示させる対応も行っておりパフォーマンスと利便性を考慮した表示処理となっています。
画像・PDFの送信
テキスト以外には画像やPDFなども送信可能となっております。
PDFの場合はファイル名を表示し、クリックすると別窓でその内容を確認することができます。
送信済みメッセージの編集・削除
自分が送信したメッセージや画像、PDFについては送信後に編集や削除が可能です。
メッセージを削除した場合は、「このメッセージは削除されました。」という文字に置き換わります。
送信済みメッセージの編集と削除
送信済みのメッセージは編集可能となっており、編集すると編集されたメッセージであることがわかるように(edited)という文言がセットされます。
また、送信済みのメッセージの削除も可能で削除された場合はこのメッセージは削除されましたというメッセージに切り替わります。
画像、PDFの削除も可能となっております。
チャンネルの作成
全てのやり取りを#generalチャンネルで行うと過去のメッセージを探すときに大変になるため、目的や用途に応じてやり取りを行うチャンネルを用意しておくといいでしょう。そのためのチャンネル作成となります。
またこれまではテキストでのやり取りを前提としたチャンネルについてお伝えしましたが、ビデオ通話を行う専用のチャンネルを作成することも可能です。
ビデオ通話
チャンネルタイプをビデオ通話で作成し、チャンネルをクリックするとビデオ通話に切り替わります。別のユーザーが同じチャンネルをクリックすると入室状態となり、会話が開始できます。
パソコンに接続されているカメラからお互いを認識することができますし、資料を投影するなども可能です。メッセージのやり取りだけだと伝わらないケースなどビジネスシーンでよくあることかと思いますが、その場合はビデオ通話を活用することで円滑なコミュニケーションが図れると思います。
チャンネルタイプにはもう一つ音声通話というものもあります。こちらはビデオ通話と似ていて、接続するとカメラオフの状態で音声のやり取りメインのチャンネルとなります。
チャンネルの検索
さまざまなタイプのチャンネルをいくつも作っていくと視認性が悪くなるかと思います。そのような時はチャンネルの検索を使うことが可能です。左上に検索のマークがあるのでこちらをクリックするか、「Crtl + Kキー」で検索画面を表示できます。
探していたチャンネルが見つかったらクリックをすると該当のチャンネルを表示できます。
1対1のメッセージ機能
これまでご紹介したチャンネルはオープンな場となっております。プライベートな情報をやり取りする場合は1対1のメッセージ機能（ダイレクトメッセージ）を使って行います。
こちらは該当のユーザーしかアクセスできないようになっていますが、それ以外のメッセージの送信、編集、削除などの機能についてはチャンネルの時と同じとなります。
またここでビデオ通話も可能となっております。チャンネルでもビデオ通話は可能ですが、こちらはチャンネルにアクセスできる人なら何人でも参加できるようになっていますので、個別にやり取りしたい場合はダイレクトメッセージのところでビデオ通話をした方がいいかと思います。
メンバー管理
サイトを作成した後にユーザーを招待しましたが、招待したユーザーを解除することも可能です。左上のメンバー管理というメニューから対象のユーザーを選択し「サイトから外す」とすると除外できます。
権限管理
参加しているメンバーの権限を変更することも可能です。権限は「管理者」「モデレーター」「ゲスト」の３種類用意しています。
管理者：サイトを作成した人
ゲスト：招待された人
となり、モデレーターについては権限変更メニューでゲストから変更可能となります。
それぞれの権限でできることは下記となります。
| 権限 | 管理者 | モデレーター | ゲスト |
|---|---|---|---|
| メッセージ送信 | ○ | ○ | ○ |
| メッセージ編集・削除 | 全員分可能 | 全員分可能 | 自分のみ |
| チャンネル作成 | ○ | ○ | × |
| チャンネル編集・削除 | ○ | ○ | × |
| メンバー管理 | ○ | × | × |
基本的には管理者は全ての権限を持っています。メッセージのやり取り全てに目を通すのが難しい場合はゲストの中からモデレーターに権限を変更することで、チャンネルの管理や不適切なメッセージのやり取りがあった場合に対応するなど管理者を補佐する役割として用意しています。
今回の作業内容
今回実施した作業をまとめてみました。これらの作業を弊社ではおよそ2〜2.5ヶ月で実装可能です。
※API：ブラウザでの入力内容を元にデータベースやファイルサーバへデータの更新を行うプログラム
1.環境構築
認証サービス設定
データベース設定
テストページ作成
プログラムのデプロイ
仮URLでの参照
2.サイト作成
サイト作成用インターフェイス作成
サイト作成API
サイト編集用インターフェイス作成
サイト編集API
サイト削除API
画像アップロード用インターフェイス作成
画像アップロードAPI
ナビゲーション作成
3.招待コード生成
招待コード取得インターフェイス作成
招待コード生成API
招待コード取得API
4.メンバー管理、権限管理
メンバー管理用インターフェイス作成
メンバーの解除API
メンバーの権限変更API
権限に合わせた編集ボタン、削除ボタンを表示/非表示対応
5.チャンネル作成
チャンネル作成用インターフェイス作成
チャンネル作成API
チャンネル編集用インターフェイス作成
チャンネル編集API
チャンネル削除API
6.メッセージ入力
リアルタイム通信用WebSocketサーバ設定
メッセージ作成用インターフェイス作成
メッセージ作成API
PDF、画像の保存用ファイルサーバ設定
ファイルアップロード機能
メッセージ配信機能設定
メッセージ編集API
メッセージ削除API
7.1対1のメッセージ機能(ダイレクトメッセージ)
ダイレクトメッセージ用インターフェイス作成
8.ビデオ通話
ビデオ通話用のサーバ設定
ビデオ通話用のインターフェイス作成
ビデオ通話API
このデモ環境の今後の拡張
これまでご紹介した機能はチャットアプリを提供する上で最低限の機能に絞っておりました。下記のような機能も盛り込むことでより利便性が向上し利用者が拡大される見込みが増えると考えられます。
もちろん全て必要というわけではありませんので弊社にアプリ構築をご依頼頂く際は、要・不要の検討や、初期リリース時に含める・含めないなどのご相談もさせて頂きつつ無駄なく、早期に導入できるよう支援いたします。
招待メール機能
この記事の冒頭でご紹介した招待機能ですが、現在は招待用リンクの発行までとなっており利便性という観点ではメール送信までこのアプリ内で実施した方がいいかと考えられます。
プライベートチャンネル
サイトごとのユーザー管理はできていますが、チャンネル単位ではユーザーの管理ができていない状態なので、そういった意味で必要な機能と考えられます。ただ、チャンネル単位となると管理者によるユーザー管理業務が煩雑になるかと思いますし、チャンネルごとに管理者を立てる必要などもあるため導入することで確実に利便性が向上するかは十分な検討が必要な機能とも考えられます。
スレッド機能
チャンネルに参加している人数が多くなると必要な機能としてスレッド機能が挙げられます。どの内容についてのやり取りなのかが把握できるようにメッセージにぶら下げる形でやりとりができると読む人の負担が減らせる機能と考えられます。
プロフィール管理
オープンなコミュニケーションの場としてこのアプリを使う場合にメッセージのやり取りを始める前に知っておきたい情報をプロフィール情報として管理しておくといいと考えられます。例えば住んでいる地域によっては時差が発生しますのでそのような内容を記載しておくといつごろ返信が来そうか想定できますし、ビデオ通話に切り替えたい時も何時頃が都合いいかなどおおよその時間帯も把握することが可能となります。
他のサービスとの連携
コミュニケーションツールの活用で欠かせないのが他ツールとの連携が挙げられます。例えばタスク管理ツールと連携し、タスクのステータスが更新されたときに通知することで進捗を把握することが可能です。
私のようなエンジニアの場合ですと、システム障害やアラートなどをSlackに通知することで障害にすぐ気づくことができますし、そこからスレッドを立てることで障害対応の進捗などをチャンネル参加者に知らせることも可能となります。
２段階認証
セキュリティ対策としてよく使われるのが２段階認証となります。例えば携帯電話番号を登録しSMSでワンタイムパスワードを発行することで本人確認の厳格化が可能となります。
さいごに
今回はチャットアプリのデモとそれを構築するのにどのような作業をどの程度の期間をかけて作るかをご紹介しました。弊社ではリアルタイムなコミュニケーションが必要なWebアプリケーションの開発を行なっております。
・リアルタイムでユーザーからの質問や問題に対応するカスタマーサポートプラットフォーム
・講師と学生、または学生同士がリアルタイムで質問やディスカッションを行える教育プラットフォーム
・特定のテーマや興味に基づいてメンバー同士が交流できるコミュニティプラットフォーム
これらのWebアプリケーション構築をご検討の際には、弊社の構築支援サービスを是非ご検討ください。短期間でリリースできるよう対応致します。
その他の参考アプリ
今回ご紹介したチャットアプリ以外にもご提供する成果物の目安とおおよその実装期間をイメージできるデモアプリをご用意しております。これまでご支援してきた技術をベースに、お客様固有の要件を除いたシンプルなアプリケーションをご覧いただけます。
目次
お問い合わせ