Entries

HATENA-TUBEの技術的な話

なんか予想より好意的に受け入れられてほっとした、HATENA-TUBEのテクニカルなお話。

みなさんHATENA-TUBEをajaxだと思ってますが、実は非同期通信なってまったくやってなかったりします。


サーバー言語
サーバーはPHP5で組んでます。
使ってるプロバイダは他にも Perl, ColdFusion,Rubyと選択肢が豊富だったのですが、PHP5。
なぜなら、ColdFusionはインストールして2時間、Perlは15分で挫折したからです。
コード書く前にどれだけ前提知識が必要なんだ!と問い詰めたい気分。PHP5は、Keitap先生がXMLのパースが楽と進めてくれたので採用。
ただ、シンタックスが「->」なのはキモくて困ります。

テンプレートエンジンにはSmartyというのを使いました。
使い方は本屋で、1万円使ってPHPの本3冊買って電車の中で覚えました。

データベース
sqlLiteを使うつもりが、SELECT文の書き方がわからなかったのでテキストファイル。
YOUTUBEのサムネイルも激重いので、こっちで一旦キャッシュしてます。

データの更新とか
定期更新ってクーロンって奴がないとダメらしいですね。
僕はDOS窓はdir/wとcdしかしらないので無理です。
で、30分ほど考えて思いつきましたよ!

RSSに偽装した更新用phpをrssフィードサービスに登録

すればいいんじゃないでしょうか?
こうすればレンタルサーバーでも、プログラムの定期実行ができるかと。
結局タイムアウトとか挙動がまだ不安定なので、ブラウザのrssにも登録したり手動で実行したりもしています。

クライアントサイド
余興でやるのにOOPもメンドイので、JSはprototype.jsではなくjQueryというライブラリを採用しました。
thickboxなんかで使われてるライブラリです。コーディングが楽しいステキなライブラリですデス。

元々thickboxだけでポップアップを作るつもりが、ActiveXがフェイドインしてくれないので、結局大幅に書き直して使用しています。

ajaxっぽい挙動
ブッチャケxmlhttpRequestはウンコ、というか「中途半端に非同期通信するぐらいなら、俺はページをフレームで区切るわ!!!」と日々豪語してるので、非同期通信は行っておりません。
Flashに甘やかされてる人間としては、JSのxmlHttpReqは辛すぎデス。

なので、ポップアップ~ビデオの挙動は全部DOMとinnerHTMLで行ってます。
というかクリックのタイミングでyoutubeのページにある埋め込みタグと同じものを、IDからjsでジェネレートしているだけです。自分的にはDOMとinnerHTMLとiframeあれば、xmlHttpRequestなんてイラネ。

サムネールのロールオーバー
「div背景画像」+「divの背景でサムネイル」+「aタグの背景に枠」って感じの3段重ねです。
ロールオーバーはa:hoverの背景がアニgifになるだけなので、jsは一切使ってません。ビバCSS。
アニgifのおかげでHTMLなのに結構Flashっぽくできました。本当は前景をアルファpngにしたかったんですが、IEが大変そうだったので挫折。

感想
こうやって列挙すると、なんかモノスゲェつくりしてますね。超我流wwwwwww
PHPなんて2年ぐらい前にLet’s PHP見ながら掲示板作って以来だから大変でした。

あと、デザインが中途半端にモッサリとダサくて、会社で虐められないかとドキドキしてたのですが、そもそも100%スルーされてショックでした。
元英国ニートとしては経験値の少なさを、これくらいのサイズの自主プロジェクトをポコポコやってカバーしたいdeath.