サーバー・ネットワーク環境 – ページ 31 – 道具眼日誌：古田-私的記録

HTTPベースの動画ライブラリ、実家から検証

2008年5月3日2008年5月3日 furuta コメントをする

少し前のエントリで実現して、TeraStation上のDivX動画ライブラリを、Apache経由で公開する実験ですが、実家から検証してみました。

結論から言ってラクショーでした。光->光なら問題ありませんね。今までのVPN+SMBであれこれ苦労してたのがおポンチでした。SMBは応答速度が低いと極端にパフォーマンスが落ちるプロトコルであることを最近知りました。

■ADSL + 無線LAN + PS3でも割とイケる

あと、妹のアパートに貸し出してあるPS3/40GB（たまに帰省した時に使う様に折半で購入）でも試しました。妹宅はADSLでしかもLANは11gの無線ですが、予想外に健闘。１ファイル最後まで完走させたワケじゃないですが、試した限りでは1280x720pのファイルでも大丈夫そうでした。ただ逆に720×400でも途切れまくるのもあったり。ウチは品質保持エンコだから、瞬間レートが跳ね上がるようなのはツライのかも知れません。ただ、PS3のブラウザからファイルを選んですぐ再生できるし、BASIC認証のパスワードもちゃんと保存できるので、この方式用のVOD端末としてはかなり重宝すると思います。これでレジューム再生ができればいうことないんですけどね。

■PC上からもストリーミング再生したい(1) Opera + VLC編

こうなってくると、PS3だけでなくPCブラウザ上からもストリーミング再生したくなります。で、色々試行錯誤した結果、Opera + VLCという方法を発見しました。VLCは「URLで開く」メニューがある動画プレーヤーのうちで、唯一マトモに再生できました。DivXデコーダーも内蔵しているので、ネットカフェなどで使うにも便利。パスワード保存はできませんが、BASIC認証には対応しています。

で、Operaの方でMIMEタイプがvideo/x-msvideoなストリームに対して、VLCを使うよう設定します。この時、唯一Operaだけが、URLのまま渡すことが可能なようで、IEやFireFoxだと、一度ローカルに保存してからVLCで開く、という動作にしかなりませんでした。

ともあれ、Opera + VLCで正しく設定すれば、Operaで一覧を表示して、目的の動画をクリックしたら自動でVLCが起動して（IDとパスワードを改めて入力しなきゃいけないけど）ストリーミング再生開始、という流れを実現できました。

ただ、VLCにはタイムスライダーがないので、途中を飛ばして観られないのが難点です。あと、(1)、(2)共通の問題ですが、2GBを超えるファイルは扱えないようです。まぁ、そんなサイズをストリーミングすんな、って話ですな。

■PC上からもストリーミング再生したい(2) DivX Web Player編

DivXのストリーミングといえば、普通にDivX Web Playerプラグインがあります。実は当然これも最初に試しました。Apache側で.aviの拡張子に対して、video/divxというMIMEタイプを定義しておけば、各ブラウザでDivX Web Playerが起動するようになります。ただ、これだけではダメなようで、当初断念して、(1)の方法に流れていました。

で、改めて調べたところ、DivX Web Playerによるストリーミング再生には、単にAタグによるリンクではなく、OBJECTタグによるページ上への埋め込みが必要なようでした。具体的には、

って感じ。DivX LABSのDivX Web Player Code Generatorでサンプルソースを生成してもらえます。動画の縦ピクセル数に20を足すのがポイントのようです（コントローラーの分）。DivX Web Player自体はBASIC認証ダイアログを持ってナサゲなので、パスの部分にユーザ名とパスワードを埋め込んでみました。

で、Aタグしか生成してくれないApacheのインデックスリストではダメだということがわかりました。ということは本来はフォルダ中のファイル名一覧を取得して、上記HTMLを個別生成するPHPスクリプトでも自作しなければ、ということになるんですが、そこまでは気力がわかなかったので、手抜き対処。具体的には、ファイルインデックス画面のフッター部分にHTMLを挿入するApacheのReadmeNameディレクティブを使って極簡単なPHPによるHTMLフォームをインクルードし、ブラウザ上で目的動画ファイルのリンクをコピペして再生ページに投げます。で、再生ページもやはりPHPで受け取った動画のURIを使って、上記のDivX Web Player用HTMLを生成するだけです。

画面例

~~動画のサイズも取得する術がないので、とりあえず手動で指定しています。~~まさに超手抜き(^^;)。

補足：ffmpeg-phpを使って、phpから動画ファイルのサイズを取得できました。

更に補足：フォームを使わずとも、JavaScriptを使って実現できました。＞URL書き換え

でもまぁ、自分と家族などごく身近な人間しか使わないのでこれでOK。基本はダウンロードかPS3利用推奨ってことで。

