PrototypeでAJAX開発を効率化

Prototypeチュートリアル

上位ライブラリの基盤としてのPrototype

　Prototypeが優れたフレームワークであるということは、Prototypeをベースとして開発された上位ライブラリがあることからも分かります。このような上位ライブラリで最も有名なのが、ScriptaculousとRicoです。どちらもUI開発に使用され、AJAXを完全にサポートしています。

　これらのライブラリの特徴を知るため、Scriptaculousのダウンロードページから最新のバージョンをダウンロードしましょう（本稿執筆時の最新バージョンは1.6.5で、アーカイブに含まれているPrototypeの使用バージョンは1.5.0_rc1）。必要なファイルは「prototype.js」「scriptaculous.js」「builder.js」「effects.js」「dragdrop.js」「slider.js」「controls.js」です。これらのファイルをディレクトリ（「scripts」など）に入れます。

　Scriptaculousを使うには、最初の2ファイルだけをインクルードします。

<script src="./scripts/prototype.js" type="text/javascript"></script>
<script src="./scripts/scriptaculous.js" type="text/javascript">
</script>

　その他のファイルは「scriptaculous.js」によって自動的にインポートされます。Scriptaculousは、アニメーション効果、ドラッグ＆ドロップ、AJAXのコントロール、DOMのユーティリティなどを含む、リッチなUIライブラリです。次に、アニメーション効果の例を示します。

<!-- Pulsate Effect -->
<div id="pulsateTest" style="border: 1px solid #0000ff; width: 100px;"
        onclick="new Effect.Pulsate($('elemToShow'))">
    Click to see the pulsate effect
</div>

<br /><br />

<!-- Puff Effect -->
<div id="puffTest" style="border: 1px solid #0000ff; width: 100px;"
        onclick="new Effect.Puff($('elemToShow'))">
    Click to see the puff effect
</div>

<br /><br />

<div id="elemToShow" style="width: 200px; border: 1px solid red;">
    This element was created to show some of the Scriptaculous
    animation effects.
</div>

　<div>要素をクリックしたとたん、elemToShow <div>の素敵なアニメーション効果を体験することができます。アニメーション効果のために必要なコード行は1行だけで、一般的な構文はnew Effect.EffectName(element);です（elementは効果を適用する要素、EffectNameは使用する効果の名前です）。Scriptaculousには、Appear、Fade、Puff、BlindDown、BlindUp、SwitchOffなど、数多くの効果が用意されています。また、さまざまなオプションを使って効果をカスタマイズすることもできます。すべてのアニメーション効果およびこのライブラリのその他の機能については、Scriptaculousのデモページをご覧ください。

　Ricoも、AJAX開発に役立つUIライブラリです。本稿執筆時の最新バージョンは、Prototype 1.4.0をベースとする1.1.2でした。このライブラリはRicoのWebサイトからダウンロードできます。Scriptaculousと同様、Ricoを使うにはWebページに次の2つのインクルードが必要になります。インクルードするファイルが「scripts」フォルダに入っている場合は、次のように指定します。

<script type="text/javascript" src="./scripts/prototype.js"></script>
<script type="text/javascript" src="./scripts/rico.js"></script>

　AJAXやドラッグ＆ドロップなどの素敵な機能のほか、Ricoには非常におもしろいシネマ効果も用意されています。例えば、丸みのあるボックスの中にコンテンツを表示したいと思ったことはありませんか？ Ricoならこれを簡単に実現できます。次に例を示します。

<!-- Round Effect -->
<div id="roundTest" style="border: 1px solid #0000ff; width: 100px;"
        onclick="Rico.Corner.round($('elemToRound'))">
    Click to round the div
</div>

<br /><br />

<div id="elemToRound" 
    style="background-color: #0000ff; color: #ffffff; width: 200px;">
    This element was created to round its corners using the Rico.Co
rner.round method.
</div>

　「Click to round the div」をクリックすると、図2が表示されます。

図2　丸みのあるボックス

　もちろん、Ricoにも、すべての効果をカスタマイズするためのオプションが数多く用意されています。このライブラリの詳細については、Ricoのデモページをご覧ください。

Prototypeのパワー

　Prototypeフレームワークがいかに強力か、ご理解いただけたことと思います。非常に優れているからScriptaculousやRicoなどの素晴らしいUIライブラリの基盤として利用されているのです。Prototypeの機能をすべて身に付ければ、後は皆さんのイマジネーションだけで、次世代のWeb 2.0アプリケーションを簡単に実現することができます。