追加教材
jQueryプライグインの連携

OutSystemsの上級開発者の間では、既製のjQueryコンポーネントをOutSystemsアプリケーションにシームレスに連携させるシナリオが非常によく見られます。ここでは、例を使用してその方法を学習します。


ポルトガルにある野生動物保護区であるバドカサファリパークでは、Webサイトを改善する必要がありました。不足していた機能の1つは、園内に生息する動物の写真を集めたアルバムがないことでした(こちらのベースとなる.omlを参照)。Webを検索した後、この例からヒントを得てhttps://github.com/ryrych/rcarouselにあるこの美しいウィジェットを組み込むことにしました。


(上記の)RCarousel jQueryプラグインをOutSystemsアプリケーションに組み込む方法は、以下のとおりです。

 

1. プラグインをダウンロードする

最初に、プラグインコードをダウンロードします。通常、これは複数のファイルを含むZIPファイルとして提供されています。

なお、コンポーネントを再利用してパブリッシュする場合は、必ずライセンスと著作権を確認する必要があります。

 

2. プラグインリソースをeSpaceに追加する

プラグインを入手したら、OutSystemsプロジェクトに含める必要がある一連のファイル(CSS、JavaScript、画像など)を準備する必要があります。

 

こうしたリソースを利用する方法の1つに、これらのファイルをリソースとしてインポートし、JavaScriptまたはCSSで参照する方法があります。ただし、この方法ではリソースがコンシューマに表示されないため、ウィジェットを他のeSpaceと共有することが難しくなります。

 

代わりに、jQueryリソースごとに新しいWebブロックを作成し、WebブロックのJavaScriptにファイルの内容をすべてダンプする方法が最適です。この方法では、必要に応じて任意のコンシューマeSpaceで簡単に(OutSystems自体のRichWidgetとほぼ同じように)プラグインを利用できるようにすることができます。また、テーマの通常のページレイアウトに追加し、そのレイアウトを使用するすべてのページに読み込ませることもできます。

 

0201

 

3. ウィジェットを含めるWebブロックを作成する

次に、新しいWebブロックを作成して、ウィジェットの構成、スタイル、jQueryコードをすべて挿入します。この方法では、ウィジェットのコードが1箇所だけで完全にカプセル化されるため、必要に応じた再利用や変更が簡単になります。

 

最初に、ウィジェットの動作に必要なストラクチャを作成します。ここでは、公式サンプルのソースコードを見てみます。Containerウィジェットの特定のレイアウト(DIV)内に画像をネストする必要があることがわかります。

 

03

 

このウィジェットの動作方法を変えたい場合、Webブロックの入力パラメータを使用して、jQueryプラグインの特定の側面を制御することができます。たとえば、アニメーション速度を制御したい場合、Webブロックの任意パラメータであるSpeedを使用して制御することができます。

 

4. ウィジェットのスタイルを設定する

スタイルを有効にするには、必要なCSSをWebブロックのスタイルシートにコピーする必要があります。また、必要なスタイルプロパティを上記のコンテナに忘れずに割り当てます。

 

04.05

 

注記:  追加スタイルをコピーして調整しています。これは、元のプラグインの特定のCSSをセレクタで要素ID(#carouselなど)が使用されており、OutSystemsプラットフォームではこれをCSSクラス(carouselなど)に置き換えるのが最適であるためです。詳細については、OutSystemsアプリケーションのWebデザイン実装ガイドラインに関するこちらのスレッドをご覧ください。

 

5. 必要なjQueryを実行する

最後に、実際のjQueryコードが想定どおりに動作するようにします。通常、プラグインには非常に便利なサンプルコード群が同梱されています。これらのサンプルの詳細については、プラグインのWebサイトをご覧ください。

 

まず、ウィジェットのjQueryコードを含める必要があります。リソースの方法と同様に、すべてのソースコードをWebブロックのJavaScriptプロパティにコピーする必要があります。

 

次に、コンポーネントを本実装します。これを実行するには、通常のjQueryプラグインと同様にインスタンス化する必要があります。通常、こうした手順の詳細については、プラグインのサイトにあるドキュメントやサンプルで説明されています。

 

OutSystemsプラットフォームでページの描画中にJavascriptコードを実行するには、Webブロックの最後でExpressionウィジェット(Escape ContentプロパティをNoに設定)を使用し、そこに呼び出しコードを貼り付けます。

 

特定のランタイム値を調整して画像サイズや表示される画像の数などを調整する場合、式は以下のようになります。

 


基本的な手順はこれで完了です。eSpaceをパブリッシュし、jQueryによる新しいウィジェットを使用できるようになりました。

このコースのサポートが必要な場合は、 フォーラムをご利用ください。 | トレーニングについてアイデアやご意見がありましたら、 こちらにお寄せください。