カテゴリー: プログラミング

SimulPlay:トップ
　幸か不幸かこの月末は仕事があんまり入ってないので、久しぶりに週末プログラマー化してみました。
　例によってニッチ突きまくりの、マニアックなテーマです。遠くの友人と同期ビデオ視聴をする際の支援ツールです。離れたオフィスの仲間と電話で話しながらユーザテストのビデオ（動画ファイル）を分析したり、遠距離恋愛中の恋人と一緒に借りてきたDVDを観たりなんて時に、「せぇの！」で再生ボタンを押す手間を無くしてくれます。
　元々動画眼の機能として実装を考えてたんですが、Webベースでやれば簡単な気がしたので方針変更しました。夜中にhkondo氏とチャットしていて、時刻情報をテキスト化してメッセンジャーでやりとりすれば、通信機能を実装しなくて良いし、ファイアウォール越えの問題も考えなくていいよね、ってことになり、寝て起きて勢いで作ってみました。
　仕組みは単純で、招待主が「３分後にAというファイルを観る」という情報をサーバーに送信します。サーバーは「３分後」という情報を時刻に変換し、その時刻に再生開始するようタイマーをセットしたWindowsMediaPlayerコントロール入りのWebページを生成します。そして招待者はそのアドレスを一緒に観たい人にメールなりメッセンジャーなりで知らせます。招待された人はそのアドレスにアクセスし、同一ファイルの自マシン上でのパスを指定すると、やはり同時刻にタイマーセットしたWebページが表示されます。サーバーの時刻を元にしているので、お互いのマシンの時計がズレていても、ページを開くタイミングが同時でなくても問題無いという点がポイントです。
　動画データをやりとりするワケではないので、お互いが同じファイルやDVDを所持していることが必要です。WMPで視聴可能なストリーミング・コンテンツも利用可能です。
　もうすぐ3rdシーズンがリリースされる『２４』のようなリアルタイム性が高い作品の興奮を、遠くの友人と同期して味わえたら良いな、と思って作ってみました。
　現在は先頭からの再生開始にしか対応してませんが、実際は電話やトイレで中座した時とかに、同じ再生点から再開できてこそ価値がありますよね（かけ声方式では、一時停止も同時にしとかないと、「せぇの」では再開が出来ないので）。ビデオ分析作業なんかでも、「ちょっとこのシーンをもう一度観てみてよ」なんて時には、口頭でタイムインデックス値をやりとりなんてしてらんないですしね。
　その辺も早急に実装してきたいと思います。
P.S.
　視聴中のおしゃべりはSkypeがオススメですよ。各種メッセンジャーのボイスチャットとは音質が段違いです。

　某友人の最近の仕事を聞いてインスパイアされたんですが、WikiにWindowsやMacネイティブなフロントエンド・アプリがあったら良くないですか？
　専用アプリがなくても、ブラウザだけで読み書きできるのがWikiの良いところではあるんですが、やっぱり整形ルールとか敷居が高いと感じる人も少なくないワケで、せっかく情報共有ツールとしての素地の良さが、一部使えない人がいるってだけでオミットされちゃうのってもったいない気がします。
　ワープロ・ライクなWYSIWYG（死語？）ツールがあって、そこで編集すると、裏でWiki整形ルールのテキストを吐いてサーバーに送信してくれる、みたいな。整形ルールが書けるユーザだってその方が楽は楽ですよね？たまたまそういうツールが入ってないマシンからアクセスする時はブラウザ“でも”読み書きできます、っていう考え方です。大事なのは誰でも気軽にコンテンツを追加したり改変したりできるってことで、HTMLブラウザなんてしみったれたユーザ・インターフェイスに囚われる必要は全くないワケです。
　あっ、２ちゃんねると２ちゃんねるブラウザがあるように、PukiWikiあたりにはそろそろ登場しても良いですよね。
　ざっとググってみたんですが、とりあえず日本語では見つかりませんでした。Flashを使うというアプローチはあるみたい。MovableTypeみたいに、編集欄の外に「太字」ボタンみたいなのを置いてJavaScriptで選択部分を「”」で囲む、みたいな実装方法ならブラウザ上でもできますが、やっぱり理想はユーザから整形ルールが見えない（意識させない）形でしょうねぇ。
　どう？やってみない？＞最近VB.NET買って面白いテーマ探してる某友人

