Blockchain code Metaverse VR

Crypto×VR×SmartContract(551)

スポンサーリンク

//tips

//smart contract

YouTubeapiの使用で取得サブネイルにリンクをつけて飛ばす方法を模索する。

{ninja.map((item,index) => (
<div key={index} >
{item.youtubeId&&(
<div>

<iframe width="560" height="315"
src={`https://www.youtube.com/embed/${item.youtubeId}`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen>
</iframe>

現在は動画urlを使用したiframeでの加工をおこなっているがここを変換していくことを考える。

下記を参照し、動画idからサブネイルを取得できることがわかってきた。

https://html-css-javascript.com/youtube-thumb/

https://www.billionwallet.com/goods/youtube_image.html

320*180のサブネイル画像を取得する際には別途/img.youtube.com/vi/{youtubeid}/mqdefault.jpgとすれば良いことがわかってきた。

まずはサブネイルをimageで表示させる。

<img src="http://img.youtube.com/vi/iceS6BvhuQ8/mqdefault.jpg" alt="" width='100%' onClick={()=>console.log('Yes')}/>

こちらで綺麗に表示させることができた。

またSNSの外部リンク方式document.location.hrefの形をonclickに採用すると、こちらにてサムネイルをクリックするとyoutube動画に遷移させることができた。

<img src="http://img.youtube.com/vi/iceS6BvhuQ8/mqdefault.jpg" alt="" width='100%' onClick={()=>{document.location.href = "https://www.youtube.com/watch?v=iceS6BvhuQ8"}}/>

一度embed形式をなくしてみる。

<iframe width="560" height="315"
src={`http://img.youtube.com/vi/${item.youtubeId}/mqdefault.jpg`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
onClick={()=>{document.location.href = "https://www.youtube.com/watch?v="+item.youtubeId}}
allowFullScreen>
</iframe>

Image表示の大きさが変えづらい、iframeの下に先のimage設計を加えて確認。問題なく機能している。

{ninja.map((item,index) => (
<div key={index} >
{item.youtubeId&&(
<div>

<iframe width="560" height="315"
src={`https://www.youtube.com/embed/${item.youtubeId}`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen>
</iframe>

<img src={`http://img.youtube.com/vi/${item.youtubeId}/maxresdefault.jpg`} alt="" width='100%' onClick={()=>{document.location.href = "https://www.youtube.com/watch?v="+item.youtubeId}}/>

これでコンソールに猛烈に表示されていたembedによるwarningが消えた。

これをTwitterTweetEmbedで対応しているtweetの組み込みの方にも活かせないか模索する。

<TwitterTweetEmbed
tweetId={item.tweetId}
/>

tweetの方でもwarningが出ている。

Twitter埋め込みでサイトが重いと感じたらasyncに注意

https://akio3594.com/archives/14422

Twitter風の組み込み先を自分で作るのが一番か。

読み込み速度は他の箇所でも変えられそうなのでそちらも確認する。

そういえばSNSのアイコンはわざわざデータベースに上げなくてもサーバ側に保管しておけば良さそう。

そもそものlayoutのdrawerバーに表示されている画像は下記のように引っ張っているので同様な形態で処理すべく考える。

<MyImage fname="image.jpg" size="250" />

これを用いれば下記のくだりでstateにurlを毎度保存しなくてもよくなる。

const gsReferencet = ref(
firestorage,
"gs://myapp-8e583.appspot.com/admin/2021 Twitter logo - blue.png"
)

getDownloadURL(gsReferencet)
.then(url => {
setImagetw(url)
})

まずはimport MyImage from '../../components/image’を導入。

これは以前自前で作成しているimage.jsのコンポーネント内容。

import Image from 'next/image'

export default function MyImage(props) {
let fname = '/' + props.fname
let size = props.size + "px"

return (
<Image width={size} height="250px" border="0"
src={fname} />
)
}

各のsns画像をlocalのpublicフォルダに保存した後に下記を組み込み確認。

<MyImage fname="Logo.png" size="250" />

表示は問題なく確認できた。

わざわざMyImageコンポーネントを使わなくても

<img src="/Logo.png" width="30" height="30" className={classes.imagemargin} onClick={handleClickImagetl}/>

にて対応できたので全て切り替える。

<img src="/2021 Twitter logo - blue.png" alt="" width="30" height="27"className={classes.imagemargin} onClick={handleClickImagetw}/>
<img src="/Discord-Logo-Color.png" alt="" width="30" height="30" className={classes.imagemargin} onClick={handleClickImageds}/>
<img src="/youtube_social_square_white.png" alt="" width="30" height="30" className={classes.imagemargin} onClick={handleClickImageyt}/>
<img src="/WhatsApp_Logo_2.png" alt="" width="30" height="30" className={classes.imagemargin} onClick={handleClickImagetl}/>
<img src="/Logo.png" alt="" width="30" height="30" className={classes.imagemargin} onClick={handleClickImagewts}/>

こちらでページ表示がかなり早くなった気がする。

同時にデータベースから画像を引っ張っていた部分をコメントアウト。

また、warning表示でgutterBottomがreactでは認識できなとのコメントがあるので下記該当箇所を削除し、様子見。

<Card variant="outlined" sx={{height: 70}} className={classes.cardmargin} gutterBottom>

ここの問題は解決。

Warning: Expected server HTML to contain a matching <button> in <div>.

Divに囲まれていないbuttonタグをdivで挟み込む。

それでもエラーが出ており、検索していくとこれはサーバ側とクライアント側の認識齟齬に由来するエラーであることがわかった。

【Next.js】Hydration時にReact.hydrate()による警告が発生するケースとその解決方法

{idmailcheck&&
<div>
<Button variant="outlined" onClick={handleClick}>EDIT</Button>
</div>
}

このようにするのが正解だったよう。

Indexからの遷移が遅いのは最大userid値の取得部分と読み込みがバッティングしているせいかもしれないと考え、useeffectを導入する。

あとはapp.jsが何か悪さをしていないかを探ってみる。

人気の記事

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.