jQuery.popeye 2.0.4 のバグ

昨日の記事でも触れた、jQuery.popeyeのバグについて書いておく。

いつ、どういう不具合が起こるのか先に述べよう。jQuery.popeyeはWebページ中でインラインで画像をオーバレイ表示できるJavascriptライブラリで、jQueryをベースにしている。動作はデモページを見てもらうと一目瞭然だと思う。不具合は、画像を拡大表示したとき、あるいは画像を拡大表示した状態でスライドショーを前後に移動させたときに、存在しないURLへのHTTP GETが2回発生する、というものである。

バグはpreloadNeighbours()関数にあった。以下にパッチを示す。

--- jquery.popeye-2.0.4.js.orig	2010-06-14 22:39:42.000000000 +0900
+++ jquery.popeye-2.0.4.js	2011-03-31 15:35:26.000000000 +0900
@@ -384,7 +384,7 @@
                     } else {
                         neighbour = 0;
                     }
-                    preloaderNext.src = a[i].href[neighbour];
+                    preloaderNext.src = a[neighbour].href;
                     
                     // previous image
                     neighbour = i;
@@ -393,7 +393,7 @@
                     } else {
                         neighbour--;
                     }
-                    preloaderPrev.src = a[i].href[neighbour];
+                    preloaderPrev.src = a[neighbour].href;
                 }
                 
                 

配列aには、拡大したときに表示される画像へのリンク（a要素）が順次格納されている、と考えてもらって良い。a[i]が現在拡大表示されている画像（を表すa要素）である。jQuery.popeyeでは、現在拡大表示されている画像の前後の画像についてあらかじめHTTP GETを行って、ブラウザのキャッシュを利用して画像の表示を高速化するという処理を行っているように見える。

で、このバグである。a[i].hrefって、現在表示されている画像のURLであるので、a[i].href[neighbour]とは、URL（文字列）中の一文字を指してしまう。当然、配列aの添字を変更してあげないといけない。

まあ、404 Not FoundなHTTP GETリクエストが発生するだけだから、サーバのログでも見てないと気がつかないかもしれない、とも思うのだが、もし学生のプログラムだったら「もっとプログラムを勉強しなはれ!」と一蹴するレベルのバグだよなあ、これ。

ちなみに、jQuery.popeyeには難読化されたソースコードも含まれているので、パッチをあてる際には注意。ええ、両方読み込むようなHTMLを書いていたので、はまりました^^;

日本データベース学会の研究動画配信新システム

今年に入ってから、日本データベース学会（以下DBSJ）が会員限定サービスとして行っている研究動画配信システムの新バージョンの実装を続けていた。先日、このシステムがめでたく公開と相成った。せっかくなので、経緯等について書き記しておこうと思う。

DBSJの研究動画配信サービス自体は、2003年に始まっている。当初から主に、3月に行われるデータベース関連の研究ワークショップ（DEWS:データ工学ワークショップ、DEIM:データ工学と情報マネジメントに関するフォーラム）を対象とし、その研究発表を、リコーのMPMeisterというソフトでWebコンテンツ化したものを配信する、というスタイルをとっていた。（MPMeisterにリンクを貼ろうと思ったが、かねて聞いていた通り、3月末で生産終了となっていたので、リンクは張らないでおく。）しかし、対象発表件数の増大に伴い、コンテンツ作成の手間がひじょうにかかるようになり、諸方面で協議の結果、今年のDEIM2011から、動画のみの配信にして手間を軽減しようということになった。この方針転換により、今年度の動画公開は、サイト運用側、つまり私に、従来より負荷がかかるものとなった。

実のところ、当初はコンテンツの構成が変わるだけで、それほど手間は増えないと考えていたし、そういう公開方法も選択肢としてあり得たと思っている。しかし、いろいろ思案しているうち、システムの全面構築し直しという方向に傾いていった。

システム設計にあたり、次のような点を重視した。

