Blockchain code Metaverse VR

Crypto×VR×SmartContract(391)

スポンサーリンク

//tips

//smart contract

コンテンツリストの選択を可能にする実装の続きから入る。

Index.jsのレンダリング内容を下記のようにすることで、

render(){
//eventにてstate状況を設定する
return(
<div>
<input
value={this.state.term}//最初は上記で定義されている''の空欄の内容が入っている
onChange={event=>this.setState({term:event.target.value})} />;

</div>
);
}

video_list.jsのループ処理をうまく活用しているのか。

const VideoList=(props)=>{

const videoItems= props.videos.map((video)=>{
//mapによりループ処理をシンプルにする

ここのpropsにリストを指定できれば、リストのアイテム全てを選択できるようにできるので関連箇所を修正していく。

VideoListItem部分で下記のようにeventを検知してブラウザ表示の切り替えに反映させる。

return (
<li onClick={()=>onVideoSelect(video)} className="list-group-item">

Index.js→list→list_detailという形でジャンプしていくことになるので、少し複雑になっているので、自分で実装する際にはもっとシンプルな形にできないか考える。

Cssも追加で変更していく。検索バーを長くしたり、リスト上にカーソルを置くとハイライトされる等の追加変更している。

.search-bar{
margin: 20px;
text-align: center;
}

.search-bar input{
width: 75%;
}

.video-item img{
max-width: 64px;
}

.video-detail .details{
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}

.list-group-item{
cursor: pointer;
}

.list-group-item:hover{
background-color: #eee;
}

ここから現在固定している検索単語を検索バーに入れたものに切り替えられるようにする。

まずはindex.jsをにて新たなメソッドとして入力ワードを検索ワードに切り替えられるようにする。

videoSearch(term){
//検索ワードで動画データを取得
//ビデオリスト作成源
YTSearch({key:API_KEY,term:term},(videos)=>{
this.setState({
videos:videos,
selectedVideo:videos[0]
});//{videos:videos}キーとバリューが同じ場合には省略可能
//this.setState({videos:videos})
});

}

render(){
return(
<div>
<SearchBar onSearchTermChange={term=>this.videoSearch(term)} />

その上でserch_bar.jsのリアルタイム検索ワード更新の仕組みに、入力文言での検索結果を表示させるようにする。これで検索ワードが変わるごとに新たなdataをyoutubeのapiを用いて取得していくことになる。

render(){
//eventにてstate状況を設定する
return(
<div className="search-bar">
<input
value={this.state.term}//最初は上記で定義されている''の空欄の内容が入っている
onChange={event=>this.onInputChange(event.target.value)} />;

</div>
);
}
//stateが変化した時に再度レンダリングされる

onInputChange(term){
this.setState({term});
this.props.onSearchTermChange(term);

}

色々な単語を入れているときちんと反映されたが、過負荷だったためかapiが機能しなくなってしまった。

一旦reactの活用例はここまでにしたいのでこのまま進める。

読み込みが若干遅い場合にはnpm install --save lodashを組み込むことで解決でき、_.debounce((term)を使用することで常にサーチし続けるのではなく、自身の入力を止めたタイミングで自動的にサーとしてくれるようにできるため。負荷が少なく素早いサーチが可能となるよう。

render(){
const videoSearch=_.debounce((term)=>{this.videoSearch(term),300});//文言を止めたところで300ミリ秒ごと新しいサーチを行う

再度lotteryプロジェクトの方に戻っていく。新たにlottery-reactを作成。

まずはターミナルでsudo npm install -g create-react-appを実行。

create-react-app lottery-react

こちらで新規作成。

今回もバージョン問題などを避けるためにターミナルで新規作成するのではなく、ダウンロードしたフォルダをアップロードしたがnpm run startがうまく実行されず上記の流れを実行。

ページを開けなかったので解決策を模索。

npx create-react-app lottery-react

で対応できるとのこと。

Nodeのバージョンを上げる必要がありそうなので安定している最新版のものにnodeを切り替え。

Error: sudo required (or change ownership, or define N_PREFIX)

sudo n stable

これを実行してもエラー。

しょうがないのでnodebrewを使用して再度入れ直し、バージョンを切れ変え。

brew install nodebrew
nodebrew install stable
nodebrew use v16.2.0

これにて再度npm startを実行したところブラウザに表示ができた。冷や汗かいた。

作成したフォルダに下記をインストール。

npm install web3

さて、ここからweb3とreactを連動させていく。

ブラウザの構成要素として

・メタマスク経由(rinkeby接続)からブラウザへのアクセス(web3 v0.2)
・アプリベースのブラウザへのアクセス(web3 v1.0)

の2つのパターンに分かれることになる。

ただ、アプリ側のweb3情報が最新版であることから、そのことをメタマスク側のweb3に伝える必要があり、providerを通して、メタマスクにより生成されたweb3側のproviderに接続する(web3 v1.0のコピーを渡す)必要があるとのこと。

ここはもう少し詳細な理解が必要になりそう。あとで別途調べる。

早速lottery-reactのsrcフォルダにweb3.jsを作成していく。

人気の記事

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.