ゼロからAJAX(1)～scriptaculous

この記事は半年以上前の情報なので、古い可能性があります

ゼロからAJAX(1)～scriptaculous

2007年12月31日 投稿者：ハセガワ

AJAXを試してみる。とりあえずscriptaculous

ブックマークする：

AJAXの中でも有名なライブラリの一つ、scriptaculous（なんと読むのか知りません。スクリプトアキュラス、かスクリプト・アクロ・アスかな？）を使って、自分のwebサイトにちょっとした味付けを加えてみます。

1.ダウンロード/インストール

まずファイルをhttp://script.aculo.us/からダウンロードします。

赤枠部分「get it already!」の「Downloads Page Getting Started」をクリック
※赤枠は私がつけたものです。

続いて「current version（現在のバージョン)」の赤枠部分をクリックするとDLします。
DLした圧縮ファイル(現在はscriptaculous-js-1.8.0.zip)をWクリックして解凍します。
「scriptaculous-js-1.8.0」というフォルダが出来ます。中身は↓な感じ。

s315
赤枠部分の2つのフォルダを、webサーバの自分のスペースへuploadします。
どのディレクトリにuploadしてもokですが、
・index.html
　└─/scriptaculous
　　　　　└─/lib
　　　　　└─/src

みたいに、ディレクトリを作ってそこにuploadしてあげると後々わかりやすいと思います。
※scriptaculousってディレクトリ名は長いので、通常「JS」とか、そんな短い名前にします。

s316
ffftpでupしたところ。

uploadが完了したら、これでインストールは終了です。

2.スルスルっと開閉するボタンを作ってみよう。

ブログなどでよく見かける、「続きを読む」をクリックすると、スルスルっとアニメーションして続きの文章が表示される、あれを組み込んでみます。

【I.htmlページを用意する】
既存のページで構いません。今回はTOPページである、index.htmlに組み込んでみます。
s317

【II.組み込みには<head>部分にscriptacuousファイルへのリンクを貼る】

いつも自分が使っているhtmlエディタでindex.htmlを開き、
一番上の方にある<head>～</head>の中にscriptaculousファイルへのリンクを書きます。

※src="/scriptaclulous～の部分は、自分の環境に合わせて変えてください。
これで、index.htmlへアクセスした時に、scriptaculousファイルが読み込まれるようになりました。

【III.続けて初期設定を書く】

さっきのに続けて、動作させるための初期設定を書きます。

これで、初期設定は終わりです。
英語見ると？？？となってしまう人には難しく感じられるかもしれませんが、とりあえずコピペで。

【IV.使用したい場所にタグを書き加える】

後は、【続きを見る】部分と、＜今は見えないけど、【続きを見る】を押すとスルスル出てくる場所＞を書けばできあがりです。
htmlサンプルとしてはこんな感じ。

<a href="javascript:slideTxt()">【続きを見る】</a><br />
<div id="test" style="display:none; width:350px; height:300px; background-color:#ccc;">
<div>続きがスルスルっと表示されます</div>
</div>

書いたら保存、uploadしてブラウザでアクセスしてみましょう。
予想通りスルスルっと動きましたか?
→動作サンプル（別窓）

僕が買った、もしくは買う予定の参考書

参考書は指定されていません

【対象】自分のWEBサイトを持っていて、味付けしたい人