HTML、JavaScript、CSSを使用したUIの拡張
目次
OutSystemsは、開発者が極力HTML、CSS、およびJavaScriptの複雑さに悩まずに済むようにしたいと考えています。そのため、OutSystemsの表現力豊かなUI機能を絶えず改良し続けています。ほとんどの場合、ユーザーはカスタムコードを書くことなく視覚的に開発を行い、あらゆるデバイスで動作する素晴らしいアプリケーションを作成できます。
また、当社は開発者がいかなる制限も受けないよう全力を尽くしています。これにより、OutSystemsでは標準 HTMLやJavascript、CSSを使用し、必要に応じてアプリケーションを拡張することが可能です。
HTML
ユーザーインターフェイスレベルでは、豊富なビジュアルエディタを使用してWebインターフェイスをドラッグ&ドロップで作成することができます。延々とHTMLを書くのではなく、ビジュアルウィジェットを使用できるのです。これらのウィジェットはラッピングされているため、構築方法を理解していなくても、ドラッグ&ドロップするだけで誰でも簡単に再利用できます。
- コアなビジュアルウィジェットの表現は、開発者がHTMLで慣れているdiv、input、button、tableなどと非常によく似ています。これらはすべて、有名なHTML表現に直接関連付けられています。たとえば、「Container」をドラッグすると、divが生成されます。
- カスタムHTMLウィジェットに、必要なHTMLを含めて利用することもできます。この例が、動的にデータベースに保存されたHTMLコンテンツをページに読み込むCMSです。
- 作成したウィジェットをラッピングすると、ユーザーコントロールに似た「Webブロック」を作成することができます。これは、インスタンス化の際に値が入力される「ホール」を持つマスターページに近い、「プレースホルダ」を持つ再利用可能なレイアウトとなります。
- どのウィジェットも「拡張プロパティ」を使用してプロパティボックスでカスタマイズすることができ、HTML属性に直接変換されます。これには、ベースとなるHTML定義では現在サポートされていないHTMLタグが含まれます。たとえば、カスタマイズした「data-」アトリビュートを使用したい場合、それを追加するだけでよいのです。
- すべてのウィジェットは、Runtimeld（HTML属性のID）またはStyle（クラス）などのプロパティを備えており、標準のJavaScriptまたはCSSで使用できます。
- さらに、APIが明確に定義されています。プラットフォームはこれを追跡し、再利用の場となるアプリケーションすべてで適切に使用されるかどうかを確認します。
つまり、ビジュアルエディタは、ユーザーがHTMLを定義して動的なモデルやプレゼンタと結び付けられた表現を含める.NET ASPX、Java JSP、Ruby ERBなどのビューのテンプレートシステムに非常に類似しているのです。
JavaScript
OutSystemsは、非常に簡単に使用できるAjaxメカニズムを提供しています。しかしJavaScriptを拡張的に使用することで、ユーザーがアプリケーションとインタラクトする方法をカスタマイズしたり、クライアント側のカスタム検証と動的な動作を作成したり、さらには非常に具体的なカスタムAjaxインタラクションを作成したりすることもできます。たとえば、各アプリケーションに、アプリケーション全体内で定義されたJavaScriptファイルや、リソースに含まれるファイルセットを含めることができます。ページ固有のJavaScriptも定義可能です。
OutSystemsでは、すべてのアプリケーションにデフォルトでjQueryが含まれます。ただし、独自のJavaScriptフレームワーク（prototype、jQuery、jQueryUI、dojo）を含めてHTMLページと同様にアプリケーション全体で使用することもできます。
Queryプラグインなど、多くのJavaScriptベースのウィジェットがOutSystemsコミュニティのメンバーによってパッケージ化されており、再利用しやすいWebブロックとしてOutSystems Forgeで公開されています。 例を挙げると、kParallax、Drag and Drop lists、Table freeze cells、Touch Drag and Drop、Sliders、intro.jsのほか、有名ながGoogle Mapsがあります。
一部のOutSystemsビルトインウィジェットでも、JavaScript、JSONおよびバックエンドロジックを組み合わせて使用しています。たとえば、OutSystems Chartingウィジェットは、有名なHighchartsライブラリをラッピングしたものです。ウィジェットを作成する場合、OutSystemsウィジェットで公開されているプロパティを使用することも、ウィジェットを作成する場合、OutSystemsウィジェットで公開されているプロパティを使用することもできます。
経験豊富な開発者の場合、カスタムJavaScriptプラグインをラッピングしてWebブロックを作成し、チームの他のメンバーがどのアプリケーションにでも簡単に使用できるようにすることもできます。
これは、世界地図上にWebサイトのアクセスメトリックを表示できるよう、https://jvectormap.com/のJavaScriptライブラリをラッピングしてビジュアルデザイナで再利用した例です。
これは、jQueryスライドショープラグインをラッピングしてビジュアルデザイナで再利用した例です。
CSS
OutSystemのUIは、CSS3をベースとしています。CSSとレイアウトテンプレートを組み合わせた事前定義済みの「テーマ」を、アプリケーションで使用することが可能です。ただし、既存のCSSを再利用したり、独自のものを作成したりすることもできます。bootstrapを再利用して微調整を行い、すべての要素についてCSS列を手動入力するのではなく、OutSystemsのビジュアルエディタでグリッドシステムを再利用してページレイアウトをドラッグ&ドロップできるようにするというのがよくある例です。
テーマは階層的です。つまり、OutSystemsにはCSS階層があるのです。開発者は、1つのテーマでアプリケーション全体のCSSを定義し、特定のセクションについてはその一部のみを再定義することができます。標準スタイルガイドがある場合、テーマをアプリケーションで再利用することもできます。
ビルトインCSSテキストエディタは、FirebugまたはChrome Inspectorの機能に類似したオートコンプリートをサポートしているため、アプリケーションを再コンパイルまたは再デプロイせずに、そのページで結果をすぐにプレビュー表示できます。
間隔、余白、色、枠線、影など、スタイルを指定するCSSの一般的なプロパティも、ビジュアルスタイルエディタパネルを使用してIDEで直接調整できます。
UI拡張の例
UI拡張の良い例がPordataです。PordataのWebサイトは、ヨーロッパで最も重要な統計Webサイトであり、OutSystemsテクノロジーを全面的に実装しています。このWebサイトでは、ヨーロッパに関する大量の統計情報を提供しています。チャート、動的チャート、地理情報の可視化などでデータをグラフィック表示するにあたっては、OutSystemsのUI拡張機能を使用しました。
この例では、ユーザーインターフェイスの外部コンポーネントを使用して、地図に情報をオーバーレイしています。
これは、動的チャートや静的チャートで情報の可視化を提供するWebサイトでよく見られるページの一例です。
Cross Fit GymsのSaaSソリューションであるWodifyは、OutSystemsで構築され、現在世界中で20万人以上のユーザーをサポートしています。Wodifyの機能のほとんどは、OutSystemsのビルトインユーザーインターフェイスウィジェットで作成されています。これは、CSSを使用してOutSystemsインターフェイスを自由にスタイリングすることで、一貫性のあるルックアンドフィールと複数のデバイスやフォームファクタへの対応を実現できることを示す良い例です。
複数のデバイス向けのWodifyユーザーインターフェイス:
ジムでのダッシュボード例:
