More than 5 years have passed since last update.

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

Last updated at 2018-05-05Posted at 2016-07-14

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

基調講演

時間	内容	登壇者
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さんが１時間でできるサンプルアプリのチュートリアルを用意してくれてます。
これを触れば、リアルタイムDBやストレージ、ホスティングに関して、Firebaseの事がよくわかると思います。
Build a Real Time Web Chat App (英語)

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

では始めていきます。

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

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

1 概要（残り60分）

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

何が学べるか？

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

何が必要か？

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

2 サンプルコードの取得（残り59分）

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

3 アプリのインポート（残り57分）

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

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

プロジェクトの作成

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

アプリの認証

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

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

Google認証を有効化

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

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

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

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

firebase version

3.*.*とか出ればOK。もし2.*.*とか出たらもう古い。
firebaseにログインする。コマンドラインで

firebase login

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

firebase use --add

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

6 アプリの起動（残り49分）

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

firebase serve

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

7 ユーザーのサインイン機能（残り48分）

Firebaseの認証の初期化

scripts/main.jsのFriendlyChat.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.jsのFriendlyChat.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);
};

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

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

バリデーションの設定とかできる。nullチェックとか。
やり方は、Firebaseコンソール画面のDatabeaseセクションのルールタブで。
デフォルトのルールはこんな感じ

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

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

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ネタアップしますね。

631

641

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

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

1 概要 （残り60分）

何が学べるか？

何が必要か？

2 サンプルコードの取得（残り59分）

3 アプリのインポート（残り57分）

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

プロジェクトの作成

アプリの認証

Google認証を有効化

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

6 アプリの起動（残り49分）

7 ユーザーのサインイン機能（残り48分）

Firebaseの認証の初期化

GoogleによるFirebaseの認証

8 メッセージを読む（残り38分）

メッセージを同期

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

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

10 メッセージの送信（残り23分）

実装

11 画像送信（残り18分）

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

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

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

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

1 概要（残り60分）