iOSのプログラム言語SwiftでFirebaseのRealtime Databaseを使ってみたい!

GoogleのFirebaseに興味があったので使ってみました。

FirebaseとはMBaaS(Mobile Backend as a Service)と呼ばれるクラウドサービスで、クライアントサーバのサーバ側でほとんど開発を行う事なくサーバ側の必要な機能を提供してくれる大変便利なサービスです。このMBaaSはGoogleのFirebaseの他にAmazonのAWS Mobile Hub、Microsoft Asure Mobile Appsなどがあり、どのサービスもサーバ側の開発を必要としない豊富な機能を提供しています。

最初AWS Mobile HubかFirebaseのどちらを使うか迷っていたのですが、Firebaseにある「Realtime Database」という機能が気になったのでFirebaseを使ってみる事にしました。

この記事ではXcodeでRealtime Databaseを使ったテストアプリを動かすまでの流れを書いていきます。

Xcodeプロジェクトを作成する

まずはXcodeのテストアプリのプロジェクトを作成します。

[Create a new Xcode project]から[Single View App]を選んでXcodeプロジェクトを作成します。

Xcodeプロジェクトの作成後、[Bundle Identifier]の内容を覚えておきます。次の「Firebaseプロジェクトを作成する」で[Bundle Identifier]を使います。

Firebaseプロジェクトを作成する

次にFirebase ConsoleからFirebaseプロジェクトを作成します。Googleのアカウントが必要なので、ない場合はアカウントを作りましょう。

[プロジェクトの作成]を選んで画面を進めます。

[プロジェクト名]を入力して[国/地域]から日本を選びます。そして[測定管理者間のデータ保護条項]のチェックボックスにチェックを入れて[プロジェクトの作成]ボタンを押して作成します。

[iOSアプリにFirebaseを追加]を選択します。

先程作成したXcodeプロジェクトの[Bundle Identifier]を[iOSバンドルID]に入力し、[アプリの登録]ボタンを押します。

[ダウンロード GoogleService-Info.plist]からplistファイルをダウンロードして[続行]ボタンを押して画面を進めます。以降の画面は入力や選択等の操作はないので特に気にせずに画面を進めていきましょう。

XcodeにFirebaseを導入する

Xcode上でFirebaseを使えるようにします。

ダウンロードしたGoogleService-Info.plistをXcodeプロジェクトに追加します。追加したらXcodeは一度終了させて、Macのターミナルを起動します。

ターミナルを起動したら作成したXcodeのプロジェクトフォルダに移動します。
cd パス名
を入力するのですが、パス名はFinderからフォルダをターミナルにドラッグ&ドロップでパス名が出てくるので便利です。
次に
pod init
でEnterキーを押します。すると移動させたプロジェクトフォルダに「Podfile」が作成されます。
作成されたら
vi Podfile
でEnterキーを押してPodfileを開きます。

Podfileが開いたら[i]キーを押して入力状態にして上記画像の赤枠の箇所に
pod ‘Firebase/Database’
を追加してescキーで入力状態から戻して、
:wq
を入力後、Enterキーを押してターミナルに戻ります。

ターミナル画面で
pod install
を入力、Enterキーを押してpodのインストールを開始します。赤枠の「Pod installation complete」が表示されればOKです。

真ん中の赤枠「Installing Firebase (4.2.0)」等のバージョン表記が古くないかを確認してください。

FinderでXcodeプロジェクトを確認してFirebaseTest.xcworkspaceファイルがあればOKです。このファイルからXcodeを起動させましょう。

Xcodeを起動させたらAppDelegate.swiftを選択してFirebaseを使うための赤枠で囲われた部分のコードを追加します。

ここで一度試しにビルドしてみます。するといくつか警告が出てしまいました。

テストプログラムで警告なのであまり気にしなくても良いかもしれないですが、気になるので警告を解消していきます。

まず画面左側ペインに表示された警告一覧から項目を選択するとソース画面がその警告箇所にジャンプします。

274行目と275行目にある警告箇所の三角形マークをタップすると「Fix」ボタンが出てくるのでボタンを押して警告を解消します。

上記のポップアップが出てきたら「Unlock」ボタンを押します。すると警告部分を修正してくれて警告が解消されます。

同じように警告が出ていたら解消していきましょう。解消できたら再度ビルドして問題ないことを確認します。

テストアプリを実装する

さて、ここからいよいよテストアプリを実装していきます。

