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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.