雑記

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

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

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」だったら、ブリトニーは弾くなど個別対応した。

終わりに

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

さくらのVPSで障害が起きて、データが吹っ飛んでから復旧した

かなり久々の更新になってしまいました。

前回の更新が4月なので、8ヶ月ぶり。ていうか、今年終わる。ヤバい。

この8ヶ月の間、色々ありました。

FavTube が月間10万PVを超えたり、ブログのテーマを変えたり、6kg程痩せたり、コンタクトにしたり、泥酔して色々失敗したり。

そんな年の瀬に事件発生ですよ奥さん。

経緯

ある日いつもの様に、FavTube にサイトをいいねの数増えてるかなーとアクセスしてみた所サイトに繋がらない。

apacheでも落ちたかな?とコンソールを立ち上げてみたものの、サーバー自体に繋がらない・・

焦る。焦りまくりすてぃ。

さくらに料金払い忘れたかな?と確認するも支払い済み。

そこに、gmail宛にさくらから障害情報のメールが届いた。

             さくらのVPS サービス 障害に関するご報告

さくらインターネット株式会社

平素よりさくらインターネットをご利用いただき、誠にありがとうございます。

発生日時 : 2013年11月26日22時50分~2013年11月27日03時40分

ご利用のVPSサーバの再起動を伴う障害が発生
しました。お客さまにはご迷惑をおかけし大変申し訳ございません。深くお詫
び申し上げます。

障害の詳細につきましては、以下の障害情報をご参照ください。

▼ メンテナンス・障害情報 さくらのVPS1Gプランの一部
http://support.sakura.ad.jp/mainte/mainteentry.php?id=11675

障害の解消後、弊社にてご利用のVPSサーバのOS起動を確認させていただいた
ところ、以下のメッセージが表示されておりました。

EXT4-fs error (device vda3): ext4_lookup: deleted inode referenced: 3801089
ログインプロンプト等を表示しておりませんので、VPSサーバのOS起動が正常に
完了していない可能性がございます。

お客さまにはご迷惑をおかけし、大変申し訳ございません。

VPSコントロールパネルの「リモートコンソール」機能にて、VPSサーバのコン
ソールを直接操作していただくことが可能です。
恐れ入りますが、お客さまにてVPSサーバの動作をご確認いただけますよう
お願いいたします。

▼ VPSコントロールパネル
https://secure.sakura.ad.jp/vpscontrol/

あっちゃー。障害に巻き込まれた。

と初めて気づく。

とは言え、コントロールパネルから再起動すりゃ直るっしょと高を括っていた。

ところが再起動をしても

EXT4-fs error (device vda3): ext4_lookup: deleted inode referenced: 3801089

リモートコンソールとVNCコンソールでこのエラーを吐き続け、入力キーを何も受け付けてくれなかった。

仕方無いので、さくらのサポートにメールするも返信が遅い。

ならばと、サポートセンター電話して対応をお願いするも5時間ほど放置される。

もう一回電話して、サービスが止まっていて困っている旨を伝えて急いでもらう。

んで、やっと返って来たメールがこれ

この度はご不便をお掛けしておりますこと、お詫び申し上げます。

確認いたしましたところ、ファイルシステムが破損しているようで
ございます。

fsckを実行する必要がございますが、お客様にて行なっていただくことは
可能でしょうか。

弊社にて代行させていただくことも可能でございます。

しかしながら、fsckの実行によりファイルが破損する可能性ごございますため
ご了承いただけるようでございましたら、お手数をお掛けいたしますが
本メールの返信にてご依頼いただけますでしょうか。

ご不明な点やご質問等ございましたら、本メール返信にてお問い合わせ
ください。

今後ともさくらインターネットをよろしくお願いいたします。

だから、コンソールからなにもキーを受け付けてくれないって言ってんだろがクソボゲが。

とは言いませんでしたが、fsckを依頼。

ちなみに、fsckというのはファイルシステムの修復をしろーって言うコマンド。

【 fsck 】 ファイル・システムの検査と修復を行う

というか、そもそも障害復旧できてねーじゃん。

勝手にメンテナンスして、障害起こしてろくに確認もしてない。この時点で怒り心頭でした。

でも、まあfsckして直るんならまあいいかと。

翌日まで連絡なかったので、自分でコンソールにアクセスして確認するとfsckコマンド打った形跡がある。

が・・結局ファイルシステムは破損したまま。fsckしたけど、復旧できませんでしたの連絡も無し。

見切りをつけ、OSの再インストールをしてWEBサーバーを再構築 → バックアップファイルをアップロードして復旧。

復旧への道のり

障害が起きたサーバーはさくらのVPSで、このwordpressのブログと FavTube が入っている。

まずは、OSの基本設定とWEBサーバの構築をした。

さくらのVPS を改めて使いはじめる

FavTube はローカルにあるファイルをアップロードすれば終わりなのでこれで復旧した。

とりあえず、一安心。

問題はこのwrodpressのブログだ。さくらVPSのサービスにはバックアップがない。

「さくらのVPS」でバックアップの機能はありますか

仕様なのは分かったけど、勝手にメンテンナンスする時くらい取っておけボケ。

また、腹たって来た。

しかし、以前入れた BackWpup と言うプラグインのおかげでdropboxにDBからファイルまで全てのバックアップが残っていた。

wordpressのプラグインBackWPupでエラーが出た場合

復元は以下を参考にした。

BackWPup – バックアップデータからの復元手順

phpMyadminをインストールしなければならなかったのが、ちょっと面倒だったが今後も使いそうなのでインストールした。

wrodpressを使っている人は、今すぐbackwpupのプラグインは必ず入れておいた方が良い。

一応、インストールと設定方法を置いておこう。

