firebaseとVue.js入門

前書き

WebBench という勉強会に参加してきました!

Firebaseでリアルタイムチャットを制作

2018/09/02 13:00〜

この講座ではfirebaseとjavascriptで簡単なアプリを作ることが目的でした。

自分はこのイベントで作ったものをvue.jsで作り直しましたのでご紹介させてください。

お品書き

・firebaseとは

・firebaseの設定

・vue.jsコードを記述

・firebaseで公開

firebaseとは

firebaseはgoogleが運営しているサービス

(2014年 後半 に買収)

Bassなどと呼ばれ、開発フェーズに置けるログインや分析やチャットなどいかに早く安全に作るかという目的

googleによるインフラ運用管理

マルチプラットフォームのサポート→ FirebaseAPIによる複数言語への展開が可能

プロダクト

Realtime Database → リアルタイムでの同期

Cloud Firestore → データベース

Authenication → パスワードや電話番号を認証

FirebaseAuth ソーシャルログイン

試した開発環境

macOS High Sierra バージョン10.13.6

$ firebase --version

4.2.1

$ node -v

v10.6.0

Firebaseを初める

Firebase Realtime Databaseのプロジェクトを作成

googleアカウントが事前に必要です。

事前にgmailでログインした状態にしてください。

f:id:firebasewata:20180906223933p:plain

プロジェクト名を入れます。 myFirstVueApp

地域/ロケーション アメリカ合衆国 から 日本 に変更します。

アメリカ合衆国横にある、鉛筆をクリックする。

プルダウンより、 日本 に変更します。

CloudFirestoreのロケーション us-central であることを確認します。

各種チェックを入れます。

  • Firebase 向け Google アナリティクスのデータ共有にデフォルトの設定を使用する done

  • 測定管理者間のデータ保護条項に同意します。Google サービスの改善のためにアナリティクス データを共有する場合は同意する必要があります

プロジェクトを作成ボタンをクリックします。

新しいプロジェクトの準備ができましたと表示されたら

次へボタンをクリックします。

FireBase CLIのインストール

firebaseCLI は Firebaseプロジェクトの管理、表示、デプロイを行うためのツールです。

※ 事前にNode.jsをインストールしている必要があります。

  • Node.jsがインストールされているとターミナルで以下のコマンドを入れるとバージョンが表示されます。

$ node -v

v10.6.0

※ バージョンが表示されない場合はnode.jsをダウンロードしてください。

https://nodejs.org/ja/

  • Firebase CLI のダウンロード

$ npm install -g firebase-tools

 -g オプションでは グローバルインストールされpathが通ります。

  • Google アカウントを使用してログインします。

$ firebase login

Already logged in as test@gmail.com

※ 違うアカウントでログインしていた場合ログアウトし、再度ログインし直す。

$ firebase logout

Logged out from test@gmail.com

  • Allow Firebase to collect anonymous CLI usage and error reporting information?

匿名で情報を収集していいですか?と聞かれるのでY/nをクリックします。

  • ブラウザが開いて、googleアカウントでログインします。

  • Firebase CLIGoogle アカウントへのアクセスをリクエストしていますと表示されるので、 許可ボタンをクリックします。

  • Firebase CLI Login Successful と表示されFireBase CLIのインストールが完了しました。

プロジェクトの初期化

ターミナルより、myFirstVue というディレクトりを作成して移動します。

$ firebase init

You're about to initialize a Firebase project in this directory:

/Users/ユーザー名/myFirstVueApp

このディレクトリにFirebaseプロジェクトを初期化しようとしています。
このコマンドを実行すると、作業ディレクトリに、`firebase.json`構成ファイルが作成されます。
このファイルはCLIを使用して、サイトにデプロイするために必要です。

? Which Firebase CLI features do you want to setup for this folder?

このフォルダーにどのFirebase CLIの機能を設定しますか?

Press Space to select features, then Enter to confirm your choices. (Press to select )

矢印キーで機能を選び、スペースキーで選択。Enterキーで機能を確定します。

◯ Database: Deploy Firebase Realtime Database Rules

◯ Firestore: Deploy rules and create indexes for Firestore

◯ Functions: Configure and deploy Cloud Functions

❯◉ Hosting: Configure and deploy Firebase Hosting sites

  • こちらを選択し、静的サイトを作ります。

◯ Storage: Deploy Cloud Storage security rules

Hosting: Configure and deploy Firebase Hosting sites

Hosting(ホスティングとは)
今回使うFirebase Hostingは、静的ホスティングといい。ウェブアプリと静的コンテンツをコンテンツを配信できます。
ホスティングとはサーバーを借りて、そこにアプリを置き公開するまでの一連を指します。

