komeの備忘録

東大理系大学院生の技術ブログ。たまに趣味。

Firebase+Swift4.0+DeployGateで爆速でiOSアプリ公開する

f:id:komee:20180522082552p:plain

iOSアプリを作るときによく使うユーザー認証機能をFirebaseで実装したときのメモ
プロトタイプの配布用にDeployGateを用いた。

※ 今回はただログインするだけのアプリを作ります.アプリの中身はないです

目次

作るもの

  • iOSアプリ
  • ユーザー認証機能
  • AppStore経由せずに公開し、アップデート配布する

必要なもの

  • Xcode 9.2
  • Firebase アカウント
  • Deplogate アカウント

使うもの

  • Swift 4.0

所要時間

デプロイまで1時間以内

1. Firebase設定

Firebaseとは、Googleが提供するいわゆるBaaS (Backend as a Service) といわれるもの。 アプリ開発(iOS, Android, web)に必要なバックエンドのサービスをほぼ全て提供している。しかも無料でかなり使えるのが強み。

現在利用可能なサービスは

  • Authentication(今回使用する)
    • 様々なユーザ認証。ユーザIDも発行してくれて便利。メール&パスワード認証、SMS認証、Facebook/Twitter/Google認証などを提供
  • Database
    • 目玉機能。JSONベースのいわゆるNoSQLで、名前の通り端末とリアルタイム更新が簡単に実装できるような仕組みになっている。Realtime Databaseが安定稼働版で、Cloud Firestore がベータ版運用。今後は多分Cloud firestoreに移行しそうな予感がする。
  • Storage
    • 画像などメディアを保存可能。
  • Hosting
    • コマンド$ firebase deployで一発ウェブホスティング&デプロイ可能なのがいいホスティングサービス
  • ML Kit
    • 最近(2018/05現在)リリースされた新サービス。Tensorflow liteで実装したモデルが簡単にアプリにデプロイできる。Google sugoi。

そのほか、Google Analyticsの簡易版のような、Firebase Analyticsというものが使えたりと、プロトタイプ開発するなら絶対使った方がいいサービスである。余計な実装に手間取らずにプロダクト開発に注力できる。

まずはFirebase Consoleにログインし、プロジェクトを追加。 f:id:kaz02251994:20180522014031p:plain

バンドルIDは、アプリを識別するための一意のID。AppStore申請する場合は、Xcodeの設定と一致させる必要があったりするが、今回のようにプロトタイプ開発の場合は適当でOK。 f:id:kaz02251994:20180220095439p:plain

続いて GoogleService-info.plistなるものをダウンロードする.これが自分のFirebase環境とアプリを紐づける鍵のようなものになる。 f:id:kaz02251994:20180220095457p:plain

諸々の初期設定を終えるといよいよコンソール画面を触る。左のバーからAuthenticationのサービスを選び、ログイン方法のタブへ移動。そこからログイン方法を適宜有効にする。指示されているXcodeのプロジェクトディレクトリにあとで追加する。

f:id:kaz02251994:20180522014149p:plain

2. xcodeでアプリを作る

Xcodeを立ち上げ、新規プロジェクトを始める。
Single page appを選択して、早速ログイン画面を作る。
今回はなるべくシンプルにするため、メールアドレス入力欄とパスワード入力欄、それからログインボタンと新規登録ボタンのみを実装する。Storyboard上でサクッと作成。

f:id:kaz02251994:20180522014223p:plain

続いて、Firebase SDKを導入する。
まずは$pod initを、xcodeproject ファイルがあるディレクトリで実行。するとPodFileが生成されるので、それを編集して、$ pod install$ pod updateを実行する。

$ cd /path/to/testapp/project
$ ls 
testApp/           testApp.xcodeproj/ testAppTests/      testAppUITests/
$ pod init
$ vim PodFile
$ pod install
$ pod update

Podfileはこのようにする. f:id:kaz02251994:20180220095549p:plain

podのインストールが完了するとxcode.workspaceファイルが生成されるので、そこからXcodeを起動する。

xcode.projectファイルだとpodが使えないので注意

続いてXcodeの画面に戻り、先ほど作成したStoryboardの画面に対応するViewControllerを以下のように実装。

import UIKit
import Firebase

