Firebase iOS Codelab Swift

1. 概要

2efe6805ef369641.png

フレンドリー チャットの Codelab へようこそ。この Codelab では、Firebase プラットフォームを使用して iOS アプリを作成する方法を学びます。Firebase を使用してチャット クライアントを実装し、そのパフォーマンスをモニタリングします。

ラボの内容

  • ユーザーにログインを許可する。
  • Firebase Realtime Database を使用してデータを同期する。
  • バイナリ ファイルを Firebase Storage に保存します。

必要なもの

  • Xcode
  • CocoaPods
  • iOS 8.0 以降またはシミュレータを搭載したテストデバイス

このチュートリアルをどのように使用されますか?

通読のみ 通読して演習を行う

iOS アプリの作成に関するご経験について、どのように思われますか。

<ph type="x-smartling-placeholder"></ph> 初心者 中級 上達 をご覧ください。

2. サンプルコードを取得する

コマンドラインから GitHub リポジトリのクローンを作成します。

$ git clone https://github.com/firebase/codelab-friendlychat-ios

3. スターター アプリをビルドする

2f4c98d858c453fe.png

スターター アプリをビルドするには:

  1. ターミナル ウィンドウで、ダウンロードしたサンプルコードから android_studio_folder.pngios-starter/swift-starter ディレクトリに移動します。
  2. 実行 pod install --repo-update
  3. Xcode でプロジェクトを開くには、friendChatSwift.xcworkspace ファイルを開きます。
  4. [98205811bbed9d74.png実行] ボタンをクリックします。

数秒後に フレンドリー チャットのホーム画面が表示されます。UI が表示されます。ただし、この時点ではログインやメッセージの送受信ができません。次のステップを完了するまで、例外が発生してアプリは中止されます。

4. Firebase コンソール プロジェクトの作成

プロジェクトを作成

Firebase コンソールで [プロジェクトを追加] を選択します。

プロジェクトの名前を FriendlyChat にして、[プロジェクトを作成] をクリックします。

2015-11-06 14:13:39.png のスクリーンショット

iOS アプリを接続する

  1. 新しいプロジェクトの [Project Overview] 画面で、[Add Firebase to your iOS app] をクリックします。
  2. バンドル ID を「com.google.firebase.codelab.FriendlyChatSwift」のように入力します。
  3. App Store ID として「123456」と入力します。
  4. [アプリを登録] をクリックします。

GoogleService-Info.plist ファイルをアプリに追加する

2 番目の画面で、[Download GoogleService-Info.plist] をクリックして、アプリに必要なすべての Firebase メタデータを含む構成ファイルをダウンロードします。そのファイルをアプリケーションにコピーし、friendChatSwift ターゲットに追加します。

[X] をクリックしてをクリックしてポップアップを閉じます。この後の手順 3 と 4 はスキップします。

19d59efb213ddbdc.png

Firebase モジュールをインポートする

まず、Firebase モジュールがインポートされていることを確認します。

AppDelegate.swiftFCViewController.swift

import Firebase

AppDelegate で Firebase を構成する

[構成] のメソッドを application:didFinishLaunchingWithOptions 関数内で使用して、基盤となる Firebase サービスを .plist ファイルから構成します。

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 を有効にする必要があります

  1. Firebase コンソールに移動してプロジェクトを選択します。
  2. [認証] を選択します。
  3. [Sign In Method] タブを選択します。
  4. [Google] スイッチを有効(青)に切り替えます。
  5. 表示されるダイアログで [Save] をクリックします。

この Codelab の後半で「CONFIGURATION_NOT_FOUND」というメッセージでエラーが発生した場合は、このステップに戻って作業を再確認してください。

Firebase Auth の依存関係を確認する

Podfile ファイルに Firebase Auth の依存関係が存在することを確認します。

Podfile

pod 'Firebase/Auth'

Google ログイン用に Info.plist を設定します。

