Dockerこの広告は、90日以上更新していないブログに表示しています。2016-04-02SwiftでJSQMessagesViewControllerを使ってチャットUIを実装するSwift昨今、多くのアプリでチャットUIが見慣れてきたかと思います。以外と見慣れているUIだけど一から自分で実装するのは以外と面倒ですよね....そこで今回はJSQMessagesViewControllerというライブラリを使ってチャットに必要な最低限の機能を実装する方法を説明します。仕様についてJSQMessagesViewControllerには多くの機能が備わっているのですが、今回は以下の機能を実装していきます(とりあえずこれがあれば成り立つだろうという要素)。1対1でユーザー同士がやりとりをできるテキストが送信できる画像が送信できる画像タップが検知できる送信時刻を良い感じに表示する(ある一定の間隔が空いたら表示するなど)チャット相手のユーザーのアイコンが表示される相手のユーザーのアイコンタップを検知することができる初期導入方法インストールJSQMessagesViewControllerをCocoaPodsを使ってインストールします。以下のファイルを作成してください。するとチャット画面ができ、最低限の実装ができているかと思います。処理としては、メッセージを送ると自動で返信をするというものです。表示するユーザーアイコンを指定。}}機能実装ここからはこの基本的なチャットを拡張していきます。メッセージの上に時刻を表示よくLINEなどで見かけるメッセージの上に送信時刻を表示する機能を実装していきます。以下のリンクに書いてある内容が非常に良いので、今回はそちらを使わせて頂きました。Objective-Cで書かれていたのでSwift用に書き換えています。}これでメッセージを送信してみてください。上に時刻が表示されていることでしょう。ユーザーアイコンのタッチイベントを検知するユーザーのアイコンタップのイベントをハンドルするメソッドはデフォルトで備わっていないので、collectionViewのメソッドをオーバーライドして検知する方法をとります。公式FAQを見るとcellのカスタマイズ方法が書いてあるので、それに習っていきます。}これでtappedAvatar()のメソッドでアイコンタッチが拾えるようになっているかと思います。画像を投稿する画像を投稿する仕組みを実装します。キーボードの上にクリップのアイコンがあるかと思います。あのアイコンをタップすることで投稿する画像を選べるようにします。UIButton!)で受け取ることができるので、処理をこの中に書いていきます。今回はUIImagePickerControllerを使用するので、こちらをみて、selectImage()メソッドが呼べる状態にしておいてください。}これで写真を投稿することができたかと思います。メッセージで送った画像のタップイベントを受け取る先ほど、メッセージで画像を送るところまではできているかと思います。続いてやるのは、よくチャットアプリである画像をタップして拡大を行うために、画像のタップを検知する処理を書くことです。NSIndexPath!)というメソッドがあります。このメソッドでbubble(吹き出し)のタッチを検知し、さらに画像だった場合に別のメソッドを呼ぶという処理を書いていきます。}これで画像を送信してタップをすることでprintで書いた文章が呼ばれるかと思います。最後に以上が、SwiftでJSQMessagesViewControllerを使用した際のチャットUIの実装方法になります。今回紹介したのはあくまで最低限の実装方法なので、興味ある方は、他にも詳しく調べて是非実装してみてください。間違え等ありましたらコメントなりで連絡を頂けると嬉しいです。javascript)についてRailsでActiveModel::Serializerを使ってAPIを作成するはてなブログをはじめよう!yu_0105さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。