YouTube meets Notion
はじめに
超久しぶりにこんばんは。全然書いてませんでした。
まず出来上がったものを見ていただきましょう。下記リンクを開き、以下の手順を実施してみましょう。
- 下記サイトを開いたら、サムネイルをクリックしてください
- 右側にサイドピークが現れ、そこで直に YouTube 動画視聴できます
- 左側のギャラリーでサムネイルを選ぶとザッピングできます
最高の UX ではありませんか！
※以下をクリック。PCでの閲覧を推奨します。
興味出ましたか？いいですね！きっと似たようなの作りたいと思ったでしょう？
でもそんなに簡単にはいかなかったんですね。いや、正直言うと割と簡単に行けたんですが、１点だけすごく苦労しました。きっと同じ事やろうとしたら調べるの大変でしょう。そこをご紹介します。さて、どこで躓いたのか。何気に AI 君も教えてくれなかったところなので、自力で解決しました。
では、興味持った方はまず下記 YouTube チャンネルを開いてチャンネル登録を済ませておいてください。
チャンネル登録は済みましたか？
.
.
.
では、本題に参りましょう。
Notion に出会う
さて、Scratch は既にほとんど触っておらず、いや、触りたいんですが時間が無いので放置なのですが、細々と作曲活動だけは続けてまして、それをライブラリ的に公開できないかなぁ、と思ってました。
最初は YouTube で再生リストにしてたんですが（今でもしてるんですが）、使う方はあまりそういう使い方しないですよね。ライブラリ的に探すとか。一覧で見るとか確認するとか。
で、ChatGPT 君に聞いてみたわけです。そしたら Notion がいいよ、と。なので、まず Notion でライブラリ揃えました。最初はリスト形式で、それでも「見やすいな」と思ってたわけです。
そのうちに、Google Gemini 君にも別の視点から聞くようになって、ギャラリーが良いよ、と言うわけです。そぅお？と思いながらやっていったら先ほどのが出来上がったわけです。
いやいや、素晴らしい。
正直、こんなのができるとは思わなかった。
ギャラリー・ビュー
やっぱインパクトはこのギャラリー・ビューですよね。で、右からニュッと出てきて再生できるサイドピーク機能。ステキ。
ザッピングし放題です。
ここで問題となったのが、サムネイルです。Gemini 君が言うには。
- この右側のコンテンツのトップのものがサムネイルで出るよ、YouTube 動画が配置されてればいいよ！ ➡ 出ませんでした。
- 次に、じゃぁ、手間だけどこうすれば完璧、プロパティを「ファイル＆メディア」にして URL 書けば出るよ！➡ 出ませんでした。
- 色々調べると、みんな Save to Notion を使うと良いよ！Android で共有するといけるよ！➡ 面倒くさいでしょ。
そのためだけに Chrome 拡張機能入れたりするのもアレだし、もっと楽に行けないのか？
これが一番簡単でした
知ってる人は知ってるんでしょうけど、調べるの結構大変だった... あまり情報も無かったけど、どこで見つけたのかも覚えてないし。しかし、Gemini 君も「それなら完璧だね！」と後出しジャンケン的にアドバイスしてきたので、間違ってないでしょう。
その方法とは、 サムネ用の URL を「ファイル＆メディア」に突っ込む。
Save To Notion はこれやってるのかな？使ってないので分からんですが。あと、非公開の動画のサムネ画像は当然取れません。
一応、聞いてみた回答はこうなので問題ないでしょう。
🔍 YouTubeサムネイルURL（img.youtube.com）の正体
- 公式が使っているサーバーであることは間違いなし
YouTube自身が、自身のサイト内でサムネイルを表示するために使用している公式ドメイン（または i.ytimg.com）です。- APIリファレンスには載っていない
Googleの公式APIドキュメント（YouTube Data API）では、「APIを叩いて、レスポンスに含まれる thumbnail.url を使いなさい」と書かれています。このURLを「推測して直接叩く方法」は、実は明文化された仕様ではありません。- しかし、世界中で「デファクトスタンダード」化している
エンジニアの間では20年以上（！）使われ続けている手法で、不特定多数のライブラリやスクリプトがこのURLに依存しています。Googleがこれを止めることは、インターネット上の膨大なサムネイル表示を壊すことを意味するため、実質的に「公開されているもの」として扱われています。
まず、動画 ID を確認しましょう。動画 ID ってのは YouTube の URL にある ID でここの部分です。
https://www.youtube.com/watch?v=[動画ID]
または
https://youtu.be/[動画ID]
つまりここです。
https://www.youtube.com/watch?v=XXXXXXXXXXX
^^^^^^^^^^^ ここがID
で、サムネ用の URL がコレです。こっちは高画質版。公式テーマだけこれ使ってます。
https://img.youtube.com/vi/[動画ID]/maxresdefault.jpg
低画質（小さめ）で良ければこっちで。私は基本こっち使ってますが、全然問題ないです。
https://img.youtube.com/vi/[動画ID]/mqdefault.jpg
- プロパティを 『ファイル＆メディア』 に設定し、『ファイルのアップロード』ではなく 『埋め込みリンク』 を選択して上記 URL を貼り付けましょう。
これをやった（プロパティにセットした）上で、以下の設定をします。
- ギャラリーの 「レイアウト」 から 「カードプレビュー」 を該当プロパティに設定
- 普通は「なし」「ページカバー画像」「ページコンテンツ」しかないですが、「ファイル＆メディア」のプロパティがあるとそれも選択肢に出てきます
- 同じ 「レイアウト」 のメニューの中にある 「ページの開き方」 を 「サイドピーク」 に設定
- デフォルトは「ポップアップ」なので、断然「サイドピーク」のほうが UX 的に最高
- 「カードサイズ」はお好みで（小、中、大）
これであなたも Notion での圧倒的な YouTube のユーザー体験を構築できます！
ぜひお試しください！
まとめ
解像度の話はまとめると以下のようです。それぞれ注意点があるのでご確認を。
🎥 YouTubeサムネイルURL 解像度一覧
基本URL形式: https://i.ytimg.com/vi/[動画ID]/[解像度名].jpg
| 解像度名 | サイズ (px) | 比率 | 特徴・制限 |
|---|---|---|---|
maxresdefault |
1280 × 720 | 16:9 |
最高画質。 動画がHD以上でないと404になる。 |
mqdefault |
320 × 180 | 16:9 |
今回の最適解。 軽量かつ16:9。ほぼ全動画で存在。 |
hqdefault |
480 × 360 | 4:3 | 4:3のため、 Notionの枠だと上下に黒帯が入る。 |
sddefault |
640 × 480 | 4:3 | 4:3。存在しない場合もあり不安定。 |
default |
120 × 90 | 4:3 | 最小サイズ。 Notionでは解像度が足りずボケる。 |
mqdefault が Notion に最適な理由
-
16:9：
hqdefault等は4:3のため、Notionのギャラリービューで表示が崩れやすいが、mqdefaultは最初からワイド比率なので美しく収まる -
安定性： 動画解像度に依存する
maxresdefaultと違い、ほぼ確実に画像が存在するため、リンク切れ（404）のリスクを回避可能 - パフォーマンス： 画像サイズが軽量、大量のカードを並べてもページの読み込みが非常にスムーズ
さいごに
え？チャンネル登録忘れてたって？
仕方ないな。さぁ今すぐ下のリンクからササっと登録済ましてきておくれ。
皆様の応援が制作の大きな励みになります。ですので、ぜひぜひチャンネルの登録をお願いします♪
もう一つおまけ
2/1 にサブチャンネル始動予定。こっちはロックでゴキゲンな Jazz/Fusion ベースの曲を集める予定。更新は月１でのゆっくりしたペースで進めますが、まず 2/1 に紹介動画アップします。
まだ 1 曲も入ってませんが、何曲かは上記の Fantasy Works に入ってる（ファンタジーに寄せようと決める前までは混在してた）んですが、ジャンルがちょっと違うので分けることにしました。まぁサイバーな SF ファンタジーもあるのでどっちでも行けるんですが、曲調が違うので。
ということで、まだ何もないうちから登録しても良い、という ちょっと変わった方 はぜひ登録お願いします。
どんな曲がアップされそうかは、 私の過去の記事を見ればわかります 。まずはその辺からアップしていきますので。
ただ、2/1 の紹介テーマ曲は概ね 1 分だけでチャンネルを紹介する、というコンセプトで特別に作った新曲です。興味あればぜひ登録してお待ち下さい！
こっちの Notion はまだ作ってないな。作ろう。
#Notion #YouTube