やること

Firestore へのデータの書き込み、データの読み込みの方法を思い出すための、最小限のコードと手順をメモしたものです。

参考

この二つを読めば十分できるんですが、上の記事を読んで「あーなるほど」と思えるレベルまで辿り着く前に、挫折してしまった場合のためのメモです。

準備

最小限必要なもの

Google アカウント
Firebase を使えるようにしておく: 参考 Firebase で hello world と表示するページを作る方法: プロジェクトの作成までできればOK
適当なブラウザ (Chrome, Edge など)

Firebase 側で必要な準備

最低限、プロジェクトひとつの作成と、アプリケーションひとつの作成が必要です。

プロジェクトを作成するには、ブラウザで Firebase コンソールに行きます。

Firestore コンソール

コンソールの左上あたるは、上のような表示になっているはずです（絵は違うかもしれない）。ここで「プロジェクトを追加」を押します。

プロジェクト名を入れるように言われるので、何か入れます。URLとして使える文字列になってる必要があります（多分）。また、他のプロジェクト名と重複していない必要もあるので、長い目の文字列にしておいたほうが良いです（多分）。

入力したら「続行」を押します。

次に Google Analytics の機能をONにするか聞かれます。今回は、プロジェクトをテストに使うだけなので、オフにしておきます。（オンにするとこの次のページでいろいろ設定を聞かれます）

「プロジェクトを作成」を押すとこんな画面になるので、待ちます。

こうなった「続行」を押します。

アプリケーションの作成

Firestore に Web ページ内からアクセスするあｔめには、最低限ひとつの Web アプリケーションを作っておく必要があります。

プロジェクトを作成したら、下のような画面になります（絵は違うかもしれない）。

中央の左に</> みたいなアイコンがあって、そこを押すと Web アプリケーションを作成できます。そのアイコンを押します。

アプリ名を入れます。Hosting については、今回はローカルでしかテストしないので、使用しないことにします。

これで「作成」を押すと、しばらくしてから次のような画面になります。

上の画面でグレーになっている部分は、javascript で firestore にアクセスするために必要なコードなので、この部分をエディタなどにコピーしておきます。apiKey のところを黒塗りにしてますが、ここにも文字列が入っているはずです。

apiKey などの情報の再表示

apiKey の情報のコピペを忘れてしまった場合は、下記の手順で再度表示させることができます。

まずプロジェクトの画面に行きます。画面の左上あたり「プロジェクトの概要」という項目があります。その右に歯車マークがあるので、それを押します。

歯車を押して出るメニューから「プロジェクトを設定」を選びます。

プロジェクト内にあるアプリの一覧が表示されているので、apiKey などの情報が欲しいアプリを探します。「SDKの設定と構成」のところで「CDN」を選ぶと、プロジェクト作成時と同じように javascript のコードが表示されるので、これをコピーします。

apiKey 公開は大丈夫なのか？

下記がとても参考になります。

Firebase apiKey ってさらしていいの? ほんとに?

基本的には大丈夫のようですが、後述する firestore 側のルールがテストモードで無制限アクセス可能になっていたりすると、データベースを荒らされたり、無限に課金させられる可能性がありそうです。

後悔公開する前に、セキュリティルール（後述）は見直しておきましょう。

firestore でデータベースを作成する

プロジェクトの画面の左のメニューにある Firestore Database のメニューを選びます。すると、下のような画面になります。

この画面で「データベースの作成」を押します。

セキュリティルールを選択する画面が出るので、ここでは「テストモードで開始する」を押します。

apiKey のところでも書いてますが、この部分は実はかなり重要です。アプリを deploy してテストする場合、apiKey などの情報が公開された状態になるので、テストモードのまま公開すると第三者にデータベースを荒らされる可能性があります。

ローカルでだけテストする場合でも、何かの拍子（たとえば github の public なレポジトリに push したとか）に apiKey などの情報が流出する可能性もあるので、最低限アクセスできる期限くらいは設けたほうが良さそうです（多分）。

詳しくは下記を参照のこと。

Firestore 基本的なセキュリティルール

