Blockchain code Metaverse VR

Unity×VR×Blockchain(232)

スポンサーリンク

//tips
仮想空間・メタバースの使い方としては、プラットホームにしたいので独立したアプリというよりは、MRグラスのブラウザとして、1単語の音声入力または、発声ではなくgpsと検索ランキングなどを元に初期状態を3次元に表現しておけることを標準とした仕様にするのが良さそう。javascriptはブラウザの拡張機能を提供する際に役に立つか。

//js深堀り

Jsでできることを深掘りしていく。

オプションボタンの選択状態が変更された場合の処理を見ていく。

これはhtmlでオプションボタンによって表示内容を切り替えたい場合に使用する。切り替え方はhtmlのタグにclass=activeかpassiveを事前につけておき、ippanまたはhojinがチェックされた時にCSSの.active{display:block;},.passive{display:none;}をうまく活用して該当クラスのもののみを表示するというもの。htmlにはどちらのクラスの表記もされている。

$(“input[name=‘target’]”).on(“change”,function(){
$(“#ippan,#hojin”).toggleClass(“active passive”)
})

これはオプションボタンであるinput[name=‘target’]箇所が変更されたら関数を実行し、toggleClassメソッドの切り替え機能でactiveのものはpassiveに、passiveのものはactiveに切り替えることができる。

先のwebへの反映はVueのv-repeatを使用してjsonのdataから抜き出して、リスト表示を行っていたが、js、jquery自体にもリスト追加能力はある。

<ul id=“fruits”>
<li>りんご</li>
<li>みかん</li>
</ul>

$(function(){
$(“#fruits”).append(“<li>パイナップル</li>”)//子リスト末尾に追加
$(“#fruits”).prepend(“<li>パパイヤ</li>”)//子リスト先頭に追加
})

とすることで

パパイヤ
りんご
みかん
パイナップル

としてhtmlのliに追加することができるようになる。

<p>こんにちは</p>

$(function(){
$(“p”)
.after(“<p>おやすみ</p>”)//後ろに兄弟要素の追加
.before(“<p>おはよう</p>”)//前に兄弟要素の追加
});

おはよう
こんにちは
おやすみ

<li>の子要素の削除には

$(function(){
$(“#fruits”).empty();
})

を使用すると全ての子要素が削除される。

<ul id=“fruits”>
</ul>

要素の中身を書き換えることもでき要素.relaceWith(“HTML要素”)を使用する。これにより、jsonの中身から最後尾のidの中身を取得して、現在反映されているhtml部分を書き換えることが可能になりそう。

<button id =“btn”>クリック</button>
<div><p>みかん<p></div>

$(function(){
$(“#btn”).on(“click”,
function(){
$(“p”).replaceWith(“<img src=‘images/orange.png’></img>”)
});
});

これで<p>みかん<p>の記載部分を<img src=‘images/orange.png’></img>に書き換えることができるのでテキスト「みかん」から画像に変更することができる。

$(function(){自体にページが読み込まれたら発動するという条件があるので、ボタンクリックではなくページが読み込まれたらの場合はon部分をなくす。

Ajaxも少し復習。ajaxが非同期通信と呼ばれるのは、通常サーバーにリクエストをするとリスポンスを待つ間はloadingをしている状態となり、待ち時間は画面を触ることができない、この状態を同期通信といい、非同期通信はリスポンスを待っている間も、画面を見ることも触ることもできる状態のことをいう。

待機画面に入らないでリスポンスを受け取ることができるという考え方にするとわかりやすい。これをajaxが実現できるのは、自身のデータの反映部分を外部のデータ保持者からアクセスして反映してもらうことができるためで、これは信頼できる相手でないと少し困ったことになることもわかる。

例えば、自身で引数jsonをとる関数Aを公開し、外部jsonデータでその関数を実行することで情報のやり取りができる。

基本的な使用法を見ていく。

<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“utf-8”>
<title>JavaScript</title>

<script src =“http://ajax.googleapis.com/ajax/libs/
jquery/1.9.1/jquery.min.js”></script>

<script>
$(function(){
$(“#infoArea”).load(“info.html”};
});
</script>
</head>
<body>
<div id=“infoArea”></div>
</body>
</html>

この引用元のinfo.htmlを下記のように記載すると
<html>

<body>
<p>おやすみします</p>
</body>

</html>

これがmain.htmlのページに反映される。

ちなみ時々見かける$.getJSONはtype: "GET”,に指定した$.ajaxの省略版。下記のよう記載ができる。

$(function(){
$.getJson(“item.json”,
function(data){
for(var I=0;i<data.length;i++){
$(“#dataTable”).append(“<tr></tr>”)
.find(“tr:last”)
.append(“<td>”+data[I].code+“</td>”)
…;
}
}
);
});

 

人気の記事

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.