【Swift】JSQMessagesViewController後継のMessageKitでのチャット画面の作成方法2019-05-14【Swift】JSQMessagesViewController後継のMessageKitでのチャット画面の作成方法Swiftはじめに環境MessageKitのインストールMessageKitの使い方MessagesDataSourceMessageInputBarDelegateMessagesDisplayDelegateMessagesLayoutDelegateMessageCellDelegateMessageLabelDelegateおわりにはじめにSwiftでチャットアプリを作ろうと思い、どんなライブラリが主流なのかな?と思って調べていると、これまではJSQMessagesViewControllerが一般的だったらしいですが、すでに開発が終了しており、現在は非推奨となっていることが分かりました。JSQMessagesViewControllerの後継?のMessageKitなるものを見つけました。使い方を解説してくれているサイトが少なかったのですが、以下のサイトが非常に分かりやすかったです。ChatやMessageKitのサンプルプロジェクトを合わせて見るとより理解できると思います。2.0.0MessageKitのインストール以下の手順でCocoaPodsを使用してライブラリをインストールします。installPodfileには以下の内容を記述します。ver2.0.0から必要スポンサーリンクMessageKitの使い方MessageKitはUICollectionViewControllerの強化版みたいな感じなので、UICollectionViewControllerの使い方が分かっていれば割と簡単です。MessagesViewControllerクラスを継承するだけでチャット画面を作れます。後は必要なプロトコルを実装していくって感じです。メッセージはMessageTypeに準拠したMessageという構造体を自分で用意する必要があるんですが、これはMessageKitのサンプルプロジェクト内のMockMessageを利用すれば問題ありません。}}メッセージの送信やアバターの設定といったカスタマイズは以下の6つのプロトコルを使って行います。MessagesDataSourceMessageInputBarDelegateMessagesDisplayDelegateMessagesLayoutDelegateMessageCellDelegateMessageLabelDelegateそれぞれについて簡単に説明していきます。MessageInputBarDelegateのみ実装すれば大丈夫です。MessagesDataSourceメッセージの送信者や画面に表示するメッセージの数などの設定ができます。numberOfSectionsの3つです。~AttributedTextではメッセージやセルの上下に表示する文字列を設定できます。}}MessageInputBarDelegateメッセージ入力バーに関する処理を実装するものです。確実に実装することになるのは、送信ボタンを押した時の処理を表すmessageInputBarメソッドだと思います。以下の例は、送信ボタンを押すと、入力された文字列からMessageオブジェクトを作成して、メッセージリストに追加し、メッセージ入力バーを空にして、画面の下までスクロールするというものです。insertMessage(message)もしくは、それに値するメソッドは自分で作る必要があります。そのメソッドの中でメッセージデータをローカルに保存するなり、データベースに保存するなりします。firebaseを利用する場合の処理と、チャット画面全体をリロードして、送信したメッセージを表示する処理もここで行います。}MessagesDisplayDelegateメッセージの表示形式やデザインを決めるものです。テキストメッセージのみに反映される設定や全てのメッセージに反映される設定等いろいろあるので、MessageKitのサンプルプロジェクトを参考にするといいと思います。以下の例では、相手のメッセージが自分のメッセージかに応じてメッセージの背景色を変えて、メッセージスタイルを吹き出しにしています。isFromCurrentSender()がそのメッセージが自分が送信したのもかどうかを判定するメソッドです。.primaryと.incomingMessageは自作の色なので、ここは各自好きな色にしてください。}}MessagesLayoutDelegateこのプロトコルはメッセージ周辺のラベルのレイアウトを決めるものです。メッセージ周辺のラベルというのは、メッセージ付近に表示される時間や既読、日付といったものです。それらの位置や大きさはここで設定できます。メッセージの下に余白を作るといったこともここで行います。}}MessageCellDelegateチャット画面で様々なものをタップした時の処理を実装できます。以下は、アバター(自分のプロフ画像が表示される所)とメッセージがタップされた時の処理の例です。アバターとメッセージをタップするとコンソールにそれぞれ文字列が出力されます。}MessageLabelDelegateメッセージ中の電話番号や住所、URLなどをタップした時の処理を実装できます。URLをタップしたらブラウザを開く、住所をタップしたらマップを起動するといった処理はここで実装します。以下は例なので、コンソールに文字列を出力するだけです。Referenceをご覧ください。Code】BlackとFlake8を使ってきれいなPythonコードを書く!!スポンサーリンクプロフィール応用情報取得。3度の学会発表経験あり。使用言語は主にPythonとSwift。(1)月別アーカイブ検索このブログについてプライバシーポリシースポンサーリンクスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。