//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が出ている。
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で挟み込む。
それでもエラーが出ており、検索していくとこれはサーバ側とクライアント側の認識齟齬に由来するエラーであることがわかった。
{idmailcheck&&
<div>
<Button variant="outlined" onClick={handleClick}>EDIT</Button>
</div>
}
このようにするのが正解だったよう。
Indexからの遷移が遅いのは最大userid値の取得部分と読み込みがバッティングしているせいかもしれないと考え、useeffectを導入する。
あとはapp.jsが何か悪さをしていないかを探ってみる。