class ViewController: UIViewController {
    @IBOutlet weak var addressTextField: UITextField!
    
    @IBOutlet weak var passwordTextField: UITextField!
    
    @IBAction func loginButton(_ sender: Any) {
        if inputValidation() {
            let address = addressTextField.text!
            let password = passwordTextField.text!
            
            login(address: address, password: password)
        }
    }
    
    @IBAction func signUpButton(_ sender: Any) {
        if inputValidation() {
            let address = addressTextField.text!
            let password = passwordTextField.text!
            Auth.auth().createUser(withEmail: address, password: password) { user, error in
                if let error = error {
                    self.showAlert(msg: error.localizedDescription)
                    return
                } else {
                    print("user create ok")
                    self.showAlert(msg: "Succsessfully User Created")
                    self.login(address: address, password: password)
                }
            }
        }
    }
    private func login(address: String, password: String) {
        Auth.auth().signIn(withEmail: address, password: password){ user, error in
            if let error = error{
                self.showAlert(msg: error.localizedDescription)
            } else {
                self.showAlert(msg: "Login OK")
            }
        }
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    private func inputValidation() -> Bool {
        if addressTextField.text!.isEmpty {
            self.showAlert(msg: "Invalid email")
            return false
        }
        if passwordTextField.text!.isEmpty {
            self.showAlert(msg: "Invalid password")
            return false
        }
        return true
    }
    
    
    private func showAlert(msg: String) {
        let alert = UIAlertController(title: msg, message: "", preferredStyle: .alert)
        self.present(alert, animated: true, completion: {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
                alert.dismiss(animated: true, completion: nil)
            })
        })
    }
    
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

これでログイン認証&サインアップ機能がついたiOSアプリがサクッと実装できた!

3. DeployGateで配布する

DeployGateへは、Xcodeからipaファイルを生成し、アップロードすることでアプリを配布できる。
DeployGateの利用には、AppStoreに公開する際と同様に証明書をいくつか揃える必要がある。
基本的に次のURLに従って次のように行えば大丈夫。

DeployGate

  • 配布用証明書の取得
  • アプリの登録
  • デバイスの登録
  • プロビジョニングファイルの取得

デバイスの登録は、後で改めてすることも可能。
プロビジョニングファイルとは、開発者証明書やアプリの情報、デバイスの情報などをまとめたデータのこと。
これをアプリに入れ、ビルドする必要がある。

ビルドはXcodeの上部メニューバーから、Product -> Archiveを選択すると、アーカイブを作成する。
その後Organizeウィンドウが開くので、生成したビルドを選択し、Adhoc で出力する。
Thiningの対象デバイスはNoneでOK。
その後処理を待って、ipaファイルが生成される。

ビルドのアップデートができたら、DeployGateにアクセスし、アップロードボタンを押して生成したipaファイルをアップロードする。
以下のような配布用画面で、アプリを配布できる。

f:id:kaz02251994:20180522014334p:plain

(基本的に実機ビルドは、プロビジョニングファイル に登録された端末でしかできないためこのようにする)

4. デバイスの追加

DeployGateによるアプリ配布はグローバルなものではなく、事前にデバイス登録されたユーザーのみが使うことができる。
デバイス登録がされていないユーザーが配布ページからアプリをダウンロードしようとすると、まず管理者に登録申請が送られる。
管理者は、登録希望者のUDID (iPhoneの個体識別ナンバーのようなもの) を知ることができるので、それを上記3の手順で行なった、 デバイスの登録 のところで追加する。
その後プロビジョニングファイルを再生成し、アプリを再ビルド、アップロードすると、新規登録申請者はアプリをインストールできるようになる。

未登録デバイスは以下のようにDeployGateページから確認できる。 f:id:kaz02251994:20180522014553p:plain

まとめ

Firebaseを使うと、サーバレスで基本的なアプリ開発に必要なバックエンドサービスがだいたい揃ってしまうので、プロトタイプ開発に非常に役立つ。
DeployGateを使うと面倒なAppStore申請をしなくても、身内にテスト配布ができるので爆速公開、テストには非常に便利。

こういうサービスをうまく使って、サクッとMVP(Minimum Value Product)を作って即デプロイしまくろう。これで一気にITベンチャー企業で女優をゲットだ!