我が子に捧げる、Notion で作った手作り動画サイト

## はじめに

電車や飛行機などの乗り物が大好きな 3 歳の子ども（男）が Youtube を見出すと視聴が止まらない。
同じような悩みを抱える親御さんは少なくないだろう。
全部ダメとは言いたくないが、自由に何時間も観させるのはよくないし。。
家族会議の結果、以下の方針でとりあえず走ってみることにしたので、紹介したいと思う。

## おやのおなやみ

- サジェスト動画によりどんどん別の動画に目移りしてしまいキリがなくなる
- コンテンツ的に子供に長時間見せたくない動画（刺激が強かったり、おっさんによるおもちゃ紹介の動画など）の対処方法に苦心
- もう少しコンテンツをいい感じに管理した形で見てもらいたい

## そこで以下のような条件を満たす動画閲覧ツール的なものを考えた

### ツール自体の機能として

- ツール上で Youtube の動画コンテンツを埋め込み・再生できる
- コンテンツの管理っぽいことが可能
	- コンテンツの追加・削除
	- コンテンツの一覧表示
	- コンテンツに属性（タグ）を付与し、それによりコンテンツ種類をクイックに認識したり、フィルターしたりできる
- コンテンツのサムネ表示ができる
	- 子どもが、何のコンテンツかを一目でわかるように

### ツールを構築する上での要望

- ノー（ロー）コードで作成可能
	- ライトに始めたかったので
- Youtube コンテンツ組み込めの際、なるべく自動化できる仕組みがある

## それ、Notion でやりましょう！

これらの条件たちをそこそこ満たしてくれそうな存在が近くにあった。**Notion** である。
早速 Notion を使って、動画サイトっぽいものを作ってみることにした。
※以下の説明では、細かい操作は端折りエッセンスを詰め込んでいる。

## ワーク

### ページの用意

ワークスペース内のルートにおいて、**Create a new page** アイコンをクリックするか、`⌘ + N` で新規ページを作成する。

### テーブル（データベース）の用意

Notion のデータベースには複数の種類があり、そのうち `Gallery` を選ぶと、**サムネも表示できていい感じににぎやかに楽しくなる**。

作成したページ上で、`/ga` と入力すると、ギャラリータイプのデータベース挿入ポップアップが表示されるのでクリックする。

![スクリーンショット 2024-06-21 22.23.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/3b094967-5983-87c4-8776-71415ace587a.png)


空っぽの状態の Gallery が作成されるので、「**Link or create a database**」ボタンをクリックすると、次のような表示になる。

![スクリーンショット 2024-06-21 22.34.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/9f6537a2-db2c-0f50-d474-52c417e8495f.png)



赤枠で囲まれた `＋` をクリックすると、別のビューを追加できるので、ここでは `Table` view を追加する。

データベース名が `Untitled..` というのは可哀想なので、「**お金がない**」と名づけることにする。

また、サムネを表示するための仕組みとして以下の設定を行う。
- **ミートボールメニュー** > **Properties** > **New property** > `Files & media` を順に選択する。
- Gallery ビューを表示した状態でミートボールメニュー > Layout > Card preview > `Files & media` 選択

以上で土台はできたので、あとはコンテンツを突っ込んでいくのみ！

:::note into
Notion におけるデータベースは、ひとつ作成すると、それに対するビューを複数表示することができる（つまり、データはひとつ（いわゆる RDBMS 的に 1 テーブル分）であるが、そこから複数の表現方法（ビュー）が利用可能となっている）。上記では、`Gallery` , `Table` という 2 種類のビューを作成した。
用途に応じてこのビューを使い分けるのがポイントである。
:::

### コンテンツの用意

#### 動画物色

我が家の息子は、御多分に洩れず電車や飛行機が大好きである。
これらひとつとっても、Youtube 上にはさまざまなタイプのコンテンツがあり、まさに玉石混交、親としてはやはり野放しにはできないとの想いが強まる。。（※スクショに写るコンテンツは、親の好みである）

