YouTube サムネビルダーを作る回

最近サムネが手抜きになっている背景として、毎回 Figma でいじるのが面倒というのがあります。そこで今回はオンラインのYouTube サムネビルダーを作って今後サボれる体制を作ります。

【目次】
- 00:00 ライブ準備
- 02:44 ~ オープニング

*実装開始*
- 07:11 ~ 環境構築（既存リポジトリ「code-to-image」をクローンして開始する）
- 09:15 ~ 技術スタックセレクタを作る（/components/stack-selector.tsx）
- 21:41 ~ svglのapiを使わずにsvgファイルをpublicディレクトリに配置して実装する
- 28:54 ~ Viewを作る（/page.tsx）
- 31:21 ~ サムネイル上部のアイコン表示部分を作る
- 38:03 ~ サムネイルのイメージ挿入部分を追加（/components/image-group.tsx）
- 46:33 ~ 設定アイコンを作る（Popover）（/components/settings-button.tsx）

▶ YouTube サムネビルダーを作る回 Part 2 : https://youtube.com/live/OW2oHhgahxE

▶ ライブで開発した「YouTube サムネビルダー」のリポジトリ : https://github.com/dninomiya/youtube-thumbnail-generator/tree/main

▶ クローンした「Code to Image」のリポジトリ : https://github.com/dninomiya/code-to-image/tree/main

/////////////////////////////////////////////////////////////////

nino+ / メンターサービス
https://nino.plus/about

𝕏
https://x.com/d151005

ほしいものリスト
https://www.amazon.jp/hz/wishlist/ls/181HAJYTRJVI0?ref_=wl_share