見出し画像

GUITARFLIX(ギターフリックス)というサイトをつくった話

GUITARFLIX(ギターフリックス)というサイトをつくりました。
ギターの弾いてみた動画をまとめたサイトです。

このサイトをどんな風につくったかを書きます。

企画


NETFLIXみたいな何かをつくろうと思って、「〇〇フリックス」を挙げていった。
「GUITARFLIX(ギターフリックス)」が一番響きがよかったので採用。
私自身「弾いてみた」動画を作っているし、ギターのWebサービスを作りたいと思っていました。
NETFLIXみたいに動画がいっぱい並んでいるイメージ。弾いてみた動画を並べるのが良さそう。
YouTubeで「弾いてみた」で検索するのを自動化する感じ。
YouTubeAPIが使えそう。

プロトタイプ制作


YouTubeAPIのドキュメントを見ながら、実際に使ってみて、何ができるかを確認する。

「Search」APIを投げて、返ってきたJSONを確認。
動画ID、サムネ、タイトル、チャンネル名が取れるので、表示してみる。
「弾いてみた」だとギター以外の、ピアノやベースも混ざるので、「ギター 弾いてみた」で検索。
タイトル、チャンネル名を表示すると表示が崩れるのでサムネのみにする。
いい感じになってきた。

デザイン


サイトのイメージが固まってきたので、デザインをしていく。
Netflixを参考に、黒背景に赤字で「GUITARFLIX」。bodyの背景色は薄い黒。
hulu,abemaのUIも参考にしました。
HTML、CSSをゼロから作ろうとも思いましたが、「ドラマメグラ」のほぼコピペになりました。

Netflixを参考にゼロから作った方が勉強になると思いましたが、
作りたいものがあるときはできるだけ早く形にしたいので、既存のものを流用したくなる、、

最終調整


lang:日本(ギター 弾いてみた)・海外(guitar cover)
term:全・日・週・月・年
という検索オプションをヘッダに表示。
サイトとしてまとまった感じ。

公開


プロトタイプの時点でレンタルサーバ(ロリポップ)上で直接実装しているので最初から公開状態ですが、、
twitterでつぶやいて、自作公式サイトからリンクを貼って、周知。
しばらくはほぼ自分しか使わないと思いますが、自分はとても便利に使っています。
弾いてみた動画のトレンドがよくわかる。

問題と対策


次の日YouTubeAPIで403エラーが発生。
YouTubeAPIの1日の使用制限(10000quota)を越えていたのが原因。
あとで確認したところ、1回の検索で100quota消費することが判明。1日100回しか検索できない。
アクセスのたびにYouTubeAPIを投げるとすぐに制限に達してしまうので、検索結果をキャッシュすることにした。

iPhoneでサイトを確認すると、ページ下部の「もっと見る」リンクを押すと、ホームバー(下の棒)が反応してしまう。
これは不便なので、SNSリンクを置いてフッターのマージンを広めにとって回避した。

機能追加


検索結果が固定なので(日検索以外)2日目にして飽きてしまった、、
年検索が1年前だけでなく、2年前、3年前とさかのぼって検索したい。
と思ったので、機能追加した。
たとえば、10年前(2010年)の弾いてみた動画を検索できる。なつかしい。
YouTubeの検索フィルタではこれができないので、これは便利。

最後に


そんなこんなで、製作&リリースから4日目にこの記事を書いています。
YouTubeAPIで何か作りたいなとは思っていましたが、思いつかず何年も過ぎ、、
実際に思いついてみると1日で完成してしまうので、アイデアが王様だなと思います。

YouTubeAPIの使い方がわかったので、ギター動画以外でも、料理動画や筋トレ動画などに転用もできそう。
(でもCOOKFLIX、MUSCLEFLIXだと響きがイマイチ、、)


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

サポートしていただいたお金はすべて創作活動に使います。本当にありがとうございます。

ラルクアンシエルと君が好き!
8
エンジニア×ギタリストの死神です。Web系開発をしつつ、DTM一人バンドをしています。夕張メロンが好きです。自作の公式サイト: https://lightwill.tokyo/