このページの本文へ

エラーでブルブル!! JavaScriptでおもしろフォーム (2/5)

2008年12月01日 08時00分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

さまざまなエフェクト処理を実現する「Script.aculo.us」

Script.aculo.usのトップページ

[1] Script.aculo.usのトップページ

Script.aculo.us

[2] scriptaculous-js-1.8.1.zipのリンク文字をクリックします

Script.aculo.us

[3] ダウンロードしたファイルを解凍した後の状態。Prototype.jsライブラリとScript.aculo.usライブラリのeffects.jsを使います

 “震えるフォーム”のアニメーションを実現するのに、今回は「Script.aculo.us」というJavaScriptライブラリを使用します。Script.aculo.usは、前回も使用した「Prototype.js」上で動作するライブラリで、エフェクトとユーザーインターフェイス部分を扱うものです。Prototype.jsライブラリとScript.aculo.usはほとんどの場合セットで使われます。Script.aculo.usは機能別に複数のファイルで構成されており、必要な機能を持つファイルだけをセレクトして利用できるので便利です。

 Script.aculo.usはPrototype.jsライブラリが必要ですが、ダウンロードファイルにはprototype.jsファイルが同梱されています。まず、Script.aculo.usのページにアクセスしましょう。

http://script.aculo.us/


 2008年11月時点でのバージョンは1.8.1です。ダウンロードにはトップから「Downloads page」と書かれているリンクをクリックして、ダウンロードページに移動します [1]。次に、「scriptaculous-js-1.8.1.zip」のリンクをクリックしましょう。ダウンロードされるファイルはZIP形式ですのでダブルクリックして解凍します [2]

 解凍されたファイルの中からlibフォルダにある「Prototype.j」sライブラリとsrcフォルダにある「effects.js」をコピーして使います [3]。今回はjsフォルダ内にこの2つのファイルをコピーします。これで準備は完了です。作例サイトのスクリプトファイル、スタイルシートファイル、HTMLファイルの構成は以下のようになっています。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く