? Select a default Firebase project for this directory: (Use arrow keys)

このディレクトリをデフォルトのFirebaseプロジェクトとして選択します:(矢印キーを使用)

  • 先ほどプラウザー上で作ったFirebaseプロジェクトを選択します。

矢印キーで選択してenterキーで確定します。

[don't setup a default project]

❯ myFirstVueApp (myfirstvueapp)

[create a new project]

? What do you want to use as your public directory? (public)

あなたのパブリックディレクトリとして何を使いたいですか?

enterキーで確定します。

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

シングルページアプリケーションとして使用しますか?

  • yキーをクリックしてenterキーで確定します。

開発用ローカルウェブサーバーの起動する

$ firebase serve

ブラウザーからhttp://localhost:5000/を起動するとWelcomeサイトが表示され完成です。

f:id:firebasewata:20180906225302p:plain

サーバーの停止はcontrol + c

リアルタイムデータベース機能の組み込み

https://console.firebase.google.com より作成したプロジェクトをクリックします。

  • </> マーク又は、左側のメニューにあるAuthentication → ウェブ設定の順にクリックします。

  • ウェブアプリにFirebaseを追加が表示されたら、以下のスニペットコピーボタンをしてコピーします。

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "apiKey",
    authDomain: "projectId.firebaseapp.com",
    databaseURL: "https://databaseName.firebaseio.com",
    projectId: "projectID",
    storageBucket: "bucket.appspot.com",
    messagingSenderId: "id"
  };
  firebase.initializeApp(config);
</script>

vue.jsコードを記述

htmlソースがある場所は、作業ディレクトリ/public/index.htmlにあり、 HTML の一番下、他のスクリプトタグの前に、前の節でコピーしたスニペット貼り付けます。

  • そのあと各々のアプリの部分を作り込見ます。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/5.4.2/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/5.4.2/firebase-auth.js"></script>
    <script defer src="/__/firebase/5.4.2/firebase-database.js"></script>
    <script defer src="/__/firebase/5.4.2/firebase-messaging.js"></script>
    <script defer src="/__/firebase/5.4.2/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>
</head>

<body>
    <div id="app">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
        <button type="button" v-on:click="changeData">送信</button>
    </div>
    <script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
    <script>
    // Initialize Firebase
    var config = {
        apiKey: "コードが入ります",
        authDomain: "コードが入ります",
        databaseURL: "コードが入ります",
        projectId: "コードが入ります",
        storageBucket: "コードが入ります",
        messagingSenderId: "コードが入ります"
    };
    firebase.initializeApp(config);
    </script>
    <!-- vue.js cdn -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message:''
            },
            created: function () {
                firebase.database().ref('test/').on('value',snapshot =>{
                    /* console.log(snapshot.val()) */
                    this.message =snapshot.val().text
                })
            },
            methods: {
                changeData: function () {
                    firebase.database().ref('test/').set({text: this.message})
                }
            }
        });
    </script>
</body>

</html>

firebaseで公開

Databaseの設定

  • Firebase左側のメニューにあるDatabaseをクリックします。

  • Realtime Database の項目を探して、データベースを作成をクリックします。

  • Realtime Databaseのセキュリティルール画面が表示されたら、テストモードで開始を クリックします。

  • 最後に有効にするボタンをクリックします。

f:id:firebasewata:20180906230254p:plain

ローカルサーバーを起動

ターミナルで、作業ディレクトリにいることを確認します。

$ firebase serve

ブラウザーで確認

http://localhost:5000

firebaseにデータが追加されたか確認

  • ブラウザーより、プロジェクトのメニュー画面を表示します。

  • メニュー左側にあるDatabaseをクリックします。

  • 続いて、データタブをクリックします。

すると、myfirstvueapp プラス(+) test と表示されプラスをクリックすると

データが入っていることがわかります。

f:id:firebasewata:20180906230700p:plain

ホスティング環境にデプロイ

できたアプリを公開してみます。デプロイとは公開するという意味です。

$ firebase deploy

完成したfirebaseのサイトを開く

$ firebase open hosting:site

https://アプリ名.firebaseapp.comブラウザーより表示され、テキストボックスの値を変更して送信ボタンをクリックすると・・

再度、firebaseのDatabaseから確認すると変更が保存されていることがわかります。

github入門

gitHub入門

GitHub上のレポジトリをローカルにcloneし、ローカルレポジトリを製作します。

お品書き

  • まずはともかくGitHubの登録

  • 簡単なGitHubの使い方

