BLACK WIDOW

先日SL内事務所の”新聞ボード”をブログに変更という記事の中で、Picasaでスライドショーできるかもなぁ・・てなことを書いていたと思います。

アレ、実に簡単で、Picasaウェブから自分のアルバムを公開する際に、ちゃんとスライドショーのタグが生成されるようになっているので、つまりはソレをWEBページに貼り付け、プリム映し出せばOKです。

利点はなんといってもリンデンにL$払ってアップロードの必要がないということでしょうか。

さて、前回ちょこっとお知らせしましたが、MSが本格的に稼働させたシステム。このデモというか、この技術というか計算資源を思う存分利用したサイトをご紹介。お話はまずはその解説から行きましょう。

まずは必見ですが、ファイナル・ファンタジー特設サイトで公開してるヤツ。
http://www.ff13-2-ie9.com/?WT.srch=1#/tweet_catch


このサイトの大きな特徴は全てにおいて、Flashは使われていません。驚くことにHTMLの技術の最先端だけってこと。つまりは画像をタイムラインにのせて、画像を動かすのではなく、つまりはWEBページのタグとJavascriptのみで実現しているという驚きのサイトなんです。

全部、XAMLとHTML5とCSS3で表現。以下は全部サイトからの抜粋ですが、少なくともWEBを立ち上げた経験者なら、こんなことは今まで実現出来なかったことは判ると思います。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
大きさを変えながら画面上を動き回るモーグリは、SVG で描画しています。SVG は「Scalable Vector Graphics」の略で、XML で記述されているベクター グラフィックスのフォーマット。JPEG や PNG のようなビットマップと比較して、拡大・縮小しても画像が荒れないので、設計図や地図のような精細イメージの表現に向いています。SVG によるグラフィックス データの記述は g タグで行いますが、複数の g タグを用意し、これらを JavaScript の setTimeout 関数で次々に呼び出せば、このようなアニメーション表現が可能になります。スムーズな動きを実現するためのポイントは、あまり大きなデータにならないよう気をつけること。今回は「FINAL FANTASY XIII-2」本編用に作成された 3 次元モデルを、AutodeskMaya から SVG で書き出して、最適化した。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
JavaScript を使って図形を描くために用意された HTML の要素、それが Canvas です。「モーグリのツイート キャッチ」でも Canvas が多用されています。たとえば BingMaps の上を左右に行き来するレーダー、画面上を流れる雲、コンパス、レーダーと一緒に動くコンパスの針などは Canvas で描画しています。アニメーションは SVG で描画されたモーグリと同じように、各フレームの描画データを事前に用意し、それらを setTimeout で次々に処理することで実現しています。スピーディな描画のコツは、描画データを整数として記述すること。小数点付きのデータを使用すると処理が重くなります。なお、ツイートを投げた後に光のゲートをくぐり抜ける表現も、事前に JavaScript で極座標変換したデータを Canvas で描画することで実現しています。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
位置情報取得を許可して Twitter アカウントでログインすると、あなたが今いる場所に、背景の Bing Maps がズームインしていきます。この位置情報の取得は Geolocation という API で行っています。ユーザー端末の IP アドレスや Wi-Fi の情報から位置情報を取得できるため、GPS 機能がない端末でも、その端末がある場所を取得できます。GPS 機能を持つ端末で enableHighAccuracy パラメーターを true にしておけば、より精度の高いデータ取得も可能。処理は非同期で行われるので、呼び出し方は Ajax と同じスタイルです。注意したいのはデータの取得に 3～4 秒かかること。またデータ取得に失敗したケースに備え、タイムアウトも設定しておきましょう。ここでは 10 秒でタイムアウトさせています。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
左右に行き来するレーダーのグレー部分は、半透明の表現が使用されています。CSS3 では RGB に加え、透過率を指定できるアルファ チャンネルを rgba() で記述できます。モーグリに対するマウス イベントはモーグリの外形に合わせた形で設定されていますが、これは SVG タグに対する pointer-events の無効化と、SVG 内の path 要素に対する pointer-events の設定を、CSS3 に記述することで実現しています。さらにツイートが画面上で拡大する表現は、CSS3 で変形処理を定義する transform プロパティを活用。jQuery.animate() 関数と同じような処理を CSS 記述だけで行えます。ブラウザーの標準機能を使うため、jQuery より処理スピードが速いというメリットもあります。


javascriptというブラウザに特化した言語と、CSS３という最新のフォーマットとXAMLから呼び出される動的なパラメーターによって自由自在にユーザーはWEBを操作できる環境。

これが今のOSだとMSが鼻息を荒くする理由もよくわかります。つーかメインがプラットホームってのがミソ。

この場合、よく言われるプラットホームとは、サーバー、DBとかOSをひとまとめにした製品を指すことで、富士通とかがサーバーだけでなく様々なストレージ製品を独自にカスタマイズして顧客に提供するワークステーション、パッケージを指します。謂わば全部ね。

とにかく上記のサイトは色々探って欲しいのですが、当然フラッシュではありませんから、サイトのコードはブラウザから見ることができます。




タグの多くはスクリプトに関するものですが、その他MSが定義するXAMLなどが列挙されています。

これだけのスクリプトとデーターをXMLで呼び出すんだから、さぞかしサイト管理は大変だろうな・・とか思うでしょうが、サイトの立ち上げは大変かもしれませんが、実は管理はほとんど何もないってのがこのすごいところです。実はこのサイトを運営するにいたって、用意すんのはWEBページだけで、企業の中に情報や計算をするためのハードはないのです。無論開発のためにPCは必要ですが、計算資源は企業で用意する必要がないのが、アズールという”仕組み”なのです。

まー正直すごいと言うより、MSに何でもやらせてるわけですが。分散コンピューティングからここまで来るのか！って私は正直驚きました。クラウドというのは技術ではなく、あくまでも発想というかアイディアの名前のはずが、クラウド＞分散型というように大きく発展させたのは確かです。

ですが、正直この技術でリンデンがSLを運営するとしたらって考えますと、なんか将来が不安です。

その理由はまた次回。