差分

このページの2つのバージョン間の差分を表示します。

--- 10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/27] – [Vuetifyのv-imgの相対パスでの画像がうまく表示されない] adash333
+++ 10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/31] (現在) – [0.用意するもの（開発環境）] adash333
@@ 行 8: / 行 8: @@
 今回作成するタップゲームは、
+  -10秒間で何回マトをタップできるか競うゲーム（爆）
   -Firebaseを利用するために、トップページHome.vueに、「匿名ログイン」ボタンを表示
-  -ログイン後はタップゲーム画面Secret.vueに移動
+  -ログインしなくても遊べる
-  -ゲーム終了後、名前を登録すると
+  -ログインすれば、firebaseにスコアと名前を登録（write）したり、ランキングを見る（read）ことができる
-  -オンラインランキング画面に移動
 となります。
@@ 行 19: / 行 19: @@
 ソースコード 作成中
+https://codesandbox.io/s/zz97y131m4
-https://codesandbox.io/s/3846912m4q
 作ったもの　作成中
 <html>
-<iframe src="https://codesandbox.io/embed/3846912m4q" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/zz97y131m4" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 </html>
@@ 行 40: / 行 39: @@
 <code>
 CodeSandbox
-Firebase
+Firebase (real time databse)
 Vue 2.5.2
 Vuetify
@@ 行 296: / 行 295: @@
 <code>
 <template>
-<p>{{msg}}</p>
+<p>{{ msg }}</p>
 </template>
@@ 行 313: / 行 312: @@
 </code>
 これに気付くのに、Ionic3の時代からあわせて1年くらいかかりました。。。
+===== Vuetifyでテーブル =====
+最初は、かなりややこしい感じがしますが、慣れれば割と簡単に降順に記載したりできるようです。
+https://commis.hatenablog.com/entry/2018/05/29/102606
+20180529
+VuetifyのData tableを指定列の降順で初期表示する
+https://jsbin.com/gedaqud/edit?html
+公式ドキュメント
+https://vuetifyjs.com/ja/components/data-tables
+===== javascriptの配列とオブジェクト =====
+配列について
+http://proengineer.internous.co.jp/content/columnfeature/8632
+JavaScriptの配列オブジェクトの使い方
+20180730
+http://proengineer.internous.co.jp/content/columnfeature/8841
+JavaScriptの配列要素の値を追加/削除する方法
+20180817
+連想配列（オブジェクト）について
+http://proengineer.internous.co.jp/content/columnfeature/8887
+JavaScriptの連想配列を使ってみよう！
+20180820
+今回のコードで、一番難しいところ。
+ここは、https://qiita.com/renowan/items/b8222f2b873cc29a462d　のコードをコピペしたのですが、詳しいところはさっぱりわかりません。
+<code>
+   listen: function() {
+      firebase
+        .database()
+        .ref("gameScores/")
+        .on("value", snapshot => {
+          // eslint-disable-line
+          if (snapshot) {
+            const rootList = snapshot.val();
+            let list = [];
+            Object.keys(rootList).forEach((val, key) => {
+              rootList[val].id = val;
+              list.push(rootList[val]);
+            });
+            this.list = list;
+            //スコア順に並び替え
+            this.list.sort(function(a, b) {
+              return a.score > b.score ? -1 : 1;
+            });
+          }
+        });
+    },
+</code>
+以下のコードでもよい？
+https://ueqareer.net/2770/3
+<code>
+   <!-- todoの一覧表示 -->
+    <ul v-for="(todo, key) in filteredTodos" :key="todo.id">
+      <li><input class="toggle" type="checkbox" v-model="todo.isComplete" v-on:click="updateIsCompleteTodo(todo, key)">{{ todo.name }}</li>
+      <button type="submit" v-on:click="deleteTodo(key)">削除</button>
+    </ul>
+</code>
+<code>
+  created: function() {
+    this.database = firebase.database();
+    this.uid = firebase.auth().currentUser.uid;
+    this.todosRef = this.database.ref("todos/" + this.uid);
+    var _this = this;
+    // データに変更があると実行されるfunction
+    this.todosRef.on("value", (snapshot) => {
+      this.todos = snapshot.val(); // 再取得してtodosに格納する
+    });
+  },
+</code>
+==== FirebaseのRTDBのobjectをarrayに変換する ====
+Firebaseドキュメント
+https://firebase.google.com/docs/database/admin/retrieve-data
+<code>
+// Import Admin SDK
+var admin = require("firebase-admin");
+// Get a database reference to our posts
+var db = admin.database();
+var ref = db.ref("server/saving-data/fireblog/posts");
+// Attach an asynchronous callback to read the data at our posts reference
+ref.on("value", function(snapshot) {
+  console.log(snapshot.val());
+}, function (errorObject) {
+  console.log("The read failed: " + errorObject.code);
+});
+</code>
+スナップショットの val() / getValue() を呼び出すと、データの言語固有のオブジェクト表現が返されます。
+とのことです、、、console.log(snapshot.val())の中身をコンソール画面で確認するしかなさそうです。
+<code>
+        const rootList = snapshot.val();
+            let list = [];
+            Object.keys(rootList).forEach((val, key) => {
+              rootList[val].id = val;
+              list.push(rootList[val]);
+            });
+</code>
+rootListが、firebaseから受け取ったobject
+これを、listという配列arrayに変換する。
+<wrap hi>結局、object{ }の中身のvalueを並べて、[ ]でくくった配列arrayにしているのだと解釈しました。</wrap>
+（間違っていたらすみません、、、）
+https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+Object.keys()メソッドについて
+Object.keys(object1)で、連想配列object1のキーkeyの配列arrayを得ます。
+<code>
+const object1 = {
+  a: 'somestring',
+  b: 42,
+  c: false
+};
+console.log(Object.keys(object1));
+// expected output: Array ["a", "b", "c"]
+</code>
+==== forEach文 ====
+https://www.sejuku.net/blog/20257
+【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ！
+年　by マサト
+==== forEach文のコールバック関数 ====
+<code>
+array.forEach( function( value, index, array ) {
+  // 繰り返し処理を書く
+});
+</code>
+value：配列データの値
+index：配列のインデックス番号
+array：現在処理している配列
+https://qiita.com/nantekkotai/items/6c603b40ac2264e9f6f6
+@nantekkotai
+年02月21日に更新
+JSのObjectをforEachで処理する方法
+https://chaika.hatenablog.com/entry/2016/06/21/085000
+-06-21
+Javascript 連想配列(オブジェクト)をforEachでループさせたい。
+https://ilikekillnerds.com/2017/05/convert-firebase-database-snapshotcollection-array-javascript/
+Convert A Firebase Database Snapshot/Collection To An Array In Javascript
+Last updated: March 8, 2018