日経ソフトウエア 2006年 10月号 [雑誌] 日経BP出版センター 2006-08-24 売り上げランキング : 21094 Amazonで詳しく見る by G-Tools

昨日の記事にも書いたが、今、「Ajax」がとても面白い！応用範囲が広く、ビジュアル的にも面白い効果が得られるのがいい。最も気に入ったのが、縦長になってしまったコンテンツの折り畳みである。

以前、このブログのエントリーで「同一カテゴリーの最新記事」の導入でお世話になったGoodPic.comさんの記事を見て、面白いなと思ったのが、このAjaxを使うきっかけになった。GoogleMapsなどで、すでに使われている技術だが、使い出すと大変面白い。FLASHを使わずしてEffect効果を使えたり、記事の折り畳みができたり、画像をドラッグして順番を入れ替えることができたりと、応用が大変利くシステムである。その際には、JavaScriptを使用する。いま注目しているのが、「prototype.js」である。最新バージョンをダウンロードして、ブログにインクルードすると、いろいろな効果を使った表現ができる。

そのFLASHのような効果を得るには、prototype.jsライブラリと併用して「script.aculo.us」を使う。「effects.js」などを追加してインクルードする。このブログでは、今回は「Effect.toggle」という効果を使った。サンプルはこんな感じである。

クリックするとスライドします


ソースは以下のようになっている。

<a href="#" onclick="Effect.toggle('d1','slide'); return false;">クリックするとスライドします</a> <div id="d1" style="display:none;"><div style="background-color:#f3f3f3;width:300px;border:2px solid #000066;padding:10px;"> <p> うさぎ四姉妹は今日も元気。長女は久しぶりにお風呂に入りました。●でお尻がガビガビになっていたからです。かなり気持ちがよかったようで、すっきりした顔をしていた。次女は今日も牧草をバクバク食べていた。三女はまたもや早朝にトイレの蓋を外し、がたんと騒音をたて、妻に怒られていた。四女は今日も元気にマウント攻撃。もう毎日が嫌になる。相手をするのがしんどくなってきた・・・。 </p> </div></div>

この中の「onclick="Effect.toggle('d1','slide');」という部分を変えて工夫する。いくつもの部分に使う場合は、idを変えていく。id="d1","d2","d3","d4"・・・と変えていく。またスライドの仕方には三種類あり、「slideとBLINDとappear」がある。

script.aculo.usというサイトはなかなか面白く、多くのビジュアル・エフェクトを用意しているので、試してみるのも面白い。ちなみにサイドバーの「四姉妹の紹介」はここのサイトの「Ghostly Sortable Demo」を応用させてもらった。テキストを四姉妹の画像に入れ替えて使用した。

◆「Javascript（script.aculo.us）で、ブログをアニメーション・デザイン」
・・・G-Toolsでも有名なGoodPic.comさんの記事です。いろいろと参考になります。
◆「script.aculo.us - web 2.0 javascript」
・・・画面に動きを与えるビジュアル・エフェクトを導入しようという方におすすめです。
◆「prototype.js」
・・・「prototype.js」をtに入れたい方はこちらで入手できます。現在はversion (1.4.0) です。