質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

0回答

304閲覧

JSQMessagesでメッセージの送信時間を表示するためのxib変更をしたが、エラーは発生しないがアプリ上に描画されない

yukky05

総合スコア11

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2017/10/01 23:19

プログラミング初心者です。
JSQMessagesというチャットライブラリを使用しています。

チャット自体は通常通り表示されるのですが、
送信時間を表示するための変更が反映されておらず原因がわからないため、どなたかご教示いただけると幸いです。
*formatter.string(from: message.date)に、stringの値が入っていることは確認済みです。

【やりたいこと】
チャット内のメッセージ横に送信時間を表示させたい

【やったこと】
1)ChatViewControllerクラスで利用しているJSQMessagesのライブラリに入っているxibファイルをコピーし、CustomMessagesCollectionViewCellOutgoing.xibを作成

2)CustomMessagesCollectionViewCellOutgoingクラスを作成

3)UILabelをCustomMessagesCollectionViewCellOutgoing.xibファイル内に追加し、CustomMessagesCollectionViewCellOutgoingクラスに関連づけ

4)ChatViewControllerクラス内にxibをレジスター、タイムラベルを表示するためのコードを記述

[ChatViewControllerクラス]

swift3.0

1import UIKit 2import Firebase 3import JSQMessagesViewController 4 5class ChatViewController: JSQMessagesViewController { 6 7 var sendText:String = "" //チャット相手のuidが入ってくる 8 var senderName:String = "" //チャット相手の名前が入ってくる 9 var recieverId:String! 10 var userId : String! 11 var nickName : String! 12 var titleName : String! 13 var roomKey : String! 14 var messages = [JSQMessage]() 15 var item = [NSDictionary]() 16 17 override func viewDidLoad() { 18 super.viewDidLoad() 19 let outgoingNib = UINib(nibName: "CustomMessagesCollectionViewCellOutgoing", bundle: nil) 20 self.collectionView!.register(outgoingNib, forCellWithReuseIdentifier: "customMessagesOutgoing") 21 22 let incomingNib = UINib(nibName: "CustomeMessageCollectionViewCellIncoming", bundle: nil) 23 self.collectionView!.register(incomingNib, forCellWithReuseIdentifier: "customMessagesIncoming") 24 25 26 recieverId = sendText 27 let ref = Database.database().reference() 28 29 userId = Auth.auth().currentUser?.uid 30 self.senderDisplayName = "" 31 senderId = userId 32 33 //既に相手のチャットが存在する場合はそのidを使う 34 ref.child("chat").child(userId!).child(recieverId!).observeSingleEvent(of: .value, with: { (snap) in 35 36 if snap.exists() { 37 38 let value = snap.value as? NSDictionary 39 self.roomKey = value?["roomkey"] as? String ?? "" 40 41 }else{ 42 43 self.roomKey = ref.child("chat").child(self.userId!).child(self.recieverId!).childByAutoId().key 44 45 //チャットがない場合、各ユーザーにチャットのroomKeyを登録する 46 let room_information = [ "date": [".sv": "timestamp"],"roomkey":self.roomKey, "members":[self.userId!,self.recieverId!] ] as [String : Any] 47 48 let childUpdates = [ 49 "/chat/(self.userId!)/(self.recieverId!)/": room_information, 50 "/chat/(self.recieverId!)/(self.userId!)/": room_information 51 ] 52 ref.updateChildValues(childUpdates) 53 } 54 55 //messageを取得 56 ref.child("chat-message").child(self.roomKey!).observe(.value, with: { snap in 57 58 guard let posts = dic["messages"] as? Dictionary<String, Dictionary<String, AnyObject>> else { 59 return 60 } 61 // keyとdateが入ったタプルを作る 62 var keyValueArray: [(String, Int)] = [] 63 for (key, value) in posts { 64 keyValueArray.append((key: key, date: value["date"] as? Int ?? 0)) 65 } 66 keyValueArray.sort{$0.1 < $1.1} // タプルの中のdate でソートしてタプルの順番を揃える(配列で) これでkeyが順番通りになる 67 // messagesを再構成 68 var preMessages = [JSQMessage]() 69 for sortedTuple in keyValueArray { 70 for (key, value) in posts { 71 if key == sortedTuple.0 { // 揃えた順番通りにメッセージを作成 72 let senderId = value["senderId"] as! String! 73 let text = value["text"] as! String! 74 let displayName = value["displayName"] as! String! 75 preMessages.append(JSQMessage(senderId: senderId, displayName: displayName, text: text)) 76 } 77 } 78 } 79 self.messages = preMessages 80 self.collectionView.reloadData() 81 self.hideIndicator() 82 }) 83 84 }) { (error) in 85 86 87 } 88 automaticallyScrollsToMostRecentMessage = true 89 } 90 91 92 override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageDataForItemAt indexPath: IndexPath!) -> JSQMessageData! { 93 return messages[indexPath.row] 94 } 95 96 97 98 //吹き出しの横にtimeLabelを追加 99 let formatter = DateFormatter() 100 formatter.dateFormat = "HH:mm" 101 let message = self.messages[indexPath.item] 102 if message.senderId == self.senderId { 103 //let cel = super.collectionView(collectionView, cellForItemAt: indexPath) as! CustomMessagesCollectionViewCellOutgoing 104 let cel = collectionView.dequeueReusableCell(withReuseIdentifier: "customMessagesOutgoing", for: indexPath) as! CustomMessagesCollectionViewCellOutgoing 105 106 cel.timeLabel.text = formatter.string(from: message.date) 107 108 } else { 109 //let cel = super.collectionView(collectionView, cellForItemAt: indexPath) as! CustomeMessageCollectionViewCellIncoming 110 let cel = collectionView.dequeueReusableCell(withReuseIdentifier: "customMessagesIncoming", for: indexPath) as! CustomeMessageCollectionViewCellIncoming 111 112 cel.timeLabel.text = formatter.string(from: message.date) 113 } 114 return cell 115 } 116 117 118 override func didPressSend(_ button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: Date!) { 119 120 inputToolbar.contentView.textView.text = "" 121 122 //キーボードを閉じる 123 self.view.endEditing(true) 124 125 let ref = Database.database().reference() 126 let key = ref.child("chat-message").child(self.roomKey).childByAutoId().key 127 let post = ["senderId": self.userId, 128 "displayName": nickName, 129 "text": text, 130 "date": [".sv": "timestamp"] 131 ] as [String : Any] 132 133 let childUpdates = ["/chat-message/(roomKey!)/messages/(key)/": post] 134 ref.updateChildValues(childUpdates) 135 136 } 137 138 override func didReceiveMemoryWarning() { 139 super.didReceiveMemoryWarning() 140 } 141}

[CustomMessagesCollectionViewCellOutgoingクラス]

import JSQMessagesViewController import UIKit class CustomMessagesCollectionViewCellOutgoing: JSQMessagesCollectionViewCellOutgoing { @IBOutlet weak var timeLabel: UILabel! }

[CustomMessagesCollectionViewCellOutgoing.xib]
イメージ説明
イメージ説明

【上記を実行した後のView Hierarchy】
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問