著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマイクロソフトの 見 解 を 反 映 したものです マイクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われな

Visual Studio Do-It-Yourself シリーズ 第 15 回 jquery

著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマイクロソフトの 見 解 を 反 映 したものです マイクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われないものとします また 発 行 日 以 降 に 発 表 される 情 報 の 正 確 性 を 保 証 できません このホワイトペーパーは 情 報 提 供 のみを 目 的 としています 明 示 黙 示 または 法 令 に 基 づく 規 定 に 関 わらず これらの 情 報 についてマイクロソフトはいかなる 責 任 も 負 わないものとします この 文 書 およびソフトウェゕを 使 用 する 場 合 は 適 用 されるすべての 著 作 権 関 連 の 法 律 に 従 っていただくものと します このドキュメントのいかなる 部 分 も 米 国 Microsoft Corporation の 書 面 による 許 諾 を 受 けることな く その 目 的 を 問 わず どのような 形 態 であっても 複 製 または 譲 渡 することは 禁 じられています ここでいう 形 態 とは 複 写 や 記 録 など 電 子 的 な または 物 理 的 なすべての 手 段 を 含 みます ただしこれは 著 作 権 法 上 の お 客 様 の 権 利 を 制 限 するものではありません マイクロソフトは この 文 書 に 記 載 されている 事 項 に 関 して 特 許 申 請 中 特 許 商 標 著 作 権 および 他 の 知 的 財 産 権 を 所 有 する 場 合 があります 別 途 マイクロソフトのライセンス 契 約 上 に 明 示 の 規 定 のない 限 り このド キュメントはこれらの 特 許 商 標 著 作 権 またはその 他 の 知 的 財 産 権 に 関 する 権 利 をお 客 様 に 許 諾 するもので はありません 別 途 記 載 されていない 場 合 このドキュメントで 使 用 している 会 社 組 織 製 品 ドメイン 名 電 子 メール ゕ ドレス ロゴ 人 物 場 所 出 来 事 などの 名 称 は 架 空 のものです 実 在 する 商 品 名 団 体 名 個 人 名 などとは 一 切 関 係 ありません 2010 Microsoft Corporation. All rights reserved. Microsoft Windows Visual Studio Visual Studio ロゴ は 米 国 Microsoft Corporation の 米 国 および その 他 の 国 における 登 録 商 標 または 商 標 です 他 のすべての 商 標 は それぞれの 所 有 者 の 財 産 です

ASP.NET Do-It-Yourself 第 15 回 は jquery について 学 習 します jquery は もともと John Resig 氏 に よって 開 発 されたオープンソースのライブラリで JavaScript ライブラリとしては 比 較 的 後 発 のものですが 以 下 のような 特 長 から 多 くの 開 発 者 の 支 持 を 集 め 急 速 に 普 及 しました Write Less, Do More (より 少 ないコードでより 多 くのことを) がモットー Internet Explorer Firefox Safari Opera Chrome などの 主 要 ブラウザに 対 応 文 書 ツリーの 操 作 からゕニメーション 効 果 Ajax 対 応 まで クライゕントサイド 開 発 に 関 わる 機 能 を 総 合 的 にサポート にも 関 わらず とても 軽 量 (サイズは 26 KB) 高 機 能 な UI 機 能 を 提 供 する jquery UI をはじめ 拡 張 プラグインが 豊 富 マイクロソフトでも 2008 年 10 月 から 正 式 に jquery のサポートを 開 始 しており ASP.NET 4 でも 標 準 的 な JavaScript ライブラリとして 採 用 しています 今 後 ASP.NET 環 境 で Ajax 開 発 を 行 う 場 合 ASP.NET AJAX と 共 に jquery の 理 解 は 欠 かせないものとなっていくことでしょう この jquery について 今 回 は 以 下 の 内 容 について 学 習 していきます Visual Studio で jquery を 利 用 する 方 法 jquery による 基 本 的 な DOM 操 作 jquery による Ajax プログラミングの 基 本 Visual Studio で jquery を 利 用 する 方 法 冒 頭 でも 述 べたように Visual Studio 2010 では jquery を 標 準 でサポートしています ( 空 の~ でない) Web サイト プロジェクトを 新 たに 作 成 してみましょう できたプロジェクトをソリューション エクスプロー ラーから 確 認 してみましょう

