FuelPHPとjQueryで最速更新猫サイト作ってみた
＊追記 11/14
Google Adsenseのポリシー違反の警告を受けたのでえろという言葉をすべて猫に変えました。**
＊追記 01/15
FireFoxで表示ができないというコメントをいただきましたので早急に対応します。ご指摘ありがとうございました。
最近、流行の技術で猫サイトをつくる人が多い（？）ということと、十年近く猫サイトの恩恵を受けてきたのだからそろそろ供給側に回ってもいいのでは？という想いから猫サイトを作ってみました。
（ここには猫な画像がありましたが自主規制しますm(..)m）
これはいままで僕がお世話になってきた”数えきれないほど”の猫サイトから最新の動画を収集して、その動画の直リンクを掲載するサイトです。今まで面倒な認証とか本文と中身の違う動画に愚息を消沈させられてきた方々には有用なサイトになっていると思います。
さて気になる動画総数ですが、これは今のところ毎時更新される動画の平均が1~2本で過去動画合わせて常に100本前後の動画が見られるようになっています。
標題にもある通り最速更新猫サイトというのは少し分かりにくいと思うのですが、Twitterのタイムラインを思い浮かべてもらえるとわかりやすいかと思います。Twitterのタイムラインは次々とツイートが流れていきますね。AVinterestも感覚としてはこれに似ていて、毎時トップページに違う動画があるイメージです。つまり最新の動画がいつも見られるメリットがある反面、一昨日に抜いたあのお気に入り動画が今日は見られないといったデメリットもあるということです。
しかしながら、数十年間猫サイトを利用してきた僕のポリシーとして、「猫動画は振り返らない」「猫動画は一期一会」というものがあります。「刹那的に涌いてきた性的欲求を決まりきった・定番化した動画で処理するのは逃げである」と、かの大先生が述べたかは知りませんが少なくとも僕は同じ動画を何度見たくないわけです。そういう個人的な嗜好から更新頻度の早い猫サイトにしました。
ここまではサイトポリシーの話でしたが次は
技術的なことをまとめます。
まず、主な技術構成は、
言語：PHP5.3、Javascript(jQuery1.8) フレームワーク：FuelPHP1.4 サーバー：Amazon EC2
このようになっています。
FuelPHP1.4について
FuelPHPとは、FuelPHP入門のはじめにから引用しますと
...CodeIgniterにも携わった開発者たちの手によるフルスクラッチの開発だけあって、CodeIgniterユーザが不満に思っていた点の多くが解消されています。PHP 5.2以前への対応を完全に切り捨てたことで、PHP 5.3の利点をフルに活用しており、もちろんCodeIgniterユーザだけではなく、これからフレームワークを使おうというプログラマの方にとっても、優れたフレームワークだと信じています。本書内でも触れていますが、特にHMVCへの対応やORMの採用、Fieldsetクラスによるフォームとモデルの緊密性の強化、コマンドラインツールによる開発高速化など、最新の思想に基づく機能が満載です。コミュニティでの開発も活発で、昨年(2011年)12月のV1.1 Final公開から半年も経たないうちに、V1.2 RC(Release Candidate)が公開されており、その一方で2.0に向けた開発も進行中です。...
と、要するにCodeIgniterをベースに各種イケてるフレームワークの良いとこどりをして作ろうぜっということでできたのがFuelPHPらしいです（適当）。
とはいえ、正直DBを全く使わないのでフルスタックなフレームワークは必要なかったのですが、ナウでヤングなペチパーはみんなFuelPHPを使っているらしいですしCLIでoil refineしてみたいということもあり、勉強もかねて挑戦してみました。実のところをいうと、バイト先でCodeIgniterを使っているのである程度導入しやすいというのが主な理由だったりしますが。
oil refineについて少し付け加えますと、インスコで標準で付属してくるrobots.phpが個人的につぼでした笑。とてもかっこいいし使える。
詳しくはこちらをご覧下さい。FuelPHPのTasks
AVinterestの仕組み
AVinterestの仕組みはとても単純で、
１、クライアントサイドでは、”静的ファイル”を呼び出し動画を表示させる
２、サーバーサイドではバッチ実行でクライアントサイドで実行する静的ファイルを生成する
の２つです。要はバッチをcronで定時実行させればすべてを自動化させられる仕組みです。単純。
ただ、全て自動化すると動画の質が下がるのでは？という批判がありそうですが、それについては冒頭でも述べたように「一期一会」が猫動画ライフのひとつの楽しみである以上少々質が劣るのも受け入れてなんぼだろうと。それが人生ってもんだろうと。
ただあまりにも酷い動画が多いとゴミ溜になってしまうので動画の収集先をこちら側で精選しました。良い動画を定期的に配信しているサイト等がありましたらご一報いただけると幸いです。
クラインアントサイドについて
まず上記１のクライアントサイドについてですが、AVinterestではスクロールしていくと次々に動画が表示されていきます。
これはjQueryを利用したajaxでファイル呼び出しをしているのですが、この際に呼び出すファイルが上記１の静的ファイルです。
静的ファイルには各動画のタイトル・URL・写真URL・更新日時のHTMLがまとめて記載されています。まとめ方は更新日時を参考に早い順にソートしています。
また、PinterestのようなUIとゾロゾロと動く各パネルのアニメーションを実現させているのは「jQuery Masonary」というjQueryプラグインです。この手のプラグインは多数ありますが、jQueryMasonaryを選んだのはアニメーションの付け方が簡単だからです。このプラグインとCSSのメディアクエリーを用いることでレスポンシブデザインを実現しています。まだ一部のタブレットではいまいちなレイアウトになってしまうのですが、それに関しては今後対応していくつもりです。
サーバーサイドについて
上記２については、主にバッチ実行により静的ファイルを生成してます。
バッチはFuelPHPのtasksにバッチファイルを作成し、oil refineコマンドをたたくことで実行させています。
名前空間の扱いに少々慣れないところがあり、各メソッドの呼び出しや外部ライブラリの呼び出しに戸惑いましたがこちらのFuelPHPまとめwikiを参照しながら進めました。
また今回は猫サイトが許可されているサーバーとしてEC2を利用しました。EC2なら他のレンサバなどと異なり、もしも急なアクセスがあったときにロードバランサを導入したりしやすいでしょう。まだ詳しい機能は把握できていないですがこれからアクセスの増加具合をみて対応していくつもりです。
また今回はDNSとしてAWSのRoute 53を利用しました。Route53とはアマゾンが提供するクラウドのDNSサービスです。アマゾンのクラウドサービスを使うのは今回がはじめてなのでどうせなら色々試したいと思いDNSもアマゾンにしてみました。詳しいドメイン設定等はこちらの記事を参考にしました。【AWS発表】 AWS Management ConsoleがAmazon Route 53をサポート
広告について
今回AVinterestをつくるにあたってアフリエイトにも挑戦しました。
当初は広告の全くないサイトを作ろうと意気込んでいましたが長期的にみるとある程度収益が上がらないと運営していくモチベーションが涌かないと思うのでここは勉強の意味も込めてアフリエイトにチャレンジしています。しかし、ただ稼いだとしても面白くないのでどこのアフリエイトを利用し、どのくらい稼げるのかを公表していこうと思います。
今はまだ準備中ですがWhat is AVinterest?に更新していくつもりなのでお待ちください。
広告に関しては今はまだ7割が手作業なのですがゆくゆくは自動生成できるようにするつもりです。
そのへんもまた別の機会にまとめようと思います。
今後について
今後は収集サイトの洗練、広告の自動化、広告による利益の分析、そしてそれらの開示をやっていこうとおもいます。
また、アクセスが集まってくると負荷対策も必要になると思うのでそのへんもまた随時対応していくつもりです。何はともあれこのサイトで猫動画との一期一会を経験していただければ幸いです。
