April 2010 Archives

昨日書いたzoomonkeyを使って、プレゼンテーションの中身を作る作業に取りかかったのだけど、これがやはり茨の道になった。

まず、編集ソフトが無い以上、内容を何かしらの形でやっつけるしかない。最初のサンプルはgoogle docsからtomblooでキャプチャした画像を貼り付けただけだったので、とても簡単だった。しかしこれを全部のページについてやるわけにはいかない。後から内容を編集するたびにキャプチャするのは大変だからだ。

というわけで、テキストから機械的に変換できる方法を探し始めた。最初に思いついたのがSVG編集ソフトで編集したSVGをXAMLに変換するやり方だ。

• SVGをXAMLに変換するソフトはいくつかあるようだが、無償で使えるもので真っ先に見つかったのはcodeplexにあったsvg2xamlだった。というわけで最初はこれを試すことにした。
• OO.o ImpressにはプレゼンテーションをSVGで出力する機能がある。というわけでgoogle docsで作成したプレゼンテーションをPPTでダウンロードしてOO.oで開いてSVGで保存して、svg2xamlをかけてみたが、案の定うまくいかない。どうやらそもそもPPT->SVGの段階で失敗しているようだった。PPTなどをソースにするのは早々にあきらめた。
• inkscapeには何とXAMLをインポート/エクスポートする機能がある。というわけで早速SVGでプレゼンテーション内容を少し作成して変換を試してみたが、ノードが全部変換されず（多分最初に失敗したところで続行を放棄している）、おまけに数分後にアプリケーションエラーで落ちた（変換は即時に終了しているので、何らかの別プロセスが悪さをしているのだろう）。inkscapeでダメなら多分他はAdobe製品やMS Expressionなどを当たらないと無理だろう。

というわけで、ある程度探したものの、これは無理だということであきらめて、VWD2010 ExpressからついてくるSilverlightのGUIデザイナを使って書くことにした。これはこれで困難だったのだけど、それは別途書いたのでここでは繰り返さない。

これをmoonlightに持っていったら、案の定まともに表示してくれなかった。デフォルトフォントが日本語に対応していない。仕方がないのでIPAGothicを明示的に指定することにした（Silverlightアプリとしては好ましくないが）。あとはXAMLのTextBoxに改行入りテキストの問題くらいで、それなりにすんなり行ったと思う（もう覚えていない）。

そしてこれからが苦行になった。移動したいロケーションとzoom比率をactionとして定義するのだけど、これをきっちり機械的に処理できるようにしていなかったので、全て手探りで手入力することになった。40ポイント程度を定義するのに、全部で3時間以上かかった。

これは移動枠ごとにCanvasを定義して、そこから自動計算できるようにすると良いのだろう。あるいは、デザイナツールで、ロケーションの定義をマウスカーソルで選択できるようにするとか。前者は明らかにハッカー的な手法で、一般人は後者でないと使えないだろうが、いずれにせよ、それくらいのことが出来るようにならないと、これを使ってプレゼンテーションを作成するのは困難そうだ。

preziはそこまで含めて実現して公開しているのだからすばらしい。

moonlightチームに今出来ている資料を見せたらうけていたので、汎用化すれば使い物になるかもしれない。

ちなみに名前はもちろんzoomとmonkeyを掛け合わせているのだけど、最初の構想の時に考えていたdeep zoomはかけらも使っていない。CanvasにScaleTransformをかけているだけだ。まあズームしているとも言えなくはないので、このままでいいだろう。

前回言及したpreziもどきだけど、この前書いた通りの着想をもとに、つらつらと出来ることと出来ないことを考えた後（アニメーションをスプラインで表現するのは容易ではなさそうだ）、Silverlightのやり方を調べながら、昨日今日で基本的な機能を実装してみた。動くようになったので、コードはgithubに放り込んだ。 http://github.com/atsushieno/zoomonkey/

