この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんにちは。最近は朝のコーヒーが欠かせない田宮です。 勤務する社屋が岩本町に移ったことで、近くにあるCiscaというカフェに行ったりしています。ちなみに、壁にはCiscoの無線ネットーワーク機器(たぶん無線ルータ)が壁にかかっていまして、だからCiscaなのかな、と思っています。
さて、先日よこやまゆうだいより、Developers.IO で以下の記事をリリースしました。 簡単にアプリにチャット機能を追加できる!? SendBird が正式公開されました! | Developers.IO
今回は、実際に iOS でチャット画面を動かすところまでやってみたいと思います。
なお、今回の記事は、SendBirdの公式ドキュメントの以下の部分を参考に書きました。 Setup with Sample UI | SendBird iOS SDK
流れ
ここから先は以下の流れで進めていきます。
- 1.プロジェクトの作成・SDKインストール
- 2.サンプルプログラムから必要なファイルをコピー
- 3.ViewControllerでSendBirdのチャット画面を生成
- 4.実行
1.プロジェクトの作成・SDKインストール
プロジェクト作成
はじめに、Xcodeでプロジェクトを作成します。今回は、以下のように作成しましょう。
- 言語: Swift
- 使用テンプレート: Single View Application
Cocoapods
Cocoapodsを使います。
コンソールからpod initを実行し、作成されるのPodfileを開くと以下のようになっています(Cocoapodsのバージョンにより異なる可能性があります)。
# Uncomment this line to define a global platform for your project
# platform :ios, '8.0'
# Uncomment this line if you're using Swift
# use_frameworks!
target '(target名)' do
end
ここで、use_frameworks!の行頭の#を削除し、コメントアウトします。
続いて、target…からendの間に、以下を追加します。
pod 'SendBirdSDK'
pod "AFNetworking"
最後にpod installを実行し、SDKをプロジェクトに組み込みます。
※ なお、AFNetworking は、後述のSendBirdCommon.swiftにて importされているため、追加しています。import文をコメントアウトしても、その後の動作に支障ないことから、実際は使われていないもののようです。
2.サンプルプログラムから必要なファイルをコピー
サンプルプログラムをゲット
GitHubでサンプルをクローンしておきます。 https://github.com/smilefam/sendbird-sample
クローンすると、こんな感じのフォルダ・ファイル構成になっています。
.
├── README.md
├── SendBirdAndroidSample
├── SendBirdSwiftSample
├── SendBirdWebSample
├── SendBirdXamarinSample
├── SendBirdiOSSample
├── build_project.py
└── set_app_id.sh
今回は、SendBirdSwiftSampleに入ります。
必要なファイルのコピー
サンプルなので、もちろんこのままでも実行出来ますが、今回は、自分で生成したプロジェクトに、必要なファイルを引っ張ってくることにします。
プロジェクト中の以下のファイルを、ドラッグアンドドロップなどで、以下ファイル・フォルダを先ほど作成したプロジェクトに追加します。
- SendBirdCommon.swift
- SendBirdMessaging フォルダ
- SendBirdChat フォルダ
また、画像ファイルもコピーします。
- Assets.xcassets の中身をすべてドラッグアンドドロップで引っ張ってくる
ようにしましょう。
これで、自分で画面を作らずとも、ありものを使ってチャット画面を動作させることが出来ます。
3.ViewControllerに追記
プロジェクト作成時に自動生成されたViewControllerに追記していきます。
// SendBird起動
internal func startSendBird() {
// 各種定数の宣言
let APP_ID = "A7A2672C-AD11-11E4-8DAA-0A18B21C2D82"
let USER_ID = SendBirdUtils.deviceUniqueID()
let userNameString = (USER_ID as NSString).substringToIndex(5)
let USER_NAME = "User-\(userNameString)"
let CHANNEL_URL = "jia_test.Lobby"
// チャット画面の生成と各種パラメータの設定
let viewController = ChattingTableViewController.init()
SendBird.initAppId(APP_ID, withDeviceId: SendBird.deviceUniqueID())
viewController.setViewMode(kMessagingMemberViewMode)
viewController.initChannelTitle()
viewController.channelUrl = CHANNEL_URL
viewController.userName = USER_NAME
viewController.userId = USER_ID
// チャット画面の表示
let navigationController = UINavigationController.init(rootViewController: viewController)
self.presentViewController(navigationController, animated: true) { () -> Void in
}
}
startSendBird()関数を、適当な場所から呼び出します。viewDidLoadから呼び出すと、うまく行かなかったので、実際のアプリでは適当ではないですが、viewWillAppearなどから呼び出すと、カンタンに表示させることが出来ます。
4.実行
このように、オープンチャットの画面が実現できました!
最後に
追って、API Documentを見ながら、いろいろ動かしてみる記事を書いてみたいと思います。 また、実際に複数の端末を使って動作させて、チャットが実際にちゃんと動いている様子をお見せできたらな、と思います。 お楽しみに!
参考
- 公式ドキュメント Introduction | SendBird iOS SDK