角丸でサイズ可変OKにできないの？

なんと、すでにそんなライブラリがありました。。あっさり解決！　orz

Lightview
http://www.nickstakenburg.com/projects/lightview/

冒頭の画面はこのライブラリを使ったものです。きれいに丸いです。
このライブラリはスライドショー機能もついていて、リサイズの動きもスムーズでなかなかかっこいいです。また角丸の丸さやエフェクトの設定といった細かいオプション設定ができるほか、画像表示だけでなくFlashや動画、iframeなどにも対応しており、見た目だけでなく機能も充実していてなかなかのライブラリです。

使用にはprototype.jsとScript.aculo.usが必要ですが、lightbox同様これらをheadで読み込み、サムネイル側のaタグにclassをつけるだけ、と導入は簡単です。

動きなど前回のサンプルと比較してみてください。

※Lightview版デモ

ソースはどうなってる？

さて、角丸を実現しているこのライブラリのソースはどのようになっているのでしょうか？

やや複雑ですが、ここでは必要な要素だけ図に表してみました。

• まず角丸レイヤー全体はulリストで構成されていて、上から上角丸エリア、写真エリア、下角丸エリアと3つのliでマークアップしています。
• 一番上と一番下のliにはそれぞれにdiv（div.lv_Liquid）を追加し、幅100%を設定します。
• さらに右寄せのulと左寄せのulをそれぞれfloatして配置し、中のliには幅50%を設定します。
• その中にそれぞれ右隅と左隅に角丸を配置しています。隣に白背景のdiv（lv_fill）を配置してつなげることで、角丸を表現しています。

右端と左端に角丸を置く、という方法はテーブルレイアウト時代の角丸のつくりかたを彷彿とさせますね。このjsから生成したタグははテーブルを使わずdivやulで構成されているものの、かなりの入れ子になってしまっていることは否めません。

とはいえ、画像サイズ可変を満たすならば、現状ではこのようなソースを使用するのが現実解なのかもしれません。

canvasタグとroundrect

さて、ちょっと横道ですが、ここで注目したいのは、このライブラリでは角丸にあたる箇所に画像ではなくcanvasタグというものが使用されていることです。

canvasとは？

canvasとは、ブラウザ上に図を描くために策定された仕様で、 Flashのようなプラグインを使わずに、JavaScriptベースで図を描くことができます。 ただし、Safari 2，Firefox 1.5，Opera 9でサポートしているものの、IEは対応していません。

canvasについてはここの記述がわかりやすいです。

Canvas - Canvasとは - HTML5.JP
http://www.html5.jp/canvas/what.html

canvasを使うと、ブラウザだけでこんなグラフも表現できてしまう。すごい何これ。

Canvasによる円グラフの例 - HTML5.JP
http://www.html5.jp/canvas/circlegraph_sample.html

Lightviewは、このcanvasを角丸の表現にうまく使っているわけですね。

IEではどうなの？

さて上記でcanvasはIE非対応、と書きました。ではIE用にはどう対応しているかというと、このライブラリではcanvasの代わりに、roundrectが描画されています。 roundrectとは、VMLのタグです。

VML とは Vector Markup Language の略で、Webページ上で線や円などのベクトル図形を表示するための言語です。IE5.0 以上でサポートされています。Netscape ではサポートされていません。
（...中略....）将来的には SVG に移行する予定です。
とほほのVML入門

と、すでに古い技術のようなのですが、いわばIE用のcanvasといっていいのでしょうか。IE限定対応と考えると、こういう枯れた？技術を使うというのも手なんですね。

下記をIEで見ると、描画されたroundrectを見ることができます。

とほほのVML入門
http://www.tohoho-web.com/wwwvml.htm#roundrect

直接HTMLからは外れてしまいましたが、ブラウザがこういった新しい技術をサポートしていけばいろいろ面白いことができそうですよね。せっかくなのでどこかで使ってみたいな、と思いました。

（上記URLで紹介されているように、IE6以上に対応したエミュレートライブラリを使えば実践的にもいろいろできそうです）

というわけで、角丸の試みは、対応ライブラリを使ってみる、という結論に？
次回、あとちょっとだけ続きます。