CodeZine(コードジン)

特集ページ一覧

JavaScriptとjQueryでデスクトップアプリに負けない操作性のWebアプリケーションを作る

ドラッグアンドドロップ、マウス選択、パン、ズームなどができるWebアプリケーション

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/03/06 14:00

 JavaScriptとjQueryの高度なCSS機能を使用することで、デスクトップアプリケーションと同様にドラッグアンドドロップ、マウス選択、パン、ズームなどができるWebアプリケーションを作成します。

目次

はじめに

 近ごろのブラウザは、パフォーマンスの面でも開発ツールや互換性の面でも大きく向上しています。大部分のWebサイトは依然としてページパラダイムに固執し、自らのコンテンツを新聞や書籍と同じような感じで表現していますが、今日のブラウザは伝統的なデスクトップアプリケーションに引けを取らない高度に対話的なアプリケーションをサポートすることができます。

 これまでのアプリケーション開発の歴史では、複雑な対話や高度に視覚的な対話を実現しようとする開発者は、ユーザーのPC上に置かれるデスクトップアプリケーションとして実装するか、Flashのようなブラウザプラグインの上に構築されるアプリケーションとして実装するかの選択を強いられました。今日のJavaScriptは、こうした高度なアプリケーションもサポートできるほど進歩を遂げています。パワフルなJavaScriptライブラリが提供する抽象層は、ブラウザの互換性のなさや低レベルの実装の詳細を吸収します。これらのライブラリによって、ユーザーにおなじみの操作(例えばビジュアル要素のドラッグアンドドロップや選択、移動、あるいはパン、ズーム、マウスジェスチャなど)を実現するインターフェースを容易に設計できます。

 本稿では、こうしたJavaScriptライブラリの力を借り、JavaScriptとjQueryを使って新しいタイプのWebアプリケーションを作成する方法を具体例で示します。jQueryは、ブラウザの互換性の問題を吸収し、CSSセレクタとメソッド連鎖に基づいた便利なインターフェースを提供する人気のJavaScriptライブラリです。本稿のダウンロードファイルには、多機能のデスクトップアプリケーションを模したサンプル(こちらのYouTubeビデオを参照)と、完全なソースコードが収録されています。

 Webアプリケーションの基礎としてJavaScriptを使用することの利点については、以前の記事を参照してください。

jQueryの概要

 WebアプリケーションでjQueryを使用するために必要なことは、HTMLコードの中にJavaScriptファイルを1つ取り込むことだけです。これにより、DOM(Document Object Model)を操作し、CSSセレクタを使ってページの対象部分を指定し、合致する要素をすべて修正するミューテータメソッドを適用することができます。基本的な例を次に示します。これは、Webページの最初のパラグラフの背景色を変更するコードリストです。

<html>
<head>
  <script src="lib/jquery-1.2.6.js" ></script>
</head>
<body>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <script>
    $(document).ready(function() {
      $('p:first').css('background-color', 'yellow');
    });
  </script>
</body>
</html>

 $()関数は、jQueryによる操作をトリガーするための便利なショートカットです。上記のリストでは、この関数を2回使用しています。まず、この関数を使って無名関数をdocument.ready()イベントにバインドします。このようにしてページのロードが終了したところでjQueryコードの実行をトリガーします。次に、p:first CSSセレクタと組み合わせて使用することで、最初のパラグラフを分離します。そして、css()ミューテータメソッドで最初のパラグラフの背景色を変更します。

 jQueryには、DOMを変換し、コールバックをすべてのブラウザイベントにバインドするためのメソッドがこの他にも数多く用意されています。jQueryについてさらに詳しく知りたい方は、こちらの記事を参照してください。

 jQueryは拡張性が高く、本稿の例では標準のライブラリに加えて2つの拡張を使用しています。1つはjQuery UIで、これは視覚的な対話を処理するための特殊化された関数群です。もう1つはマウスホイールプラグインです。これを利用すると、マウスホイールで生成されるスクロールイベントに反応することができます。


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

著者プロフィール

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

  • Riccardo Govoni(Riccardo Govoni)

    2003年からJ2EE開発者としてイタリアの金融サービス会社に勤務。ソフトウェアアーキテクトとして従来の銀行システムのWebフロントエンドの設計に従事。物理学修士。SCJP(Sun Certified Java Programmer)資格を持つ。

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

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