35d BLOG

Notion Blog で YouTube 動画埋め込みを実現する【Notion Blog 徹底解説 #3】

// 🙎‍♂️ Yuji Tsuburaya📆 May 28, 2020🔖 Notion Blog Notion

（👩‍💻 2020/05/28 リライトしました。）

Notion Blog 徹底解説シリーズの第三弾です。今回は Notion Blog に YouTube 動画を埋め込む実装をしていきたいと思います。Notion Blog はデフォルトでは YouTube 動画埋め込みをサポートしていないので、その機能の付け方を解説していきたいと思います。

⚠ この記事から、エンジニアリングの話がちょこちょこ登場してきます。Notion Blog は Next.js で出来ているので、カスタマイズするには React の知識が必要になるのですが、知識がない人でもなるべくコピペで実現出来るように丁寧に解説したいと思います。例によって、分からない方は、@___35d まで質問ください。

🔥 YouYube 動画の埋め込みを実現する

Notion Blog への YouTube 動画の埋め込みは、以下の2ステップで実現することができます。

YouTube 埋め込み用の React ライブラリのインストール
[slug].tsx を編集して、video タグのときに YouTube 動画が表示されるようにする

一つ一つ解説していきたいと思います。

1. YouTube 動画埋め込み用の React ライブラリのインストール

react-youtube というライブラリを使用します。スター数 1,000 以上で、メンテも頻繁に行われているので、信頼できるライブラリだと思います。

▷ react-youtube

$ yarn add react-youtube

👆のコマンドで、ライブラリをインストールします。

2. [slug].tsx を編集

Notion Blog では、[slug].tsx 内で Notion のブロックを1つ1つ解析して、見出しだったら heading タグに変換、通常テキストだったら p タグに変換、みたいなことをしています。

今回で言うと、video として解析された場合の処理を YouTube 埋め込みに対応させるようにして、 react-youtubeを使用するようにします。

コードとしては、以下のようになります。

// [slug].tsx
import YouTube from 'react-youtube' // 追加

// 既存コード
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 videoId={youtubeId[1]} key={youtubeId[1]} />)
}

🚀 完成

これで YouTube 動画の埋め込みができるようになりました。Notion に埋め込んだ YouTube 動画が、Notion Blog にも反映されているのが分かるかと思います。

Notion / Notion Blog それぞれで YouTube 動画が埋め込まれている

今回の YouTube 動画埋め込みの実装は、生配信しながら実装してみました。以下に配信アーカイブが上がっているので、どこに何を実装するのか、より詳しく見たい方、思考の過程を見たい方は、以下の動画を参考にしてもらえればと思います。（⚠ 生配信なので多少のグダりはあります）

⚠ 今回は video タグ内で通常の動画埋め込みと YouTube 動画埋め込みの分岐をしていないので、通常の動画埋め込みをサポートしていない状態になってしまっています。僕はたぶん通常の動画埋め込みをしないと思うので大丈夫ですが、もし通常の動画埋め込みをしたい場合は、さらに分岐を足す必要があると思います。ご注意ください。

不明点あれば @___35d までお気軽にどうぞ🙌

（参考）Notion BlogにYouTube Embedを埋め込むための方法（仮）

✍️ Notion Blog のカスタマイズ方法まとめ