Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

さて先日の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ネタアップしますね。

codomo_pro
色々やってます
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away