実装内容は
・Firebaseのデータベースに対し名前と年齢の追加や変更を行う
・Firebaseのデータベースから名前と年齢をアプリ側に接続し、リアルタイムで変更が反映されるようにする
となります。

Main.storyboardを選択し、ViewController上に必要なコントロールを配置していきます。

ここではデータベースへ追加・変更する為の「名前」「年齢」のUITextFieldと「追加」ボタンを配置します。またデータベースから「名前」「年齢」を取得して表示させる為のUILabelと「接続」ボタンを配置します。


import UIKit
import Firebase

class ViewController: UIViewController {
    
    @IBOutlet weak var toName: UITextField!
    @IBOutlet weak var toAge: UITextField!
    @IBOutlet weak var fromName: UILabel!
    @IBOutlet weak var fromAge: UILabel!
    
    var dbRef: DatabaseReference!
    var added: Bool!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.dbRef = Database.database().reference()
        
        let user = self.dbRef.child("user/01")
        user.observe(.value) { (snapshot: DataSnapshot) in
            if snapshot.hasChild("name") { self.added = true }
            else { self.added = false }
        }
    }

    @IBAction func add(_ sender: AnyObject) {
        let name = ["name": self.toName.text!]
        let age: Int = Int(self.toAge.text!)!
        self.dbRef.child("user/01").setValue(name)
        self.dbRef.child("user/01/age").setValue(age)
    }

    @IBAction func connect(_ sender: AnyObject) {
        let name = self.dbRef.child("user/01/name")
        let age = self.dbRef.child("user/01/age")
        name.observe(.value) { (snapshot: DataSnapshot) in
            self.fromName.text = (snapshot.value! as AnyObject).description
        }
        age.observe(.value) { (snapshot: DataSnapshot) in
            self.fromAge.text = (snapshot.value! as AnyObject).description
        }
    }

    @IBAction func changed(_ sender: AnyObject) {
        if added {
            let name = self.toName.text!
            let age: Int = (self.toAge.text?.isEmpty)! ? 0 : Int(self.toAge.text!)!
            self.dbRef.child("user/01/name").setValue(name)
            self.dbRef.child("user/01/age").setValue(age)
        }
    }

}

ViewController.swiftに上記ソースコードのハイライト部分を追加します。またはソースコードまるまるコピペでも問題ないと思います。

最後にストーリボード上のコントロールとソースコードのIBOutlet&IBActionの紐づけを行いましょう。

名前と年齢のUITextFieldのIBActionの「changed」では「Editing Changed」イベント、追加と接続のUIButtonの「add」「connect」では「Touch Down」イベントを紐付けるようにします。またIBOutletでは名前と年齢のUITextFieldとUILabelをそれぞれ紐づけます。

ここまで出来たら実装は完了です。

Realtime Databaseを作成する

再びFirebase Consoleに戻ってRealtime Databaseを作成します。

左側のメニューから[Develop]-[Database]を選択し、Databaseの「スタートガイド」ボタンを押します。

「テストモードで開始」を選択して「有効にする」ボタンを押します。

上記の赤枠の状態になればOKです。最後にXcodeのシミュレーターを起動させてリアルタイムデータのやり取りが出来ているのかを確認していきましょう。

まとめ

Firebaseの導入に大きなハードルもなく簡単に行うことが出来ました。アプリ側の実装もFirebaseのライブラリは他のよくあるライブラリと同じ様な感覚で使えてしかも少ないソースコードでここまで出来ちゃうのはやはり大きな魅力を感じますね。

ただ唯一気になったのはFirebaseライブラリのバージョン違いでクラス名やメソッド名が大きく変わってしまっている事ですかね。アプリ開発をしていてiOSのバージョンが上がるとそれまで使っていたメソッド名が使えなくなってしまって、いざビルドするとあちこちでエラーや警告が出てしまうといった事がよくありiOSやライブラリのバージョンを上げるたびにコロコロと名前を変えないでくれと思ってしまいます。

今回はFirebaseのRialtime Databaseを使ってみましたが、それ以外にもまだまだ機能が豊富にあるので少しの勉強と開発コストでアプリ開発の幅が大きく広がっていくのではないでしょうか。

次回はサーバー認証機能にチャレンジしてみたいと思います!

この記事をシェアする
  •  
  •  
  •  
  •  
  •  
  •  

3 Replies to “iOSのプログラム言語SwiftでFirebaseのRealtime Databaseを使ってみたい!”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です