FirebaseでWebチャットアプリをデプロイするまで(1時間コース)

  • 252
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

(最近チャットのSDKを開発していて、その辺に関わることを日々調査中←良かったら見てみてください。)

さて先日の13日、Google for Mobile 2016が横浜で開催されましたね。
びっくりしたのは、15時まで毎時間Firebaseの話が入っていて、GoogleさんのFireabaseへの力の入れようがハンパない感じです!

GoogleforMobile2016

基調講演

時間 内容 登壇者
9:30-10:50 Firebase の概要【同時通訳】 Laurence Moroney

ブレイクアウトセッション

時間 内容 登壇者
-11:30 Firebase Analytics の使い方【同時通訳】 Fontaine Foxworth
-12:00 Firebase データベース、ストレージ、ホスティングの使い方【同時通訳】 Jacob Wenger / Mike Mcdonald
-12:30 Firebase を使った高品質アプリの作り方 【同時通訳】 Doug Stevenson
-13:00 Firebase を使ったアプリへの連携ログイン実装方法 【同時通訳】 Laurence Moroney
-13:30 Firebase を使った通知 【同時通訳】 Thomas Bouldin
-14:00 Firebase で設定するアプリインデックス(App Indexing) 【同時通訳】 Laurence Moroney
-14:30 Firebase ケーススタディ 小川 健太郎 様、今井 猛 様、山下 大介 様
-15:00 Firebase Analytics を使ったアプリ プロモーションの可能性 横山 明子 様、菊地 慧 様 、福西 祐樹 様

これからさらにFirebase盛り上がりそうですね。

でFirebaseがどんなものか。
Webやアプリのサービスの開発に関わるほとんどのことをサポートしてくれるサービスです。
一言では言えないくらい機能が豊富で、AnalyticsもPushもリアルタイムDBもストレージもホスティングもデバイステストもA/Bテストも。。。もうなんでもできる感じです。しかもほぼタダで。

実はGoogleさんが1時間でできるサンプルアプリのチュートリアルを用意してくれてます。
これを触れば、リアルタイムDBやストレージ、ホスティングに関して、Firebaseの事がよくわかると思います。
Build a Real Time Web Chat App (英語)

作ってみたところ、ざっと2時間くらいかかりました。^^;
今回そのエッセンスだけ取り出して、このQiitaページに書いています。
なので、予定通り1時間でできると思います。

では始めていきます。

FirebaseでWebチャットアプリをデプロイするまで(1時間コース)

↓作るものはこういうのです
画像

1 概要 (残り60分)

Firebaseを使った簡単なWebアプリの実装と、Firebaseを使ったチャットクライアントのデプロイ

何が学べるか?

・Firebaseのリアルタイムデータベースとストレージの使い方
・Firebaseの認証
・FirebaseにホストしたWebアプリの公開

何が必要か?

・テキストエディタ WebStorm,、AtomSublimeとか。
・サンプルコード(2でやるやつ)
Chromeブラウザ

2 サンプルコードの取得(残り59分)

Githubのサンプルコードページからクローンする
コマンドの場合はgit clone https://github.com/firebase/friendlychat

3 アプリのインポート(残り57分)

クローンした中のweb-startディレクトリを使っていきます。

4 Firebaseプロジェクトの作成と、アプリの設定(残り56分)

プロジェクトの作成

Firebaseコンソールで「新規プロジェクト作成」ボタンをクリック

アプリの認証

「WebアプリにFirebaseを追加」を選択
すると以下のようなjavascriptのスニペットを得るので、
「コピー」ボタンを押して、index.htmlTODOのところに貼り付ける
画像

ここで稀にstorageBucketの値が""となっている場合があるので、その際には一旦窓を閉じて、再度「WebアプリにFirebaseを追加」を選択する

Google認証を有効化

Firebaseのコンソールで
Auth > 「ログイン方法を設定」>Goole >「有効にする」をスライドする>「保存」

をクリック

5 Firebaseコマンドラインのインストール(残り51分)

Firebase Command Line Interface (CLI) はローカルで作っているアプリをFirebaseのホスティングサービスにUpするために必要
まずFirebaseのコンソールでHostingを選択
「スタートガイド」ボタンをクリック
あとは画面の通りに進めるだけ。

