Blockchain code Metaverse VR

Crypto×VR×SmartContract(529)

スポンサーリンク

//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などから選べるようにする方法を考えるか。カスタイマイズの方は一旦保留にする。

人気の記事

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.