トップページ > Ajaxライブラリ使用サンプル集
Ajaxライブラリ使用サンプル集
Ajaxライブラリを利用すると、動的で面白いWEBページが作成できたり編集しやすくなったり、とても便利。
便利なもの、面白いものをピックアップしてテストしていきます。
- テーブル行の自動色変更
- テーブルの行の交互カラーリングを自動的におこなう
- ブロック要素の高さを揃える
- 複数のブロックレベル要素の高さが、簡単に揃えられる
- Lightboxでｽﾑｰｽﾞ画像表示
- Lightboxを使って、画像の拡大表示をスムーズ＆クールに
- Mediaboxでファイル表示
- Mediaboxを使って、画像以外のファイルをページ内にスムーズに表示
- Glossyでつややかな立体に
- glossy.jsを使って画像をつややかな立体に見せる
- Cornerで画像を角丸に
- corner.jsを使って四角い画像を角丸に見せる
- アコーディオン-prototype
- 縦にも横にも開くアコーディオン
- アコーディオン-AdobeSpry
- AdobeSpryのアコーディオン
- お手軽なパネル
- アコーディオンの簡易版。単純に開閉させるならこれ
- 超簡単設定のパネル
- CSSだけで複数のパネルをまとめて設定
- タブパネル
- タブの内容がアニメーション付きで切り替わる
- ツールチップ
- 依存ライブラリ無しのクールなツールチップ
- 手軽なツリービュー
- リストタグ(ul, li)で作るツリービュー
- ルーペで画像を拡大
- ルーペ（虫眼鏡）で画像を拡大して見せる
Ajaxとは
Ajax（エイジャックス、またはアジャックス）は、Asynchronous JavaScript + XML の略。非同期通信でデータを取得し、動的にページの内容を書き換える技術。
JavaScript、XML、CSSという既存の技術を組み合わせて作られたもの。これに米Adaptive Path社のJesse James Garrett氏が2005年にAjaxという名称を付けた。米Google社が「Google Maps」「Google Suggest」「GMail」などのAjaxを利用したアプリケーションを開発して注目されることになった。
手のひらツールでドラッグできるグーグルマップを初めて見た時、ビックリしたが、あれがAjaxブレイクのきっかけだったらしい。
Ajaxを取り入れると、ブラウザだけでデスクトップアプリケーションのような操作性を得られる。
普通、サーバーから新しいページを取得するとき、ページ全体を書き換えるのでユーザは何も操作できない。Ajaxでは、バックグラウンドでサーバーと非同期通信し、必要な部分だけ書き換えるので、ユーザーはページを切り替える必要がなく、同じページを見たまま動的な操作ができる。
Ajaxライブラリ、フレームワーク、ツールキットについて
「Ajaxライブラリを使用する」などと偉そうに言っているが、ここは、Ajaxを使った「フレームワーク」「ツールキット」を利用したパーツを、webページ上に作るサンプル集。
フレームワークやツールキットは、ある程度の必要事項を設定してある言わばテンプレートのようなもの。
マニュアルに沿って必要事項を設定すれば簡単に導入できる。自分でプログラムするわけではないので自由度は低いが、CSSの知識があればデザイン面は充分アレンジできる。
Ajaxのプログラムの分類で、ライブラリ、フレームワーク、ツールキットなどに分けられるはずだが、大概のモノはライブラリと呼ばれているので、ここでも全部ライブラリと呼ぶことにする。
Ajaxライブラリの種類
主なAjaxライブラリとURLは下記の通り。（いくつか選んだだけ。もっと膨大にある）
・Prototype ( http://www.prototypejs.org/ )←ライセンスはMIT。
・Script.aculo.us ( http://script.aculo.us/ )←ライセンスはMIT。
・jQuery ( http://jquery.com/ )←ライセンスはGPLとMITの2つがある。
・Mootools ( http://mootools.net/ )←ライセンスはMIT。
・Adobe Spry ( http://labs.adobe.com/technologies/spry/ )←ライセンスはBSD。
・Yahoo UI ( http://developer.yahoo.com/yui/ )←ライセンスはBSD。
・Rialto ( http://rialto.improve-technologies.com/ )←ライセンスはAFL。
・Rico ( http://openrico.org/ )←これは自らフレームワークとしている。Apacheライセンス。
・Dojo ( http://dojotoolkit.org/ )←これは自らツールキットと言ってる。BSDとAFL。
元になる依存ライブラリと個別のライブラリが分かるとよく見渡せる。
注意点は「1つのページに複数のライブラリを使用するのは無理（動作がうまくいかない）」ということ。
ライセンスについて
Ajaxライブラリは、それぞれなんらかのライセンス（使用許諾条件）に添って提供されている。ほとんどはフリーライセンスだが、たまに商業用では有償のライブラリもある。各ライブラリのサイトで確認すること。
ちなみにフリーと言っても単に無料なだけでなく、使用許諾条件を伴う。フリーソフトウェアのライセンスの意味は以下の通り。
著作権表示とソースコードの開示、無保証、そしてコピーレフトを義務づけられている。 コピーレフトとは、改変や再配布を制限しないが、その際もコピーレフトを義務づけるライセンス。
最初にGPLだったら孫子の代までGPLということ。だが、自分の考えたものがどこかで独占的に売られたりすることを防ぐ。
※GNUとは1984年にスタートした、完全にフリーなUNIX的なソフトウェアを開発するためのプロジェクト。
jQueryはこのライセンスとMITの２つが用意されている。
ソースの開示を義務づけないコピーレフト。GPLよりややゆるめのライセンス。
Mozilla 製品（Firefox、Thunderbird など）で使用されている。コピーレフトだがLGPLほどではない。
自分の開発したソフトウエアにMPLのものを使っても、それが独立したファイルの状態を保っていれば、ソフトウエアのすべてをMPLにしなくてよい。
BSD系UNIXで利用されている。再配布する際の著作権表示+無保証が条件。
※BSDとはカリフォルニア大学バークレイ校により開発された、AT&T 直系とは異なる UNIX系のOS。
Adobe Spry、Yahoo UIがこのライセンス。DojoはこのライセンスとAcademic Free Licenseの２つが用意されている。
マサチューセッツ工科大学による。再配布する際の著作権表示+無保証が条件。Xライセンスとも呼ばれる。
Script.aculo.us、Mootools、Prototypeがこのライセンス。jQueryはこのライセンスとGPLの２つが用意されている。
BSDライセンス、MITライセンス、Apacheライセンスと同様。
Rialtoはこのライセンス。DojoはこのライセンスとBSDの２つが用意されている。