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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、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.