//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側は下記のように変更し、クリックされたらカウント：１を表示する。
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を入れない形で実現することができた。
$.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("カウント")
})
