Hatena::ブログ(Diary)

saiten@blog このページをアンテナに追加 RSSフィード

2010-07-24

[][]radiko + twitteriPhoneアプリ「radikker」をリリースしました

f:id:saiten:20100724110025p:image

radikker

超今更アプリ。無料です。

radikoを視聴しながら、放送局に関連するつぶやきを見たり、つぶやけるアプリです。イメージとしてはらじったーのアプリ版といいますか。名前も似てますし。

f:id:saiten:20100724110027p:image

すでにradikoの公式アプリが存在し、なおかつiOS4マルチタスク対応によってradikoを聞きながらtwitterを見ることなど容易に行えるため、現在ではこのアプリの存在意義がほとんどありません。ただ開発当初は公式も無かったし、バックグラウンド再生もできなかったから需要があると思ったんですよ。開発遅れるとすべてが水泡に帰す良い例です。

とはいえ今回の公開にあたって、iOS4のバックグラウンド再生対応をはじめ、それなりに使えるものにはなっていると思うので、数あるradikoアプリの中の1つとして試しに使ってみていただけたら幸いです。

なお、radikkerはgithubでソース公開してます。

GitHub - saiten/radikker: radiko + twitter for iPhone

2010-06-22

[][]iCab mobile用NicoHTML5

f:id:saiten:20100623025717p:image:left:w200

いつの間にかiPadsafariニコニコ動画の動画ページを見ると、アプリの方にリダイレクトされるようになってました。これ自体はUserAgentで判別しているだけなので、iCab mobileのUserAgentを変更すればNicoHTML5自体は問題なく利用できるようです。ただiCabを使うのであれば、bookmarkletでいちいち動画URLをコピーペーストするよりはモジュール化した方が何かとスマートです。

NicoHTML5自体はすでにiCab用のモジュールに対応させたモノはあるんですが、モジュールの中にNicoHTML5のコードも入ってるため、最近やった修正がまだ反映されてない模様。

そういうわけで、NicoHTML5自体をiCabのモジュールに対応させてみました。やってることは先のモジュールと同じで、クロスドメイン通信可能なgetRequestを用いているだけですが、NicoHTML5の本体とモジュールとで分離してるので、モジュール自体は更新しなくても修正をすぐ反映できます。

モジュールは、iCab mobileを使って以下のページにアクセスし、iCab Moduleのリンクをタップすればインストールできます。

NicoHTML5

