プライマリ・コンテンツに移動

Oracle® Application Expressアプリケーション・ビルダー・ユーザーズ・ガイド リリース5.1 E83810-03 |
| 目次 | 索引

前 | 次 |

# 18.3 jQueryおよびjQuery UIサポートの理解

Oracle Application Expressには、jQuery 1.11.3および2.2.3、jQuery UI 1.10.4、jQuery Mobile - 1.4.5 JavaScriptライブラリが含まれています。この項では、jQuery UIで使用できる機能と、JavaScriptコードでjQueryライブラリを参照する場合のベスト・プラクティスについて説明します。

トピック:

- Application Expressリリース4.Xから5.1にアップグレードする場合の互換性の問題について
- 使用できるjQuery UI機能について
- JavaScriptコードでのjQueryライブラリの参照

## 18.3.1 Application Expressリリース4.Xから5.1にアップグレードする場合の互換性の問題について

Oracle Application Expressリリース4.Xから5.1へのアップグレードで、Oracle Application Expressが使用するjQueryおよびjQueryUIのJavaScriptライブラリが次のように更新されました。

- jQueryは、バージョン1.7.1からバージョン2.2.3に更新されました。

- jQueryUIは、バージョン1.8.14からバージョン1.10.4に更新されました。

ヒント:

バグ修正および拡張のリストは、次のjQueryおよびjQueryUIのリリース・ノートを参照してください。

- `http://docs.jquery.com/Downloading_jQuery#Current_Release`

- `http://jqueryui.com/docs/Changelog`

このアップグレードは、次のように既存のアプリケーションに影響する場合があります。

jQueryバージョンの更新で考えられる影響

アプリケーションのJavaScriptコードでjQueryを使用している場合、jQueryバージョンの更新による動作変更によって影響を受ける場合があります。最も大きな影響は、jQuery `attr`メソッドの使用です。このメソッドでは、ある状況下では若干異なる値が返されることがあります。これについての詳細およびその他の変更については、jQueryの変更ログを確認してください。

アプリケーションへの影響が懸念される場合、次の対処に従ってください。

1. コードで以前のバージョンのjQueryにフォールバックします。「ページ・テンプレート」→「ヘッダー」で`<head>…</head>`タグに次を追加することにより、jQuery 1.7.1およびjQuery UI 1.8.14を含めることができます(`#HEAD#`置換文字列の直後のライブラリを追加する前に追加することが重要です)。

       ...
           #HEAD#
           <script src="#IMAGE_PREFIX#libraries/jquery/1.7.1/jquery-1.7.1.min.js" type="text/javascript"></script>
           ...

   Oracle Application Expressは、この後も`#APEX_JAVASCRIPT#`置換の一部としてjQuery 2.1.3を含めますが、後で1.7.1を含めるということは、変数`$`および`jQuery`がjQueryバージョン1.7.1を指すため、引き続きアプリケーションで使用できることを意味します。

   ヒント:

   jQuery 1.7.1は引き続きOracle Application Express配布に含まれるため、Webサーバーに追加する必要はありません。

2. jQueryコードを確認および再テストし、変更の影響を受けているか確認します。これによって最初に必要な作業は増えますが、2つの利点があります。1つ目は、アプリケーションにロードするjQueryライブラリのバージョンが1つでよいことです。2つ目は、最新バージョンの拡張を使用できるというメリットです。

jQuery UIの更新で考えられる影響

Oracle Application Expressに、デフォルトで含まれていないjQuery UIコンポーネントを含めている場合は、互換性の問題が発生することがあります。ページ・サイズおよびページ・プロセスを削減するために、Oracle Application Expressには、Oracle Application Expressの基本機能で使用されるjQuery UIコンポーネントのみが含まれています。これらのデフォルト・コンポーネントはすべて、jQuery UI 1.10.4を使用しています。古いバージョンのjQuery UIを参照している場合、互換性の問題が発生することがあります。