#### Youtube コンテンツの埋め込み

Notion のデータベースには、Google Chrome 拡張を使って入れる方法がある。
詳細は本質ではないため他の記事に譲るとして、ニュアンスだけお伝えする。

■手順
1. [「Save to Notion」という Chrome 拡張](https://chromewebstore.google.com/detail/save-to-notion/ldmmifpegigmeammaeckplhnjbbpccmm) をインストールする
2. 該当の Youtube 動画ページにアクセスする
3. インストールした拡張のアイコン <img width='24px' src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/c80213a1-e6ab-6379-6184-34acf7b2c6ce.png> をクリックする
4. 拡張のポップアップが立ち上がるので、自分の Notion のワークスペース > ページ > データベースとリンクし、各種設定を行い **Save Page** することで、その動画が指定したデータベースに埋め込まれる。
    <img width='300px' src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/f7253695-199f-a5dc-69ee-5794c5c5d751.png>
    <img width='300px' src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/75e31a10-25e8-6401-5454-ce4ad774f78b.png>
    <img width='300px' src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/60a66059-10a2-ee67-34e8-d1a73975d1b9.png>




:::note info
`Files & media` のフィールドには、サムネに表示したい画像を入れる。この拡張を使うとキャプチャを撮ったり画像データを抽出したりできるので、試していただければと思う。
:::

以上で、Notion データベースに動画が一本収納された。

これを何回かやると、このようなイメージになる。

![画面収録 2024-06-22 0.34.56.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/6e4b1a3a-acb9-9c36-481f-c040c93b4b7d.gif)


Notion では、データベースの行ひとつ一つがさらにページになっているような構造になっている。追加したコンテンツをクリックするとページが開かれ、そこに動画が embed されているので視聴できる。

### もう一工夫

というほどでもないが、コンテンツに属性（`Tags`）を付与することで、適切にフィルターしたり、その状態をビューとして独立させたりできて便利だ。
設定方法等は端折るが、イメージはこんな形だ。（息子はピタゴラスイッチも好きなのだ）
上側が全動画のリストで、下側が「装置系」で絞ったときのビューとなる。
誰しも**装置のみを重点的に見たい日**もあるだろう。

- 全動画リスト
    
    <img width='1000' src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/c2792adc-8483-b902-74aa-0d5c802f0af4.png>

- 「装置系」リスト
    
    <img width='1000' src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/fbc00881-03d7-3bb3-8689-9bb89873d506.png>

### 公開

Publish することで URL が発行され、インターネット上に公開される。

![スクリーンショット 2024-06-22 0.18.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/034786df-b963-58ae-aa3d-a8eaeaa6bc89.png)


## 達成できなかった/今後改善したい箇所

今回は突貫で作成したので、あまり柔軟な対応はできなかった。
**観る側だけでなく、作る側も楽しいサイト**にしていけたらと思っている。

- 動画再生終了後のサジェスト動画の非表示
- Youtube → Notion へのリンクをもっと自動化したい
	- データを自動抽出して Notion データベースの任意のプロパティ（URL, タイトル、再生時間 etc）に格納する etc
- Notion 上での視聴記録をとっておいて、AI 分析・アクションに繋げる
	- コンテンツ視聴状況の可視化
	- バランスよく視聴できるようなサジェスト機能

## 終わりに

記事の締めくくりに、我が家で設けている動画視聴のルールを紹介して終わろうと思う。
時には厳しいことも言ってしまうが、要は I Love You なのだよ。

```
~ルール~

- 視聴は二日に一回。今日観たら明日は見ない。
- 視聴は 1 日 30 分まで。
- 30 分経たずとも、午後 8 時になったら消灯。
- 視聴開始までに、お風呂・歯磨き・お着替え・おむつ着用、が完了している必要がある。
```