サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール

現在位置: index.html » 10.vue.jsとfirebaseでランキングつき連打ゲーム
トレース:
10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/27] – [Vuetifyのv-imgの相対パスでの画像がうまく表示されない] adash33310.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/31] (現在) – [0.用意するもの（開発環境）] adash333
行 8: 行 8:
 今回作成するタップゲームは、 今回作成するタップゲームは、
  
 +  -10秒間で何回マトをタップできるか競うゲーム（爆）
   -Firebaseを利用するために、トップページHome.vueに、「匿名ログイン」ボタンを表示   -Firebaseを利用するために、トップページHome.vueに、「匿名ログイン」ボタンを表示
-  -ログイン後はタップゲーム画面Secret.vueに移動 +  -ログインしなくても遊べる 
-  -ゲーム終了後、名前を登録すると +  -ログインすれば、firebaseにスコアと名前を登録（write）したり、ランキングを見る（read）ことができる
-  -オンラインランキング画面に移動+
  
 となります。 となります。
行 19: 行 19:
  
 ソースコード 作成中 ソースコード 作成中
- +https://codesandbox.io/s/zz97y131m4
-https://codesandbox.io/s/3846912m4q+
  
 作ったもの　作成中 作ったもの　作成中
 <html> <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> </html>
  
行 40: 行 39:
 <code> <code>
 CodeSandbox CodeSandbox
-Firebase+Firebase (real time databse)
 Vue 2.5.2 Vue 2.5.2
 Vuetify Vuetify
行 207: 行 206:
  
 Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require. Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require.
- 
-https://qiita.com/Nossa/items/3860e55551697bb46e38 
  
 例えば、src/components/Hello.vueにおいて、src/assets/target.jpgを表示するためには、以下のような記載方法となる。 例えば、src/components/Hello.vueにおいて、src/assets/target.jpgを表示するためには、以下のような記載方法となる。
-（Vuetify使用するために、かなり面倒なことになっている。どうりで、Vuetifyの公式サイトでは、いつも、v-img のsrcがhttps:から始まっているわけだ。。。） +（Vuetify使用するために、かなり面倒なことになっている。これは、Vuetifyの最大の欠点かもしれない。。。どうりで、Vuetifyの公式サイトでは、いつも、v-img のsrcがhttps:から始まっているわけだ。。。）
  
 <code> <code>
行 299: 行 295:
 <code> <code>
 <template> <template>
-<p>{{msg}}</p>+<p>{{ msg }}</p>
 </template> </template>
  
行 316: 行 312:
 </code> </code>
 これに気付くのに、Ionic3の時代からあわせて1年くらいかかりました。。。 これに気付くのに、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文の使い方と配列の繰り返し処理まとめ！
 +2016年　by マサト
 +
 +==== forEach文のコールバック関数 ====
 +
 +<code>
 +array.forEach( function( value, index, array ) {
 + 
 +  // 繰り返し処理を書く
 + 
 +});
 +</code>
 +
 +value：配列データの値
 +index：配列のインデックス番号
 +array：現在処理している配列
 +
 +https://qiita.com/nantekkotai/items/6c603b40ac2264e9f6f6
 +@nantekkotai
 +2014年02月21日に更新
 +JSのObjectをforEachで処理する方法
 +
 +https://chaika.hatenablog.com/entry/2016/06/21/085000
 +2016-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
 +
 +
 +
 +
 +
 +
 +
 +
  
  


10.vue.jsとfirebaseでランキングつき連打ゲーム/index.html.1545918688.txt.gz · 最終更新: 2018/12/27 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki