Blockchain code Metaverse VR

Crypto×VR×SmartContract(390)

スポンサーリンク

//tips

//smart contract

Reactのevent処理の続きを確認する。classの中でのみ使用するstateを組み込む。stateは値が変更されると再度レンダリングされ、最新の内容を反映するというもの。

//stateを定義する
//stateを持てるはclassのみ
//新しいclassインスタンスが作成されたら実行される
constructor(prop){
//superで親クラスを呼ぶ
super(prop);
this.state={term:''};
}

//必ずrenderを返す
render(){
//eventにてstate状況を設定する
return(
<div>
<input onChange={event=>this.setState({term:event.target.value})} />;
Value of the input:{this.state.term}
</div>
);
}
//stateが変化した時に再度レンダリングされる

Value of the input:{this.state.term}では入力内容の最新のものがすぐに反映される。

Stateを使用したレンダリングを実装したい際は、functionではなくclassを使う方が適切なよう。

Index.jsの方もapiでYouTubeから引っ張ったvideoのリスト表示をさせる。

import YTSearch from 'youtube-api-search';
//import { extend } from 'lodash-es';

const API_KEY=‘aaaaa’…;

//時間経過とともにビデオリストは変更するのでclassに変更
class App extends Component{//function(){

constructor(props){
super(props);

this.state={videos:[]}

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

render(){
return(
<div>
<SearchBar />
</div>//JSXはhtml表記をjsでかけるもの
);
}

これに連動させるvideo_list.jsを次に記述。

import React from 'react';

const VideoList=(props)=>{
return(
<ul className="col-md-4 list-group">
{props.videos.length}
</ul>
);
//ブートストラップ名のようcol-md-4 list-group

};

export default VideoList;

このVideoListをindex.jsにインポートし、render実行項目に追加することで内容を表示させる。

render(){
return(
<div>
<SearchBar />
<VideoList videos={this.state.videos}/>
</div>//JSXはhtml表記をjsでかけるもの
);
}

この入れ子形式をうまく利用して、Videolistにvideolistitemの内容を付与するためvideo_list.jsを下記のように編集した。

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

return(
<ul className="col-md-4 list-group">
{videoItems}
</ul>
);

リストで追加した項目を現段階では区別できていないので下記のようにする。

const VideoListItem=({video})=>{

const imageUrl=video.snippet.thumbnails.default.url;

//サムネイルとタイトル付きの項目を返す
return (
<li className="list-group-item">
<div className="video-list media">
<div className="media-left">
<img className="media-object" src={imageUrl}/>
</div>
<div className="media-body">
<div className="media-heading">{video.snippet.title}</div>
</div>
</div>
</li>
);
};

export default VideoListItem;

これによりついにYouTube apiから取得した情報で画像imageとタイトル分を取得し、ブラウザに表示させることができた。これは便利すぎる。

さらにvideoの詳細項目についてもvideo_detail.jsで確認する。

import React from 'react';

const VideoDetail=({video})=>{
if(!video){
return <div>Loading</div>;
}

const videoId=video.id.videoId;
const url=`https://www.youtube.com/embed/${videoId}`;//+videoId;

return (
<div className="video-detail col-md-8">
<div className="embed-responsive embed-esponsive-16by9">
<iframe className="embed-responsive-item" src= {url}></iframe>
</div>
<div className="details">
<div>{video.snippet.title}</div>
<div>{video.snippet.description}</div>
</div>
</div>
);

};

export default VideoDetail;

videos[0]の詳細を表示させることができた。ただ、動画の挿入がなぜかできないのでそちらは質問し、リストにしているものもクリックできるように実装していく。

人気の記事

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.