1. 概要
「フレンドリー チャット」Codelab へようこそ。この Codelab では、Firebase プラットフォームを使用して iOS アプリケーションを作成する方法を学びます。Firebase を使用してチャット クライアントを実装し、そのパフォーマンスをモニタリングします。
ラボの内容
- ユーザーにログインを許可する。
- Firebase Realtime Database を使用してデータを同期する。
- バイナリ ファイルを Firebase Storage に保存します。
必要なもの
- Xcode
- CocoaPods
- iOS 8.0 以降のテストデバイスまたはシミュレータ
このチュートリアルをどのように使用されますか？
iOS アプリの作成経験について、どのように評価されますか。
2. サンプルコードを取得する
コマンドラインから GitHub リポジトリのクローンを作成します。
$ git clone https://github.com/firebase/codelab-friendlychat-ios
3. スターター アプリを作成する
スターター アプリを作成するには:
- ターミナル ウィンドウで、サンプルコードのダウンロードから
ios-starter/swift-starterディレクトリに移動します。 - 実行
pod install --repo-update - Xcode でプロジェクトを開くために、FriendlyChatSwift.xcworkspace ファイルを開きます。
[Run] ボタンをクリックします。
数秒後に Friendly Chat のホーム画面が表示されます。UI が表示されます。ただし、この時点では、ログイン、メッセージの送受信はできません。次のステップを完了するまで、アプリは例外を伴って中止されます。
4. Firebase コンソール プロジェクトを作成する
プロジェクトの作成
Firebase コンソールで [プロジェクトを追加] を選択します。
プロジェクト FriendlyChat を呼び出して、[プロジェクトを作成] をクリックします。
iOS アプリを接続する
- 新しいプロジェクトの [プロジェクトの概要] 画面で、[iOS アプリに Firebase を追加] をクリックします。
- バンドル ID を「
com.google.firebase.codelab.FriendlyChatSwift」と入力します。 - App Store ID として「
123456」と入力します。 - [アプリを登録] をクリックします。
アプリに GoogleService-Info.plist ファイルを追加する
2 つ目の画面で [Download GoogleService-Info.plist] をクリックして、アプリに必要な Firebase メタデータをすべて含む構成ファイルをダウンロードします。このファイルをアプリケーションにコピーして、FriendlyChatSwift ターゲットに追加します。
ポップアップの右上にある [x] をクリックして閉じることができます（ここでは手順 3 と 4 はスキップします）。
Firebase モジュールをインポートする
まず、Firebase モジュールがインポートされていることを確認します。
AppDelegate.swift、FCViewController.swift
import Firebase
AppDelegate で Firebase を構成する
application:didFinishLaunchingWithOptions 関数内で FirebaseApp の「configure」メソッドを使用し、.plist ファイルから基盤となる Firebase サービスを構成します。
AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
FirebaseApp.configure()
GIDSignIn.sharedInstance().delegate = self
return true
}
5. ユーザーを特定する
ルールを使用して認証されたユーザーのみを制限する
次に、メッセージを読み書きする前に認証を要求するルールを追加します。そのために、メッセージ データ オブジェクトに次のルールを追加します。Firebase コンソールの [データベース] セクションで [Realtime Database] を選択し、[ルール] タブをクリックします。次に、ルールを次のように更新します。
{
"rules": {
"messages": {
".read": "auth != null",
".write": "auth != null"
}
}
}
この仕組みについての詳細（「auth」変数に関するドキュメントなど）については、Firebase のセキュリティに関するドキュメントをご覧ください。
Authentication API を構成する
アプリケーションがユーザーに代わって Firebase Authentication API にアクセスするには、事前にこの API を有効にする必要があります。
- Firebase コンソールに移動し、プロジェクトを選択します。
- [Authentication] を選択します。
- [ログイン方法] タブを選択します。
- [Google] スイッチを有効（青）に切り替えます。
- 表示されるダイアログで [保存] をクリックします。
この Codelab の後半で「CONFIGURATION_NOT_FOUND」というメッセージでエラーが発生した場合は、このステップに戻って作業を再確認してください。
Firebase Auth の依存関係を確認する
Podfile ファイルに Firebase Auth の依存関係が存在することを確認します。
Podfile
pod 'Firebase/Auth'
Google ログイン用に Info.plist を設定します。
Xcode プロジェクトにカスタム URL スキームを追加する必要があります。
- プロジェクト構成を開きます（左側のツリービューでプロジェクト名をダブルクリックします）。[TARGETS] セクションでアプリを選択し、[Info] タブを開いて、[URL Types] セクションを展開します。
- [+] ボタンをクリックし、反転クライアント ID の URL スキームを追加します。この値を確認するには、GoogleService-Info.plist 構成ファイルを開いて REVERSED_CLIENT_ID キーを探します。見つかったキーの値をコピーし、設定ページの [URL Schemes] ボックスに貼り付けます。その他の入力欄は空白にしておきます。
- 完了すると、構成は次のようになります（ただし、値はアプリケーションによって異なります）。
Google ログインの clientID を設定する
Firebase を構成したら、clientID を使って「didFinishLaunchingWithOptions:」メソッド内で Google ログインをセットアップできます。
AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
FirebaseApp.configure()
GIDSignIn.sharedInstance().clientID = FirebaseApp.app()?.options.clientID
GIDSignIn.sharedInstance().delegate = self
return true
}
ログイン ハンドラを追加する
Google ログインの結果が成功したら、そのアカウントを使用して Firebase での認証を行います。
AppDelegate.swift
func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error?) {
if let error = error {
print("Error \(error)")
return
}
guard let authentication = user.authentication else { return }
let credential = GoogleAuthProvider.credential(withIDToken: authentication.idToken,
accessToken: authentication.accessToken)
Auth.auth().signIn(with: credential) { (user, error) in
if let error = error {
print("Error \(error)")
return
}
}
}
ユーザーを自動的にログインさせます。次に、Firebase Auth にリスナーを追加して、ユーザーがログインに成功したらアプリにアクセスできるようにします。deinit のリスナーを削除します。
SignInViewController.swift
override func viewDidLoad() {
super.viewDidLoad()
GIDSignIn.sharedInstance().uiDelegate = self
GIDSignIn.sharedInstance().signInSilently()
handle = Auth.auth().addStateDidChangeListener() { (auth, user) in
if user != nil {
MeasurementHelper.sendLoginEvent()
self.performSegue(withIdentifier: Constants.Segues.SignInToFp, sender: nil)
}
}
}
deinit {
if let handle = handle {
Auth.auth().removeStateDidChangeListener(handle)
}
}
ログアウト
ログアウト メソッドを追加する
FCViewController.swift
@IBAction func signOut(_ sender: UIButton) {
let firebaseAuth = Auth.auth()
do {
try firebaseAuth.signOut()
dismiss(animated: true, completion: nil)
} catch let signOutError as NSError {
print ("Error signing out: \(signOutError.localizedDescription)")
}
}
ログイン済みユーザーとしてメッセージの読み取りをテストする
- [Run] ボタンをクリックします。
- すぐにログイン画面が表示されます。Google ログインボタンをタップします。
- 問題がなければ、メッセージ画面に移動します。
6. Realtime Database を有効にする
メッセージを読み込む
Firebase コンソールのプロジェクトで、左側のナビゲーション バーから [データベース] を選択します。データベースのオーバーフロー メニューで、[Import JSON] を選択します。Friendlychat ディレクトリで initial_messages.json ファイルを参照して選択し、[Import] ボタンをクリックします。これにより、データベースに現在あるすべてのデータが置き換えられます。データベースを直接編集することもできます。その場合は、緑色の [+] と [赤色の X] を使用してアイテムの追加と削除を行います。
データベースをインポートすると、次のようになります。
Firebase Database の依存関係を確認する
Podfile ファイルの依存関係ブロックに Firebase/Database が含まれていることを確認します。
Podfile
pod 'Firebase/Database'
既存のメッセージを同期する
新しく追加されたメッセージをアプリの UI に同期するコードを追加します。
このセクションに追加するコードは次のようになります。
- Firebase データベースを初期化し、データベースに対する変更を処理するリスナーを追加します。
DataSnapshotを更新して、新しいメッセージが表示されるようにします。
FCViewController の「deinit」、「configureDatabase」、「tableView:cellForRow indexPath:」の各メソッドを、以下のコードで置き換えます。
FCViewController.swift
deinit {
if let refHandle = _refHandle {
self.ref.child("messages").removeObserver(withHandle: _refHandle)
}
}
func configureDatabase() {
ref = Database.database().reference()
// Listen for new messages in the Firebase database
_refHandle = self.ref.child("messages").observe(.childAdded, with: { [weak self] (snapshot) -> Void in
guard let strongSelf = self else { return }
strongSelf.messages.append(snapshot)
strongSelf.clientTable.insertRows(at: [IndexPath(row: strongSelf.messages.count-1, section: 0)], with: .automatic)
})
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Dequeue cell
let cell = self.clientTable.dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath)
// Unpack message from Firebase DataSnapshot
let messageSnapshot = self.messages[indexPath.row]
guard let message = messageSnapshot.value as? [String: String] else { return cell }
let name = message[Constants.MessageFields.name] ?? ""
let text = message[Constants.MessageFields.text] ?? ""
cell.textLabel?.text = name + ": " + text
cell.imageView?.image = UIImage(named: "ic_account_circle")
if let photoURL = message[Constants.MessageFields.photoURL], let URL = URL(string: photoURL),
let data = try? Data(contentsOf: URL) {
cell.imageView?.image = UIImage(data: data)
}
return cell
}
Message Sync をテストする
- [Run] ボタンをクリックします。
- [ログインして開始] ボタンをクリックして、メッセージ ウィンドウに移動します。
- Firebase コンソールで新しいメッセージを直接追加するには、「messages」エントリの横にある緑色の + 記号をクリックし、次のようなオブジェクトを追加します。
- フレンドリー チャット UI に表示されることを確認します。
7. メッセージを送信する
メッセージ送信の実装
値をデータベースに push します。push メソッドを使用して Firebase Realtime Database にデータを追加すると、自動 ID が追加されます。自動生成されるこれらの ID は連続しているため、新しいメッセージは正しい順序で追加されます。
FCViewController の「sendMessage:」メソッドを変更し、以下のコードに置き換えます。
FCViewController.swift
func sendMessage(withData data: [String: String]) {
var mdata = data
mdata[Constants.MessageFields.name] = Auth.auth().currentUser?.displayName
if let photoURL = Auth.auth().currentUser?.photoURL {
mdata[Constants.MessageFields.photoURL] = photoURL.absoluteString
}
// Push data to Firebase Database
self.ref.child("messages").childByAutoId().setValue(mdata)
}
メッセージの送信をテストする
- [Run] ボタンをクリックします。
- [ログイン] をクリックしてメッセージ ウィンドウに移動します。
- メッセージを入力して [送信] をクリックします。新しいメッセージがアプリの UI と Firebase コンソールに表示されます。
8. 画像を保存、受信する
Firebase Storage の依存関係を確認する
Podfile の dependencies ブロックで、Firebase/Storage が含まれていることを確認します。
Podfile
pod 'Firebase/Storage'
ダッシュボードで Firebase Storage を有効にする
Firebase コンソールに移動し、「gs://PROJECTID.appspot.com」ドメインで Storage が有効になっていることを確認します。
有効化ウィンドウが表示された場合は、[開始] をクリックしてデフォルトのルールで有効化します。
FirebaseStorage を構成する
FCViewController.swift
func configureStorage() {
storageRef = Storage.storage().reference()
}
既存のメッセージで画像を受信する
Firebase Storage から画像をダウンロードするコードを追加します。
FCViewController の「tableView: cellForRowAt indexPath:」メソッドを変更し、以下のコードに置き換えます。
FCViewController.swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Dequeue cell
let cell = self.clientTable .dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath)
// Unpack message from Firebase DataSnapshot
let messageSnapshot: DataSnapshot! = self.messages[indexPath.row]
guard let message = messageSnapshot.value as? [String:String] else { return cell }
let name = message[Constants.MessageFields.name] ?? ""
if let imageURL = message[Constants.MessageFields.imageURL] {
if imageURL.hasPrefix("gs://") {
Storage.storage().reference(forURL: imageURL).getData(maxSize: INT64_MAX) {(data, error) in
if let error = error {
print("Error downloading: \(error)")
return
}
DispatchQueue.main.async {
cell.imageView?.image = UIImage.init(data: data!)
cell.setNeedsLayout()
}
}
} else if let URL = URL(string: imageURL), let data = try? Data(contentsOf: URL) {
cell.imageView?.image = UIImage.init(data: data)
}
cell.textLabel?.text = "sent by: \(name)"
} else {
let text = message[Constants.MessageFields.text] ?? ""
cell.textLabel?.text = name + ": " + text
cell.imageView?.image = UIImage(named: "ic_account_circle")
if let photoURL = message[Constants.MessageFields.photoURL], let URL = URL(string: photoURL),
let data = try? Data(contentsOf: URL) {
cell.imageView?.image = UIImage(data: data)
}
}
return cell
}
9. 画像メッセージの送信
画像を保存して送信する
ユーザーから画像をアップロードし、その画像のストレージ URL をデータベースに同期して、この画像がメッセージ内で送信されるようにします。
FCViewController の「imagePickerController: DidFinishPickingMediaWithInfo:」メソッドを変更し、以下のコードに差し替えます。
FCViewController.swift
func imagePickerController(_ picker: UIImagePickerController,
didFinishPickingMediaWithInfo info: [String : Any]) {
picker.dismiss(animated: true, completion:nil)
guard let uid = Auth.auth().currentUser?.uid else { return }
// if it's a photo from the library, not an image from the camera
if #available(iOS 8.0, *), let referenceURL = info[UIImagePickerControllerReferenceURL] as? URL {
let assets = PHAsset.fetchAssets(withALAssetURLs: [referenceURL], options: nil)
let asset = assets.firstObject
asset?.requestContentEditingInput(with: nil, completionHandler: { [weak self] (contentEditingInput, info) in
let imageFile = contentEditingInput?.fullSizeImageURL
let filePath = "\(uid)/\(Int(Date.timeIntervalSinceReferenceDate * 1000))/\((referenceURL as AnyObject).lastPathComponent!)"
guard let strongSelf = self else { return }
strongSelf.storageRef.child(filePath)
.putFile(from: imageFile!, metadata: nil) { (metadata, error) in
if let error = error {
let nsError = error as NSError
print("Error uploading: \(nsError.localizedDescription)")
return
}
strongSelf.sendMessage(withData: [Constants.MessageFields.imageURL: strongSelf.storageRef.child((metadata?.path)!).description])
}
})
} else {
guard let image = info[UIImagePickerControllerOriginalImage] as? UIImage else { return }
let imageData = UIImageJPEGRepresentation(image, 0.8)
let imagePath = "\(uid)/\(Int(Date.timeIntervalSinceReferenceDate * 1000)).jpg"
let metadata = StorageMetadata()
metadata.contentType = "image/jpeg"
self.storageRef.child(imagePath)
.putData(imageData!, metadata: metadata) { [weak self] (metadata, error) in
if let error = error {
print("Error uploading: \(error)")
return
}
guard let strongSelf = self else { return }
strongSelf.sendMessage(withData: [Constants.MessageFields.imageURL: strongSelf.storageRef.child((metadata?.path)!).description])
}
}
}
画像メッセージの送受信をテストする
- [Run] ボタンをクリックします。
- [ログイン] をクリックしてメッセージ ウィンドウに移動します。
- [写真を追加] アイコンをクリックして写真を選択します。写真付きの新しいメッセージが、アプリの UI と Firebase コンソールに表示されます。
10. お疲れさまでした
Firebase を使用して、リアルタイム チャット アプリケーションを簡単に構築しました。
学習した内容
- Realtime Database
- フェデレーション ログイン
- ストレージ