FirebaseとVueで作るお問合せ管理

FirebaseとVueで作るお問い合わせ管理

以前Webサービス制作で同じような記事を投稿しています。しかし、今回はFirebaseを使ってという点でお改めて記事を書き直していますのでご覧ください。（以前は「Webサービス」を主体に紹介しています）

FirebaseとVueを組み合わせて使う場合、「npm」の活用が便利です。Firebaseのモジュールもインストールしてしまえば、簡単にVueのプロジェクトのコードから呼び出す事ができます。

Vueを使うための準備

Vue CLIのインストール

FirebaseもVueも「npm」を活用した方が便利です。CDNのリンクをHTMLに張り付けても使えますが、WebサービスやWebアプリを開発する上で、利用価値の高い、既存のモジュールを手軽に取り込めるのは大きな魅力です。

まずは、Vueを使うための仕組みVue CLIをインストールします。

[npm install -g ＠vue/cli]

便利なUIを活用

コマンドラインからもVueは使えますが、UIが便利です。npmのコマンドで、「vue ui」と入力して、見やすいUI上でVueのプロジェクトの管理をするのが便利です。

Vueのプロジェクトを作ります。

Vueの場合標準ではJavaScriptを使う設定になっているので、Typescriptを使って開発をする場合には、マニュアルで必要なオプションを選択する必要があります。難しい設定はないので、一度マニュアルで設定して、設定内容を保存しておけば次回以降はその設定を読み込めば自動的に設定されます。

予め設定されているプロジェクトの不要なファイルを削除

プロジェクトの作成が完了すると、予めサンプルのプロジェクトが作られています。不要なファイルを削除して目的の機能を作る準備をします。

＊Home.vueの変更（HelloWoldのモジュールやロゴは不要です）

＊components/HelloWorld.vueは不要なので削除します

＊assets/log.pngも不要なので削除します。

Firebaseを使う準備をする

Firebaseのコンソールで必要な設定を行います。

＊Firebaseのプロジェクトの作成

＊Cloud Firestoreのデータベースを作成

＊Cloud Firestoreのデータベースのセキュリティルールを設定します。最初は開発モードで、誰でも読み書き可能な設定が指定した期日まで有効になる設定にします。

＊アプリを登録します。アプリを登録した後に取得可能なプロジェクトの詳細の情報が必要です。

＊ユーザー認証の設定をします。今回は管理者を特定するためにFirebaseの認証機能を使います。Emailとパスワードによる認証を有効にします。

＊管理者のアカウントを作成します。Emailアドレスとパスワードを指定して＊管理者用のアカウントを作ります。

Vue側での設定

Firebaseのモジュールをインストールします。以下のコマンドをプロジェクトのトップフォルダで実行します。

$ npm install firebase

インストールしたら、プロジェクトのトップフォルダに「lib」というフォルダーを作って、「firebase.ts」を作成します。（Javascriptを使用する場合は、firebase.js）必要な情報は、Firebaseのコンソールから取得した情報をコピーします。

以下がその中身の例です。

（個別のプロジェクト情報に置き換える必要があります。）

フォルダーの名前や場所、ファイルの名前は何でも良いのですが、今回は私が普段設定する名前を例に挙げています。

import firebase from "firebase;

// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

    apiKey: "API KEYの情報",

    authDomain: "ユーザー認証のドメイン",

    databaseURL: "データベースのURL",

    projectId: "プロジェクトID",

    storageBucket: "ストレージのバケット",

    messagingSenderId: "メッセージ送信のID",

    appId: "アプリのID",

    measurementId: "アナリティクスで使用するID"

};

// Initialize Firebase

firebase.initializeApp(firebaseConfig);

firebase.analytics();

export default firebase;

Home.vueを変更して管理ページに！

ログインフォームを作成

Firebaseのデータベースのアクセスの権限の関係で管理者としてお問合せ情報にアクセスするためにはFirebaseにログインする必要がありますので、ログインに必要な情報を入力するためのログインフォームを作ります。

