FavTubeをfuelphpとbootstrap3を使ってリニューアルしました。

  • このエントリーをはてなブックマークに追加
  • Pocket

新年明けましておめでとうございます。私だ。

1/5に FavTube をリニューアルしました。

お正月はいつもつまらんTVを見て、ごろごろして無為に時間を過ごしていたのだけれどいい加減いかんなこれ

と年末辺りから思っていた。大人だし。

正月休みを利用してサイトをリニューアルするかと計画して12月から色々と準備をしていた。

課題として

  1. phpフレームワークを使う
  2. cssフレームワークをbootstrap2からbootstrap3に更新する
  3. youtubeAPIのバージョン3を使う

この3つがあった。

課題1、phpフレームワークを使う

リニューアル前は、生でphpを書いていた。

ページも2ページしかないし、DBも使って無かったし一人で開発してるしわざわざフレームワークを使う意義も見いだせなかったから。

しかし、新しい機能案や計画している新サイトを構築して行くに当たりいい加減使うかと言う結論に。

前々から目を付けていた laravelfuelphp で迷ったがlaravelのインストールに手こずりめんどくさくなりfuelphpを採用した。ドキュメントと使っている人がまだfuelphpの方が多そうだったし。

このスライドを見るときっと興味が湧くと思う。とにかく学習コストも低く便利なフレームワークだ。

fuelに関してはまた別のエントリーで掘り下げて書いて見ようと思う。
ちなみに今年の初買いはfuelの技術本だ。

課題2、cssフレームワークをbootstrap2からbootstrap3に更新する

cssフレームワークは、twitter bootstrap を使っている。

フラットデザインになったbootstrap3に更新した。すっきりとした印象で気にいっている。

動画再生ページのデザインを大きく更新して、ごちゃごちゃとした印象が無くなったかなと思う。モバイルのトップページは特に見やすくなったんじゃないかな?

課題3、youtubeAPIのバージョン3を使う

今回のリニューアルでここが一番ミソであり、苦労した所かも知れない。

以前からの問題で、「歌ってみた」だの「弾いてみた」の動画が検索結果に混ざりこんでいて非常に鬱陶しかった。

なんとかしたかったのだが、以前のAPIのバージョンではキーワードを弾くオプションがあるものの正常な結果が取得出来なかった。

youtube API v3

前に作った時になんでv3使わなかったんだっけ?と思い返した。v3のドキュメントはまだ日本語化されていないので、検索するとv2のドキュメントに辿りつくようになっていたからだ。なんだよその罠。

使ってみるとsearch apiが前は国の指定が出来たのに今回は出来ない仕様になっていてここに本当に悩ませられた。

なぜかというと、例えば「Perfume」で検索すると日本のyoutubeの検索結果ではあの三人組の「Perfume」の楽曲が優先的に返されるのだが「Perfume」と言う言葉は英単語であり「香り」と言う意味を持つ。

これを音楽のカテゴリに限定した動画を取得しても、「Perfume」と言う曲名は無数にある為ブリトニースピアーズの「Perfume」と言う曲が一番最初に返されたりするのだ。

v2を使うと、国指定ができるので上記の様な事態は避けられるが歌ってみたが排除できない。

v3を使うと、国指定が出来ないが歌ってみたは排除できる。

悩んだが、アーティスト別に対応することでv3を選択した。検索キーワードが「Perfume」だったら、ブリトニーは弾くなど個別対応した。

終わりに

今回のリニューアルは、見た目のデザインの刷新もそうだがより質のいいプレイリストを提供できる様になったので満足の行く物となった。新機能として、開発中の物があるのだがそれはまたリリースしたらお知らせします。

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメント

  1. 名無し より:

    こんにちは。favtubeには多数の広告が貼られていますが、
    lastfmAPIは商用利用禁止じゃないですか?

    1. yutaka sato より:

      コメントありがとうございます。
      商用利用というのは、解釈が色々ありますがlastfmのapiから取得したデータを販売したら商用利用となりますがあくまでサイトに広告を貼っているだけでは個人利用と認識しています。
      そうでなければ、誰もapiを利用しないのではないでしょうか?

コメントを残す

*