その２：Curlの凄いところ！「エラスティック（Elastics）」とCaedeへの適用

[hmino]

こんにちは。
マーケティングの三野です。

前回はCurlの歴史や各プロダクトの概要を説明させてもらいましたが、今回はCurlの凄いところの第一弾として「エラスティック」についてお話させていただきます。


Curlのエラスティックって？


デスクトップアプリケーションやブラウザアプリを作った人であれば経験していると思いますが、アプリケーションを作る上でまず、前提となってくるのが、「ディスプレイサイズ」があるかと思います。
多くのシステムではある特定のディスプレイサイズを想定し、固定比率の画面サイズでアプリケーションを開発してきたかと思います。
しかし、Webブラウザになった途端にユーザーはディスプレイのサイズを自由に変更するようになりました。またディスプレイ自体のサイズも様々なサイズが使われるようになってきました。
そうなると固定サイズでアプリケーションを提供すること自体に価値は全くありません。

そこでCurlですが、Curlには「エラスティック（Elastic）」というレイアウトシステムを持っております。このエラスティックは米国で特許を取得しております。


このエラスティックはディスプレイやウィンドウサイズに柔軟に伸長圧縮し、また、内部のグラフィカルなオブジェクトも親のグラフィカルオブジェクトのサイズに追随して伸長圧縮するという技術です。
中々言葉ではわからないと思いますので下図を見てください。


伸長した場合


圧縮した場合



どうですか？このようにサイズ変更に対し、自動的にレイアウト変更を行い、伸長圧縮することができます。
この実装は非常に簡単です。
基本的には何もする必要はありません。サイズを決定するwidthやheightの設定に何も設定しないか、もしくは｛make-elastic｝プロシージャやadd-stretchプロシージャを設定しておくだけです。
ちなみにmake-elasticプロシージャには比率を設定するためのオプションなどさまざまあります。
詳しくはCurlドキュメントをご覧ください。

エラスティックとページレイアウト
http://developers.curlap.com/curl/docs/r...ayout.html




Caedeによるモバイルの場合はどうなるの？


さて、今度はモバイルのお話に入ります。
モバイルのディスプレイサイズっていくつですか？Android？iphone？タブレット?はたまたXperiia？Galaxy？・・・・うーん、サイズって決められないですよね。しかもモバイルでは縦に使ったり横に使ったりしますよね。
ということで、PCならまだユーザーは我慢できたとしても、モバイルでは端末が違うとレイアウトが崩れるなんてことは絶対に許されないと思います。

そこでCaedeですが、ベータではまだ装備されていませんが、もちろん、エラスティックは適用されますよ！！

以下は今開発中のCaede0.8.1での変換後のテストサンプルですが、こんな感じになっています。





どうでしょうか？
ちょっとわかりづらいですが、下のボタンはさておき（無視していただいて）、上のボックスは見事に伸長／圧縮しているでしょ！
ちなみに、コードの書き方もＲＩＡの場合とまったく同じですよ！



ということでRIAでイニシアチブを取ってきたCurlの機能ですが、モバイルアプリケーションではさらにこのエラスティックシステムが開発者およびユーザーに対しても威力を発揮するはずです！

皆さまもう少しお待ちくださいませ！


では！