見出し画像

Notion BlogにYouTube Embedを埋め込むための方法(仮)

Notion Blogを導入して幾日かが経ちました。

非常に簡単にデプロイまでできた一方でできないことも多いNotion Blog。
大元はNext.jsということで設定ファイルを適切にいじることができれば様々な機能を追加できるみたいです。

しかしながら私はNext.jsを触った経験がなく、どのファイルが一体なんのためのファイルなのかわからないので、Next.jsのドキュメントを読み漁る毎日を過ごしていました。

そんななか、以下の記事を見つけました。

この方がやっている方法で無事にTwitter Embedを埋め込むことができたのと同時になんとなく関数の定義方法がわかったので、自分でもやってみることにしました。

今回はYouTube Embedを埋め込むための方法をまとめたいと思います。

1. react-youtube-embedのインストール

Youtube Embedを簡単に埋め込むことができるプラグインを導入します。

次のコマンドを打てばok。

$ yarn add react-youtube-embed

2. [slug].tsxを編集

[slug].tsxにNotion記法に対応する関数を定義している箇所があるので、該当箇所を編集します。

元のNotionにYouTube Embedを埋め込むとNotion Blog側では"video"関数を参照します。

[slug].tsxでは既に"video"関数が与えられていますが、元の定義だとEmbedに対応していません(Notionに直接アップロードしたビデオは表示されるみたいです)。

なので、応急処置的に"video"にテコ入れしてます。

//[slug].tsx

import { YouTube } from 'react-youtube-embed'

// Get the data for each blog post
export async function unstable_getStaticProps({ params: { slug } }) {
// load the postsTable so that we can get the page's ID
const postsTable = await getBlogIndex()
const post = postsTable[slug]
	.
	.
	.
switch (type) {
        .
        .
        .
case 'image':
case 'video':
{
	const { format = {} } = value
 const { block_width } = format
 const baseBlockWidth = 768
 const roundFactor = Math.pow(10, 2)
	// calculate percentages
	const width = block_width
	  ? `${Math.round(
			(block_width / baseBlockWidth) * 100 * roundFactor
    ) / roundFactor}%`
   : '100%'

 const isImage = type === 'image'
 const Comp = isImage ? 'img' : 'video'

	//ここから変更
 if (isImage) {
	  toRender.push(
	    <Comp
	      key={id}
       src={`/api/asset?assetUrl=${encodeURIComponent(
	        format.display_source as any
       )}&blockId=${id}`}
       controls={!isImage}
       alt={isImage ? 'An image from Notion' : undefined}
       loop={!isImage}
       muted={!isImage}
       autoPlay={!isImage}
       style={{ width }}
     />
	  )
 } else {
	  const youtubeid = properties.source[0][0].match(/\?v=([^&]+)/)
		toRender.push(<YouTube id={youtubeid[0]} />)
 }
}
break
        .
	.
	.

export default RenderPost

if文を用いて"video"関数を参照したときにreact-youtube-embedの機能を使うように変更しました。

こうすることで、無事にYouTube Embedを埋め込むことができました。

問題点

かなり強引な変更なので、上記の変更だとNotionに直接アップロードしたvideoが表示されなくなってしまいました。
私は今の所Notionに直接ビデオをアップロードする予定はありませんのでとりあえず放置していますが、いずれ変更するべきポイントかと思います。

以上、参考になれば幸いです。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
2
福岡県出身。27歳。エンジニア。 興味があることをまとめていこうと思っています。 興味のあること:ネットサーフィン・読書・音楽制作。