ログイン後に一覧表示

ログインした後に、Firebaseのデータベースからお問合せの情報を取得して表示できるようにします。Firebaseからのお問合せ情報の取得は以下の通りです。

methods: {

    // Firebase Cloud Firestoreからお問合せ一覧を取得

    getQuery(): void {

      this.queryList = [] as Array<TYPE.Query>;

      firebase

        .firestore()

        .collection(CONSTANT.QUERY_COLLECTION)

        .get()

        .then(

          (

            querySnapshot: firebase.firestore.QuerySnapshot<

              firebase.firestore.DocumentData

            >

          ) => {

            querySnapshot.forEach(

              (

                doc: firebase.firestore.DocumentSnapshot<

                  firebase.firestore.DocumentData

                >

              ) => {

                const entry: any = doc.data();

                const query: TYPE.Query = {

                  id: doc.id, // ドキュメントID

                  email: entry.email,

                  message: entry.message,

                  name: entry.name,

                  subject: entry.subject,

                };

                this.queryList.push(query);

              }

            );

          }

        );

    },

Firebaseのお問合せのドキュメントのIDを追加しておくと後の削除の処理が簡単になるので、Firebaseデータベースのドキュメント内のデータに加えてドキュメントIDを取り込んでいます。

お問合せの削除

削除ボタンが押されたら、該当のお問合せを削除できるようにします。

Firebaseのデータベースからの削除の処理は以下のようになります。

// お問合せの削除の処理（「削除」ボタンが押された場合の処理）

    deleteEvent(query: TYPE.Query): void {

      firebase

        .firestore()

        .collection(CONSTANT.QUERY_COLLECTION)

        .doc(query.id) // ドキュメントID

        .delete()

        .then(() => {

          this.getQuery();

        })

        .catch((error) => {

          alert("選択したお問合せを削除できませんでした！");

        });

    },

各種定義をまとめておく

利用する変数の型や定数などは直接コードに書かずにまとめて定義した物を利用するとコードの管理が簡単になります。変更も一か所で済みますし、間違いを減らす効果もあります。今回は「constants.ts」と「types.ts」の2つのファイルを「lib」フォルダのしたに作成しています。

これくらいの規模のプログラムでは余り違いは出ないと思いますが、大きなプログラムになると違いが出てきます。見やすく管理しやすいプログラムにするために是非心掛けたいスタイルです。

constant.tsの中身です。

export const QUERY_COLLECTION = "query";

types.tsの中身です

export interface Query {

  id: string;

  email: string;

  message: string;

  name: string;

  subject: string;

}

セキュリティルールを設定して完了！

最後にセキュリティルールを設定すれば完了です！

一般利用者は「query」コレクションにドキュメントの新規作成の権限を、管理者には全てのデータの読み書きの権限を与えるルールです。

これで、お問合せ内容を見るには管理者としてログインが必要になるようになりました。

rules_version = '2';

service cloud.firestore {

  match /databases/{database}/documents {

    // 管理者は全てのドキュメントの読み書きができます

    // 管理者以外の人にはここでのアクセスは許可しません

    match /{document=**} {

     allow read, write: if request.auth.uid == "5X8xvRKVbddpR7oDXduQjVRb8cv1";

    }

    // 全ての人に「query」コレクションの新規作成を許可します

    // (利用者全ての人がお問合せを登録可能)

    match /query/{queryId} {

     allow create;

    }

  }

まとめ

FirebaseのデータベースをVueから利用する例を紹介してきました！

Firebaseのデータベースの利用は、最初にFirebaseの設定と初期化ができれば、簡単にVueから行うことができます。

つまり、Firebaseを使えば、機能の実装により集中する事が可能です。

インターネットへの公開は？

Firebaseのホスティング機能を利用してのインターネットへの公開はまた別の記事を予定しています。こちらも、簡単にできますのでそちらの記事をお待ちください。