CLIにはnpmnode.jsが必要なのでなければインストールする
もしインストールに失敗したら、npmのパーミション設定を変更する必要がある。
インストール終わったらコマンドで以下を叩いて

firebase version

3.*.*とか出ればOK。もし2.*.*とか出たらもう古い。

firebaseにログインする。コマンドラインで

firebase login

cdweb-startディレクトリに移動して以下のコマンド

firebase use --add

ここで出てきたProjectIdを選択する

6 アプリの起動(残り49分)

web-startフォルダで以下のコマンドを実行

firebase serve

h ttp://localhost:5000/なんちゃらかんちゃら…ってでてきたら、ブラウザで
http://localhost:5000を叩けばOK!
サンプルアプリが見れるはず
ただこのままじゃ何もできないので修正

7 ユーザーのサインイン機能(残り48分)

Firebaseの認証の初期化

scripts/main.jsFriendlyChat.prototype.initFirebase関数のところを修正する必要がある

FriendlyChat.prototype.initFirebase = function() {
  // Shortcuts to Firebase SDK features.
  this.auth = firebase.auth();
  this.database = firebase.database();
  this.storage = firebase.storage();
  // Initiates Firebase auth and listen to auth state changes.
  this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};

GoogleによるFirebaseの認証

main.jsのscripts/main.jsFriendlyChat.prototype.signIn関数のとこも

// Signs-in Friendly Chat.
FriendlyChat.prototype.signIn = function() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  this.auth.signInWithPopup(provider);
};

FriendlyChat.prototype.signOut

    // Sign out of Firebase.
    this.auth.signOut();

FriendlyChat.prototype.onAuthStateChanged

    // Get profile pic and user's name from the Firebase user object.
    var profilePicUrl = user.photoURL; // Only change these two lines!
    var userName = user.displayName;   // Only change these two lines!

FriendlyChat.prototype.checkSignedInWithMessage

  // Return true if the user is signed in Firebase
  if (this.auth.currentUser) {
    return true;
  }

ここまで書いたら、ブラウザをリロードするか、コマンドでfirebase serveを打つ

ブラウザでlocalhost:5000を見たら、右上にGoogleによるログイン機能が実装されてるはず

8 メッセージを読む(残り38分)

FirebaseコンソロールのDatabaseセクションをクリック

「・・・」(←・は縦に並んでる)ボタンのJSONをインポートボタンをクリック

ローカルのfirebase_sampleディレクトリにあるinitial_messages.jsonをインポートすればOK

メッセージを同期

main.jsのFriendlyChat.prototype.loadMessages編集

FriendlyChat.prototype.loadMessages = function() {
  // Reference to the /messages/ database path.
  this.messagesRef = this.database.ref('messages');
  // Make sure we remove all previous listeners.
  this.messagesRef.off();

  // Loads the last 12 messages and listen for new ones.
  var setMessage = function(data) {
    var val = data.val();
    this.displayMessage(data.key, val.name, val.text, val.photoUrl, val.imageUrl);
  }.bind(this);
  this.messagesRef.limitToLast(12).on('child_added', setMessage);
  this.messagesRef.limitToLast(12).on('child_changed', setMessage);
};

ここまで書いたら、ブラウザをリロードするか、コマンドでfirebase serveを打つ

ブラウザでlocalhost:5000を見たら、右上にGoogleによるログイン機能が実装されてるはず

9 データベースセキュリティルール(残り28分)

セキュリティールールの設定

バリデーションの設定とかできる。nullチェックとか。

やり方は、Firebaseコンソール画面のDatabeaseセクションのルールタブで。

デフォルトのルールはこんな感じ

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

9項はオプションなので以下省略

10 メッセージの送信(残り23分)

実装

main.jsのFriendlyChat.prototype.saveMessage

