Blockchain code Metaverse VR

Unity×VR×Blockchain(216)

スポンサーリンク

//tips

//json加工し、画面表示

Unityからjsonserverのjson内容を加工し、ユーザ画面で見せたい表示にする方法を考えていたが、htmlの内容に干渉するため、そもそものhtmlの方で送受信を行うデータの表示方法を決めておけば良さそうに思われる。

まずは現在jsonserverに読み込ませているjsonファイルの確認。

cd Public
json-server --watch dba.json

この状態であると同じpublicファイルにあるindex.htmlとindex.jsは読み込めないよう。

dba.jsonの階層を一つ上に移し、その場合にindex.htmlとindex.jsが読み込まれるかを確認する。

nodebrew setup
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.zshrc
source ~/.zshrc
nodebrew install latest
npm init
npm install -g json-server
json-server --watch dba.json

こうするときちんとindex.htmlとindex.jsの内容が読み込まれるようになった。

json-server db.json

に読み込みを変更して実行するとname,messageの部分をリストに追加できることが確認できた。

index.htmlとindex.jsで加工されたhttp://localhost:3000/ページの内容をunityのリクエストから変更できるか確認する。

db.jsonの内容としては現在下記のようになっている。

{
"posts": [
{
"name": "aa",
"message": "aa",
"id": 1
},
{
"name": "アイウエオ",
"message": "あいうえお",
"id": 2
},
{
"name": "か",
"message": "き",
"id": 3
}
]
}

現在表示されている画面がhttp://localhost:3000/?なのでunityから下記のdelete処理をかけてみる。

using (UnityWebRequest www = UnityWebRequest.Delete("http://localhost:3000/?/3"))

HTTP/1.1 404 Not Foundという表示がされてしまった。

はてなマークの部分で問題が出ているのかと考え、http://localhost:3000/へのPOSTで対応できないかを試した。

これもHTTP/1.1 404 Not Foundと表示される。

http://localhost:3000/postsにPOST先を変更し再度トライ。

下記のようにjsonの追加はできているがhttp://localhost:3000/の表示内容name,messageには追加されなかった。

[
{
"name": "aa",
"message": "aa",
"id": 1
},
{
"name": "アイウエオ",
"message": "あいうえお",
"id": 2
},
{
"name": "か",
"message": "き",
"id": 3
},
{
"myField": "myData",
"id": 4
}
]

jsとhtmlの内容を見直していく。

現在はPOSTボタンをクリックすることでPOSTの後のGET処理までjsの方で行っているよう。

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

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

その内容を下記の変数部分に代入していると思われる。

<td>{{name}}</td>
<td>{{message}}</td>

シンプルな形としてはunityからのPOST内容をjsを通して行うことだが、unity経由でvueを実行する方法は3Dの処理以外見つからない。

また、apiUrlもhttp://localhost:3000/の方を指定しておらずpostsの方なのでなぜ内容を上の階層のものに反映できているかが謎である。

これはjavaを突っ込んで理解していくか検討する必要がある。

模索するうちにaxiosというツールを使って別の方法でjsonを画面上に表現できる方法を見つけたのでこちらも試してみる。

https://developer.school/how-to-use-vue-js-json-server-and-axios/

axiosをインストール。
npm install axios

この後で色々と設定が必要で、code .を実行するために、Visual Studio Codeを起動して、command + shift + Pでコマンドパレットを開き、shell command installでパスを通す。

npm run serve

を実行するとエラーが発生するので、調べていくとかなり問題になっているよう。

https://stackoverflow.com/questions/53536239/cannot-run-npm-run-serve

https://github.com/vuejs/vue-cli/issues/4900

https://qiita.com/engr_murao/items/d535bd6f52c1c058a1da

echo $NODE_ENVとしてもnot found developmentと出てきてしまう。よくよくコードを見返していくとcd vue-axiosも失敗している。

一旦bootstrapとjqueryの使用方法を確認して現在表示できているjsとhtmlを変更した方が良さそう。

jQueryは、JavaScriptの書き方などを簡単にすることが出来るJavaScriptで作成されたライブラリで、ブラウザの違いを意識せずに済む、HTMLの操作が簡単にできる、Ajax処理が簡単に記述できるなど、WebサイトやWebサービスを作る上で便利なもの。

HTMLのbodyタグ内の最下部に、以下のコードを記述するだけでインストールできるので簡単。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

AjaxはJavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。

bootstrapはCSSのフレームワークで簡単にデザインを作成できるもの。

Javascriptの知識が必須となってきそうなので本で補填。

HtmlとCSSは他のページに移るまで一度読み込まれたら不変なため、動きを変化させるなどの時間経過で対処させる場合にはjavaが必要で、これらの不変な情報を書き換えることができる。

さらに、変更箇所のみの書き換えで、ページの再読み込みは発生しない。

変化させるイベント発生タイミングが重要なので、イベントきっかけのタイミングも忘れずに設定する必要がある。

Unityからのjson書き換えにはこの部分が足りなかった事になる。

ちなみに、node.jsの登場でphpやrubyの守備範囲までjavaで対応できるようになっているとのこと。まさに、jsonserverのこと。

人気の記事

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.