とりあえず、上記の手順でブラウザ上のストリーミング再生ができるようになりました。本来は.aviではなく.divxでないとダメっぽいですが、一応観れてます。DivX Web Player自体、タイムスライダーもあるし、どこまでDLできてるかバーでわかるし、ブラウザから切り離したり、全画面再生もできるしと、VLCよりは使い勝手が良いです。

ApacheからTeraStationのファイルを公開

2008年4月20日2008年4月20日 furuta コメントをする

前エントリでTeraStationにたまってるDivXファイルを、なんとかHTMLリンク一覧としてHTTP共有できると、DLNAとかより便利かも、ということに気付いたので、早速チャレンジしてみました。

■CIFSでマウントする

TeraStationをLinuxマシンでマウントするには、とりあえずSMB、FTP、ちょっとゴニョってNFSという選択肢があるわけですが、とりあえず手軽そうなSMBを試してみたところできない。調べてみると、CentOS5ではsmbfsやsmbmountの代わりにCIFSというあたらしいWindowsファイル共有プロトコルを使えば良いとわかりました。

mount -t cifs -o user=<ユーザ名>,password=<パスワード> //<TeraStation名/<共有名> /mnt/terastation/

って感じでOKでした。

あとは、このフォルダをApacheのドキュメントルート下に適当にシンボリックリンクして、BASIC認証をかけます。

ただ、これだけだと、リストは取得できるんですが、動画ファイルにアクセスするとエラーになってしまいます。ターミナルからcpなどでコピーはできるんですが、Apacheを経由するとダメ。

これは

EnableSendfile Off

で解決。パフォーマンス向上のための機能のようなので、当該ディレクトリのディレクティブ内に設定するのが良いでしょう。

■Apacheのインデックスリストをカスタマイズして利用

さて、これでアドレスでディレクトリ名を指定すれば、（そのフォルダにindex.htmlが無いので）Apacheが生成するインデックスリスト（ファイル一覧画面）が表示され、PS3からそれをクリックして再生できるのが確認できました。しかし２バイト文字が文字化けしています。ブラウザの設定でUTF-8にすれば正常に表示されるんですが、ページ遷移するたびにするのは面倒だし、それこそ実家向けには難しすぎます。なんとかインデックスリストの文字コードを指定する方法を模索して、

IndexOptions Charset=UTF-8

でいけることを突き止めました。これも当該ディレクトリ内だけで良いんでしょうけど、特に他で弊害もでなさそうだったので、グローバルに指定しておきました。これで、きちんと日本語ファイル名で表示でき、先の実験でダメだったPS3からの再生/DLもなぜか出来てしまいました。

ついでに、インデックスリストをカスタマイズするオプションを色々見つけたので、最終更新日付を非表示にする、.AVIファイルのdescriptionに「DivX/etc Video Files」と表示する、Thumb.dbを隠す、などカスタマイズ。外部スタイルシートも指定できました。

ざっとこんな感じ。

IndexOptions Charset=UTF-8
AddDescription "DivX/etc Video File" .avi

<Directory /xxxxx/xxxxx/video/>
Options FollowSymLinks Indexes IncludesNOEXEC
AllowOverride None
IndexOptions SuppressLastModified SuppressHTMLPreamble HTMLTable
IndexIgnore *.db *~
IndexStyleSheet "video_list.css"
EnableSendfile Off
</Directory>

PS3でDivXのプログレッシブダウンロード

2008年4月20日2008年4月20日 furuta コメントをする

PS3はファームウェア2.0から動画ファイルをダウンロードしながら再生する「プログレッシブダウンロード」に対応しました。基本的に、PlayStationStoreのMPEG4ファイル用と思ってたんですが、ふと思い立ってDivXなAVIファイルで実験。

できました！

適当なHTMLにリンク書いておけば、内蔵ブラウザでリンクを選択するだけで再生が始まります（PlayStationStoreのように再生するかどうかのボタンは出ない）。ローカルに保存することも可能。ただし、２バイト文字のファイル名はダメっぽいです。

PS3/40GBを購入した実家向けに、手軽に動画を見せる／渡す方法として地味に重宝しそうな予感。適当なポータル作っておいて、今度帰省した時にブックマーク登録してこよっと。

ウチのDivXファイル群はTeraStation上に保存してあるので、FTPかSMBでサーバーからマウントして、適当な半角英数ファイル名を生成するゲートウェイスクリプトを書いたら、帰省中の動画消化にも良いんじゃないかとか。

Yahoo! JAPANのOpenIDはMT4では使えない？

2008年2月4日2008年2月4日 furuta 1件のコメント

　MovableType4化でコメント認証がOpenIDに対応したはず、ということで、早速先日対応したYahoo! JAPANでIDを取得して動作確認してみたもののダメ。