やっていることは、だいたい前回書いた感じなのだけど（ただしズームは実装していない）、基本的には、以下のようなjsonファイルを作って、 http://github.com/atsushieno/zoomonkey/blob/master/samples/zmdata.json

その中に画像の定義とクリックアクションを定義している。実際にはXAMLを読み込めるようにしたので、deep zoomのようなものを定義しなくても、拡大縮小などはXAMLのレベルでそれなりに対応できるのではないかと思う。

このツールに深入りしていると、肝心のプレゼンテーションが作れなくなるので、今はとりあえずこのくらいにしておこうと思う。

10日ばかり本業とかぶる部分でintensive hackingをやっていて、他に全然手が回っていなかった。結局10日かけても終わらなかったのだけど

思いつきメモ。

preziというプレゼンテーション作成ツールが一部で好評だ。確かにここのshowcaseのサンプルをみてみると、なかなかクールなものが多い。このサイトはflashで作られていて、ユーザは作成したプレゼンテーションをオンラインで公開する仕組みになっているようだ。プライベートなものを作ったり、大容量のものを作ろうとしたり、オフラインで実行できるようにしたいと思ったら、有料アカウントに移行しなければならなくなる。

面白いのだけど、サーバ上でしかプレゼンテーションを保存したり再生したりできないというのは不安だ。どうせなら自分の好きなように書いてローカルで実行できるようにしたい。同じようなものが作れないだろうか。

出来ると思う。

このツールがやっていることは、基本的には、一枚の（仮想的に）巨大な画像から、表示したい部分をクリッピングしてズームアップし、「進む」ボタンなどのインタラクションを受けて、次のクリッピング領域にスムーズにスクロールすることだけだ。回転もしてくれるので、矩形領域と角度が必要なのだろう。ズームの拡大縮小率はベジェ曲線みたいなものが想像できる。

というわけで、ひとつのプレゼンテーションは、たかだか以下のような情報だけで構成できると思う:

{"type: "presentation",  /* プレゼンテーション全体 */
 "imagemapset": [  /* 画像集合のセット */
    {"size": 1.0,  /* この画像集合のサイズ */
     "images": [ /* 画像集合リスト: それぞれが画像URLと画像表示位置をもつ */
      {"rect": [0,0,100,100],
       "image": "image1.png"},
      {"rect": [100,0,100,100],
       "image": "image2.png"}, ...
     ]},
    {"size": 0.5, "images": ...}, ...
  ],
 "actionset": [ /* アクションの集合 */
  /* 最初の表示は0,0,100,100から */
  {"x": 0, "y": 0, "zoom": 1.0, "rotate": 0},
  /* 200,100に移動して時計回りに-1.5radian回転して1.5倍に拡大表示 */
  {"x": 200, "y": 100, "zoom": 1.5, "rotate": -1.5},
  /* 150, 50から0.8倍で（同じ領域を）ズームアウトして表示 */
  {"x": 150, "y": 50, "zoom": 0.8, "rotate": 0},
  ...
 ] }

画像のコレクションはdeep zoom composerというMSのdeep zoomのデモツールで編集することができる。deep zoomはmoonlightでも動作するはずだ。

編集ツールも作成するとなると大変そうだが、仕組みさえ分かればデータは手入力できるという人には、シンプルなプレイヤーさえあればいい。

そんなわけで簡単に作れそうな気がするけど、今すぐには出来ないだろうな。

androidのビルドは、常にcleanを伴うので、とにかく遅い。これはどうにか改善したいところだ。というわけでビルドシステムを眺めて、とりあえずcleanしていると思しい部分を探してみた。おそらく子のパッチでいけるのではないかと思う。

http://gist.github.com/356533

これを適用して、以前にパッチを作ったlibmediaplayerserviceのソースにtouchして再ビルドをかけたら、すぐに完了した。もっともそれ以前にbootstrapするのに3時間以上かかったので、それ以上追及する気になれなかったのだけど...

そういえば以前投げたパッチは、投げた翌日にreviewedになったきり、全く適用されそうな気配が無い。まあゆっくり待つとしよう...