事前準備

メールアドレスが必要です。

作業ディレクトリを作成する必要があります。

$ mkdir workdir

まずはともかくGitHubの登録

  • ブラウザより
 https://github.com

を開く

  • 早速登録

Username → 表示名です。 あだ名ぐらいで大丈夫です。

Email → ログインする為のメールアドレスです。

Password → ログインする為のパスワードです。

Sign up for GitHub 

ボタンをクリックします。

  • Choose your personal plan 料金プランを設定します。

無料プランを使用するので、

Unlimited public repositories for free.

を選択します。

Continue

ボタンをクリックします。

  • アンケートに答えます。

How would you describe your level of programming experience?

プログラミング経験は?

Very experienced → ベテラン経験者です。

Somewhat experienced → ややプログラミングを経験しています。

Totally new to programming → プログラミング初心者です。

What do you plan to use GitHub for? (check all that apply)

GitHubをどのように使う予定ですか?

Project Management → プロジェクトマネージメント

Design → デザイン

Research → 研究

Development → 開発

School projects → 学生

Other (please specify) → その他

Which is closest to how you would describe yourself?

貴方はどのような人物ですか?

I'm a hobbyist → 愛好家です。

I'm a student → 学生です。

I'm a professional → プロフェッショナルです。

Other (please specify) → その他

What are you interested in?

貴方は何に興味がありますか?

Submit

ボタンをクリックします。

  • メールが送信されているので確認
Verify email address

をクリックします。

リモートレポジトリを作ります

  • New repository ボタンをクリックします。

  • Repository nameにプロジェクト名を入力します。

  • Publicボタンにチェックがあることを確認します。

  • Initialize this repository with a README

リモートプロジェクトの説明を記載する README.md を作るために、

チェックを入れます。

Create repository ボタンをクリックします。

ローカルレポジトリとリモートレポジトリを連携する為の情報の取得

  • Clone or download ボタンをクリックします。

Clone with HTTPS

https://github.com/ユーザー名/レポジトリ名.git をコピーする

cloneでリモートレポジトリの情報をローカルに取得する

$ cd workdir

git clone の引数は、先ほど取得したClone with HTTPSのURLを貼り付けます。

$ git clone https://github.com/ユーザー名/レポジトリ名.git

Cloning into 'レポジトリ名'... remote: Counting objects: 3, done. remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 Unpacking objects: 100% (3/3), done.

  • Finderでリモートレポジトリのクローンを確認します。

レポジトリ名/README.md があり、README.mdを確認するとGitHubのREADME.mdと同じことがわかります。

できたレポジトリ名のディレクトリにファイルをおく

GitHubにアップロードしたいファイルを起きます。

ユーザ名登録

GitHubのUser情報を登録します。

$ git config --global user.name "ユーザ名"

$ git config --global user.email ユーザーEメールアドレス

ローカルレポジトリの内容をインデックスに追加

  • ターミナル作業です。

  • できたリモートレポジトリ名のディレクトリに移動します。

$ git add .

又は

$ git add ファイル名(ディレクトリ名)

インデックスの状態を確認します

$ git status

On branch master Your branch is up to date with 'origin/master'.

Changes to be committed: (use "git reset HEAD ..." to unstage)

new file:   index.html

コミットする

$ git commit -m "first commit"

[master 1ede58e] first commit 1 file changed, 37 insertions(+) create mode 100644 index.html

ローカルレポジトリの変更内容をリモートレポジトリに反映する

$ git push

  • githubの入力パスワードの入力が求められる

Password for 'https://ユーザー名@github.com':

Counting objects: 3, done. Delta compression using up to 4 threads. Compressing objects: 100% (2/2), done. Writing objects: 100% (3/3), 271 bytes | 271.00 KiB/s, done. Total 3 (delta 0), reused 0 (delta 0) To https://github.com/ユーザー名/レポジトリ名.git e61bcdb..a9496a9 master -> master

githubへgit pushしようとすると403エラーとなる

一つのmacで二つのユーザーでリモートレポジトリにpush使用とすると起きました

$ git push

remote: Permission to ユーザー名/レポジトリ名.git denied to ユーザー名. fatal: unable to access 'https://github.com/ユーザー名/レポジトリ名.git/': The requested URL returned error: 403

解決方法

$ git clone https://ユーザー名B@github.com/ユーザー名B/レポジトリ名

githubがログイン情報(ユーザー名・パスワード)を記憶しているのだと思います。この場合、URLにユーザー名を記載することで、別の資格情報を記憶させることができます。

ユーザー名Bは、pushしたい先のユーザーを記載します。