// Saves a new message on the Firebase DB.
FriendlyChat.prototype.saveMessage = function(e) {
  e.preventDefault();
  // Check that the user entered a message and is signed in.
  if (this.messageInput.value && this.checkSignedInWithMessage()) {
    var currentUser = this.auth.currentUser;
    // Add a new message entry to the Firebase Database.
    this.messagesRef.push({
      name: currentUser.displayName,
      text: this.messageInput.value,
      photoUrl: currentUser.photoURL || '/images/profile_placeholder.png'
    }).then(function() {
      // Clear message text field and SEND button state.
      FriendlyChat.resetMaterialTextfield(this.messageInput);
      this.toggleButton();
    }.bind(this)).catch(function(error) {
      console.error('Error writing new message to Firebase Database', error);
    });
  }
};

ここまで書いたら、ブラウザをリロードするか、コマンドでfirebase serveを打つ

ブラウザでlocalhost:5000を見たら、送信が実装されてるはず

11 画像送信(残り18分)

Firebaseのストレージに画像を保存

main.jsのFriendlyChat.prototype.saveImageMessage

// Saves the a new message containing an image URI in Firebase.
// This first saves the image in Firebase storage.
FriendlyChat.prototype.saveImageMessage = function(event) {

  ...

  // Check if the user is signed-in
  if (this.checkSignedInWithMessage()) {

    // We add a message with a loading icon that will get updated with the shared image.
    var currentUser = this.auth.currentUser;
    this.messagesRef.push({
      name: currentUser.displayName,
      imageUrl: FriendlyChat.LOADING_IMAGE_URL,
      photoUrl: currentUser.photoURL || '/images/profile_placeholder.png'
    }).then(function(data) {

      // Upload the image to Firebase Storage.
      var uploadTask = this.storage.ref(currentUser.uid + '/' + Date.now() + '/' + file.name)
          .put(file, {'contentType': file.type});
      // Listen for upload completion.
      uploadTask.on('state_changed', null, function(error) {
        console.error('There was an error uploading a file to Firebase Storage:', error);
      }, function() {

        // Get the file's Storage URI and update the chat message placeholder.
        var filePath = uploadTask.snapshot.metadata.fullPath;
        data.update({imageUrl: this.storage.ref(filePath).toString()});
      }.bind(this));
    }.bind(this));
  }
};

画像をFirebaseのストレージから表示する

main.jsのFriendlyChat.prototype.setImageUrl

// Sets the URL of the given img element with the URL of the image stored in Firebase Storage.
FriendlyChat.prototype.setImageUrl = function(imageUri, imgElement) {
  // If the image is a Firebase Storage URI we fetch the URL.
  if (imageUri.startsWith('gs://')) {
    imgElement.src = FriendlyChat.LOADING_IMAGE_URL; // Display a loading image first.
    this.storage.refFromURL(imageUri).getMetadata().then(function(metadata) {
      imgElement.src = metadata.downloadURLs[0];
    });
  } else {
    imgElement.src = imageUri;
  }
};

ここまで書いたら、ブラウザをリロードするか、コマンドでfirebase serveを打つ

ブラウザでlocalhost:5000を見たら、画像送信が実装されてるはず

12 ストレージセキュリティルール(残り8分)

これも9と同じでバリデーションとか設定できるよう。オプションなので今回は省略

13 Firebaseのホスティングにアプリをデプロイする(残り3分)

firebase.jsonを以下に書き換え

{
  // 9のステップを踏んだ場合は以下のコメントを外す
  // "database": {
  //   "rules": "database-rules.json"
  // },
  // 12のステップを踏んだ場合は以下のコメントを外す
  // "storage": {
  //   "rules": "storage.rules"
  // },
  "hosting": {
    "public": "./",
    "ignore": [
      "firebase.json"//,
      // "database-rules.json",//9のステップを踏んだ場合はコメントを外す(上の行のコメントも)
      // "storage.rules"// 12のステップを踏んだ場合はコメントを外す(同上)
    ]
  }
}

カレントディレクトリの名前がpublicになってるので、web-startディレクトリをコピペして、そのディレクリ名をpublicに変更。

変更したら、コマンドラインでpublicディレクトリへcd

あとは以下のコマンドを打てばデプロイ完了

firebase deploy

これでWebに公開されました!
簡単なリアルタイムチャットはこれで作れますね。
以上です。

てか、javascriptだけでWebサービス作るなら、もうレンタルサーバもAWSもHerokuもいらんよって話になっちゃってますね。コレ。。
Firebaseすごいな〜
またFirebaseネタアップしますね。