メッセージUIライブラリMessageKitの紹介

はじめに

ねこすたでは投稿された画像、動画にコメントをすることができます。
そのコメント欄はLINE風のUIにしているのですが、そこで採用したライブラリがJSQMessagesViewControllerでした。
しかし、そのライブラリが去年（2017/07）にDeprecatedになってしまいました。作成者理由
しばらくはJSQMessagesViewControllerを利用していましたが、pod install,updateするたびにDeprecatedが表示される始末。。最近になってコメントのところをいろいろ改修する必要が出てきたのでいい機会なのでライブラリを変更することにしました。
JSQMessagesViewControllerのissueでちょうどよさそうなライブラリを発見。評価も良さそう
Exampleを動かして良さそうなので採用することにしました。

使い方

インストールはREADME参照
そして、、使い方がどこにも書いてない！！
Exampleがあるのでそれを見ながら実装することに。

まずはMessagesViewControllerを継承したControllerを作成。
class ConversationViewController: MessagesViewController {
 var messageList: [MockMessage] = [] // 各メッセージ内容を格納したList


継承したクラスにmessagesCollectionViewという変数があるのでこいつが、UIのcollectionViewになります。
各delegateを設定
override func viewDidLoad() {
    super.viewDidLoad()
    ...
    messagesCollectionView.messagesDataSource = self
    messagesCollectionView.messagesLayoutDelegate = self
    messagesCollectionView.messagesDisplayDelegate = self
    messagesCollectionView.messageCellDelegate = self

inputBarのdelegateも設定
messageInputBar.delegate = self

メッセージのDataSourceを設定
extension CommentViewController: MessagesDataSource {
    
    // ユーザー（利用者側）の情報を返す
    func currentSender() -> Sender {
        return Sender(id: 一意になるID, displayName: 表示する名前)
    }
    
    func numberOfSections(in messagesCollectionView: MessagesCollectionView) -> Int {
        return messages.count
    }
    
    func messageForItem(at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> MessageType {
        return messages[indexPath.section]
    }
    
    // セルトップに表示されるテキスト
    func cellTopLabelAttributedText(for message: MessageType, at indexPath: IndexPath) -> NSAttributedString? {
     // この場合３つ毎に時間日付表示
     if indexPath.section % 3 == 0 {
            return NSAttributedString(string: MessageKitDateFormatter.shared.string(from: message.sentDate), attributes: [NSAttributedStringKey.font: UIFont.boldSystemFont(ofSize: 10), NSAttributedStringKey.foregroundColor: UIColor.darkGray])
        }
        return nil
    }
    
    func messageTopLabelAttributedText(for message: MessageType, at indexPath: IndexPath) -> NSAttributedString? {
        let name = message.sender.displayName
        return NSAttributedString(string: name, attributes: [NSAttributedStringKey.font: UIFont.preferredFont(forTextStyle: .caption1)])
    }
    
    func messageBottomLabelAttributedText(for message: MessageType, at indexPath: IndexPath) -> NSAttributedString? {
        
        let dateString = formatter.string(from: message.sentDate)
        return NSAttributedString(string: dateString, attributes: [NSAttributedStringKey.font: UIFont.preferredFont(forTextStyle: .caption2)])
    }
    
}

メッセージ表示デリゲート
extension ConversationViewController: MessagesDisplayDelegate {

    // MARK: - Text Messages
    func textColor(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIColor {
        return isFromCurrentSender(message: message) ? .white : .darkText
    }

    func detectorAttributes(for detector: DetectorType, and message: MessageType, at indexPath: IndexPath) -> [NSAttributedStringKey: Any] {
        return MessageLabel.defaultAttributes
    }

    func enabledDetectors(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> [DetectorType] {
        return [.url, .address, .phoneNumber, .date, .transitInformation]
    }

    // MARK: - All Messages
    
    func backgroundColor(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIColor {
        return isFromCurrentSender(message: message) ? UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1) : UIColor(red: 230/255, green: 230/255, blue: 230/255, alpha: 1)
    }

    func messageStyle(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> MessageStyle {
        let corner: MessageStyle.TailCorner = isFromCurrentSender(message: message) ? .bottomRight : .bottomLeft
        return .bubbleTail(corner, .curved)
//        let configurationClosure = { (view: MessageContainerView) in}
//        return .custom(configurationClosure)
    }
    
    // アバター情報を設定
    func configureAvatarView(_ avatarView: AvatarView, for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) {
     // 画像を設定する場合はUIImageを設定
     // URLから画像設定する場合なんかは、AlamofireImage（https://github.com/Alamofire/AlamofireImage）なんかを使うといい
       let avatar = Avatar(image: nil, initials: message.sender.displayName)
        avatarView.set(avatar: avatar)
    }

    // MARK: - Location Messages
    func annotationViewForLocation(message: MessageType, at indexPath: IndexPath, in messageCollectionView: MessagesCollectionView) -> MKAnnotationView? {
        let annotationView = MKAnnotationView(annotation: nil, reuseIdentifier: nil)
        let pinImage = #imageLiteral(resourceName: "pin")
        annotationView.image = pinImage
        annotationView.centerOffset = CGPoint(x: 0, y: -pinImage.size.height / 2)
        return annotationView
    }

    func animationBlockForLocation(message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> ((UIImageView) -> Void)? {
        return { view in
            view.layer.transform = CATransform3DMakeScale(0, 0, 0)
            view.alpha = 0.0
            UIView.animate(withDuration: 0.6, delay: 0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0, options: [], animations: {
                view.layer.transform = CATransform3DIdentity
                view.alpha = 1.0
            }, completion: nil)
        }
    }
    
    func snapshotOptionsForLocation(message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> LocationMessageSnapshotOptions {
        
        return LocationMessageSnapshotOptions()
    }
}

メッセージレイアウトデリゲート
ラベルの高さなど
extension ConversationViewController: MessagesLayoutDelegate {

    func cellTopLabelHeight(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> CGFloat {
        if indexPath.section % 3 == 0 {
            return 10
        }
        return 0
    }
    
    func messageTopLabelHeight(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> CGFloat {
        return 16
    }

    func messageBottomLabelHeight(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> CGFloat {
        return 16
    }

}

メッセージセルデリゲート
ボタン押された処理などを実装
extension ConversationViewController: MessageCellDelegate {

    func didTapAvatar(in cell: MessageCollectionViewCell) {
        print("Avatar tapped")
    }

    func didTapMessage(in cell: MessageCollectionViewCell) {
        print("Message tapped")
    }

    func didTapCellTopLabel(in cell: MessageCollectionViewCell) {
        print("Top cell label tapped")
    }
    
    func didTapMessageTopLabel(in cell: MessageCollectionViewCell) {
        print("Top message label tapped")
    }

    func didTapMessageBottomLabel(in cell: MessageCollectionViewCell) {
        print("Bottom label tapped")
    }

}

インプットバーのデリゲート
入力した後などの処理
extension ConversationViewController: MessageInputBarDelegate {

    func messageInputBar(_ inputBar: MessageInputBar, didPressSendButtonWith text: String) {
        
        // Each NSTextAttachment that contains an image will count as one empty character in the text: String
        
        for component in inputBar.inputTextView.components {
            
            if let image = component as? UIImage {
                
                let imageMessage = MockMessage(image: image, sender: currentSender(), messageId: UUID().uuidString, date: Date())
                messageList.append(imageMessage)
                messagesCollectionView.insertSections([messageList.count - 1])
                
            } else if let text = component as? String {
                
                let attributedText = NSAttributedString(string: text, attributes: [.font: UIFont.systemFont(ofSize: 15), .foregroundColor: UIColor.blue])
                
                let message = MockMessage(attributedText: attributedText, sender: currentSender(), messageId: UUID().uuidString, date: Date())
                messageList.append(message)
                messagesCollectionView.insertSections([messageList.count - 1])
            }
            
        }
        
        inputBar.inputTextView.text = String()
        messagesCollectionView.scrollToBottom()
    }

}

メッセージ内容を格納するmodel
MockMessage.swift
import Foundation
import CoreLocation
import MessageKit

private struct MockLocationItem: LocationItem {

    var location: CLLocation
    var size: CGSize

    init(location: CLLocation) {
        self.location = location
        self.size = CGSize(width: 240, height: 240)
    }

}

private struct MockMediaItem: MediaItem {

    var url: URL?
    var image: UIImage?
    var placeholderImage: UIImage
    var size: CGSize

    init(image: UIImage) {
        self.image = image
        self.size = CGSize(width: 240, height: 240)
        self.placeholderImage = UIImage()
    }

}

internal struct MockMessage: MessageType {

    var messageId: String
    var sender: Sender
    var sentDate: Date
    var kind: MessageKind

    private init(kind: MessageKind, sender: Sender, messageId: String, date: Date) {
        self.kind = kind
        self.sender = sender
        self.messageId = messageId
        self.sentDate = date
    }

    init(text: String, sender: Sender, messageId: String, date: Date) {
        self.init(kind: .text(text), sender: sender, messageId: messageId, date: date)
    }

    init(attributedText: NSAttributedString, sender: Sender, messageId: String, date: Date) {
        self.init(kind: .attributedText(attributedText), sender: sender, messageId: messageId, date: date)
    }

    init(image: UIImage, sender: Sender, messageId: String, date: Date) {
        let mediaItem = MockMediaItem(image: image)
        self.init(kind: .photo(mediaItem), sender: sender, messageId: messageId, date: date)
    }

    init(thumbnail: UIImage, sender: Sender, messageId: String, date: Date) {
        let mediaItem = MockMediaItem(image: thumbnail)
        self.init(kind: .video(mediaItem), sender: sender, messageId: messageId, date: date)
    }

    init(location: CLLocation, sender: Sender, messageId: String, date: Date) {
        let locationItem = MockLocationItem(location: location)
        self.init(kind: .location(locationItem), sender: sender, messageId: messageId, date: date)
    }

    init(emoji: String, sender: Sender, messageId: String, date: Date) {
        self.init(kind: .emoji(emoji), sender: sender, messageId: messageId, date: date)
    }

}

後はメッセージを受信した際に登録する処理
// データが複数ある場合などは、loopで回してモデルに入れたあと、listに格納。最後にreloadData()する
let message = MockMessage(text: メッセージ内容,
    sender: Sender(id: 一意のuser id, displayName: ユーザー名,
    messageId: 一意のメッセージID,
    date: コメントの日付)

self.messages.append(message)
self.messagesCollectionView.insertSections([self.messages.count - 1])
self.messagesCollectionView.reloadData()

さいごに

オフィシャルのREADMEに使い方が書いてないのがあれですが、Exampleをみればだいたい分かると思います。
これを作ってくれた作者に感謝！

コメント

コメントを投稿

このブログの人気の投稿

EBに置いたrailsからAmazon Kinesis Data FirehoseでlogをamazonESに投げる

はじめに ちょっとググるとamazonESにログを送信するのにfluentd(td-agent)を利用するケースが多いですが、その場合以下のライブラリを利用するみたいなのが多く出てきます。 https://github.com/atomita/fluent-plugin-aws-elasticsearch-service ただ、メンテナンスされてないっぽいのと、Amazon Kinesis Data Firehoseを利用したほうが楽そうだったので設定してみました。 ※EBの設定はしてあるものとします Railsの設定 logrageでjsonのlog吐き出す 参考 https://qiita.com/ichi_s/items/7cf6ce5dbfaa00976dd4 Gemfile gem 'lograge' gem 'logstash-event' gem "rack-user_agent" config/initializers/lograge.rb Rails.application.configure do config.lograge.enabled = true config.lograge.base_controller_class = ['ActionController::API', 'ActionController::Base'] config.lograge.formatter = Lograge::Formatters::Logstash.new config.lograge.keep_original_rails_log = true config.lograge.logger = ActiveSupport::Logger.new "#{Rails.root}/log/lograge_#{Rails.env}.log" config.lograge.custom_options = lambda do |event| payload = event.payload data = payload.slice(*%i( uuid host ...
続きを読む

FunBizのシステム環境

FunBizとは クラウド販売管理システムになります。 販売管理とは見積り、受注、発送、入金、仕入れなどの流れを管理します。 既存製品だとパッケージ製品が多いのですが、FunBizはインストール不要でブラウザでアクセスして即利用することができます。 サーバーサイド Ruby 2.4.3 Ruby on Rails 5.1.6 フロントエンド Reactを利用しています。 webpackerを利用してJSライブラリを管理（名残でSprocketsも併用中） 全部がReactになっているわけではなく（SPAではない）、動的な箇所がおおいところをReactで対応（react-rails）。 その他はerbで（turbolinksと併用） ジョブ（非同期処理） メール送信、エラー通知（Slack）、ファイルアップロードなど時間のかかる処理はジョブで処理をしています。 ジョブはsidekiqを利用 ミドルウェア Nginx 1.12.1 Puma 3.11.4 Redis 3.2.11 memcached 1.5.4 DB MySQL 5.6 サーバー環境 ステージング Herokuを利用 Puma、Sidekiqのプロセスをhobby dynosで立ち上げ Heroku Redisを利用 DBはAWS RDSに接続 本番 AWSを利用 ・EC2（負荷状況によりautoscaling） ・RDS（MySQL） ・ElastiCache（Redis） ・S3（画像保存など） ・ALB ・CloudFront ・SES デプロイ ステージングはHerokuに自動deploy（developが更新されると） 本番はAWS Elastic Beanstalkを利用（masterが更新されるとdeploy） CI環境 SideCI を利用して自動コードCheck テストコードが充実してきたら、テストを流すCIも入れたい（利用顧客も増えてきて影響範囲が大きくなってきたので、テストコードを誠意作成中） おわりに 前回はねこすたの環境をお伝えしましたが、今回はFunBizの環境を簡単にお伝えしました。 初回無料トライアルもありますので、ぜひご利用ください！...
続きを読む

AWS DEV DAY 2018に行ってきました

イメージ
３日間の開催でしたが、最終日11/2（金）の主にStartup Technologyトラックを聴いてきました。 Amazon Pinpoint x グロースハック活用事例集 登壇者 ・AWS 塚田さん ・ピクシブ 石川さん ・RoomClip平山さん 塚田さんは主にPinpointの説明 「なな転び八起のAWS 開発日記」のモデルにもなってる方。 https://aws.amazon.com/jp/about-aws/whats-new/2018/08/aws-launch-social-manga/ 石川さんは Palcy の説明。そこでの利用事例のお話でした。 重量課金性とメールも送れるのが採用のポイントだったそう。Reproとも併用しているとのことでしたが、価格差が数十倍というのが衝撃でした。 平山さんは RoomClip のサービス説明。ユーザーが段階的に増えていく過程で要望も変わり、プッシュの仕組みも変えていって、現在はPinpointを利用しているとのこと（ただし、まだ最小構成での利用でフルで活用はまだできていないよう。JSONまで自社で生成して送信処理をPinpointでおこなう） 話の中で最初は、全員に送りたい。しばらくたって個別に送りたい。最近では、マーケティングツールとして使いたい。というのはすごいわかる！という感じで納得してしまいました。 COOがマネージドサービスで一人でスピード開発して得た知見 登壇者 ・MESON 小林 さん heymeshの紹介。ただしサービス自体は2018/09にクローズして、そこで得た知見などをお話されました。 サービスの開発自体は１ヶ月で作ったとのこと！サーバーレスで構築して、labmdaからfargateに処理を移行して時間のかかる処理を解決したなど。 データがストックされるアーキテクチャ設計は慎重にと。データ増加に伴い変更コストが高くなる（DynamoDBからAthenaへ移行したかったが難しい） 最後に chalice の紹介。サーバーレスを簡単に実装ができる。ただしpythonに限る サービスのクローズは将来的にマネージメントが難しいとの判断とのこと。 [AWS Startup ゼミ Dev Day 編] よくある課題を一気に解説！〜御社の技術レベルがア...
続きを読む