SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

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

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


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

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等と同じ場所に配置するのがお勧めです。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
テンプレートの確認とツールボックスへの追加

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/883 2007/04/13 13:08

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング