//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を作成していく。
