【Swift】Swift4でチャットアプリを作る(JSQMessagesViewController/Firebase) - Swift実践ブログ









import UIKit
import Firebase

class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?)
        -> Bool {
            return true

    func applicationWillResignActive(_ application: UIApplication) {
        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.

    func applicationDidEnterBackground(_ application: UIApplication) {
        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.

    func applicationWillEnterForeground(_ application: UIApplication) {
        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.

    func applicationDidBecomeActive(_ application: UIApplication) {
        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.

    func applicationWillTerminate(_ application: UIApplication) {
        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.



import UIKit
import Firebase
import JSQMessagesViewController
import Alamofire
import SwiftyJSON

class ViewController: JSQMessagesViewController {
    // データベースへの参照を定義
    var ref: DatabaseReference!
    // メッセージ内容に関するプロパティ
    var messages: [JSQMessage]?
    // 背景画像に関するプロパティ
    var incomingBubble: JSQMessagesBubbleImage!
    var outgoingBubble: JSQMessagesBubbleImage!
    // アバター画像に関するプロパティ
    var incomingAvatar: JSQMessagesAvatarImage!
    var outgoingAvatar: JSQMessagesAvatarImage!
    // Repl-AIのユーザーIDを保持するプロパティ
    var id: String!
    // 送信したメッセージを保持するプロパティ
    var msg: String!
    // Repl-AIからの返答メッセージを保持するプロパティ
    var responseMsg: String!
    override func viewDidLoad() {
        // Do any additional setup after loading the view, typically from a nib.
        // ツールバーの設定
        self.inputToolbar!.contentView!.leftBarButtonItem = nil
        // 新しいメッセージを受信するたびに下にスクロールする
        self.automaticallyScrollsToMostRecentMessage = true
        // 自分のsenderId, senderDisplayNameを設定
        self.senderId = "user1"
        self.senderDisplayName = "A"
        // 吹き出しの設定
        let bubbleFactory = JSQMessagesBubbleImageFactory()
        self.incomingBubble = bubbleFactory?.incomingMessagesBubbleImage(with: UIColor.jsq_messageBubbleGreen())
        self.outgoingBubble = bubbleFactory?.outgoingMessagesBubbleImage(with: UIColor.jsq_messageBubbleBlue())
        // アバターの設定
        self.incomingAvatar = JSQMessagesAvatarImageFactory.avatarImage(with: UIImage(named: "{アバター画像のファイル名}")!, diameter: 64)
        self.outgoingAvatar = JSQMessagesAvatarImageFactory.avatarImage(with: UIImage(named: "{アバター画像のファイル名}")!, diameter: 64)
        self.messages = []
    override func didReceiveMemoryWarning() {
        // Dispose of any resources that can be recreated.
    // Firebaseからデータを取得する
    func setupFirebase() {
        // DatabaseReferenceのインスタンス化
        self.ref = Database.database().reference()
        // 最新10件のデータをデータベースから取得する
        // 最新のデータが追加されるたびに最新データを取得する
        self.ref.queryLimited(toLast: 10).observe(DataEventType.childAdded, with: { (snapshot) -> Void in
            let snapshotValue = snapshot.value as! NSDictionary
            let text = snapshotValue["text"] as! String
            let sender = snapshotValue["from"] as! String
            let name = snapshotValue["name"] as! String
            let message = JSQMessage(senderId: sender, displayName: name, text: text)
    // Sendボタンが押された時に呼ばれるメソッド
    override func didPressSend(_ button: UIButton, withMessageText text: String, senderId: String, senderDisplayName: String, date: Date) {
        self.finishReceivingMessage(animated: true)
        let post1 = ["from": senderId, "name": senderDisplayName, "text":text]
        let post1Ref = self.ref.childByAutoId()
        self.finishSendingMessage(animated: true)
        // 送信したメッセージをdialogue()のパラメータへ渡す
        self.msg = text
        // Repl-AIからユーザーIDと返答メッセージを取得する

    // Repl-AIのユーザーIDを取得
    func userId() {
        let URL = "{リクエストURL}"
        let headers = [
            "Content-Type": "application/json",
            "x-api-key": "{APIキー}"
        let parameters = [
            "botId": "{ボットID}"
        Alamofire.request(URL, method: .post, parameters: parameters, encoding: JSONEncoding.default, headers: headers).validate().responseJSON { response in
            switch response.result {
            case .success(let value):
                let json = JSON(value)
                self.id = json["appUserId"].stringValue
            case .failure(let error):
    // Repl-AIの対話情報の取得
    func dialogue() {
        let URL = "{リクエストURL}"
        let headers = [
            "Content-Type": "application/json",
            "x-api-key": "{APIキー}"
        let parameters: [String: Any] = [
            "appUserId": self.id,
            "botId": "{ボットID}",
            "voiceText": self.msg,
            "initTalkingFlag": false,
            "initTopicId": "{シナリオID}"
        Alamofire.request(URL, method: .post, parameters: parameters, encoding: JSONEncoding.default, headers: headers).validate().responseJSON { response in
            switch response.result {
            case .success(let value):
                let json = JSON(value)
                self.responseMsg = json["systemText"]["expression"].stringValue
            case .failure(let error):
    // 送信メッセージに対して返答した内容をFirebaseに保存する
    func saveReceiveMessage() {
        let post2 = ["from": "user2", "name": "B", "text": responseMsg]
        let post2Ref = self.ref.childByAutoId()
    // アイテムごとに参照するメッセージデータを返す
    override func collectionView(_ collectionView: JSQMessagesCollectionView, messageDataForItemAt indexPath: IndexPath) -> JSQMessageData {
        return messages![indexPath.item]
    // アイテムごとのMessageBubble(背景)を返す
    override func collectionView(_ collectionView: JSQMessagesCollectionView, messageBubbleImageDataForItemAt indexPath: IndexPath) -> JSQMessageBubbleImageDataSource {
        let message = self.messages?[indexPath.item]
        if message?.senderId == self.senderId {
            return self.outgoingBubble
        return self.incomingBubble
    // アイテムごとにアバター画像を返す
    override func collectionView(_ collectionView: JSQMessagesCollectionView, avatarImageDataForItemAt indexPath: IndexPath) -> JSQMessageAvatarImageDataSource? {
        let message = self.messages?[indexPath.item]
        if message?.senderId == self.senderId {
            return self.outgoingAvatar
        return self.incomingAvatar
    // アイテムの総数を返す
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return messages!.count




・「Repl-AI」のAPIを使うために、以下リンクから「docomo Developer support」のアカウントを登録しログインしてください。リクエストURL、APIキー、ボットID、シナリオIDはログイン後に確認できます。

無料のAIチャットボット『Repl-AI(レプルAI)』|docomo × インターメディアプランニング




今回は、「Repl-AI」に最初から入っているサンプルのプロジェクトで試してみたのですが、とてもシュールな会話が楽しめます笑 自分でプロジェクトを作り、会話のシナリオを編集することができるので、実用的なアプリや面白いアプリなど、自在にボットの特徴を変化させられそうです。



無料のAIチャットボット『Repl-AI(レプルAI)』|docomo × インターメディアプランニング

GitHub - Alamofire/Alamofire: Elegant HTTP Networking in Swift

GitHub - SwiftyJSON/SwiftyJSON: The better way to deal with JSON data in Swift.

Postmanを試してみる - Swift実践ブログ

【Swift】APIからPOSTでデータ取得する(Alamofire/SwiftyJSON) - Swift実践ブログ