年末しばらく日記書いてなかった。作業が捗ったり休みだったりすると書くタイミングがなくてなー。
年末はMac mini買ってみたり、ファミ箏演奏会聴きにいったり、コミケ2・3日目に行ってみたり、ピアキャス飲みに行ってみたりしたあと帰省した。 年始は帰省してて、4日朝に戻ってきてからは軽く部屋を片付けたりして作業配信して寝た。
RTMP視聴を作ってたんだけど、さっそく試してみた人からFlash Playerで視聴ができんと報告があった。ありがたい。
Flash Media Serverなんかのサンプルで試してみたりしたけど確かに動かないなぁ。どうもconnectコマンドのあとにplayコマンド投げられず何か待ってるようにも見えるけど……？ さっぱりわからないのでパケットキャプチャしてFlash Media Serverとの違いを探してみるもそう違う点は見当たらない。なんだこれー、と、よくよくバイナリを見てると、AMF3コマンドのIDで来てるメッセージの中身がAMF0にしか見えない。でもID的にはAMF3とされてるものだし、AMF0のIDは別にあってそれはそれで使われてるんだけどなー。
rtmpdumpではどう処理してるのか見てみると、AMF3コマンドのIDが来た時には普通にAMF0で処理してるぽい。ていうかAMF3用のコード入ってなくないかこれ？ Red5ではどうなってるか調べると、やっぱりAMF0で処理してる。ただし一部のオブジェクトはAMF3のフォーマットで来る場合があるからそれの対応をする的なことが書かれてるわ。よくそんなの調べたなすげーよ。
仕様書にはしっかりAMF3のエンコードでオブジェクトが入ってきますって書いてあるんだけど、これ完全に嘘ってことですね。 元々RTMPの仕様書はあちこちよくわからんし記述も足りてないと思っていたが、まさか嘘まで書いてあるとはな。 Adobeは嘘書いた仕様書を出してきやがるのかおそろしい。
そこを修正してAMF3なんてなかったことにしてみたら上手くplayコマンドを送ってきてくれるようになった。やったー！ が、しかし。まだ再生はされないのであった。 プレイヤー側からはとくに返事がないけれどもそれは正しい動作だし、サーバ側からは動画データを垂れ流してはいるんだけれども、実際再生されていないのでなんともかんとも。
データの中身を見たりいじったりしてみたけど再生されなくてよくわからんなぁというあたりで一旦終わり。さてこれ以上はどうやって調べたものか……。VLCやrtmpdumpだと普通に再生/受信できてるから、よりにもよってソースがないFlash Playerだけの問題。これは困ったもんだ……。
帰省してもピアキャス見たかったんだが、YPブラウザがない。
先日UPnPでのポート開けを追加したおかげでポート開けがめんどくさい問題は解決しており、帰省してもピアキャスを見るのに障害はなくなったんだが、俺のWindowsタブレットにはYPブラウザが入ってないのでYPを直接ブラウザで見なくちゃいけない。 少なくともSPとTPは見ときたいしできれば芝もあるんで各YPをブラウザで見るのはだいぶめんどくさいんだよね。 まあWindows用のYPブラウザなんかいくらもあるので入れればいいんだけど、せっかくなので作ることにした。せっかくなので？！
家ではOSXのYPC使ってるけどタブレットから見たい時もあってお気に入りとか共有したいし、以前PeerCastStationを入れた人にどこにYPのチャンネル一覧表示されるのー？と聞かれたことがあるんで。PeerCast本体の置き換えだからそういうのはないんですよーとは言ったものの、確かにそれあった方がわかりやすいよね。 あとずっとYPブラウザにお気に入りのタグ付け機能が欲しいと思いもあった。 そんなわけでYPブラウザをHTMLで作り始めるわけですが。 あとでGUI版は作らないの？って言われたんだけど、俺が欲しいのがHTML版なのでそれ出来てから検討します。
index.txtの取得自体はPeerCastStation本体側(というかC#)でやる。あとからべつにJavaScript側でもできると気付いたけど、まあ。GUIと共用とかするかもしれんし。 設定されたindex.txtのアドレスから読み取って、パースまでしたらJSONにぶちこんでクライアントに返すだけ。簡単。
クライアント側が大変だ。それ以降の作業は全部クライアント側だからな。まあリレーしてるチャンネル一覧が既に作ってあったので、それをコピっていじっていくだけで出来た。つか、リレーしてるチャンネル一覧の方が断然大変だった。思ったより簡単だな。
表示方法は俺が使いやすいように適当に調整して最低限はすぐ完成。3～4時間程度でできたんじゃないだろうか。YPブラウザは簡単なのでみんな作るべき。 これでピアキャスが無事見れるようにはなったんだが、思ったより簡単に出来て楽しかったので引き続きいろいろいじってしまおう。
普通にテーブルで表示していたんだが、長い文字列が折り返されて表示されたり、列幅がやたらと大きくなったりとサイズが上手く調整できない。長い文字列は上手い感じに切ってくれて、省略されてる場合はポインティングするとTooltipで表示されるとかがいいかなぁ。 CSSのoverflowとtext-overflowとかで長い文字列を省略できるのかと思ったが、幅が大きくなるだけで省略されてくれない。どうもテーブルのサイズはいくら固定値で指定しても大きくなってしまうようだ。HTMLむずい。 CSS Grid Layoutが使えればWPFのGridみたいにすっごい便利なんだけど、これ今IEでしか実装されてないんだよなぁ。しかしflex layoutというのを使えば最近のブラウザでは実装されてて、行内で固定値の残りの部分を比率で分割といったGrid程ではないがそこそこ強力なレイアウトが組めるらしい。試しに使ってみるとあっさり動いたし、いい感じに使えた。テキストの省略もできるようになって満足だ。ポイントした時にツールチップを出すのは探したらサンプルコードが見つかったのでコピペった。
テーブルをクリックした列でソートするのに何かいいコンポーネントがないか探してみたんだけど、ピンとくる物がない。 結局のところテーブルヘッダのクリックを検出して、ViewModelでチャンネル一覧を返す時に指定の列で自前でソートしてやるようにしただけで上手くいった。 KnockoutJSは便利すぎる。これ無いと生きていけないよ。
検索も簡単にできるかなーと、検索ボックスに文字列をつっこまれたら、やっぱりViewModelでチャンネル一覧を返す時にソート前にフィルタするようにした。 正規表現にしてマッチするチャンネルを返すだけ。重いかと思ったけど、全然そんなこともなく、インクリメンタル検索でさくさく動いてくれた。 KnockoutJSでDOMをがしがし操作してるはずなんだが意外と速いんだな。
チャンネル毎に再生以外の操作ができるように、再生ボタンの隣にドロップダウンメニューをつけようとしたんだけど、どうも上手く動かず。ドロップダウンメニュー自体が行のボックスにクリップされて表示されなくなっていた。これどうしようかと調べると、メニュー自体をボックスの外に出して、自前で上手い感じに位置を調整するとなんとかできるけど、それ以外では無理、的な話だったので諦めた。
チャンネル毎の操作は行毎にボタン表示するつもりだったが、場所的にもきついので、チャンネル選択したうえでツールバーのボタンで操作することにしよう。 ツールバーを作るのにCSSでサイズが上手く設定できずに苦労したが、開発ツールでサイズや場所に関係しそうなところを探ってなんとか解決。HTMLのレイアウトは難しすぎて頭おかしいでしょう。 スクロールした時にツールバーがスクロールアウトすると困るのでついてきて欲しい。bootstrapのAffixってのを使えばいいんだろうとやってみると簡単についてくるようになるが、何故かページのてっぺんじゃなくてちょっと下に表示されてしまう。なんだかわからんのでbootstrapのドキュメントページのソースを見ると、affixクラスがついてる時にtopを0にするようになってた。あのー、その辺ちゃんとドキュメントに明記してくださいよー。 テーブルのヘッダもAffixでくっつけられるのかと試してみたら、thead部分だけ切り離してくっつけるのが普通に動いた。すげえこんな不思議な表示が出来るのか。
選択はtrのクリックイベントが思いがけず普通に取れたので簡単にできた。再生するのに選択してページ上部の再生ボタン押すのめんどいよなーと思ったらdblclickイベントも何事もなくとれたので、ダブルクリックで再生できるようにした。イベントはだいぶ想像通りの動きをしてくれるんだな。レイアウトの摩訶不思議さからは考えられん。
あとは画面をちょこちょこと整えてそれっぽくしたところで時間切れ。あとお気に入りとフィルタ、タグ付けとその表示をなんとかすればだいたい満足できそうだな。 画面のレイアウトがめんどくさいだけで作ること自体は難しくないでしょう。
スマホでも使えるようにして欲しいって言われて、それはもっともな話だけど俺スマホ持ってない1のでどうすればいいかよくわからん。画面が狭くなると大変ということはわかるが……。あと再生をどうすればいいのかがよくわからん。まあなんにせよまずPCで使えるようになってからの話だな。
いやー、しかしYPブラウザは作るの難しくないわりに作ってて楽しい2のでみんなも作るといいよ！俺に要望出すことないから自分で作るといいよ！