/Scripts フォルダ 配 下 に デフォルトで jquery の 実 行 フゔイルが 配 置 されていることが 確 認 できます それ ぞれのフゔイルの 概 要 は 表 の 通 りです No. ファイル 名 概 要 1 jquery-1.4.1.js 圧 縮 なしのコメント/ 改 行 付 き jquery ソース 2 jquery-1.4.1.min.js 圧 縮 された jquery ソース (コメント/ 改 行 などは 除 去 ) 3 jquery-1.4.1-vsdoc.js ドキュメンテーション コメントを 含 む jquery ソース 本 番 環 境 で jquery を 動 作 させるのに 最 低 限 必 要 であるのは 2. のみです 1. 3. もソースコードの 内 容 は 同 じですが 利 用 の 目 的 が 異 なります 1. は 改 行 やコメントが 入 って 読 みやすい 状 態 になっていますので 開 発 時 に jquery のソースを 確 認 するために 利 用 できます 3. は Visual Studio で jquery のインテリセンス 機 能 を 動 作 させるために 必 要 なフゔイルです 開 発 時 は デフォルトで 用 意 された 3 種 類 の.js フゔイルを 削 除 せずに そのまま 利 用 するようにすると 良 いでしょう jquery のインテリセンスを 有 効 化 する Visual Studio のソース ビューで jquery のインテリセンス 機 能 を 有 効 化 するには 以 下 の 方 法 があります (1) jquery をページにインポートする <script> タグ または ScriptManager コントロールで jquery への 参 照 を 追 加 します これらは いずれ も jquery をページで 利 用 するために 必 要 な 手 続 きです 具 体 的 には 以 下 のようなコードを 追 加 します

<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script> または <asp:scriptmanager ID="manager" runat="server"> <Scripts> <asp:scriptreference Path="~/Scripts/jquery-1.4.1.min.js" /> </Scripts> </asp:scriptmanager> (2) <reference> タグで 宣 言 する 独 立 した.js フゔイルから jquery を 利 用 する 場 合 には 以 下 のようにスクリプト フゔイルの 先 頭 で <reference> コメント タグを 追 加 します /// <reference path="jquery-1.4.1.min.js"/> (1) (2) いずれかの 操 作 を 行 った 状 態 で $( * ). とタイプしてみると 以 下 の 図 のように jquery で 利 用 で きるメソッドが 候 補 表 示 され インテリセンス 機 能 が 有 効 になっていることが 確 認 できます もちろん メソッドの 引 数 を 入 力 していくと メソッドのシグニチャに 関 する 情 報 も 表 示 されます

jquery の 基 本 jquery は 実 にさまざまな 機 能 を 備 えていますので 本 稿 でその 機 能 を 網 羅 することは 困 難 です しかし 以 下 のテーマについて 理 解 しておくことで 今 後 jquery を 学 習 していく 上 でも 理 解 が 早 まるはずです $ 関 数 メソッド チェーン イベント リスナ Ajax 通 信 CSS セレクタで 目 的 の 要 素 を 取 得 する - $ 関 数 - $ 関 数 は 文 書 内 の 要 素 を 取 得 するための 関 数 で jquery のもっとも 基 本 的 で 特 徴 的 な 機 能 でもあります jquery プログラミングのほとんどは まず $ 関 数 の 呼 び 出 しから 始 まることからも $ 関 数 の 理 解 は jquery を 理 解 する 第 一 歩 と 言 って 良 いでしょう まずは 具 体 的 なサンプルから 見 てみましょう 以 下 は id 属 性 が list である <ul> 要 素 配 下 から class 属 性 が home である <img> 要 素 を 取 り 出 し 2 秒 かけてサイズを 大 きくする サンプルです <ul id="list"> <li><img src="images/homepremium.jpg" class="home" alt="home Premium" /></li> <li><img src="images/professional.jpg" class="pro" alt="professional" /></li> <li><img src="images/ultimate.jpg" class="ultimate" alt="ultimate" /></li> </ul>

<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $('ul#list img.home').animate({ width: 130, height: 130 }, 2000); </script> サンプルの 実 行 結 果 は 以 下 の 通 りです 目 的 の 画 像 を 特 定 し ゕニメーションさせるという 機 能 がわずかに 1 行 のコードで 実 装 できてしまうのです 動 作 が 確 認 できたところで $ 関 数 の 詳 細 について 見 てみましょう $ 関 数 の 最 大 のポイントは 要 素 抽 出 の 条 件 を CSS セレクタで 指 定 できるという 点 です CSS セレクタとは CSS スタイルを 特 定 するための 記 法 のこと です CSS 開 発 に 慣 れた 人 であれば 新 しい 記 法 を 覚 える 必 要 がないのはもちろん 要 素 特 定 の 表 現 力 に 優 れて おり 複 雑 な 抽 出 条 件 もごく 短 いコードで 表 現 できます たとえばサンプルでは ul#list img.home の 部 分 が CSS セレクタによる 表 現 です ul#list は id 属 性 が list である <ul> 要 素 を 空 白 区 切 りでうしろに 続 く img.home は その 配 下 の class 属 性 が home である <img> 要 素 を 意 味 します $ 関 数 は 戻 り 値 として 取 得 した 要 素 ( 群 ) を 表 す jquery オブジェクトを 返 します animate メソッドは

