« 各ブラウザ CSS 仕様の覚書 | トップページ | Intel Mac対応の ATOK 2006 »

2006-05-23

scriptaculous.js 関連 2題

今日は、prototype.js(クロスブラウザで Ajax をサポートする JavaScript フレームワーク)を利用して、さまざまイフェクトを提供する Script.aculo.us こと scriptaculous.js から。Ruby on Rails にも同梱されている、今をときめく JavaScript ライブラリなので、ご存知の方も多いのでは?

  1. scriptaculous.js のカンペ - Scriptaculous Cheat Sheet
  2. 画像に反射効果を出すリフレクタ効果 - script.aculo.us Reflector

scriptaculous.js のカンペ

scriptaculous.js でイフェクトを設定するための基本的な書式(basic syntax)をまとめた PDF 形式のカンペ(cheet sheet)が Slash7 の Amy Hoy によって公開されているようです。まだ scriptaculous.js に馴染んでない方、これから使い始める方は必見です。(中身は英語ですけど、下手な日本語マニュアルよりもよほどわかりやすいです。)すでに有志によるミラーが何カ所かで立てられているようですが、ここでは本家である slash7 へのリンクを張っておきます。

ちなみに Ruby on Rails のカンペも ILoveJackDaniels.com で公開されています。というか、こちらの方がカンペでは有名なサイトですね。CSS, HTML 文字参照, PHP, JavaScript, MySQL など、さまざまなカンペが PDF や PNG画像形式で公開されています。

画像に反射効果を出すリフレクタ効果

最近の Mac OS X を連想させるような反射効果(リフレクタ イフェクト)を scriptaculous.js を利用して比較的容易に出せる方法が、script.aculo.us の姉妹サイトの mir.aculo.us で紹介されています。同種のイフェクトを出す JavaScript ライブラリとして、Reflection.js というのもあるようですが、こちらは現時点(v1.5)で、Intel Mac + Mac OS X 10.4 + Firefox (1.5.0.3 ?) で動作させると、ブラウザが落ちてしまいます。(配布元サイトのコメントでも報告されていますが、手元の Mac Mini でも再現しています。)クロスブラウザ対応では、オープンソース コミュニティがバックについてる scriptaculous の方が上手だったということでしょうね。(^ ^;) <img /> 要素に class="reflect" を挿入するだけ良いので、設置が手軽な上、構造(HTML)と表現(JavaScript — 欲をいえば表現は CSS で実現できるのが理想)の分離もできているので、惜しいといえば惜しいです。

|

« 各ブラウザ CSS 仕様の覚書 | トップページ | Intel Mac対応の ATOK 2006 »

[Web]Ajax・DHTML」カテゴリの記事

コメント

いずれも反射効果を出すために大量の div タグを生成させるようですね。見栄えのためにパフォーマンスや安定性を犠牲にするのは考え物ですし、利用する場合はそのあたりを一考する必要がありそうです。

投稿: ゆう | 2006-05-23 15:00

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/1904876

この記事へのトラックバック一覧です: scriptaculous.js 関連 2題:

« 各ブラウザ CSS 仕様の覚書 | トップページ | Intel Mac対応の ATOK 2006 »