CodeZine(コードジン)

特集ページ一覧

RIAへの第一歩としてのjQuery

実例で学ぶASP.NET Webフォーム業務アプリケーション開発のポイント 第7回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/12/05 14:00
目次

RIAの登場

 そこで登場したのが、リッチインターネットアプリケーション(Rich Internet Application、RIA)という考えです。RIAとはJavaScriptやCSSを使った動的ページ変更、もしくはSilverlight、FlashなどのWebブラウザ拡張を活用し、従来のWebアプリケーションの弱点であった操作性、表現力を向上させ、ユーザーエクスペリエンスを高めたWebアプリケーションの総称です。

 そして、RIAの中でも重要なテクノロジーがAJAX(Asynchronous JavaScript+Xml、エイジャックス)です。簡単に言えば、ページの一部の情報をサーバーに送信し、サーバーからの応答を非同期に待ち、サーバーから返されたデータを元に、クライアントではページ内の限られた範囲だけをJavaScriptを使って動的に書き換える技術です。当初はサーバーから返すデータ形式がXML形式だったので、XMLとなっていますが、現在ではプレーンテキストやJSON形式など、あらゆる形式が使われています。

 従来のWebアプリケーションと同様にサンプルで説明しましょう。

 会議室予約検索画面の「場所」ドロップダウンリストを変更したら、選択した場所だけをサーバーに送信し、サーバーは送られた場所に所属する会議室のリストのデータを返します。そして、クライアントでは返ってきた会議室のリストのデータから、ページ内の「会議室」ドロップダウンリストだけ再構成して表示しなおす、といった動作になります。

図4:AJAXを用いたドロップダウンリストの動的変更
図4:AJAXを用いたドロップダウンリストの動的変更

 以上が狭義のAJAXですが、JavaScriptを用いてページ内の要素を動的に変更することも、広義のAJAXとして、よく活用されます。例えば、図2のようにカレンダーを表示して選択された日付をテキストボックスに設定する、などがよく見られます。

 こういったRIAは、少し前は自分ですべてのJavaScriptのコードを書く必要があり、比較的ハードルの高いものでした。

 しかし、最近はjQueryを初めとしたサポートライブラリが充実したこともあり、ショッピングサイトなどのB2Cアプリケーションでは広く一般的になっています。そのため、業務アプリケーションでもRIAが求められることがほとんどになっています。

jQueryの導入

 それでは、まずは動的なWebアプリケーションを作成するための手段の一つである、jQueryの導入方法を説明しましょう。

jQueryとは

 jQueryとは従来は少し面倒だったDOM操作やCSS適用などを、よりシンプルな記法で行えるように補助するJavaScriptのライブラリーです。非常に使い勝手が良いため、現在Web開発ではデファクトスタンダードといってもよいライブラリーです。その証拠に、ASP.NETのテンプレートには自動的に組み込まれるようにもなっています。

 jQueryの最大の特徴は、なんといっても次の例のように「セレクター」をもとに対象要素を特定し、その後はメソッドチェインでさまざまな動作を紡いでいけることです。

リスト1 jQueryのコードスタイル
$("div")                    // div要素を取り出し
  .filter(function(i) {
    return (i+1) % 2 == 0;
    })                      // 偶数番目だけフィルタリングして
  .text("even")             // テキストを"even"に変更

 「セレクター」には、HTML要素のid、name、要素の種類などさまざまなものが使えます。

セレクターの例
書式 対象
element_name  HTML要素名 div
#id HTML要素のid #header
.class_name CSSクラス名 .title

 また、紡いでいく動作も、前述のDOM操作、CSS適用だけでなく、イベントハンドラーの設定、アニメーション、Ajax操作など、多岐に渡ります。

 詳細はjQueryのリファレンスを参照ください。

 その他、jQueryは「プラグイン」という形で処理を拡張できるのも特徴です。

 その代表的なプラグインの一つが「jQuery UI」です。jQuery UIは便利なウィジェット(コンポーネント)のライブラリーで、jQueryの記法に沿った記述でカレンダーやスライダーなどの便利なウィジェットが簡単に使えます。

 今回のサンプルでは、このjQuery UIのウィジェットの一つである、「DatePicker」を利用します。

jQueryの参照方法

 jQueryおよびjQuery UIを使うにはjQuery、jQuery UIのjsファイルをWebページに読み込ませなくてはなりません。jQuery自体はASP.NET Webフォームアプリケーションの「ASP.NET Webサイト」テンプレートを使えば、最初からWebサイトに含まれていますので、このファイルへの参照をWebページに追加するだけでよいでしょう。

 ただ、今回はjQuery UIを使用することもありますし、できれば最新のものが使いたいです。

 最新のものを使うには、jQueryのサイトからダウンロードしてWebサイトに配置したり、NuGetでインストールしたり、各種CDN(コンテンツデリバリーネットワーク、Contents Delivery Network)から参照したりと、好きな方法を使えばよいでしょう。

 本連載のサンプルでは、jQuery公式のCDNから、jQueryとjQuery UIのjsファイルへの参照を追加します。また、jQuery UIで使用するCSSファイルへの参照も追加します。

 jQueryをはじめとしたJavaScript、CSSの参照は複数のページで使用することが多いので、マスターページ(Site.master)ファイルに追加するのが一般的です。

リスト2 jQueryの参照設定(Site.masterより)
<head runat="server">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title></title>
   <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
   <!-- jQuery UIのテーマ用css -->    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />    <!-- jQuery本体 -->    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>    <!-- jQuery UI -->    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
   <asp:ContentPlaceHolder ID="HeadContent" runat="server">
   </asp:ContentPlaceHolder>
</head>

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

バックナンバー

連載:実例で学ぶASP.NET Webフォーム業務アプリケーション開発のポイント

もっと読む

著者プロフィール

  • WINGSプロジェクト 高野 将(タカノ ショウ)

    <個人紹介> 新潟県長岡市在住の在宅リモートワークプログラマー。家事や育児、仕事の合間に長岡IT開発者勉強会(NDS)、Niigata.NET、TDDBCなどのコミュニティに関わったり、Web記事や書籍などの執筆を行ったりしている。著書に『アプリを作ろう! Visual C#入門 Visual C...

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

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

あなたにオススメ

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