• 閲覧環境を極力限定しない。Windows, Mac, Linuxのいずれでも、また使用ブラウザがなんであっても閲覧できること。ファイアウォールの中からでも問題なく閲覧できること。iPhoneやiPad、Android端末などからでも閲覧できれば、通勤通学のちょっとした時間で見ることができたりするので、より望ましい。
• バッチ処理による動画エンコーディングが可能なこと。事前の情報から、発表件数が300件に届くことが分かっていた。つまり動画を300本処理しないといけないわけで、バッチ処理前提の動画エンコーディング処理手順を構築しておかないと、やってられない。
• AVCHD形式の動画をエンコードできること。後で分かってきたことだが、AVCHD形式の動画は、特にMacで処理するには何かと不便なことが多い。
• ちゃんとしたWebアプリケーションフレームワークを使う。今後、学会のシステムを大きく改修することも念頭にあるので、それを見越しての判断である。機能面、普及度、個人の趣味^^;により、Rails 3を採用した。

試作を繰り返しているうちに、動画部分はHTML5のvideo要素によるマークアップに落ち着いていった。当初はFlash videoを考えていたのだが、手持ちのソフトでswfのバッチ処理をする方法がわからず（Adobe Flash CS4 + Adobe Media Encoder CS4で swf + flv/f4v 形式のFlash videoをバッチ生成する方法ってあるんでしょうか…）、この方法は断念した。結局、Dive into HTML5の動画に関する記事に基づき、Ogg Theora, H.264, VP8という3種類の動画をバッチ生成し、Flashも含めてvideo要素のfallbackでマークアップするという方法を採用した。ただし、Flashの組み込み方はこの記事のままではなく、Adobe Developer Connectionのチュートリアルにもあるswfobjectのスタティックパブリッシングを採用した。上のスクリーンショットでは、講演資料をハンドアウト風にスライドショーで見られるようにしているが、ここはjQuery.popeyeを利用している。

また、動画エンコードの方法も元記事から少し改良している。改良点は:

1. ffmpeg2theoraの最新版(0.27)では、2パスエンコーディングができるみたいなので、採用した。
2. HandBrakeの最新版(0.9.5)では、エンコードのプリセットがいくつか追加された。プライベートで使っている経験から、iPhone 3GS/iPhone 4/iPadでも再生可能なプリセットとしては "AppleTV" が一番よさそうと思っているので、これを採用した。

結果、300本×3 = 900本の動画のエンコーディングを行うこととなったが、この目的のためにLinux PCを2台新規に投入した結果、4日ほどですべてのエンコードが終了している。

先に書いたとおり、システム全体はRails 3で実装を行った。本格的にRailsを触るのは初めてで、Agile Web Development with Rails の 4th edition を読みながらのコーディング作業だったが、セッション管理による認証もAjaxも使って、その割に実装期間1ヶ月強というのは、我ながらまあまあ早かったように思う。Railsサマサマである。

今のところRailsのcachingも全然使っておらず、Apacheのチューニングも全然やっていないので、性能面がすごく心配だったのだが、チュートリアル講演3本を公開してからのログを見る限り、それほどアクセスの殺到もないようで、少し安心している（アクセスが少ないというのは、それはそれで、うーん、とも思うのだが）。ログを見ている限り、目論見通りiPadでアクセスされている方もいらっしゃるようで、こういうところは嬉しい。

以下、雑感である。

• Railsすばらしい。
• 英語が読めるかどうかで、Railsの開発効率はぜんぜん違うような。githubのプラグインの説明もほとんど英語だし、疑問が出てきた時にググルと、的確な解決策が海外のブログやstackoverflowなどに出てることが多い。
• パフォーマンスは今後の課題。今のところ、Rails経由で動画を送り出すのは遅いと考えて、Apache経由で送り出している。本来はRails経由で（つまりセッション管理の元で）送り出したいのだけど。
• ブラウザのプラグインにはいろいろ苦しめられた。特に動画関係。勝手にsource要素をembed要素に置き換えてしまうヤツとか、入れてるだけでVP8動画のスムーズな再生が出来なくなるヤツとか（しかもFirefox 3では問題が出ず、Firefox 4になった途端悪さをするとか…一時、Firefox 4を完全に疑ってました）。
• jQuery.popeyeにバグが…しかもかなり orz なバグ。開発元にはコメントしてみたんだけど、バグフィックスしてくれるかなあ。これは別記事で書こうと思ってます。
• Androidはワケわかりません。ちゃんとテスト機（NECのLifetouch note）まで用意したのに、再生できるはずのH.264が再生できない…基本的に資料が少ないし、何を基準にして実装すればいいのか見当がつかず…今回のシステムリリースでは対応を見送らざるを得なかった。