ヘッダーをスキップ
Oracle® Application Expressアプリケーション・ビルダー・ユーザーズ・ガイド
リリース4.2 for Oracle Database 12c
B71338-03
  目次へ移動
目次		 索引へ移動
索引
前
前 		 次
次		  

10.12 jQueryとjQuery UIサポートについて

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

内容は次のとおりです。

10.12.1 使用できる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とこれらの特定のコンポーネントの詳細は、次のjQuery UIのサイトを参照してください。

http://jqueryui.com/

10.12.1.1 その他のjQuery UIコンポーネントへのアクセス

Oracle Application Expressには、jQuery UIライブラリ全体は含まれていません。関連ファイルを含めるだけで、jQuery UIの他のコンポーネントを簡単にアクティブ化できます。たとえば、Tabs jQuery UI Widgetをアプリケーションに含めるには、ページ・テンプレートの<head>...</head>タグで囲まれたヘッダーに、次の例に示す項目を含めます。

<link href="#IMAGE_PREFIX#libraries/jquery-ui/1.8.22/themes/base/minified/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css" />
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8.22/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>

ヒント:

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

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

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

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

内容は次のとおりです。

10.12.2.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リリース4.2に含まれる新しいバージョンの1.7.1ではありません。


    ヒント:

    Oracle Application Expressリリース4.2にはjQueryバージョン1.6.2が含まれるため、ご使用の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は引き続きそのバージョンを指すことに注意してください。

10.12.2.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);

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

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

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

  前
前 		 次
次
  目次へ移動
目次		 索引へ移動
索引