//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のこと。