次にロケーションを選択する画面になります。テストするだけならどこを選んでも良いです。gcp でどこかのロケーションを選択していて、何らか連携する必要がある場合は、それにあわせてロケーションを選びます（異なるロケーション間の通信は料金がかることがあります）。

ロケーションを押して「有効にする」を押すと、プロビジョニングが始まります。

プロビジョニングが終了すると、下のような画面になります。

この状態になれば、さきほどコピペした apiKey などの情報を使って、Firestore Database に読み書きできるようになります。

ちなみに、コマンドラインから firebase コマンドを使って firestore databse を作成することもできます。

$ firebase init firestore

firestore を使う

最小限に近いコード（多分）

下記をコピペして firestore.html などの名前で作成します。

firestore.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>firestore test</title>
  </head>
  <body>
    <div id="store_sample">
      <input id="words" type="text" value=""/>
      <input type="button" value="送信" onclick="send();"/>
      <input type="button" value="受信" onclick="recieve();"/>
      <br/>
      <div id="output">
      </div>
    </div>

    <script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-firestore.js"></script>
  
    <script>

    let db;
    let mode = true;
    function init(){
      // 以下、控えておいた情報に書き換える
      let firebaseConfig = {
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", 
        authDomain: "xxxxxxxxxx.firebaseapp.com",
        projectId: "xxxxxxxxxx",
        storageBucket: "xxxxxxxxxx.appspot.com",
        messagingSenderId: "xxxxxxxxxx",
        appId: "xxxxxxxxxx"
      };
      
      firebase.initializeApp(firebaseConfig); // firestore 初期化
      db = firebase.firestore();              // db 初期化
    }

    function send()
    {
      let word = document.getElementById('words').value;
      console.log( word );

      let sample = db.collection("sample"); // コレクション sample 
      
      if ( mode == true ){
        // set はドキュメントの名前を指定して追加する
        // すでに同のドキュメントがあると上書きする
        sample.doc(word).set({ 
          time: firebase.firestore.FieldValue.serverTimestamp()
        });
      }else{
        // set はドキュメントの名前を指定しないで追加する
        // 仕組み的に上書きされることはない。
        sample.add({
          data: word,
          time: firebase.firestore.FieldValue.serverTimestamp()
        }).then(function(e) {
          console.log("success", e);
        }).catch(function(e) {
          console.error("error", e);
        });
      }

    }

    function recieve()
    {
      let output = document.getElementById('output');
      let sample = db.collection("sample"); // コレクション sample 

      // 全部のデータを取得する。
      sample.get().then(e => {
        let arr = [];
        e.forEach(d => {
          let dat = d.data();
          console.log( dat );
          if ( dat.time != null ){
            let t = dat.time.toDate();
            arr.push(t);
          }
        });
        output.innerText = arr.join('：');
      });

    }

    init();

  </script>
  </body>
</html>

実行

上記ファイルを chrome とか Edge とか Firefox などのブラウザで開くと、下記のような画面になります（多分）。

この状態で、テキストフィールドに test と入れて「送信」とします。

すると、Firestore のデータベースの画面の中に sample というコレクションが追加されて、その中に test というドキュメントが追加され、データとしてタイムスタンプが登録されるはずです。

こうなります。ならない場合は、コードが間違っているか、apiKey などの情報が間違っているか、開いてる Firestore のプロジェクトが間違っているか、セキュリティルールが期限切れなどになっていてアクセスできないか、そのへんのどれかです（多分）。ブラウザのコンソールに、何らかのエラーが出ている可能性があるので、確認します。

このくらいデータを追加したのちに「受信」を押すと、追加されているデータのタイムスタンプ一覧が表示されます。

ここまでできたら、もうできたも同然！

あとは下記を読めば何とかなるはずです（きっと）。

コード中にある mode = true を mode = false にすると、ドキュメント名をランダムかつユニークな文字列にして、入力したテキストはデータとして追加するようになります。

おわり

firestore にタイムスタンプのデータを入れたい時に、単に Date.now()ではだめで、firebase.firestore.FieldValue.serverTimestamp() としないといけないようです、逆（デコード？）は timestamp.toDate() です。（コード参照のこと）