その４：Curlの凄いところ！「表現力！アニメーションと２D、３Ｄ表現」

[hmino]

こんばんは！
マーケティングの三野です。
かえでちゃん、みたいに面白いことを書きたいところですが（笑）今回も張り切ってCurlについてお話させていただきます！

前回まではCurlの伸長圧縮技術「エラスティック」、「セキュリティモデル」について説明させてもらいましたが今回はCurlの凄いところの第三弾として表現力！ユーザーインタフェースのアニメーションと2D、３Ｄ表現についてお話させていただきます。


１．Curlでアニメーションやフィールを表現するには？


　Curlでアニメーションを表現するにグラフィックスとタイマーを使って表現します。
たとえば左から右へ移動するようなものを作る場合は移動開始地点の座標から移動終了地点までの座標を指定するようにします。
またサイズを変更するようなアニメーションも同じような考え方で実現できますね。
サイズを表す高さと幅をタイマーを使って時間軸の変化とともに数値変更してあげればいいわけです。

このタイマーを使ったアニメーションはたとえばオープンソースの「AdvancedUI」などに多く使われております。
たとえば簡単な例ですとCurl Rotatorなどがその応用です。




また、画面移動（画面遷移などともいいますが）などにもこのアニメーションは有効です。

たとえばまた、去年リリースしたCurlの業務システム向けUIコンポーネント群「Curl External Library（Curl EXT）」のTransitionframeではいろいろな画面切り替えを実現していますが、その中でアニメーションがやはり使用されています。

http://curlap.com/products/library/ux/ext/



２．ユーザーの操作にあわせてインタラクティブな表現をするには？

先ほどのタイマーと組み合わせて、ユーザーの操作（ポインタ操作など）と組み合わせるとさらにインタラクティブになります。
たとえばユーザーが操作するキーボードやポインタの位置によって、画像やコンテンツのサイズや位置、色などを変更する方法です。
先ほどご紹介した「Advanced UI」ではCurl FishEyeがその一例ですね。





ちょっと技術的な話になりますが、CurlにはWeb開発者にはなじみのない「イベント」というものがあり、種類も豊富にあります。

・PointerPress
・PointerEnter
・PointerLeave
・DragOver

などなどまだまだあります。

ここではあまりコードの書き方などについてはお話しませんが、ポイントとしてはタイマーとイベントを使うということです。
実装方法について興味があるかたはDeveloperCenterやヘルプを見てくださいね。



３．さらにダイナミックに！Curlの3D表現

CurlはFlashPlayerのように「アニメーションで３Dを表現する」のではなく、「本物の3Dアプリケーション」が実は作れてしまいます。
ここでいう「アニメーションで3D表現」というのはいわば「パラパラ漫画で3Dの様に見せる（見せてるだけ）」ということです。
しかし、Curlだと「本物の3D」で表現されるので、もちろんユーザーは3D空間のものをさわることもできますし、またアニメーションと
組み合わせることも可能です。

3Dを使用したエンタープライズシステムは実際のところあまり多くはありませんが、多い例はグラフなどでしょうか？
たとえばCurlでは画面遷移などでも使えるものを先ほどご紹介したCurlEXTのTransitionframeで提供しています。




また、デモアプリケーションとしては地球儀をアプリケーション上に見せて、世界の支社の営業データを表示させるなどのアイデアもあるかと思います。
前回のエラスティックのところで紹介したアプリケーションなんかがその１例です。




それ以外ではかなり前になりますが、GoogleのSketchUpと連動した「Curl 3D Gallary」が大きな事例ですね。

このアプリケーションは、Google SketchUpで作成された3DモデルをCurl上にロードし、その中をウォークスルーしたり、自分の好きな画像やCurlアプリケーション等を壁に貼り付けることができ、3D空間のギャラリーとして利用することができるようになってます。



このアプリはCurlAppsGallaryからダウンロードして試すことができますので、是非ダウンロードして見てみてください。

＜Curlアプリケーションギャラリー＞
http://developers.curlap.com/gallery/apps/96


あとはどのように表現するかは「あなた次第！」

ではまた。