| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <title>jQueryを使用した、Webページの見た目と使いやすさの向上 - NetBeansチュートリアル</title> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="A tutorial for enhancing the usability and appearance of structured documents using the jQuery JavaScript library in the NetBeans IDE"> |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, jQuery, JavaScript, CSS, semantically structured HTML, enhancing"> |
| <meta name="author" content="lloyd.dunn@sun.com, troy.giunipero@sun.com"> |
| </head> |
| <body> |
| |
| <!-- |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <h1>jQueryを使用した、Webページの見た目と使いやすさの向上</h1> |
| |
| <p><a href="http://jquery.com/">jQuery</a>は軽量のJavaScriptライブラリで、これによってプログラマはWebページの見た目と動作を容易にすばやく向上できます。jQueryの構文は簡潔で、ターゲットとなるDOMの要素(一意の要素(<code>ID</code>)、一連の要素(<code>クラス</code>)、または任意に選択したもの)に効果を結び付ける方法として変数をCSSセレクタの形で使用します。jQueryはJavaScriptであるため、JavaScriptを適用できる任意のプロジェクトに埋め込むことができます。</p> |
| |
| <p>このチュートリアルでは、NetBeansプロジェクトでjQueryを使用する方法と、HTML、CSSおよびJavaScriptファイルを使用するフロント・エンド・プロジェクトの作業にIDEを活用する方法を示します。最初に、関数のコード補完を呼び出す方法と、統合APIサポートを使用する方法を示します。また、<code>$(document).ready</code>関数コール、CSSセレクタ系jQueryオブジェクトの使用、jQueryの効果と動作の連結など、jQueryの主要な概念も紹介します。さらに、<a href="http://jqueryui.com">jQuery UIライブラリ</a>の利点を調べるために、「連絡先リスト」という単純なサンプル・ドキュメントを設定し、それに<a href="http://jqueryui.com/demos/accordion/">jQueryアコーディオン・ウィジェット</a>を適用します。</p> |
| |
| <p class="tips">HTML5アプリケーションでjQueryを使用する方法の例については、<a href="../webclient/html5-gettingstarted.html">HTML5アプリケーションの開始</a>のチュートリアルを参照してください。</p> |
| |
| |
| <h3>内容</h3> |
| <img alt="このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます" class="stamp" src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" title="このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます"> |
| |
| <ul class="toc"> |
| <li><a href="#settingup">NetBeansプロジェクトの設定</a></li> |
| <li><a href="#addingjquery">プロジェクトへのjQueryライブラリの追加</a></li> |
| <li><a href="#gettingacquainted">jQueryに習熟する</a></li> |
| <li><a href="#addingaccordion">プロジェクトへのjQueryアコーディオン・ウィジェットの追加</a></li> |
| <li><a href="#usingcss">jQueryのデフォルト・テーマを使用したスタイル拡張</a></li> |
| <li><a href="#summary">サマリー</a></li> |
| <li><a href="#seealso">関連項目</a></li> |
| </ul> |
| |
| <h4>このチュートリアルを完了するには、次のリソースが必要です。</h4> |
| |
| <table id="requiredSoftware"> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">ソフトウェアまたはリソース</th> |
| <th class="tblheader" scope="col">必須バージョン</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE、Java EEまたはHTML5およびPHPバンドル版</a></td> |
| <td class="tbltd1">7.0以降</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">7または8</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://docs.jquery.com/Downloading_jQuery#Current_Release">jQueryコア・ライブラリ</a></td> |
| <td class="tbltd1">1.4.2以降</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://jqueryui.com/download">jQueryアコーディオン・ウィジェット</a></td> |
| <td class="tbltd1">1.8.1以降</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252Fpix.zip">プロジェクト・リソース</a></td> |
| <td class="tbltd1">n/a</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p><strong class="notes">注意: </strong></p> |
| |
| <ul> |
| <li><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip">プロジェクト・リソース</a>には、このチュートリアルを完了するために必要なJPGファイルが含まれます。</li> |
| |
| <li>プロジェクトを、正常に機能するソリューションと比較する必要がある場合は、<a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip">サンプル・プロジェクトをダウンロード</a>できます。(PHPバージョンとJava Webバージョンの両方が含まれています。)</li> |
| |
| <li>Javaプロジェクトで作業する場合は、開発環境用のサーバーを構成することを検討してください。GlassFishサーバーはIDEのJavaダウンロードに含まれており、NetBeansからデフォルトで実行するように構成されています。</li> |
| |
| <li>PHPプロジェクトで作業する場合は、PHPをダウンロードし、環境を構成する必要があります。詳細は、<a href="../../trails/php.html">PHPの学習</a>を参照してください。</li> |
| |
| <li>このドキュメントは、HTML、CSSおよびJavaScriptについて基本的な知識またはプログラミング経験を持つ読者を想定して書かれています。</li> |
| </ul> |
| |
| |
| <br> |
| <h2 id="settingup">NetBeansプロジェクトの設定</h2> |
| |
| <ol> |
| <li>新規プロジェクトの作成から始めます。「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択します。</li> |
| |
| <li>PHPプロジェクトで作業する場合は、「<strong>PHP</strong>」カテゴリを選択し、「<strong>PHPアプリケーション</strong>」を選択します。<br><br> Java Webプロジェクトで作業する場合は、「<strong>Java Web</strong>」カテゴリを選択し、「<strong>Webアプリケーション</strong>」を選択します。</li> |
| |
| <li>「次」をクリックし、プロジェクトに<code>jqproject</code>という名前を付けます。プロジェクトを保存するコンピュータ上のディレクトリも指定します。「次」をクリックします。</li> |
| |
| <li>ステップ3で、このチュートリアルでは、ウィザードに示されるデフォルトの設定を受け入れます。<br><br> |
| <p><strong class="notes">注意:</strong> PHPプロジェクトを初めて作成する場合で、ヘルプが必要なときは、<a href="../../trails/php.html">PHPの学習</a>のPHP開発のための環境の構成を参照してください。</p></li> |
| |
| <li>「<strong>終了</strong>」をクリックしてウィザードを完了し、新しいプロジェクトを作成します。「プロジェクト」ウィンドウに<code>jqproject</code>が開き、プロジェクトの開始ファイルがエディタで開かれます。</li> |
| |
| <li>このチュートリアルの残り部分の作業に使用できるプレーンHTMLファイルを作成します。追加しようとしているjQueryコードは、バックエンド・サーバーとの通信を必要としないため、単純にHTMLファイルをブラウザで実行して結果を表示します。 |
| |
| <p>プロジェクト・ノードを右クリックし、「新規」>「HTMLファイル」を選択します([Ctrl]-[N])。</p></li> |
| |
| <li>ファイルに<code>index</code>という名前を付け、「<strong>終了</strong>」をクリックします。「プロジェクト」ウィンドウで、新しい<code>index.html</code>ファイルがプロジェクト内に表示され、ファイルがエディタで開かれます。</li> |
| |
| <li>開始ページがブラウザでどのように表示されるか見てみましょう。これを行うには、「プロジェクト」ウィンドウで<code>index.html</code>ノードを右クリックし、「表示」を選択します。(エディタでファイルの右クリック・メニューから「表示」を選択することもできます。)ページがブラウザ・ウィンドウに表示されます。<br> <img alt="ブラウザに表示されたindex.html" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/browser-test.png" title="ブラウザ・ウィンドウでの空のHTMLテンプレートの表示"></li> |
| |
| <li>NetBeansエディタで、<code>index.html</code>ファイルの<code><title></code>タグの間に「<code>jQuery Test Project</code>」と入力し、ページの<code><head></code>タグの間に1組の<code><style></code>タグを作成します。変更場所は<strong>太字</strong>で示されています。 |
| |
| <pre class="examplecode"> |
| <html> |
| <head> |
| <title><strong>jQuery Test Project</strong></title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <strong><style type="text/css"> |
| |
| </style></strong> |
| </head> |
| <body> |
| TODO write content |
| </body> |
| </html></pre></li> |
| |
| <li>アプリケーションがデプロイされ実行されるときに<code>index.html</code>ファイルが開始ファイルとして表示されるように、プロジェクトを構成します。これを行うには、「プロジェクト」ウィンドウで<code>jqproject</code>ノードを右クリックし、「プロパティ」を選択します。 |
| |
| <ul> |
| <li><strong>PHPプロジェクト:</strong> 「<strong>実行構成</strong>」カテゴリを選択し、「<strong>開始ファイル</strong>」フィールドに「<code>index.html</code>」と入力します。</li> |
| |
| <li><strong>Java Webプロジェクト:</strong> 「<strong>実行</strong>」カテゴリを選択し、「<strong>相対URL</strong>」フィールドに「<code>index.html</code>」と入力します。</li> |
| </ul></li> |
| |
| <li>「OK」をクリックして「プロジェクト・プロパティ」ウィンドウを閉じ、変更を保存します。</li> |
| |
| <li>この段階で、プロジェクトとともに作成されていた元のインデックス・ファイルを削除できます。PHPプロジェクトの場合これは<code>index.php</code>ファイル、Java Webプロジェクトの場合これは<code>index.jsp</code>ファイルです。<br><br>ファイルを削除するには、「プロジェクト」ウィンドウでファイルを右クリックし、「削除」を選択します。表示される確認ダイアログで、「<strong>はい</strong>」をクリックします。</li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="addingjquery">プロジェクトへのjQueryライブラリの追加</h2> |
| |
| <p>jQueryの操作を始める前に、プロジェクトにjQueryライブラリを追加する必要があります。実行していない場合は、jQueryライブラリを<a href="http://jquery.com/">http://jquery.com/</a>からダウンロードします。</p> |
| |
| <p class="tips">ダウンロードの前に、圧縮されていないバージョン、つまり「Development」を選択してください。圧縮されていないバージョンを使用することで、JavaScriptコードをエディタで調べることができ、デバッグ処理で役立ちます。</p> |
| |
| <p>NetBeansプロジェクトにjQueryライブラリを追加するには、ライブラリのフォルダをコンピュータ上の場所から単純にコピーし、IDEの「プロジェクト」ウィンドウでプロジェクトに直接貼り付けます。詳細は次のとおりです。</p> |
| |
| <ol> |
| <li id="js">IDEで、<code>js</code>という名前のフォルダを作成し、プロジェクトに追加します。そのためには、IDEのツールバーにある「新規ファイル」(<img alt="「新規ファイル」ボタン" src="../../../images_www/articles/73/web/js-toolkits-jquery/new-file-btn.png">)ボタンをクリックします。または、[Ctrl]-[N] (Macの場合は[⌘]-[N])を押します。</li> |
| |
| <li>「<strong>その他</strong>」カテゴリを選択し、「<strong>フォルダ</strong>」を選択します。</li> |
| |
| <li>フォルダに<code>js</code>という名前を付けます。<br><br><span class="alert">Java Webプロジェクトの場合は、必ずプロジェクトのWebルートに<code>js</code>フォルダを置いてください。これを行うには、「<strong>親フォルダ</strong>」フィールドに「<code>web</code>」と入力します。</span></li> |
| |
| <li>「<strong>終了</strong>」をクリックしてウィザードを終了します。</li> |
| |
| <li>コンピュータにダウンロードしたjQueryライブラリを見つけます。現在、ライブラリの最新バージョンは1.4.2なので、ファイルの名前は通常<code>jquery-1.4.2.js</code>です。ファイルをクリップボードにコピーします([Ctrl]-[C]、Macの場合は[⌘]-[C])。</li> |
| |
| <li>ライブラリ・ファイルを新しい<code>js</code>フォルダに貼り付けます。これを行うには、<code>js</code>を右クリックし、「貼付け」を選択します([Ctrl]-[V]、Macの場合は[⌘]-[V])。フォルダ内に<code>jquery-1.4.2.js</code>ファイル・ノードが表示されます。<br> |
| <table class="margin-around"> |
| <tr> |
| <td><h4>PHPプロジェクト:</h4></td> |
| <td><h4>Java Webプロジェクト:</h4></td> |
| </tr> |
| <tr> |
| <td><img alt="IDEの「プロジェクト」ウィンドウに表示されたjQueryライブラリ" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/jquery-lib-php.png" title="プロジェクトへのjQueryライブラリの直接貼付け"></td> |
| |
| <td><img alt="IDEの「プロジェクト」ウィンドウに表示されたjQueryライブラリ" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/jquery-lib-java.png" title="プロジェクトへのjQueryライブラリの直接貼付け"></td> |
| </tr> |
| </table> |
| </li> |
| |
| <li>エディタで、<code>index.html</code>ファイルからjQueryライブラリを参照します。これを行うには、1組の<code><script></code>タグを追加し、<code>src</code>属性を使用してライブラリの場所を指します。変更場所は<strong>太字</strong>で示されています。 |
| |
| <pre class="examplecode"><html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <strong><script type="text/javascript" src="js/jquery-1.4.2.js"></script></strong> |
| |
| <style type="text/css"> |
| |
| </style> |
| </head> |
| ...</pre></li> |
| |
| <li>ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。</li> |
| </ol> |
| |
| <p>これで、jQueryライブラリが<code>jqproject</code>プロジェクトに追加され、<code>index.html</code>ファイルから参照されるようになりました。jQueryの機能をページに追加し始めることができます。</p> |
| |
| |
| <br> |
| <h2 id="gettingacquainted">jQueryに習熟する</h2> |
| |
| <p>jQueryは、動的に適用されるJavaScriptの属性と動作をDOM (Document Object Model)の要素に結び付けることによって機能します。DOM に要素を追加し、そのプロパティに影響を与えてみましょう。クリックしたときに色が黒から青に変化する見出しを作成します。</p> |
| |
| <ol> |
| <li>構造上は<code><h1></code>要素である、見出しの作成から始めます。「<code>TODO write content</code>」というコメントを除去し、<code><body></code>タグの間に次のように入力します。 |
| |
| <pre class="examplecode"><h1>Test.</h1></pre></li> |
| |
| <li>次に、適用される要素を青で表示するCSSクラスを作成します。ドキュメントの<code><head></code>の<code><style></code>タグの間に次のように入力します。 |
| |
| <pre class="examplecode">.blue { color: blue; }</pre></li> |
| |
| <li>次に、jQueryコマンドを置く場所を設定します。ドキュメントの<code><head></code>に、たとえばjQueryライブラリにリンクしている<code><script></code>タグの後に、新しい<code><script></code>タグのセットを追加します。変更場所は<strong>太字</strong>で示されています。 |
| |
| <pre class="examplecode"><html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <script type="text/javascript" src="js/jquery-1.3.2.js"></script> |
| |
| <strong><script type="text/javascript"> |
| |
| </script></strong> |
| |
| <style type="text/css"> |
| .blue { color: blue; } |
| </style> |
| </head> |
| ...</pre> |
| |
| <p class="tips">エディタ内で右クリックし、「フォーマット」を選択すると、コードの体裁を整えることができます。</p> |
| |
| 追加するjQuery命令は、DOMのすべての要素がブラウザにロードされた後にのみ実行される必要があります。jQuery動作はDOMの要素に接続されるので、期待する結果を得るにはこれらの要素がjQueryで使用できる必要があるため、これは重要です。jQueryは、<code>$</code>で表される、jQueryオブジェクトの後に続く組込みの<code>(document).ready</code>関数を使用して、これを処理してくれます。</li> |
| |
| <li>先ほど作成したscriptタグの間に次の構文を追加します。 |
| |
| <pre class="examplecode">$(document).ready(function(){ |
| |
| });</pre> |
| |
| <p class="tips">この関数には、かわりに使用できる省略形もあります。</p> |
| |
| <pre class="examplecode">$(function(){ |
| |
| });</pre> |
| |
| 使用するjQueryの命令は、JavaScriptメソッドの形式をとり、パラメータの配列を表すオプションのオブジェクト・リテラルを持ちます。また、適切なとき、つまりDOMが完全にロードされた後にのみ実行されるように、<code>(document).ready</code>関数内の中括弧<code>{}</code>の間に置く必要があります。<br><br>この段階で、<code>index.html</code>ファイルは次のようになるはずです。 |
| |
| <pre class="examplecode"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <script type="text/javascript" src="js/jquery-1.3.2.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| |
| }); |
| </script> |
| |
| <style type="text/css"> |
| .blue { color: blue; } |
| </style> |
| </head> |
| <body> |
| <h1>Test.</h1> |
| </body> |
| </html></pre></li> |
| |
| <li>jQueryの構文がどのように機能するかを示すために、基本的なものを試してみましょう。「Test」という語をクリックしたときにそれを青に変化させるjQuery命令をページに追加します。これを行うには、jQueryがマウス・クリックを受け取ったときに、CSSクラス<code>.blue</code>をDOMの<code><h1></code>要素に追加するようにします。<br><br><code>(document).ready</code>関数内の中括弧<code>{}</code>の間に、次のコードを入力します。 |
| |
| <pre class="examplecode">$("h1").click(function(){ |
| $(this).addClass("blue"); |
| });</pre></li> |
| |
| <li>ドキュメントを保存し([Ctrl]-[S]、Macの場合は[⌘]-[S])、エディタ内で右クリックし、「表示」を選択してWebブラウザにロードします。機能するかどうかテストします。「Test」という語をクリックすると、青に変化するはずです。<br><img alt="ブラウザの青いテキスト" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/blue-test.png" title="テキストをクリックしたときの青への変化"><br><br>この例では、CSSセレクタ"<code>h1</code>" に一致する要素が見つかったときに、jQueryの<code>click()</code>関数を使用してjQueryの<code>addClass()</code>関数を呼び出しています。<code>$(this)</code>はコール元の要素を参照します。複数の<code><h1></code>をページに追加した場合、この1セットのルールによりそれらのすべてに同じ動作が適用され、それぞれが独立してjQueryと対話します。(簡単な課題として自分で試すことができます。)</li> |
| |
| <li>関数を単純に連結して、より複雑な動作や、さらには順序付けられた動作を作成できることも、jQueryの重要な特質です。これを示すために、ゆっくりフェード・アウトするjQuery命令を<code>click()</code>関数に追加しましょう。<code>fadeOut("slow")</code> jQuery関数を<code>addClass</code>関数の後に置いて、次のようなコード行にします。 |
| |
| <pre class="examplecode">$(this).addClass("blue").fadeOut("slow");</pre> |
| |
| 完成したjQuery関数は次のようになるはずです。 |
| |
| <pre class="examplecode">$(document).ready(function(){ |
| $("h1").click(function(){ |
| $(this).addClass("blue").fadeOut("slow"); |
| }); |
| });</pre> |
| |
| <li>ブラウザで、ページをリフレッシュし、「Test」をクリックします。青に変化した後、フェード・アウトしてページから消えます。(再度試すには、ページをリフレッシュする必要があります。)</li> |
| </ol> |
| |
| <div class="indent"> |
| <div class="feedback-box float-left" style="width:700px"> |
| <h3>NetBeansのコード補完とAPIサポート</h3> |
| |
| <p>エディタで入力するときは常に、[Ctrl]-[Space]を押してコード補完を呼び出すことができます。IDEでは、選択できる候補のリストが表示されることに加え、リストの項目を定義し、コード・スニペット例を示し、ターゲット・ブラウザのサポートを示すAPIドキュメント・ウィンドウが表示されます。</p> |
| |
| <img alt="エディタに表示された補完ウィンドウとAPIドキュメント・ウィンドウ" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/code-completion.png" title="[Ctrl]-[Space]の押下による、コード補完ウィンドウとAPIドキュメント・ウィンドウの表示"> |
| |
| <p>IDEのJavaScriptオプションのウィンドウを開くと、コード補完およびAPIドキュメントのターゲット・ブラウザを指定できます。「ツール」>「オプション」(Macの場合は「NetBeans」>「プリファレンス」)を選択し、「その他」>「JavaScript」を選択します。</p> |
| </div> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| |
| <br> |
| <h2 id="addingaccordion">プロジェクトへのjQueryアコーディオン・ウィジェットの追加</h2> |
| |
| <p>コアjQueryライブラリに含まれているJavaScript動作を使用して、上記の単純なテストを作成しました。次に、より現実的な例を調べるために、基本的なHTMLマークアップを使用して従業員の連絡先リストを設定しましょう。その後、連絡先リストに<a href="http://jqueryui.com/demos/accordion/">jQueryアコーディオン・ウィジェット</a>を適用します。</p> |
| |
| <p>アコーディオン・ウィジェットは<a href="http://jqueryui.com/">jQuery UIライブラリ</a>の一部です。UIライブラリはコア・ライブラリの最上位に位置し、モジュール式アプローチによってWebページでの対話、ウィジェットおよび効果を有効にできます。ファイル・サイズを最小に保つことができ、jQueryのダウンロード・インタフェース<a href="http://jqueryui.com/download">http://jqueryui.com/download</a>から必要なコンポーネントのみを適宜選択できます。</p> |
| |
| <p>まだ実行していない場合は、<a href="http://jqueryui.com/download">http://jqueryui.com/download</a>にアクセスし、アコーディオン・ナビゲーション・ウィジェットをダウンロードします。アコーディオン・ウィジェットを選択すると、UIコア・ライブラリとウィジェット・ファクトリも自動的に選択されます。また、ダウンロード・ページから、「<code>UI lightness</code>」テーマがデフォルトで選択され、ダウンロード・パッケージに含められます。<a href="#usingcss">次の項で</a>このテーマを連絡先リストに適用します。</p> |
| |
| <ol> |
| <li>次のコードをドキュメントの<code><h1>Test.</h1></code>のかわりに貼り付けます。 |
| |
| <pre class="examplecode"><div id="infolist"> |
| |
| <h3><a href="#">Mary Adams</a></h3> |
| <div> |
| <img src="pix/maryadams.jpg" alt="Mary Adams"> |
| <ul> |
| <li><h4>Vice President</h4></li> |
| <li><b>phone:</b> x8234</li> |
| <li><b>office:</b> 102 Bldg 1</li> |
| <li><b>email:</b> m.adams@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">John Matthews</a></h3> |
| <div> |
| <img src="pix/johnmatthews.jpg" alt="John Matthews"> |
| <ul> |
| <li><h4>Middle Manager</h4></li> |
| <li><b>phone:</b> x3082</li> |
| <li><b>office:</b> 307 Bldg 1</li> |
| <li><b>email:</b> j.matthews@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">Sam Jackson</a></h3> |
| <div> |
| <img src="pix/samjackson.jpg" alt="Sam Jackson"> |
| <ul> |
| <li><h4>Deputy Assistant</h4></li> |
| <li><b>phone:</b> x3494</li> |
| <li><b>office:</b> 457 Bldg 2</li> |
| <li><b>email:</b> s.jackson@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">Jennifer Brooks</a></h3> |
| <div> |
| <img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite"> |
| <ul> |
| <li><h4>Senior Technician</h4></li> |
| <li><b>phone:</b> x9430</li> |
| <li><b>office:</b> 327 Bldg 2</li> |
| <li><b>email:</b> j.brooks@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| </div></pre> |
| |
| 全体を囲んでいる<code><div></code>要素には、<code>id</code>属性と値<code>infolist</code>が指定されています。この<code><div></code>要素内に、<code><h3></code>タグと<code><div></code>タグが4セットあり、イメージと順序なしリストが含まれています。</li> |
| |
| <li>前述のマークアップにいくつかのインラインCSSルールを追加します。テストの目的で作成した<code>.blue</code>スタイル・ルールを削除します。その場所に、次のルールを追加します。変更場所は<strong>太字</strong>で示されています。 |
| |
| <pre class="examplecode"><style type="text/css"> |
| <strong>ul {list-style-type: none} |
| img {padding-right: 20px; float:left} |
| |
| #infolist {width:500px}</strong> |
| </style></pre> |
| |
| <p class="tips"><code><style></code>タグ内に入力するときは、[Ctrl]-[Space]を押して、IDEに組み込まれているCSSコード補完を利用します。</p> |
| </li> |
| |
| <li>ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。</li> |
| |
| <li>次に、上記のコード・フラグメントで参照されているJPG人物写真を追加します。<a href="#requiredSoftware">先にダウンロードしたプロジェクト・リソース</a>から<code>pix</code>ディレクトリを取出し、ディレクトリ全体をプロジェクト・フォルダにコピーして<code>index.html</code>と同じレベルに置きます。まもなく、NetBeansで「プロジェクト」ウィンドウが自動的に更新され、新しいディレクトリがプロジェクトに手動で追加されたことが反映されます。</li> |
| |
| <li>ブラウザに切り替え、ページをリフレッシュします。<br><img alt="ブラウザに表示された構造化リスト" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/structured-list.png" title="ブラウザに表示された構造化リスト"><br><br>このドキュメントにはいくつか問題があり、対処していきます。まず、探している人物をすばやく見つけるためにリストに目を通すことが、必要以上に困難になっています。ページをスクロールし、直接には関心のない多量の情報を目で調べる必要があります。リスト内の連絡先が4件なら扱えるかもしれませんが、たとえば50件に増えると、リストははるかに使用しづらくなるでしょう。次に、ドキュメントは視覚的に単純で、ほとんどのWebサイト・デザイン、特に、グラフィックの個性の強いデザインとは外観的に調和しないでしょう。jQueryアコーディオン・ウィジェットをjQuery UIのデフォルト・テーマと組み合せて使用することで、これらの問題に対処します。</li> |
| |
| <li>アコーディオン効果を生成するには、アコーディオン・ウィジェットをダウンロードしたコンピュータ上の場所に移動します。ダウンロードしたフォルダの中に、「<code>development-bundle</code>」という名前のフォルダがあります。<code>development-bundle</code>フォルダ内の<code>ui</code>フォルダを展開し、次の3つのスクリプトを見つけます。 |
| |
| <ul> |
| <li><code>jquery.ui.core.js</code></li> |
| <li><code>jquery.ui.widget.js</code></li> |
| <li><code>jquery.ui.accordion.js</code></li> |
| </ul> |
| |
| <p class="tips">Developmentバージョンのツールキットのスクリプトは<em>最小化されていない</em>ため、コードをエディタで表示して人間が読むことができます。通常、本番の準備ができたアプリケーションに使用する場合は、ダウンロード時間の節約のために、圧縮され最小化されたバージョンに切り替えることをお薦めします。</p></li> |
| |
| <li>3つのスクリプトをコピーし([Ctrl]-[C]、Macの場合は[⌘]-[C])、IDEに戻り、<code>jqproject</code>フォルダ内に<a href="#js">先に作成した</a><code>js</code>フォルダに貼り付けます。<br><br> [Ctrl]-[V] (Macの場合は[⌘]-[V])を押すか、<code>js</code>フォルダを右クリックして「貼付け」を選択することで、貼付けできます。 |
| |
| <p class="tips"><code>development-bundle</code>フォルダ内の<code>ui</code>フォルダには、<code>jquery-ui-1.8.1.custom.js</code>という名前のファイルもあります。このファイルは、前述の3つのスクリプトを1つのスクリプトにまとめたものです。3つの個別のスクリプトのかわりに、このファイルをプロジェクトに貼り付けることもできます。</p></li> |
| |
| <li><code>index.html</code>ページでスクリプトを参照するために、これらの新しいJavaScriptファイルにリンクする3つの<code><script></code>タグを入力します。<code><script></code>タグは、コアjQueryライブラリ<code>jquery-1.4.2.js</code>を参照する<code><script></code>タグの直後に追加できます。既存の<code><script></code>タグをモデルとして使用します。</li> |
| |
| <li><code>(document).ready</code>関数内に作成したテスト・コードを削除します。これはもう必要ありません。<br><br>これで、ファイルの<code><head></code>タグは次のようになるはずです。 |
| |
| <pre class="examplecode"><head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| |
| <script type="text/javascript" src="js/jquery-1.4.2.js"></script> |
| <script type="text/javascript" src="js/jquery.ui.core.js"></script> |
| <script type="text/javascript" src="js/jquery.ui.widget.js"></script> |
| <script type="text/javascript" src="js/jquery.ui.accordion.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| |
| }); |
| </script> |
| </head></pre></li> |
| |
| <li>静的なスタイルなしリストにアコーディオン動作を与えるには、1行のjQueryコードを追加するのみで済みます。次の行を<code>(document).ready</code>関数に追加します。変更場所は<strong>太字</strong>で示されています。 |
| |
| <pre class="examplecode">$(document).ready(function(){ |
| <strong>$("#infolist").accordion({ |
| autoHeight: false |
| });</strong> |
| });</pre> |
| |
| このコード行で、<code>#infolist</code>は、<code>id</code>属性と値<code>infolist</code>を持つ一意のDOM要素、つまり連絡先リストに接続されているCSSセレクタです。これは、典型的なJavaScriptドット表記法(「<code>.</code>」)を使用して、<code>accordion()</code>メソッドを使用してこの要素を表示するjQuery命令に接続されています。 |
| |
| <p class="tips">上記のスニペットでは、「<code>autoHeight: false</code>」も指定しています。これは、アコーディオン・ウィジェットが各パネルの高さをマークアップ内で最も高いコンテンツ部分に基づいて設定することを防止します。詳細は、<a href="http://docs.jquery.com/UI/Accordion">アコーディオンのAPIドキュメント</a>を参照してください。</p></li> |
| |
| <li>ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。</li> |
| |
| <li>Webブラウザに戻り、リフレッシュします。いずれかの名前(最上部のもの以外)をクリックし、アコーディオン効果のアクションを確認します。jQueryアコーディオン・ウィジェットは、DOMの処理およびユーザーのマウス・クリックに対する応答の詳細をすべて処理します。<br> <img alt="ブラウザに表示されたアコーディオン・リスト" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/accordion-list.png" title="ユーザーのクリックを処理し、アコーディオン効果を生成するアコーディオン・ウィジェット"> |
| </li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="usingcss">jQueryのデフォルト・テーマを使用したスタイル拡張</h2> |
| |
| <p>これで、プロジェクトは必要な動作を備えましたが、かなり単純に見え、まだ見た目が整っていません。jQueryのデフォルトの「<code>UI lightness</code>」テーマを取り入れることで、これに対処しましょう。</p> |
| |
| <ol> |
| <li>アコーディオン・ウィジェットをダウンロードしたコンピュータ上の場所に移動します。ダウンロードしたフォルダの中で、「<code>development-bundle</code>」>「<code>themes</code>」>「<code>ui-lightness</code>」フォルダを展開します。</li> |
| |
| <li><code>ui-lightness</code>フォルダ内で、<code>jquery-ui-1.8.1.custom.css</code>ファイルと、テーマを正しくレンダリングするために必要なすべてのイメージが含まれている<code>images</code>フォルダをコピーします([Ctrl]-[C]、Macの場合は[⌘]-[C])。</li> |
| |
| <li>IDEで、<code>css</code>という名前の新しいフォルダをプロジェクト内に作成します。このフォルダに、アコーディオン・ウィジェット用の「<code>UI lightness</code>」テーマを格納します。<br><br>これを行うには、プロジェクト・ノードを右クリックし、「新規」>「フォルダ」を選択します。(「フォルダ」がオプションとして表示されない場合は、IDEのツールバーにある「新規ファイル」(<img alt="「新規ファイル」ボタン" src="../../../images_www/articles/73/web/js-toolkits-jquery/new-file-btn.png">)ボタンをクリックし、新規ファイル・ウィザードで「その他」>「フォルダ」を選択します。)フォルダに<code>css</code>という名前を付け、<code>index.html</code>ファイルと同じディレクトリ内に置きます。<br><br><span class="alert">Java Webプロジェクトの場合は、必ずプロジェクトのWebルートに<code>css</code>フォルダを置いてください。これを行うには、「<strong>親フォルダ</strong>」フィールドに「<code>web</code>」と入力します。</span></li> |
| |
| <li>2つの項目をこの新しい<code>css</code>フォルダに直接貼り付けます。これを行うには、<code>css</code>フォルダ・ノードを右クリックし、「貼付け」を選択します。プロジェクト・フォルダは次のようになるはずです。<br> |
| <table class="margin-around"> |
| <tr> |
| <td><h4>PHPプロジェクト:</h4></td> |
| <td><h4>Java Webプロジェクト:</h4></td> |
| </tr> |
| <tr> |
| <td><img alt="「プロジェクト」ウィンドウ - プロジェクトに挿入されたjQueryデフォルト・テーマ" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/proj-win-php.png" title="プロジェクトに挿入されたjQueryデフォルト・テーマ"></td> |
| |
| <td><img alt="「プロジェクト」ウィンドウ - プロジェクトに挿入されたjQueryデフォルト・テーマ" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/proj-win-java.png" title="プロジェクトに挿入されたjQueryデフォルト・テーマ"></td> |
| </tr> |
| </table> |
| </li> |
| |
| <li><code>index.html</code> Webページ内から<code>jquery-ui-1.8.1.custom.css</code>ファイルを参照します。ページのhead内に次の<code><link></code>タグを追加します。 |
| |
| <pre class="examplecode"><link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css"></pre></li> |
| |
| <li>ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。</li> |
| |
| <li>Webブラウザに戻り、ページをリフレッシュします。これで、jQueryのデフォルト・テーマを使用してリストが表示されるようになり、スタイル指定のない単純なリストに比べて外観が改善されました。<br> <img alt="デフォルトのjQueryテーマを使用してブラウザに表示されたアコーディオン・リスト" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/ui-lightness-theme.png" title="jQueryデフォルト・テーマで拡張されたアコーディオン・ウィジェットの外観"> |
| </li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="summary">サマリー</h2> |
| |
| <p>このチュートリアルでは、プロジェクトにjQueryライブラリを追加する方法と、jQuery構文を使用していくつかの基本的な命令を記述する方法を学びました。また、jQueryがCSSセレクタに似た変数を使用してDOM (Document Object Model)と対話し、Webページの要素の見た目と動作に影響を与える仕組みも学びました。</p> |
| |
| <p>最後に、単純な連絡先リストにアコーディオン・ウィジェットを適用することで、jQuery UIライブラリの機能を簡易に調査しました。アコーディオン効果を実装した後、jQueryのデフォルトのスタイル・テーマをリストに適用しました。jQueryを使用すると動的なWebページを作成できると同時に、全体的な見た目と使いやすさを改善できるという利点がよくわかったはずです。</p> |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback: Using jQuery to Enhance the Appearance and Usability of a Web Page">このチュートリアルに関するご意見をお寄せください</a> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| <br> |
| <h2 id="seealso">関連項目</h2> |
| |
| <p>IDEでのHTML5アプリケーションおよびJavaScriptのサポートの詳細は、<a href="https://netbeans.org/">netbeans.org</a>で次のソースを参照してください。</p> |
| |
| <ul> |
| <li><a href="../webclient/html5-gettingstarted.html">HTML5アプリケーションの開始</a>。ChromeのNetBeans Connector拡張機能をインストールし、単純なHTML5アプリケーションを作成および実行する方法を示すドキュメントです。</li> |
| <li><a href="../webclient/html5-editing-css.html">HTML5アプリケーションでのCSSスタイル・シートの操作</a>。このチュートリアルで作成したアプリケーションを継続するドキュメントで、IDEでCSSのウィザードおよびウィンドウのいくつかを使用する方法、およびChromeブラウザの「検査」モードを使用してプロジェクト・ソース内の要素をビジュアルに特定する方法を示します。</li> |
| <li><a href="../webclient/html5-js-support.html">HTML5アプリケーションでのJavaScriptのデバッグとテスト</a>。IDEでJavaScriptファイルをデバッグおよびテストするのに役立つツールをIDEが提供する方法を示すドキュメントです。</li> |
| <li><a href="js-toolkits-dojo.html">JSONを使用したDojoツリーのArrayListへの接続</a>。Dojoツールキットの概要を説明し、AjaxとJSONを使用してバックエンド・サーバーと対話する手順を示します。</li> |
| |
| |
| <li><a href="../../docs/php/ajax-quickstart.html">Ajax入門(PHP)</a>。PHPテクノロジを使用した単純なアプリケーションのビルド方法を示すと同時に、Ajaxリクエストの基盤となるプロセス・フローについて解説します。</li> |
| |
| <li><a href="ajax-quickstart.html">Ajax入門(Java)</a>。サーブレット・テクノロジを使用した単純なアプリケーションのビルド方法を示すと同時に、Ajaxリクエストの基盤となるプロセス・フローについて解説します。</li> |
| |
| </ul> |
| |
| |
| <p>jQueryの詳細は、公式ドキュメントを参照してください。</p> |
| |
| <ul> |
| <li>公式ホーム・ページ: <a href="http://jquery.com">http://jquery.com</a></li> |
| <li>UIホーム・ページ: <a href="http://jqueryui.com/">http://jqueryui.com/</a></li> |
| <li>チュートリアル: <a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a></li> |
| <li>ドキュメントのメイン・ページ: <a href="http://docs.jquery.com/Main_Page">http://docs.jquery.com/Main_Page</a></li> |
| <li>UIデモおよびドキュメント: <a href="http://jqueryui.com/demos/">http://jqueryui.com/demos/</a></li> |
| </ul> |
| |
| <br> |
| |
| </body> |
| </html> |