デフォルトのコンポーネントはすべてjQuery UI 1.10.4を使用していますが、以前から含まれているコンポーネントは古いバージョンを参照している可能性があります。これは、すでに含まれているjQuery UIコンポーネントのバージョンと、デフォルトで含まれている更新後のjQueryおよびjQuery UIバージョンの間に互換性の問題がある可能性があることを示します。

アプリケーションへの影響が懸念される場合の対処として、次の2つのオプションがあります。

1. コードで以前のバージョンのjQueryおよびjQuery UIにフォールバックします。「ページ・テンプレート」→「ヘッダー」で`<head>…</head>`タグに次を追加することにより、jQuery 1.7.1およびjQuery UI 1.8.14を簡単に含めることができます(`#HEAD#`置換文字列の直後のライブラリを追加する前に追加することが重要です)。

       ...
           #HEAD#
           <script src="#IMAGE_PREFIX#libraries/jquery/1.7.1/jquery-1.7.1.min.js" type="text/javascript"></script>
           <script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8.14/ui/minified/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
           ...

   Oracle Application Expressには、`#APEX_JAVASCRIPT#`置換の一部としてjQuery 2.1.3およびjQuery UI 1.10.4が引き続き含まれますが、古いバージョンは、参照する可能性のある他のjQuery UIコンポーネントとの互換性のためにのみ含まれています。

   ヒント:

   jQuery 2.1.3およびjQuery UI 1.10.4は引き続きOracle Application Expressに含まれるため、Webサーバーに追加する必要はありません。

2. jQuery UIコードを確認し、すべてのjQuery UIコンポーネントがバージョン1.10.4を参照するように更新し、再テストします。この方法によって最初に必要な作業は増えますが、アプリケーションにロードするjQueryライブラリとjQuery UIライブラリのバージョンが1つでよいというメリットが得られます。また、最新バージョンの拡張を使用できるというメリットもあります。

   参照が、将来のバージョン変更による影響に対応できるように、JavaScriptコードを含むファイル、およびアプリケーション・ビルダーのアプリケーション検索で、`libraries/jquery-ui/`を検索し、`#JQUERYUI_DIRECTORY#`に置き換えることをお薦めします。

## 18.3.2 使用できるjQuery UI機能について

Oracle Application Expressでは、Oracle Application Expressの基本機能に必要なjQuery UIのコンポーネントのみがロードされます。Oracle Application ExpressにjQuery UIライブラリ全体を含めると、ページ・ロードごとにダウンロードと処理にかかる時間が大幅に増大するため、ライブラリ全体は含まれません。Oracle Application Expressにデフォルトで含まれるコンポーネントは次のとおりです。

- jQuery UI Core: すべての相互作用とウィジェットに必要です。

- Query UI Widget: すべてのウィジェットの基礎となるウィジェット・ファクトリです。

- jQuery UI Mouse: マウス・ウィジェットは、すべての相互作用とマウスによる相互作用が頻繁に行われるウィジェット用の基本クラスです。

- jQuery UI Position: 要素の他の要素に対する相対位置を設定するためのユーティリティ・プラグインです。

- jQuery UI Draggable: ページ上の任意の要素をドラッグ可能にします。

- jQuery UI Resizable: ページ上の任意の要素をサイズ変更可能にします。

- jQuery UI Dialog: ドラッグ可能でありサイズ変更可能なダイアログ内で既存のマークアップを開きます。

- jQuery UI Datepicker: 入力から切り替えられるかインラインで表示できる日付ピッカーです。

- jQuery UI Effects: モーフィングやイージングなどのjQueryの内部エフェクトを拡張し、他のすべてのエフェクトで必要です。

- jQuery UI Effects Drop: 要素を一方向に移動させながら同時に非表示にするドロップ・アウト・エフェクトです。

- jQuery UI Tooltip: カーソルをあわせるか、フォーカスすると、要素の追加情報を表示します

