OutSystemsで複数のJavaScript／CSSから成る外部ライブラリを導入する方法

Posted at 2025-12-31

はじめに

OutSystems では外部ライブラリを導入することができますが、
複数の JS / CSS / 画像リソースを持つライブラリの導入については、
情報が少なく、ハマりやすいポイントが多いと感じました。

特に企業案件では、以下のような制約があることが多いと思います。

その結果、

「ライブラリ自体は問題なさそうなのに、なぜか画面に反映されない」

という状況に陥りがちです。

本記事では、
jQuery + プラグイン（複数の JS / CSS / 画像を含むライブラリ）を
CDN を使わずに OutSystems（Reactive Web）へ取り込み、
実際に動作するプロトタイプを作成するまでの手順をまとめます。

Reactive Web 特有のハマりポイントや考え方も含めて解説します。

今回は以下のファイルを使用します。

※ jQuery 本体は OutSystems に標準で含まれているため追加しません。

Service StudioでjQueryとの依存を追加
Service Studioの Interface > Scripts > (右クリック)Import Script でjquery-ui.min.jsを追加
Service Studioの Data > Resources > (右クリック)Import Script でjquery-ui.min.cssとimages下のpngを追加
階層は自由です。今回はライブラリごとにフォルダ分けるイメージでやります。
Resourcesに追加したリソースのデプロイ先を指定
Target Directoryに指定がなければScriptの下に展開されます。
今回、CSSはTarget Directoryの指定なし、ImagesフォルダにあったpngだけImagesの下に入るように設定します。
Resourcesでは階層を作れませんが、ここで階層を再現することができます。

ScreenName

@import url("/<モジュール名>/jquery-ui.min.css");

画面のRequired ScriptsにjQueryとjquery-ui.min.jsを設定
画面のOnRenderで先ほどクラスを付けた要素に対して以下のJavaScriptを設定
OnRenderが適切かどうかは導入するライブラリによると思います。
ライフサイクルを意識しながら適切なタイミングで呼ぶようにしてください。

OnRender

$(function() {
    $(".js-datepicker").datepicker();
});

ここまで出来たらPublishしましょう！

InputWidgetをクリックするとカレンダーが出るようになったかと思います。

今回は練習として jQuery UI の Datepicker を使用しましたが、
他の外部ライブラリでも JavaScriptやCSS から参照されるリソースの階層構造を意識すれば、
同様の手順で導入できると考えています。

なお、OutSystems では DOM を直接操作するライブラリの使用は
推奨されていません。

そのため、
「本当にそのライブラリを使う必要があるのか」
「OutSystems 標準機能やコンポーネントで代替できないか」
を検討した上で導入することが重要だと感じました。