//tips
//smart contract
YouTubeサイトの共有から埋め込むを選択して埋め込みようのコードを取得できる。
<iframe width="560" height="315" src="https://www.youtube.com/embed/iceS6BvhuQ8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
YouTube動画IDはhttps://www.youtube.com/embed/以下に続く英数字の部分が該当する。
まずはこちらの埋め込みコードを挿入してyoutubeが組み込まれるか確認。
きちんと表示される。
Tweetidのように動画のIDを保存しておく形にすれば良さそう。
ただ気になったのが読み込みが若干遅くなっているように感じられることで、動画のサムネをurlから取得し、大元のurlにリンクさせクリックされたら遷移する形にかえる代替案も気にしておく。
参考：
https://zenn.dev/yotta/articles/7257808b14d5f3
https://zenn.dev/attt/articles/get-yt-thumbnail
Youtube共有リンクからidを抜き出して登録する流れを作成していく。
登録方法はtweetidの登録・更新と同じで良さそう。この更新は必要なさそうなので後で調整する。
また、ソースコードが見づらいのでvs codeのコマンドパレット［Command］＋［Shift］＋［P］キーにてショーっとカットfold(⌘K⌘0)を行い、全てのソースを折りたたんだ。
かなり全体が見やすくなった。
テキストフォームの記入を格納できるようにconst [youid,setYid]=useState(‘’)を作成。
同時にonClick={()=>{setFlagy(!openflagy)}}でクリック表示にした。
<form noValidate autoComplete="off" onSubmit={handleOnYoutubeCard}>としてイベント関数の作成を進めていく。
表示の雛形はあるのでyoutubeidのみを取り出して格納すれば良い。
Userに入力してもらうのは埋め込み用ではなく単純な共有urlで良い。ただ、動画のurlなどをペーストされる可能性も踏まえて対応できるようにしておく。
下記にて対応。
async function handleOnYoutubeCard(e) {
e.preventDefault();
const endpoint = youid;
// 区切り文字を「正規表現」で指定
var result = endpoint.split( '/');
var rnum=result.length;
console.log(rnum);
//最後尾の塊を取得
var fresult = result[rnum-1];
console.log(fresult);
var final=fresult.split('?');
console.log(final[0]);
setMyyoutube(final[0])
//ここまではtweeturlからのid抽出
//ここからはfirestorageへの登録
addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
youtubeId:final[0]
})
router.reload()
}
これにてデータベースにきちんと格納されることは確認できた。
これを取り出して描画させていく。
{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>
こちらもきちんと機能した。
Tweetと同じく、Popupでの削除も行わせるため削除に関するイベント関数も設定。
onClick={()=>handleDeleteYoutube(item.docid)}
Tweetと内容は変わらずわかりやすいように関数名を変えただけ。
const handleDeleteYoutube=async(id)=>{
console.log(id)
const docRef=doc(firebaseApp,"mydata",id.toString())
deleteDoc(docRef).then(()=>{router.reload()})
}
きちんと消えている。問題なし。
Edit.jsなどのテキスト部分は編集できるようにするか検討。
プラスボタンを押すとtweet,文言、カード、youtubeなどから選べるようにする方法を考えるか。カスタイマイズの方は一旦保留にする。
