【目次】
【関連する外部ページ】
オンラインストレージ
データベース: Python, JavaScript と相性が良い.
その他、認証(ID,パスワード)など(セキュリティや課金に必要)
※ iOS, Android, Web で動く.使用には Google のアカウントが必要
https://firebase.google.com/?hl=ja
※ このとき、google のアカウント(IDとパスワード)が必要になる可能性がある
※ このとき、いつまで待っても画面が変わらないというときは、Webブラウザで「サインアウト」してもう1度やり直すとうまく行くかもしれません.
プロジェクト名: 何でもよいが、あとで分かりやすい名前
アナリティクスの地域: 日本
チェックボックス: 同意できる場合のみチェック(同意できないときは、Firebase を使わない)
まず、料金プランが「Spark プラン」になっていることを確認する. Spark プランは料金無料のプラン. データベースを使いたいので、「Cloud Firestore」をクリック
ここでは、試用することにしたい(実データは入れずに、手軽に試してみたい)ので、 「テストモードで開始」を選び「有効にする」をクリック
Web ブラウザは閉じて良い
※ Ubuntu を使うときは、次のパートを見てください
firebase login
Google Chrome を選んだとして説明を続ける
firebase list
cd <書き込み権限のあるディレクトリ(フォルダ)>
今のコマンドプロンプトで,次のコマンドを実行
firebase init
矢印キーで「Hosting」を選ぶ。 スペースキーを押し「*」マークがついたことを確認したら、Enterキー
※ 単一ページにしたいときは「y」
./database.rules.json, ./firebase.json, ./public/404.html, ./public/index.html というファイルができているので確認する
./public/index.html の中身を確認する.コマンドプロンプト + type コマンドで表示したときなどは文字化けする場合があるが問題ない.
firebase serve
画面が表示されたら OK. Web ブラウザを閉じる.
※ npm がない!というときは、「sudo apt install npm」でインストールする
npm install -g npm npm install -g firebase-tools
firebase login
firebase list
今の端末で,次のコマンドを実行
firebase init
Firebase プロジェクトを1つ選ぶか、新しいプロジェクトを作る
./firebase.json, ./public/404.html, ./public/index.html ができているので確認する
firebase serve
先ほど自動生成された public の下の index.html ファイルを、別のファイル名のファイルにコピーする。
ファイル名は何でもよいが、「1.html」のように、拡張子を .html にする
そして「public」ディレクトリの直下に置くこと
表示されれば OK (真っ白な画面が出たり、エラーメッセージが出た場合は良くない)
いまのものはすべて消す. そして, <body> と </body> の中 を次のようにする
</body> <div id="message"> <p> データベース (database) </p> <li id="print_chats"></li> <ul> <li id="print_name"></li> <li id="print_price"></li> </ul> <p> フォーム (form) </p> <ul> <li> name: <input type="text" name="" id="my_name"></li> <li> price: <input type="text" name="" id="my_price"></li> </ul> <p> <a onclick="setdata()">データをセット (set data)</a> </p> </div> <script> var db = firebase.database(); var myChatAll = db.ref("/my/chat/all"); var chats = db.ref("/my/chat"); function setdata(){ var my_name = document.getElementById("my_name").value; var my_price = document.getElementById("my_price").value; myChatAll.set({title:"example", text:my_name, price:my_price}); } myChatAll.on("value", function(snap) { document.getElementById("print_name").innerText = "name: " + snap.val().text; document.getElementById("print_price").innerText = "price: " + snap.val().price; }); chats.on("value", function(snap) { document.getElementById("print_chats").innerText = "chats: " + snap; }); </script> </body>
ファイルは次のようになる
※ 「1.html」のところは,実際に作成したファイルのファイル名にすること
※ 「画面が開かないよ!」というときは「firebase serve」を起動してから、もう1度試してみる
次のような画面が開けば OK
手元のパソコンで作成したファイル群について、 手元のパソコンから firebase のサーバに一括アップロードし,サービスを公開する操作(デプロイ)を行う.
firebase list
firebase deploy --project <プロジェクトID>
先ほどと同じ画面が出てくれば OK.
同じ画面だが、今度は、全世界に公開されている
「firebase open hosting:site」を実行して、Webブラウザでファイル名を書き加えるという手順でも同じ結果になる
「firebase open hosting」を実行すると、ホスティング (Hosting) のダッシュボードが開く
同じ画面が出てくる