prezi

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でも動作するはずだ。

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

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