Blockchain code Metaverse VR

Unity×VR×Blockchain(230)

スポンサーリンク

//tips

//unity/js連動

webページの内容をunityでのボタンクリック回数に応じて表示を変更させていく。

変更させるのはmessageに格納されるものに絞る。

Jsの方にjsonデータを集計して取得する。下記の流れで実装していく形を考える。

function calc(){
for(var I=0;i<json.length;i++)
{
count+=json[i]
}
return count;
}
var result = calc();

要素の削除はdelete json.name;などで対応してみる。
Unityからjsonへの1クリックの加算数は1とする。

Unity側は下記のように変更し、クリックされたらカウント:1を表示する。

using UnityEngine;
using UnityEngine.Networking;
using System.Collections;

public class APIPOSTUP : MonoBehaviour
{
int count=1;

public void jsonGO()
{
StartCoroutine(Upload());
}

IEnumerator Upload()
{
WWWForm form = new WWWForm();
//form.AddField("myField", "myData");
form.AddField("name", "カウント");
form.AddField("message", count);

using (UnityWebRequest www = UnityWebRequest.Post("http://localhost:3000/posts", form))
{
yield return www.SendWebRequest();

if (www.isNetworkError || www.isHttpError)
{
Debug.Log(www.error);
}
else
{
Debug.Log("Form upload complete!");
}
}
}
}

これでクリックされたらjsonの各idにはカウントと1が格納される形となる。

これをjsでデータ集計とjsonの削除を行う。下記の形に編集した。

methods: {
sendPosts: function(e) {
var self = this;
$.ajax({
type: 'POST',
url: apiUrl,
dataType: 'json',
data: {
name: $("#name").val(),
//message: $("#message").val()
message: number
}
});
}
}
});

var number;

$.ajax({
type: 'GET',
url: apiUrl,
dataType: 'json',
success: function(json) {
//message.$data.posts = json;

function calc()
{
for(var i=0;i<json.length;i++)
{
number+=json[i]
}
return number;
}

var result = calc();
delete json.message;
console.dir(json);
},
data: null
});

Jsonが削除されず、ページへの反映もされなくなった。

message.$data.posts = json;部分の変更がポイントでここを適切な形にする必要があるよう。

message.$data.posts = {"name": "カウント","message": result};などでも対応できなかったので計算結果を新たなjsonに代入し反映させる必要があるのかもしれない。

console.log();を各変数で出力して動向を確認する。

onsole.log(message.$data.posts);とconsole.log(result);はどちらも同じ表記で

0: {__emitter__: Emitter}
1: {__emitter__: Emitter}
2: {__emitter__: Emitter}
length: 3
__emitter__: Emitter {_ctx: Emitter, _cbs: {…}, values: {…}, owners: Array(0)}
__proto__: Array

またv-repeatはarrayまたはobjectのみを受け付けるとの警告が出ている。

下記を参考にvue以下を書き直す。

https://jp.vuejs.org/v2/guide/#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0

数字一つのみの表示でいいのでv-repeatから<tr id="posts">へhtmlを変更。

その上でjsを下記に変更。

var result;
var message = new Vue({
//el: "#post",
el: "#posts",
data: {
message: result
}
})

$.ajax({
type: 'GET',
url: apiUrl,
dataType: 'json',
success: function(json) {

function calc()
{
for(var i=0;i<json.length;i++)
{
number+=json[i]
}
console.log(number);

return number;
}

result = calc();
}
});

これでもResultが表示されない。
下記は表示できた。

data: {
message: 'Hello Vue!'
}

ajaxで受け取ったjson内容とvueの反映内容がうまく連動できない。vueを抜いて下記としても数字は反映できない。

$.ajax({
type: 'GET',
url: apiUrl,
dataType: 'json',
success: function(json) {
var number;

function calc()
{
for(var i=0;i<json.length;i++)
{
number+=json[i]
}
return number;
}

result = calc();
}

});
document.getElementById('postsa').textContent = result;

調べていたらvueでajaxに対応するためにはaxiosを使用するような記述を見つけた。

こちらを参考に進めてみる。

Vue.jsサンプルコード(06)合計金額をリアルタイムに表示する

色々修正を加えていった結果、下記のようにvueを入れない形で実現することができた。

$.ajax({
type: 'GET',
url: apiUrl,
dataType: 'json'})
.done(function(json) {
function calc()
{
/*
for(var i=0;i<json.length;i++)
{
number+=json['id'][i]['message']
}
*/
return json.length;
}

result = calc();
$('#postsmen').text(result)
$('#mycount').text("カウント")

})

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.