Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Ajax対応コントロールでJavaScriptレス アニメーションを実装する

AnimationExtenderコントロール(ASP.NET AJAX Control Toolkit)の利用方法を学習する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/02/01 00:00

ASP.NET AJAXの中で唯一、Microsoftだけではなく、コミュニティも加わって開発された「ASP.NET AJAX Control Toolkit」。その中でも、Webページにさまざまなエフェクトを追加するAnimationExtenderコントロールにフォーカスを当てて学習していきます。XMLベースの記述でWebページにアニメーションを持たせることができる、お勧めのコントロールです。

目次

はじめに

 1月24日ASP.NET AJAX V1.0が正式リリースされました。ASP.NETを使いながらAJAXをお手軽に実装する事が可能な技術なので、これからのASP.NET 2.0を用いた開発の中では様々な場所でASP.NET AJAXが利用される事が予想されます。まだASP.NET1.1での開発しかしたことがない人でも、ASP.NET AJAX V1.0のASP.NET 2.0 AJAX Extensionsは、前回の記事を見て少し勉強するだけで利用することが出来るので、ぜひ触れてみてください。バージョンはRCですが、記事で書かれている部分について、正式版では変更がされていないので、そのまま参考にすることができます。

 今回は、ASP.NET AJAXの1つASP.NET AJAX Control Toolkit(以下、Control Toolkit)はASP.NET 2.0上で動作するAJAXの機能を持ったコントロール集です。現在、このコントロールは32個開発されていて、それらを利用することができます。前回の記事で利用したASP.NET 2.0 AJAX ExtensionsはMicrosoftのASP.NET開発チームが開発したツールですが、このControl ToolkitはMicrosoftのASP.NET開発チームとコミュニティによる共同開発で開発が行われました。そのため、Control Toolkitをダウンロードする際にはCodePlexというMicrosoftが運用に携わっているオープンソースコミュニティを利用することになります。

CodePlexにはさまざまな技術ツールが置かれている?
 現在、CodePlexではさまざまな技術ツールが格納されており、それぞれダウンロードを行い利用することが可能になっています。代表的な例として、IronPythonやIronPython for ASP.NETが挙げられます。興味がある方は、CodePlexのサイトを参照ください。

 このControl Toolkitは現段階でも開発生産性の高い高度な機能を持ったコントロール集ですが、正式版がリリースされた後でもControl Toolkitのコントロールは追加され、バグフィックスなどを盛り込んだリリースが行われます。

 本稿はControl Toolkitの中の1つであり、Webページにさまざまなエフェクト効果を追加するアニメーションフレームワークであるAnimationExtenderコントロールについて紹介します。AnimationExtenderコントロールが持つアニメーションは次のようになっています(図1)。

図1 アニメーション一覧
図1 アニメーション一覧

 本稿では、いくつかのアニメーションを実際にサンプルを作りながら解説していきたいと思います。なお、本稿執筆時のバージョンは「ASP.NET AJAX 1.0」となっています。

対象読者

  • ASP.NET 2.0を使ったことがある人
  • ASP.NET AJAXに興味がある人
  • AJAXに興味がある人
  • AJAXに興味があるが、JavaScriptが分からない人

必要な環境と準備

  • Visual Web Developer 2005 Express EditionもしくはVisual Studio 2005(以下、VS)
  • ASP.NET AJAX V1.0
  • ASP.NET AJAX Control Toolkit

 ASP.NET AJAXの入手方法、インストール方法は前回の記事を参照してください。続いて、Control Toolkitの入手方法ですが、公式サイトにアクセスし、画面上部の[Download]という項目を選択します。選択後、[ASP.NET AJAX Control Toolkit]を選択してCodePlexのダウンロード画面に遷移します。

 ページ遷移後、[Runtime Binaries]の[AjaxControlToolkit.zip]をクリックすると、ダウンロード時の利用規約画面に変わります。確認後に[I Agree]ボタンをクリックすることでControl Toolkitのファイルをダウンロードすることができます(図2)。

図2 ASP.NET AJAX Control Toolkit ダウンロード画面
図2 ASP.NET AJAX Control Toolkit ダウンロード画面

 ダウンロード後確認することができますが、zipファイルにはASP.NET 2.0 AJAX Extensionsのようなインストーラがありません。解凍時のフォルダ内は、次のような構成になっていると思います(図3)。

図3 解凍時のフォルダ構成
図3 解凍時のフォルダ構成

 ここで、AjaxControlExtenderフォルダをクリックしてください。

 フォルダの中には「AjaxControlExtender.vsi」というコンテンツインストーラがあり、これを実行します。すると、次のようなインストーラが実行されます(図4)。

図4 Microsoft ASP.NET 2.0 AJAX Extensions Setupウィザード
図4 Microsoft ASP.NET 2.0 AJAX Extensions Setupウィザード

 ここでは、AJAX Control Toolkit Extender Projectと、AJAX Control Toolkit Extender(自作のAJAX Controlを作るためのプロジェクトテンプレート)と、AJAX Control Toolkit Website(Control Toolkitを使ってWebSiteを構築するテンプレート)をインストールすることができます。VBとC#のどちらか必要な方だけチェックを付けることもできますが、基本的にはチェックを外さないで[次へ]をクリックすることをお勧めします。

 以上でControl Toolkitのテンプレートのインストールは完了です。また、「SampleWebSite」フォルダはWeb上で公開されているControl ToolkitのWebサイトをそのまま含んでいます。このWebサイトでは、どのようにサイトが構築されているのかを参考にすることができるので、Control Toolkitを利用しようと考えている人にとっては必見です。そして、Control ToolkitのdllもこのWebサイト内のBinフォルダにあるので、任意の場所にコピーすることで使用可能になります。SampleWebSiteをよく参照する方は、「C:\ユーザー名\Documents\Visual Studio 2005\WebSites」内に配置するのがお勧めです。基本的にControlToolkitを利用するだけの方は「C:\Program Files\Microsoft ASP.NET」内にASP.NET 2.0 AJAX Extensions等と同じ場所に配置するのがお勧めです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5