　どうもYahoo!のOpenIDがセキュリティレベルの高いOpenID 2.0にしか対応していないせいっぽい。PlaceEngineのサイトでもYahoo!のOpenIDははじかれるみたいだし、現状では（日本のサイトでは特に）あまり使い道なさそうですね。

　MovableTypeのOpenIDモジュールを差し替えるワザもあるっぽいけど、そもそもOpenID使いが日本ではまだあんまりいなさそうなので、まだいっか、という気も。

　といあえず、↓のサインインボタンを押した時のデフォルトがOpenIDではなくTypeKeyにする方法はないものか。

MovableType3→4移行時のツボ～その2. コメントフォーム編

2008年2月3日2008年2月3日 furuta 1件のコメント

　前回に続いて、MT3→MT4のテンプレート更新の覚え書きです。今回は、コメントフォーム部分。ウチではフォームのテキスト欄が表示されず、見出しだけになる現象が発生しました。

　コメントに関係しそうなのは、テンプレートモジュールでは、「コメント」、「コメント入力フォーム」、「コメント詳細」。システムテンプレートでは「コメントプレビュー」、「コメント完了」の計５点のようです。MT3時代に作成したブログでは、テンプレートモジュールは３点とも存在せず、システムテンプレートはアリ、という状態でした。

　ついでにトラックバックもほぼ同様の作業なので一緒に処理してしまいます。

■テンプレートモジュールを作成

　この３点は「エントリ・アーカイブ」（MT4では「ブログ記事」）でインクルードされるモジュールです。「コメント」が他の２点をインクルードするようです。おそらくフォームが正しく表示されないのはこの部分の影響でしょう。元々この部分はたいしていじっていなかったはずなので、新モジュールをそっくり使ってしまいます。トラックバック関係は「トラックバック」のみのようです。

　計４点、新規に作っておいたテスト用のブログからコピペで作成します。

■新コメントモジュール利用する設定

　MTデフォルトではコメント欄は個別の「エントリー・アーカイブ」で使われているだけだと思うので、そこだけ修正すれば良いはず。「アーカイブ・テンプレート」→「エントリー・アーカイブ」テンプレート（名称は作成時期で多少違うと思います。MT2の頃だと英語だったり）を開き、コメントは、<MTIfCommentsAcrive>～</MTIfCommentsAcrive>、トラックバックは、<MTIfPingAcrive>～<MTIfPingAcrive>の部分をそれぞれ下記のように置き換えて下さい。

<$MTInclude module=”トラックバック”$>
<$MTInclude module=”コメント”$>

　更に、<body>タグに以下の属性を追加します。前回の検索フォーム対策をしてある場合は、「ヘッダー」テンプレートの中にあると思います。また、元々class属性がある場合は、残して置いた方が良いかも知れません。でないとスタイルシートが正しく適用されなくなります。

<body class=”<MTIf name=”body_class”><$MTGetVar name=”body_class”$> </MTIf><$MTGetVar name=”page_layout” default=”layout-wtt”$>”<MTIf name=”body_onload”> onload=”<$MTGetVar name=”body_onload”$>”</MTIf>>

　コメント、トラックバック部分がモジュールに追い出せたので、直接コードを書いてあった元のテンプレートに比べると、かなりスッキリしますね。もともと細かくいじる部分ではないので合理的です。

■JavaScriptテンプレートを作成

　さて、これで試しに適当なエントリを再構築してみると、無事コメント欄が正しく表示されるようになると思います。ただし、TypeKeyなどの認証サービスを利用するリンクが表示されません。これはJavaScriptファイルであるmt.jsが存在しないためのようです。

　「インデックステンプレート」を開くと、古いmt-site.jsというファイルに紐付いた「JavaScript」テンプレートがあるので、削除するなりして無効化し、やはりこれも新ブログからコピペします。「テンプレートの種類」は「JavaScript(javascript)」を選び、ファイル名は元あったmt-site.jsなど、現在のヘッダ部分で記述しているままを指定します。

（そういえば、この「テンプレートの種類」という項目、他のインデックステンプレートでも再設定しておく方が無難かも知れません。）

　以上で、コメント欄は正しく表示、動作するようになったはずです。MT4では最初、コメント欄は隠れており、「サインイン」か「匿名でコメント」というリンクをクリックするとそれに応じた動作をする、という仕様のようです。

■システムテンプレートの更新

　さて後は、「確認」ボタンを押した時のプレビュー画面を定義する「コメントプレビュー」（旧名は「Comment Preview Template」）と、コメント送信後の完了画面を定義する「コメント完了」の２点のシステムテンプレートを、やはり新ブログからコピペします。前者は旧名のテンプレートをクリックして中身を書き換えたら名称も自動的に更新されました。

　以上で、ブログの外観はほとんど変わらず、コメント周りが正しく機能するようになると思います。動作チェックの後、残りの個別エントリを全て再構築して作業完了です。