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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.