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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.