XCode プロジェクトにカスタム URL スキームを追加する必要があります。

  1. プロジェクト構成を開きます(左側のツリービューでプロジェクト名をダブルクリックします)。[TARGETS] セクションでアプリを選択し、[Info] タブを開いて [URL Types] セクションを展開します。
  2. [+] ボタンをクリックし、反転クライアント ID の URL スキームを追加します。この値を確認するには、GoogleService-Info.plist 構成ファイルを開き、REVERSED_CLIENT_ID キーを探します。そのキーの値をコピーし、設定ページの [URL スキーム] ボックスに貼り付けます。その他の入力欄は空白にしておきます。
  3. 完了すると、構成は次のようになります(ただし、値はアプリケーションによって異なります)。

1b54d5bd2f4f1448.png

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)")
    }
  }

ログイン ユーザーとしてメッセージの読み取りをテストする

  1. [98205811bbed9d74.png実行] ボタンをクリックします。
  2. すぐにログイン画面が表示されます。[Google ログイン] ボタンをタップします。
  3. すべて正常に処理されていれば、メッセージ画面に移動します。

6. Realtime Database を有効にする

2efe6805ef369641.png

メッセージをインポートする

Firebase コンソールのプロジェクトの左側のナビゲーション バーから [データベース] を選択します。データベースのオーバーフロー メニューで、[Import JSON] を選択します。friendchat ディレクトリ内の initial_messages.json ファイルを参照して選択し、[Import] ボタンをクリックします。これにより、現在データベースにあるすべてのデータが置き換えられます。また、データベースを直接編集することもできます。その場合、緑色の + と赤色の X を使用して、アイテムを追加または削除します。

20ccf4856b715b4c.png

データベースをインポートすると、次のようになります。

f3e0367f1c9cd187.png

Firebase データベースの依存関係を確認する

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 をテストする

  1. [98205811bbed9d74.png実行] ボタンをクリックします。
  2. [ログインして開始] ボタンをクリックしてメッセージ ウィンドウに移動します。
  3. 「メッセージ」の横にある緑色の + 記号をクリックすると、Firebase コンソールで新しいメッセージを直接追加できますエントリを追加し、次のようなオブジェクトを追加します。f9876ffc8b316b14.png
  4. フレンドリー チャット UI に表示されていることを確認します。

7. メッセージを送信

送信メッセージを実装する

値をデータベースに push します。push メソッドを使用して Firebase Realtime Database にデータを追加すると、自動的に ID が追加されます。これらの自動生成された ID は連続しており、新しいメッセージが正しい順序で追加されます。

FCViewController の "sendMessage:" を変更します。method;以下の定義のコードに置き換えます。

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)
  }

メッセージの送信のテスト

  1. [98205811bbed9d74.png実行] ボタンをクリックします。
  2. [ログイン] をクリックしてメッセージ ウィンドウに移動します。
  3. メッセージを入力して [送信] をクリックします。新しいメッセージがアプリの UI と Firebase コンソールに表示されます。

8. 画像の保存と受信

Firebase Storage の依存関係を確認する

Podfile の依存関係ブロックに Firebase/Storage が含まれていることを確認します。

Podfile

pod 'Firebase/Storage'

ダッシュボードで Firebase Storage を有効にする

Firebase コンソールに移動し、Storage が gs://PROJECTID.appspot.com で有効になっていることを確認します。ドメイン

b0438b37a588bcee.png

有効化ウィンドウが表示された場合は、[使ってみる] をクリックします。デフォルトのルールで有効にできます。

c290bbebff2cafa7.png

FirebaseStorage を構成する

FCViewController.swift

  func configureStorage() {
    storageRef = Storage.storage().reference()
  }

既存のメッセージで画像を受信する

Firebase Storage から画像をダウンロードするコードを追加します。

FCViewController の「tableView: cellForRowAt indexPath:」を変更します。method;以下の定義のコードに置き換えます。

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:」を変更します。method;以下の定義のコードに置き換えます。

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])
      }
    }
  }

画像メッセージの送受信をテストする

  1. [98205811bbed9d74.png実行] ボタンをクリックします。
  2. [ログイン] をクリックしてメッセージ ウィンドウに移動します。
  3. [写真を追加] をクリックします写真を選択します。写真付きの新しいメッセージがアプリの UI と Firebase コンソールに表示されます。

10. 完了

Firebase を使用して、リアルタイム チャット アプリケーションを簡単に構築できました。

学習した内容

  • Realtime Database
  • フェデレーション ログイン
  • ストレージ

詳細