以前Firebaseを使ってStaticなWebsiteを作りましたが、今回はFirestoreというクラウドデータベースを使ってみました。
出来上がりが以下のようになります。
１．FirebaseでProjectを作成
２．Databaseを作成
３．Databaseへのアクセス設定
１．FirebaseでProjectを作成
firebase.google.comにアクセスしてログインした後
Go to consoleでコンソールにいき、Add project でプロジェクトを作成します。
２．Databaseを作成
プロジェクトを作成した後、データベースをクリックすると、cloud Firestore かRealtime Databaseの選択が出てくるので最新のCloudの方を選びます。
次に、ローカルでアップするだけのサイトなのでテストモードを選びます。
下のスクリーンは既にpractice というDBが作成された状態です。firestore ではコレクションと呼んでいます。
コレクションの下にドキュメントがありますが、テーブルと考えて良いです。
フィールドはnameと cityです。Add Documentの下にあるのがそれぞれのDocumentのUnique Idになります。これはFirestoreによって自動的に作成されます。
３．Databaseへのアクセス設定
Add firebase to your web appをクリックすると
下のスクリーンが出てくるので、copyします。これをindex.htmlのbody tagの一番最後にペイストします。
コア firebase sdk (firebase-app.js)は下のようにheadタグに置きます。
firebase-firestore.jsもその次に記入します。
Firebaseconfigにはデータベースの情報やプロジェクトIDなどの情報が入っています。
その下にはコンスタントのdbを指定してリファレンス出来るようにしました。
const db = firebase.firestore()
Index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<html> <head> <link rel="stylesheet" href="style.css"> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/6.5.0/firebase-firestore.js"></script> </head> <body> <h1>Firebase Firestore Practice</h1> <div class="content"> <form id ="add-data-form"> <input type="text" name ="name" placeholder="Name"> <input type="text" name ="city" placeholder="City"> <button>Add data</button> </form> <ul id="data-list"></ul> </div> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#config-web-app --> <script> // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyAnI9xJaiBNlV0UTijv2ASrgCCXGgwsToE", authDomain: "fir-practice090219.firebaseapp.com", databaseURL: "https://fir-practice090219.firebaseio.com", projectId: "fir-practice090219", storageBucket: "fir-practice090219.appspot.com", messagingSenderId: "748738929761", appId: "1:748738929761:web:8671e847a615f302" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); const db = firebase.firestore(); </script> <script src="app.js"></script> </body> </html> |
app.jsが実際データベースにアクセスして画面に表示させたり、更新したりするコードが書いてあります。
他のデータベースのようにコネクション情報をセットして接続したり、する必要がないのでこのFirestoreはとても簡単です。
app.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
const dataList = document.querySelector('#data-list'); const form = document.querySelector('#add-data-form'); // create element and render data function renderData(doc){ let li = document.createElement('li'); let name = document.createElement('span'); let city = document.createElement('span'); let cross = document.createElement('div'); li.setAttribute('data-id', doc.id); name.textContent = doc.data().name; city.textContent = doc.data().city; cross.textContent ='x'; //console.log(doc.data().city); li.appendChild(name); li.appendChild(city); li.appendChild(cross); dataList.appendChild(li); //delete data cross.addEventListener('click',(e) => { e.stopPropagation(); let id = e.target.parentElement.getAttribute('data-id'); db.collection('practice').doc(id).delete(); }) } // get data // db.collection('practice').where('city', '==', 'New York').orderBy('name').get(). //db.collection('practice').where('city', '==', 'New York').orderBy('name').get(). db.collection('practice').orderBy('name').get().then((snapshot) =>{ snapshot.docs.forEach(doc => { //console.log(doc.data()); renderData(doc); }) }) // save data form.addEventListener('submit', (e) => { e.preventDefault(); db.collection('practice').add({ name: form.name.value, city: form.city.value }) form.name.value =''; form.city.value =''; }) |
style.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
body{ background: #eab0dc; font-family: ubuntu; } h1{ color: #fff; font-size: 64px; letter-spacing: 2px; margin-top: 80px; text-align: center; } .content{ background: #fff; max-width: 960px; margin: 30px auto; padding: 20px 30px; border-radius: 10px 120px 10px 10px; box-shadow: 1px 3px 5px rgba(0,0,0,0.1) } ul{ list-style-type: none; padding: 0; } li{ padding: 20px; background: #f6f6f6; font-size: 20px; color: #555; position: relative; border-bottom: 1px solid #e6e6e6; height: 46px; } li:nth-child(even){ padding: 20px; background: #f2f2f2; } li span{ display: block; } li span:nth-child(2){ font-size: 16px; margin-top: 6px; color: #999; } li div{ position: absolute; top: 0; right: 0px; background: rgba(255,255,255,0.6); width: 40px; text-align: center; padding: 10px 0; font-weight: bold; cursor: pointer; } form input{ float: left; width: 38%; margin: 0; border: 0; border-bottom: 1px solid #eee; margin: 0 1%; padding: 10px; display: block; box-sizing: border-box; font-size: 18px; } form input:focus{ outline: none; border-bottom: 3px solid #88236f; padding-bottom: 8px; transition: all ease 0.2s; } form:after{ content: ''; clear: both; display: block; } button{ border: 0; background: #fff; border-radius: 10px; padding: 13px; width: 14%; box-shadow: -1px 0px 1px rgba(0,0,0,0.1); font-weight: bold; font-family: ubuntu; letter-spacing: 1px; color: #999; } |