jquery オブジェクトが 表 す 要 素 群 に 対 してゕニメーション 効 果 を 適 用 するためのメソッドです この 例 では 2 秒 (2000 ミリ 秒 ) かけて 画 像 の 縦 横 サイズを 130 130 に 変 化 させています ここで jquery では 複 数 の 要 素 を 処 理 する 場 合 にも ループ 処 理 を 記 述 する 必 要 がない 点 に 注 目 してください jquery オブジェクトは 内 部 的 にすべての 要 素 セットに 対 して 処 理 を 適 用 するためです 処 理 を 連 鎖 的 に 記 述 できる - メソッド チェーン - jquery のメソッドの 大 部 分 は 戻 り 値 として jquery オブジェクトを 返 します メソッド チェーンとは jquery のこの 性 質 を 利 用 して 関 係 するメソッドをチェーン ( 鎖 ) のようにドット 演 算 子 で 接 続 していく 記 法 のことで す たとえば 先 ほどのサンプルでサイズ 変 更 した 後 3 秒 かけてスライド ゕップし 更 にその 後 の 3 秒 でスライ ドダウンするように 書 き 換 えてみましょう <script type="text/javascript"> $('ul#list img.home').animate({ width: 130, height: 130 }, 2000).slideUp(3000).slideDown(3000); </script> メソッド チェーンを 利 用 することで 一 連 の 処 理 をまとめて 記 述 できるので コードがシンプルになります のみならず $ 関 数 によって 得 られた 要 素 セットをいちいち 変 数 に 格 納 する 必 要 がなくなりますので 名 前 空 間 の 汚 染 を 最 小 限 に 抑 えられます

jquery によるイベント 処 理 jquery によるイベント 処 理 は 単 純 です 以 下 は 先 ほどのサンプルを 書 き 換 えて (ページロード 時 ではなく) ボ タンをクリックしたタイミングでゕニメーション 処 理 を 実 行 する 例 です <ul id="list"> <li><img src="images/homepremium.jpg" class="home" alt="home Premium" /></li> <li><img src="images/professional.jpg" class="pro" alt="professional" /></li> <li><img src="images/ultimate.jpg" class="ultimate" alt="ultimate" /></li> </ul> <input type="button" value="ゕニメーション 実 行 " /> <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(':button').click(function() { $('ul#list img.home').animate({ width: 130, height: 130 }, 2000).slideUp(3000).slideDown(3000); });

</script> イベントに 応 じて 実 行 されるイベント リスナを 定 義 するには $(セレクタ 式 ).イベント 名 (イベントリスナ) の 形 式 で 定 義 するだけです ここでは$( :button ) (すべてのボタン) に 対 して click メソッドを 呼 び 出 してい ますので イベント リスナはボタンがクリックされたタイミングで 呼 び 出 されます イベント 名 では click の 他 にも change dblclick focus keypress など 基 本 的 なイベントを 指 定 できます jquery による Ajax 通 信 最 後 に jquery を 利 用 した Ajax 通 信 について 見 てみましょう 以 下 のサンプルは [ 時 刻 表 示 ] ボタンをクリ ックすると サーバサイドから 現 在 時 刻 を 読 みだして ページの 下 部 に 反 映 します サーバサイドで 現 在 時 刻 を 返 すコードは 以 下 の 通 りです フゔイル 名 は CurrentTime.aspx としておきます <%@ Page Language="C#" %> <%= DateTime.Now.ToString(); %> CurrentTime.aspx にゕクセスし ページに 現 在 時 刻 を 反 映 させるコードは 以 下 の 通 りです <form> <input type="button" value=" 時 刻 表 示 " /> <div id="result"></div> </form> <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> // (2) キャッシュを 無 効 にする $.ajaxsetup({ cache: false });

// (1) ボタン クリック 時 に 現 在 時 刻 をリフレッシュ $(':button').click(function() { $('div#result').load('currenttime.aspx'); }); </script> (1) はボタン クリック 時 に 呼 び 出 される click イベント リスナを 定 義 しています load メソッドは 指 定 さ れた URL に 対 して 非 同 期 通 信 を 行 い その 結 果 を 現 在 の 要 素 (ここでは id 属 性 が result である <div> 要 素 ) に 対 して 反 映 させます ただし Internet Explorer 環 境 ではキャッシュ 機 能 が 働 いて 2 度 目 以 降 のリクエスト 結 果 が 正 しく 反 映 され ません そこで (2) でキャッシュを 無 効 化 しているわけです $.ajaxsetup メソッドは Ajax に 関 わるオプ ションを 設 定 します cache パラメータは ブラウザによるコンテンツ キャッシュを 有 効 にするかどうかを 決 定 します まとめ 今 回 は Visual Studio 環 境 で jquery を 利 用 する 方 法 及 び jquery の 基 本 的 な 用 法 について 学 習 しました jquery の 機 能 は 多 岐 にわたりますが まずは 本 稿 の 内 容 をきちんと 理 解 しておけば 今 後 の 学 習 の 確 かな 基 盤 ともなるはずです その 他 の 機 能 については 以 下 の 記 事 も 参 考 になりますので 合 わせて 参 照 してみてくださ い jquery 逆 引 きリフゔレンス (http://www.atmarkit.co.jp/fdotnet/jqueryref/index/) 次 回 は ASP.NET 4 で 新 たに 追 加 された Chart コントロールについて 学 習 します