　出てるところでは散々既出でしょうけど、JavaScript小ネタをば。
　ラジオボタンは、デスクトップOSのGUIでもHTMLでも一般的な選択ウィジェットです。しかし、Webの上で使われるHTMLフォームのそれには、やや不便な点があります。それは文字ラベル部分をクリックして選択することができない点です。
　先日、とある制作業務の中でこの不満をなんとかしてやろうと思い立って、以下の方法を編み出した(?)でご紹介します。
　下の例を触ってみて下さい。一般的なINPUTタグの書き方だと、文字の部分をクリックしても何も起こりません。

　これに、以下のようにJavaScriptを書き加えると、

　すると、ほぅら、

Windows上のアプリと同じように、ラベルをクリックできるようになりました。クリック反応エリアが広がるので、ユーザが項目を選択するのがグンと楽になります。
　UL＆LIタグを使わない場合は、文字ラベル部分をSPANタグあたりで括って、そこに書けば良いでしょう。ポイントは、同一のnameがついているラジオボタンを、[0]、[1]のように呼び分ける点ですね。
　そういえば、最近いつのまにかGoogleが対応したみたいですね。ソース読んでないので、どういう方法で実装したのか不明ですが。きっとブラウザ汎用性とか研究しつくした上での実装だろうから、このやり方よりも洗練されてる予感。まぁ、実装方法はどうあれ、広まっていって欲しいですね。

“Webでもラジオボタンの文字ラベルをクリッカブルにしよう” の続きを読む

　ウチではスタッフ内部のやりとりにPukiWikiを使わせていただいています（一応公開Wikiスペースにも使ってますが、あまり活用されてない…）。そのコメント機能に、毎回名前を記入するのがメンドウでした。そこで、標準プラグインのcookieプラグインを試して見たんですが、Operaで文字化けしてしまいました。ウチでは再現してませんが、Safaliで書き込みできなくなったとの知らせも。このプラグインではJavaScriptを使ってcookieの読み書きをしてるようなんですが、どうもその再のURIエンコード処理に問題があるらしい。多くのブラウザはURIエンコードに関するJavaScriptの実装に欠陥や互換性の問題があるらしく、いまいち「これでOK」的な解決策がナサゲ。
　それでは、ということでPukiWikiのPHPコードを直接いじって自前でcookie対応してみました。以下、覚え書きです。超手抜きですが、とりあえずJavaScript使うよりはブラウザ依存度は低いかと。

■cookieを保存する

　メインのスクリプト（pukiwiki.phpだっけ？ウチではindex.htmlにリネームしてるので元のファイル名忘れました）の先頭に以下の緑の部分を追加。

　「30*86400」の30がcookieを保存する日数です。適宜変更して下さい。
　また、パス名、ドメイン名はPukiWikiの設置場所にあわせて指定して下さい。上記の例は「http://www.hoge.com/~fuga/」に設置した場合を示しています。このパス以下でPHPスクリプトが実行された場合のみcookieが読み込まれます。プロバイダなど同じサーバーに他人のコンテンツがあるような環境では特に注意しましょう。
　メイン・スクリプトでなくcommentプラグインに埋め込めば良いのかも知れませんが、PHPのリファレンスによると、HTTPレスポンスの先頭で指定しないといけないらいいので、一番冒頭に埋めてみました。コメント欄付きページからのsubmitの場合、つまり$name変数が空でない時にだけcookie保存が実行されるので、さして問題無いかと。
参考：PHPマニュアル：setcookieの項

■cookieを読み込む

　次にpluginフォルダにあるcomment.inc.phpをいじって、cookieから読み出した名前を名前欄に挿入する部分です。
　122行目あたりの行に以下の緑の部分を追加します。

　修正は以上です。標準のcookieプラグインは解除しておいて下さい。
　pcommentやarticleプラグインもおそらく同じような部分を書き換えればイケると思います。
　超手抜きですが、とりあえず動いています。問題などありましたらお知らせ下さい。
　いやぁ、毎度ながらオープンソースって素晴らしいですね。