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

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だと響きがイマイチ、、)


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

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

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