WORDPRESSのデータをバックアップをする「BACKWPUP」設定

データ復元後に、backwpupが正常に動作するかテストした所エラーを吐いた。

ERROR: Dropbox API: (403) Invalid signature.
ERROR: Job has ended with errors in  You must resolve the errors for correct execution.
上記はdropboxAPIのエラーで再認証を行うことで解決した。
WARNING: require(): Unable to allocate memory for pool
 上記は、phpのメモリ割り当てのエラーらしく
APCの設定ファイルのphpのメモリ割り当てを増やして解決できた。
正直自分にこういう障害が本当に当たるとは夢にも思わなかったが、バックアップをきちんとしておいたおかげで早急な復旧が実現できた。

自分の物だけならまだしも、請け負って作った物などだった場合いやーさくらがーなんて言った所で元には戻らない。

終わりに

さくら側に対して、補償はどうしてくれんの?的なぶち切れメールを送ったら以下の返信が来た。

ご連絡が遅くなりましたこと、お詫び申し上げます。

本件に関しましては、弊社にて復旧を試みましたが改善することが
出来ない状態でございました。

ご案内前にお客様にてOS再インストールを行なわれたとのこと、
お手数をお掛けすることとなり、申し訳ございませんでした。

なお、ご利用いただけなかった期間に関しましては、補償と
いたしましてサービスご利用期間を1ヵ月延長させていただきます。

ご不明な点やご質問等ございましたら、本メール返信にてお問い合わせ
ください。

今後ともさくらインターネットをよろしくお願いいたします。

それだけかよ。

それでも、俺はさくらのVPSをまた使っている。

正直対応の遅さと勝手に壊しといてシラネみたいな対応には、かなり腹が立ったがこの値段と帯域のスピードを考えると他に選択肢が無いからだ。

あと、めんどくさいから。

FavTubeと言うサイトをリリースして一ヶ月経ちました。

FavTube と言うアーティスト名を入れるとYouTubeの音楽を連続再生するサイトを先月リリースしました。

ちょうど一ヶ月経過したので、記事にしてみようかなと。

FavTubeを作ろうと思ったきっかけ

俺は仕事というかプログラミングしている時は、基本的に音楽を聞いている。

音楽を聴いていると集中力が途切れないのと、テンションがあがるとノリノリで書けるからだ。

元々、他の似たようなYoutubeの連続再生サイトを使っていたがシンプルで使いやすい物があまり見つからなかったのもあって、じゃあ作るかってことで余った時間を利用して、大体一週間くらいかけて作った。

前に作った 麺stagram は3時間くらいで作ったので俺にしては真面目に取り組んだ方なのだ。

2013/03/01 ~ 2013/03/31 のアクセス数

WS000037

UUが2478人、訪問数は6千人を超えている。

一ヶ月目にしては結構すごいんじゃないだろかと自分では思っている。ていうか、すげえ。ありがとうございます。

このブログなんて、もう半年近くやっているのに遠く及ばない。当たり前だが。

技術的な話

ここからは、どうやってFavtubeがアーティストの情報やYoutubeの動画を取得しているかを簡単に書く。

まず、アーティスト情報だが全て last fm と言うWEBサービスからAPIでデータを取得している。

Favtubeのトップページに羅列してあるアーティスト名はlast fmの日本国内で聴かれているアーティストのランキングを取得して表示してある。

キャッシュにデータを保存して、週に一回データを更新している。

再生ページのバイオグラフィーや、似ているアーティストもlast fm APIからだ。

バイオグラフィーが英語なのは、言語を指定するとなぜかデータが返って来なかった為英語のまま表示してある。

SEO的に、絶対にアーティスト情報は掲載したかったので英文のまま表示したという経緯だ。

wikipediaからなんとか情報を取れないか模索したのだが結論から言うと諦めた。

サードパーティーが提供している Simple API と言うサービスがあったのだが情報が確認した限りデータが6年前の物であったため使うのをやめた。

それとwikipediaはスクレイピングが禁止と言うことで、結局last fmしか情報を取得できなかった。

last fm API

次に動画の方だが、当然ながら YouTube DATA API を使って取得している。

ここで一つ重大なミスを犯してしまった。

何をどう調べたか覚えていないが、古いバージョンのAPIで作ってしまったのだ。

暇を見つけたらちゃんとバージョン2のAPIで作り直したい。

こだわりは検索結果を取得する時に日本人アーティストだったら、日本のyoutubeの検索結果から取得する様にした所。

検索精度は結構高いんじゃないかなーって思ってる。

YouTube DATA API

今後の展開

その内、最近使い始めた laravel と言うPHPフレームワークで作り直したいなーと思っている。

youtubeのAPIのバージョンも上げたいし、データベースを構築して楽曲リストを作れる様にしたいなーと思っているからだ。

他に考えていること

  • カバーや歌ってみたなどの動画を排除したい
  • PV、MV、ライブの動画のみを流せるようにしたい

FavTubeの目指す方向性は「シンプルで高精度な再生サイト」だ。

今後とも FavTube を宜しくお願いします。

スマートフォンからwordpressの記事の更新をしてみる。

わー、すごい。
Androidからも、記事更新できるのねん!

2012-12-13 13.51.02

Chromeブラウザから、投稿してます。
流石にやりづらいですが、なんとか出来るレベル。

せめて、Nexus7くらいだったらやりやすいんだろうな・・

blog始めました。

忘れっぽい性格なので、仕事で得たwebの知識や気づきを書き残したいと思います。

このサイトは さくらVPS + wordpress で構築しています。

wordpressの運用は初めてなので、使いながら覚えてノウハウ記事を書けたらいいなーとも思っています。

宜しくお願いします。