サーバーレス(Firebase)で夫婦で共有できる買い物リストを作った

うちは共働きなので、買い物は帰りが早いほうが買い出しをすることが多いですが、例えば洗面所周りは、モノの消費を妻のほうが把握していることが多いのでこれらを共有する仕組みを作りたかった、というところから始まりました。

Firebaseなら無料で作れそうなので、FirebaseとJavaScriptを合わせて勉強しながら作ってみました。

完成イメージ。

f:id:s51517765:20190715115257j:plain — 完成イメージ

要件定義

・夫婦で共有できること。
・無料で使えること。
・Androidでもiphoneでも使えること。
・入手済みのものを保存できること。

上の3つはFirebaseを使う時点で成立します。
4つ目は「欲しいものリスト」と「入手済みリスト」を作ることで実現しました。

html

htmlの本文はタイトル、入力ボックス、ボタンなどとリストulです。リストは名前を付けるために、 form name="form1”で囲みます。

<body>
    <h1>買い物リスト</h1>
    <div>
        <p>
            <div><input type="text" name="" id="message" placeholder="品物を入力して追加"></div>
            <div><input type="button" value="追加" id="btnUpload" onclick="addData()"></div>
        </p>
        <div><input type="button" value="再読み込み" id="btnReload" onclick="ListLoad()"></div>
    </div>
    <h3>欲しいものリスト</h3>
    <form name="form1">
        <ul id="List1"></ul>
    </form>
    <div><input type="button" value="入手完了" id="btnDone" onclick="done()"></div>
    <h3>入手済みリスト</h3>
    <form name="form2">
        <ul id="List2"></ul>
    </form>
    <div><input type="button" value="削除" id="btnDelete" onclick="deleteItem()"></div>
</body>

css

簡単にスタイルシートをコピペで作成。最低限の文字の大きさの指定だけです。

/* css checkbox01 */
input[type=checkbox] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

input[type="text"] {
    width: 300px;
    height: 20px;
}

html {
    font-size: 20px;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 20px;
}

このほかに、htmlのheadには、文字コードとスマホ表示用の設定とcssの読み込みを設定します。

    <meta http-equiv="content-type" charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"><!-- スマホ用の表示拡大 -->
    <link rel="stylesheet" type="text/css" href="css.css">

チェックボックスのついたリストの作成は、一度リストの中を空にしてからサーバー上の要素にforEachでアクセスし、appendします。
pushするときに重複を確認するためにローカルの配列subjectを用意してサーバーにアクセスしなくてもいいようにしてみました。
cb.valueはチェックされた要素を確認するときに使っています。実際に表示される文字はelement.innerHTML で設定します。

function ListLoad() {
      deleteAllElement()

     var list1 = document.getElementById("List1");
      database1.on("value", function (snapshot) {
      snapshot.forEach(function (childSnapshot) {

       var childData = childSnapshot.val();
      var element = document.createElement("li");

      subject.push(childData.message);  //リストの中身を配列に追加し保持、重複確認のため

      //チェックボックスの追加
      var cb = document.createElement("input");//チェックを作成
      cb.type = "checkbox";
      cb.name = "cb"
      cb.value = childData.message;
      element.innerHTML = childData.message;
      cb.textContent = element.innerHTML;
      element.appendChild(cb);
      list1.append(element);
      });
   });

ページ読み込み時の動作はwindow.onloadで指定します。

window.onload = function () {
     ListLoad();
};

まとめ

これで、一通りのFirebaseのリアルタイムデータベースが使えるようになったと思います。
アイデア次第でいろいろ出来そうです。
github.com

プログラミング素人のはてなブログ

プログラミングも電気回路も専門外の技術屋の末端が勉強したことや作品をアウトプットするブログ。コードに間違いなど見つけられたら、気軽にコメントください。 C#、Python3、ラズパイなど。

サーバーレス(Firebase)で夫婦で共有できる買い物リストを作った

要件定義

html

css

JavaScript

まとめ