🎬 ThumbGrab を自作した理由
わたし自身YouTubeのサムネイル画像をダウンロードする機会が時々あるのですが、以前は他のWebサービスを利用していました。しかし頻繁に利用する機能だからこそ、自分用のシンプルなツールを用意しておきたいと考え出来上がったのがThumbGrabです。ThumbGrabは最大解像度のサムネイルを自動取得し、タイトル表示や安全なダウンロード処理にも対応しています。APIも不要で、気軽に使える軽量ツールです。
ツール名の「ThumbGrab」は、「Thumbnail（サムネイル）」と「Grab（つかむ・取得する）」を組み合わせた造語で、機能をそのまま表しています。響きも軽快で覚えやすく、自分の中でもしっくりくるネーミングになりました。
⚙ 実装で使ったテクニック
実装はかなりシンプルで、YouTubeの動画IDから直接サムネイル画像を取得できる構造を利用しています。実はYouTubeのサムネイルは特別なAPIを使わなくても、決まったURLパターンで直接アクセスできるようになっているため、クライアントサイドだけで完結する軽量なツールとして仕上げることができました。
ただし、サムネイルにはいくつかの解像度（maxresdefault、hqdefault など）が存在し、動画によっては最大サイズが存在しないケースもあるため、画質の高い順に試していって最初に見つかったものを表示するようにしています。このあたりは静的URLながらも “賢く見える” 工夫のひとつです。
また、せっかくなので動画タイトルも取得できるようにしました。YouTubeの公式APIを使うと登録やAPIキーが必要になりますが、そこまで大げさなものにはしたくなかったので、noembed.com という軽量なoEmbedエンドポイントを活用し、動画タイトルだけを取得しています。これもAPIキー不要・CORS対応済みで扱いやすく、ちょうどよい選択でした。
🎯 実用面でこだわったこと
フロントエンドはHTML＋JavaScriptのみで、CSSは他のDottiqツールと統一感が出るよう最低限のスタイルを上書きしています。ダウンロードリンクについても、単に <a download> ではなく Blob を使って確実にダウンロードダイアログが出るようにしてあります（Safariなどの互換性対策）。
さらに、URL構造についても当初はルート直下に置いていたのですが、他のツールと統一するために /tools/thumbgrab/ に整理しました。英語版も /en/tools/thumbgrab/ として公開し、マルチ言語展開も対応済みです。