jQuery UIとこれらの特定のコンポーネントの詳細は、次のjQuery UIのサイトを参照してください。

    http://jqueryui.com/

トピック:

- その他のjQuery UIコンポーネントへのアクセスについて

### 18.3.2.1 その他のjQuery UIコンポーネントへのアクセスについて

Oracle Application Expressには、jQuery UIライブラリ全体は含まれていません。関連ファイルを含めるだけで、jQuery UIの他のコンポーネントを簡単にアクティブ化できます。たとえば、アプリケーションにjQuery UI Widgetのタブを含めるには、ユーザー・インタフェース定義に次の内容を含めます。

カスケード・スタイルシートを設定する場合:

    #JQUERYUI_DIRECTORY#themes/base/#MIN_DIRECTORY#jquery.ui.tabs#MIN#.css

JavaScriptを設定する場合:

    #JQUERYUI_DIRECTORY#ui/#MIN_DIRECTORY#jquery.ui.tabs#MIN#.js

ヒント:

前述のデフォルト・コンポーネントのリストに示すように、UI CoreとUI Widgetのタブの依存性はOracle Application Expressにデフォルトで含まれているため、この依存性を含める必要はありません。

## 18.3.3 JavaScriptコードでのjQueryライブラリの参照

独自のJavaScriptコードでjQueryライブラリへの`$`、`jQuery`および`apex.jQuery`参照をいつ使用するかは、どこでそれを使用するかによって決まります。

Oracle Application Expressのより新しいバージョンには、jQueryライブラリの更新バージョンが含まれていることがあります。新しいバージョンのjQueryがリリースされる際に、既存の機能を無効にする変更が導入されることがあります。これらの問題は、特定のバージョンのリリース・ノートの変更ログに記載されています。新しいバージョンのOracle Application Expressにアップグレードする際に問題が発生する可能性を最小限に抑えるには、後続の項で説明するベスト・プラクティスに従うことをお薦めします。

トピック:

- アプリケーションでのJavaScriptコードの管理について
- プラグインでのJavaScriptコードの使用について

### 18.3.3.1 アプリケーションでのJavaScriptコードの管理について

アプリケーション内の独自のJavaScriptコードでjQueryを使用する場合は、次の理由により、`jQuery`またはショートカット`$`を使用することをお薦めします。

1. Oracle Application Expressにアップグレードする場合、新しいバージョンのjQueryにより既存のコードが無効化される可能性があります。

   新しいバージョンのjQueryにあわせて、アプリケーションの重点的なテストと大幅な再作成を行わなくて済むようにするには、Oracle Application Expressリリース4.1に付属の古いバージョンのjQueryを、ページ・テンプレートの`<head>`…`</head>`タグで囲まれたヘッダーの`#HEAD#`置換文字列の後に入れます。次に例を示します。

       ...
       #HEAD#
       ...
       <script src="#IMAGE_PREFIX#libraries/jquery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script>
       ...

   この例では、jQueryライブラリへの参照である「$」および「jQuery」が指し示すのは、jQueryバージョン1.6.2 (Oracle Application Expressリリース4.1に含まれるバージョン)であり、Oracle Application Expressリリース5.0に含まれる新しいバージョンの2.1.3ではありません。

   ヒント:

   Oracle Application Expressリリース5.0にはjQueryバージョン2.1.3が含まれるため、ご使用のWebサーバーにこれを追加する必要はありません。

   追加のコード変更は必要ありません。この方法により、新しいバージョンのApplication Expressにアップグレードする際に、jQueryのカスタム・コードが無効化されるリスクが最小限に抑えられます。

2. 使用しているjQueryプラグインに異なるバージョンのjQueryが必要であり、そのバージョンを自分のアプリケーションの他のコードで使用する場合。

   この場合、(新しいまたは古い)バージョンのjQueryライブラリを、前述のステップで説明したようにページ・テンプレートに含めることができます(つまり、`#HEAD#`置換文字列の後ろに置きます)。変数`$`と`jQuery`が、適切なjQueryバージョンを指すようになります。