一応、現状でiPadでそれなりにコメント表示できるようにはなってるかと思います(少なくとも速度的不満は無くなってきたかと)。いい加減、コメント非表示機能位は付けたいところ。気が向いたときにしかやらないのでいつになるか分かりませんが。(^^;

2010-04-26

[][]NicoHTML5をiPadで試す

結論から言うと今のとこ、コメントを載せての再生は無理です。

まず、対応してると思われる動画でbookmarklet実行しても動画が読み込まれない。タイミングの問題かなーとアレコレタイミングを変えても原因がよく分からないので、とりあえず動画のリロードボタンを付けることで回避。h.264な動画についてはとりあえず見られるようにはなった。

で、肝心のコメントなんですがこれがどーにも上手くいかない。CanvasのfillTextが使えないことは分かってたので、CSSで再現する方法を中心にアレコレ試したんですが、どーもvideoに対して上手いことオーバーラップできない。z-indexがうまく効かない。たまーにちゃんとオーバーラップできる事もあるんですが、それじゃあねぇ。

とりあえず、現状はニコニコの一部の動画がiPadで(横にコメント表示付きで)再生できるよって程度の状態です。一応報告まで。

javascript:(function(){NicoHTML5_OverlayType="dom";var e=document.createElement("script");e.src="http://labs.isidesystem.net/nicoh5/nicohtml5.js";document.body.appendChild(e);})();

2010-02-25

[][]ニコニコ動画をHTML5で見るbookmarklet


性懲りも無くニコニコネタです。

iPadでも結局Flashが搭載されなかったこともあって、最近Flashの代替手段としてHTML5がやけに押されているので、ものは試しでニコニコ動画のFlashプレイヤーをHTML5で構成したプレイヤーに置き換えるbookmarkletを作ってみました。iPhone/iPadのvideoタグの動作がマシになってれば、iPhone/iPad上でも動くかもってな期待込みで。

使い方は、下記のbookmarkletをニコニコ動画の再生ページ(http;//www.nicovideo.jp/watch/*)上で実行するだけです。実行すると標準のFlash製プレイヤーを、HTML5+javascriptで構成したプレイヤーに置き換えます。

javascript:(function(){var e=document.createElement("script");e.src="http://labs.isidesystem.net/nicoh5/nicohtml5.js";document.body.appendChild(e);})();

動作条件として、アップロードされた動画がh.264の形式であることが条件です。また、ブラウザについてもh.264をvideoタグでサポートしている必要があります。こちらの環境ではmacのsafari4とchrome5、Windows XPのchrome4で動作を確認しています。

f:id:saiten:20100225232106p:image

f:id:saiten:20100225232107p:image

上が本家のFlash版プレイヤーで下が今回作成したHTML5版のプレイヤーです。mpeg4でアップロードされている動画は大体再生できるんですが、これまで再生できたのに再生できなくなる事もあって、結構不安定。コメントの再現性もあまり良くないですが、動画の方はFlashに比べれば結構滑らかに動きます。初代macbook air+safariだと、Flash版ではカクカクだった画像の動画が、HTML5ならヌルヌル動くあたり、ジョブスが「Flashビデオは遅い」と言ってしまうのもまぁ、わかります。(もちろん本家プレイヤが機能豊富すぎるというのもありますが)HTML5版プレイヤーの上下にニコ割枠とコメント入力欄がありますが、これはただの飾りですので機能しません。(^^;

動画URLの取得やNGリストの取得はXMLHttpRequestで行っていますが、コメントサーバは別ドメイン(msg.nicovideo.jp)となるため、今回はJSONPで取得できるよう、GAE上にコメントプロクシを作成し中継しています。動画情報を取得する際に得られるthread_idというパラメタを渡しますが、セキュリティ上は特に問題ないと思います・・・(自信なし)。

また、デフォルトではコメントはcanvasを用いて描画していますが、ついでにdivタグでコメントを再現するバージョンも作りました。このバージョンのbookmarkletは以下になります。(速度的にあまりメリットはありません)

javascript:(function(){NicoHTML5_OverlayType="dom";var e=document.createElement("script");e.src="http://labs.isidesystem.net/nicoh5/nicohtml5.js";document.body.appendChild(e);})();

とりあえず、卒論と卒論発表が終わった勢いで作ってしまいましたが、ドワンゴ内でもHTML5製プレイヤーを作っている様(http://twitter.com/kawango/status/8668680800)なのでそちらに期待。

一応、今回作成したソースコードは、コメントプロクシ含め、github上に置いておきます。

2010/5/17 追記

ニコニコ動画の動画取得用のAPIが、www.nicovideo.jpからflapi.nicovideo.jpにリダイレクトされるようになったため、Ajaxを用いた動画取得が出来なくなった模様です。

これといった解決策も思い当たらないので、今のところ当ブックマークレットは利用できません。ご了承ください。

2010/5/28 追記

とりあえず再生までに2手間ほど増やすという(ユーザが動画URL文字列コピー&ペースト)超暫定的措置でとりあえずAPI変更に対応。こんな面倒くさいことしなくても済むようにするには、flapi.nicovideo.jpがXHR2に対応してくれるとか期待するしかないかなー、と。(本家のHTML5対応が一番なんですが)

あと、iPadではiCab Mobileを利用してAPI対応させたモジュールを開発してくれた方がいるようです。iCab Mobileを持っている人はこちらを使った方が幾分か簡単です。

http://www37.atwiki.jp/icabmobilemodule/pages/20.html

2007-12-15

[][]ニコニコ動画をソフトバンク携帯で見られるようにしてみた

2008/10/21
サービスとして公開しました。→id:saiten:20081020:1224522031

ニコニコ動画モバイルという携帯からニコニコ動画を閲覧できるサービスがあるんですが、携帯3キャリアのうち、なぜかソフトバンクだけは今年の4月開始時から未だに対応していません。

私的には1日1回ランキングを一通りチェックする程度には利用しているので、これを通学の時間帯に行えたらなぁ、と思ってたんですが、なかなかそんな話が出てこない。RC2開始時には対応するだろうと思ってたんですがモバイル関連の発表すらなかったですし。

そういうわけで学園祭が終わってひと段落が着いていたのと、バイト先のネタ作りも兼ねて自分でニコニコ動画モバイルのソフトバンク版を作ってみることにしました。百聞は一見にしかず。とりあえず動画を作ってみたので見てみてください。

D

参考までに一応他のキャリアで見た場合の動画もいくつか挙げておきます。

D

D

Docomoのハイスピード対応端末には敵わないまでも、他と比較してもそこそこ動いているんじゃないかなぁと思います。音切れはすんげぇですが(・∀・;)ただまぁ、ランキングをさっとチェックして、気になったのを改めて後で家で見るという位の使い方はできそうです。

仕組み

開発するに際して、大いに役立ったのがこのニコニコ動画モバイルのプレゼン資料です。というかこの資料見るまでは、どうやって作るか全く検討も付いてませんでした。

本家ニコニコ動画モバイルは、対象の動画を予めjpegと着うた形式のADPCMに細かく分割しておいています。クライアントからリクエストがあったときに、そのjpegとADPCM、そしてコメントをサーバ側で全てDocomoが1度に送受信できる150KBのパケットに詰め込んで、クライアントに送信しています。パケット内にはほかに、このタイミングで画像を更新しろとか音声を流せとかのシーケンスデータも入っていて(これをサーバ側で微調整することで機種ごとの差異を吸収している)、端末側はそれを再生するだけの仕様になっています。この仕様のおかげで通信速度が遅い機種では画像の枚数を調整したり、音声の出力タイミングが遅い機種では音を鳴らせるタイミングを調整したりといったことが、サーバ側でパケットを調整するだけで済み、新しい機種などにも早く対応できると言うわけです。

今回私が作ったモノ(とりあえずニコニコバンクとしておきます)も基本的な構成は同じで、まずニコニコバンク側で設置してあるサーバがクライアントからの要求を受け、その動画を所持していない場合、ニコニコ動画にログインして対象の動画のflvを取得します。取得したflvはffmpegを利用してjpegと普通のpcmファイルに変換します。

本来であれば、ここで音声はYAMAHA ADPCMにすべきなんですが、ffmpegの作成するYAMAHA ADPCMはwavだとヘッダがおかしくて再生できないので、現在はノーマルのpcmになっています。(mmfに変換したりとかもしたけどmmfだと同時に1ファイルしかオープンできない)

そして、この分割したファイルを本家同様、1度に送受信できるギリギリのサイズのパケットに詰め込みます。ただ実はSoftbankの場合、application/javaというMIMEにすると1MBまで送受信できるようで、さすがに1MBだとバッファの問題などもあるので現在は200KBのパケットを生成して送信する様にしています。

ニコニコバンクでは本家より少し単純なパケット構成になっており、シーケンスデータを入れずに、1秒間区切りで画像と音声、コメントが入っているだけです。端末間での差異の調整等が面倒になりますが、まぁ今のところは私しか使ってないので良しとします。

クライアント側では受け取ったパケットを解析して、タイミングよく表示しているだけです。コメントの表示はかなり四苦八苦しましたが、たまーに職人の技がちゃんと表示されたりするので(大方画面サイズの都合でずれるんですが)、そこそこ良い出来になっているんじゃないかなと思います。


構成

以下のような感じ。

  • 変換サーバ兼再生サーバ
    • SC440+xen+centos5
    • 動画変換&再生&ランキング&その他動画情報取得プログラム
      • 全部perl
      • FFmpeg::Command
      • Web::Scraper
      • その他いろいろ
  • 再生クライアント
    • ブラウザから起動する部分以外はMIDP2 + MMAPI
    • そいうわけでwillcomも使えるかも。(速度が厳しいが)

そのうち公開したいところですが、サーバ側で利用するアカウントが私のものなので、利用規約に反する場合、難しいかも。