3. 使用しているjQueryプラグインに異なるバージョンのjQueryが必要であるが、そのバージョンをアプリケーションの他のコードでは使用しない場合。

   たとえば、jQueryプラグインにはjQuery 1.6.2が必要だが、Oracle Application Expressに付属のjQuery 1.7.1を使用するとします。jQueryバージョン1.6.2を、ページ・テンプレートの`<head>`…`</head>`タグ内のヘッダーで、`#HEAD#`置換文字列の前に含めます。

   この場合、プラグイン固有のjQueryバージョン(たとえば、`jQuery_1_6_2`)を格納するための新しい変数を定義してそれを割り当てるJavaScriptスニペットも必要です。次に例を示します。

       ...
       <script src="#IMAGE_PREFIX#libraries/jquery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script>
       <script type="text/javascript">
           var jQuery_1_6_2 = jQuery;
       </script>
       ...
       #HEAD#
       ...

   jQuery_1_6_2変数を使用するようにjQueryプラグインの初期化コードを変更する必要もあります。たとえば、次のようにします。

       (function($) {
         ... plugin code ...
       })(jQuery_1_6_2);

   jQueryプラグインの初期化の詳細は、プラグインでのJavaScriptコードの使用についてを参照してください。

ヒント:

これらのすべてのシナリオで、必要なバージョンを指定するために、アプリケーションで変数`$`と`jQuery`を使用します。Oracle Application Expressに付属のjQueryのバージョンに依存する組込み機能をサポートするために、変数`apex.jQuery`は引き続きそのバージョンを指すことに注意してください。

### 18.3.3.2 プラグインでのJavaScriptコードの使用について

Oracle Application ExpressプラグインでjQueryを使用する場合は、jQueryライブラリへの`apex.jQuery`参照を使用することをお薦めします。この参照には、`apex.jQuery`参照を使用するために含まれているjQueryプラグインの初期化コードの変更も含める必要があります。

jQueryプラグインのJavaScriptコードを見ると、そのほとんどは次のコード構造を持っていることがわかります。

    (function($) {
            ... plugin code ...
        	})(jQuery);

この構造はパラメータ`$`を持つ無名のJavaScript関数を宣言し、この関数はすぐにコールされて、現在のjQuery変数のパラメータ値が渡されます。jQueryショートカットとしての`$`の使用は、安全な方法で実装されているため、`$`がまだ主要jQueryライブラリの参照に使用されているという事実に依存しなくてもよくなります。

jQueryプラグイン・ファイルをコピーして、`apex`という接頭辞を付けることをお薦めします(たとえば、`apex.jquery.maskedinput-1.2.2.js`)。これにより、このファイルが変更されたことがOracle Application Expressに明確に示されます。その後、次の例に示すように、初期化コードで参照を`jQuery`から`apex.jQuery`に変更します。

    (function($) {
      ... plugin code ...
    })(apex.jQuery);

この方法を使用する他の理由

プラグイン開発者は、テストにかける労力を最小限に抑えながら、完全に制御可能な環境を構築することを希望しています。前述の項で説明した推奨事項に従っていないと仮定してみます。プラグインで異なるバージョンのjQueryが使用されているとしたら、どうなるでしょうか。

この場合、奇妙なプラグイン動作を引き起こす可能性があります。さらに、作成したプラグインが実際に異なるバージョンのjQueryを参照しているかどうかが不明なため、その動作を再現することが困難になる可能性があります。`apex.jQuery`ネームスペースを使用することにより、開発者にとっての問題が発生する可能性が低減すると同時に、ユーザーに対して問題が発生する可能性も低減します。この方法により、サポート対象のOracle Application Expressバージョンでプラグインをテストできます。