HTML、JavaScript、およびCSSを用いたUIの拡張

OutSystemsは、お客様およびユーザーがHTML、CSS、およびJavaScriptの複雑さに可能な限り煩わされないようにしたいと考えています。この目標を、表現力豊かなOutSystems PlatformのUI機能を常に改善し続けることにより達成しようとしています。結果として、ほとんどの場合、ユーザーは素晴らしいアプリケーションの作成や多種多様なデバイスへの対応を視覚的に行うことができ、カスタムコードを書く必要がなくなります。

また、OutSystemsは、あらゆる面で開発者が制約を受けないようにするための取り組みを行っています。そのため、OutSystems Platformでは、開発者が標準のHTML、JavaScript、およびCSSを使用し、必要に応じてアプリケーションを拡張できるようにしています。

HTML

ユーザーインターフェイスのレベルでは、このプラットフォームはドラッグアンドドロップによりウェブインターフェイスを作成できるリッチなWYSIWYGエディタです。開発者は、純粋にHTMLを書く代わりに、ビジュアルウィジェットを使用します。これらのウィジェットはラッピングされており、構築方法を知らなくてもドラッグアンドドロップするだけで簡単に再利用できます。

  • コア部分のビジュアルウィジェットは、div、input、button、tableなど、開発者がHTMLで慣れている要素を非常に厳密に反映しています。それらすべてに、よく知られたHTML表現が直接関連付けられています。例えば、「Container」をドラッグすると、「div」が生成されます。
  • カスタムのHTMLウィジェットに、必要な任意のHTMLを記述して使用することもできます。データベースに保存されたHTMLコンテンツを動的にページに読み込むCMSは、その一例です。
  • ウィジェットは、内容を構成した後、ユーザーコントロールに似た「ウェブブロック」にラッピングすることができます。また、インスタンス化のときに初めて内容が記述される「ホール」を持つマスターページと同様の「プレースホルダー」を持った再利用可能なレイアウトの作成も可能です。
  • すべてのウィジェットは、「プロパティボックス」の中で「拡張プロパティ(Extended Properties)」を使ってカスタマイズすることができます。その設定は、直接HTMLの属性に変換されます。これには、ベースとなるHTML定義の中で現在はサポートされていないHTMLタグも含まれます。例えば、カスタムの「data-」属性を使用したい場合は、これを追加するだけで使用できます。
  • すべてのウィジェットにはRuntimeId(HTML属性ID)またはStyle(クラス)などのプロパティが付けられており、標準のJavaScriptまたはCSSにおいて使用することができます。
  • すべてのウィジェットには適切に定義されたAPIがあり、プラットフォームにより追跡され、それを再利用するすべてのアプリケーションのいたるところで正しく使用される仕組みになっています。

要するに、ビジュアルエディタは、.NET ASPX、Java JSP、またはRuby ERBなどの、ビューのテンプレートシステムと非常に似ており、ユーザーがHTMLを定義し、モデルやプレゼンターと結び付けられた動的な表現を加えます。

JavaScript

OutSystems Platformは、非常に簡単に使用できるAJAXメカニズムを備えています。一方で、開発者は、アプリケーションとのインタラクション方法のカスタマイズ、クライアントサイドのカスタム検証および動的なビヘイビアの作成、あるいは非常に独特なカスタムAJAXインタラクションの作成にも、JavaScriptを広範に使用することができます。例えば、各アプリケーションは、アプリケーション内を定義範囲とするJavaScriptファイル(またはファイルセット)をリソースに含めることができます。動作対象をページに限定したJavaScriptを定義することもできます。

OutSystems Platformでは、jQueryがすべてのアプリケーションにデフォルトで含まれています。しかしながら、開発者は、独自のJavaScriptフレームワーク(プロトタイプ、jQuery、jQueryUI、dojo)を加え、HTMLページの場合と同様にそれをアプリケーションで使用することができます。

OutSystemsコミュニティのメンバーにより、jQueryプラグインなどの多数のJavaScriptベースのウィジェットがパッケージ化され、再利用しやすいウェブブロックとしてOutSystems Forgeに公開されています。kParallaxDrag and Drop listsTable freeze cellsTouch Drag and DropSlidersintro.js、そして有名な Google Mapsなどの例があります。

OutSystems Platformに内蔵されたウィジェットの一部も、JavaScript、JSON、およびバックエンドロジックを組み合わせて作られています。例えば、OutSystems Chartingウィジェットは、有名なHighchartsライブラリにラッピングしたラッパーです。開発者は、OutSystems Platformウィジェットにより提供されるプロパティを使うことができます。あるいは、HighChartsが提供するすべてのJSON APIを使用してウィジェットを構成することもできます

より経験豊富な開発者であれば、カスタムJavaScriptプラグインをラッピングしてウェブブロックを作成し、チームの他のメンバーがアプリケーション作成で自由に使用できるようにすることも可能です。

次の画面は、http://jvectormap.com/のJavaScriptライブラリでラッピングを行った例であり、ビジュアルデザイナーの中で再利用し、世界地図上にウェブサイトのアクセスメトリクスを表示したものです。

 


こちらは、ラッピングされたjQueryのスライドショープラグインをビジュアルデザイナーで再利用した例です。

CSS

OutSystem PlatformのUIは、純粋にCSS3をベースとして作られています。CSSとレイアウトテンプレートを組み合わせて事前に定義した「テーマ」のセットをアプリケーションで使用することができます。一方で、開発者は、既存のCSSを再利用するほかに、独自のCSSを作成することもできます。よくある例は、bootstrapの再利用です。この例では、グリッドシステムがOutSystems Platformのビジュアルエディタで再利用され、ページレイアウトの変更を、すべての要素のCSSカラムを手で入力する代わりに、ドラッグアンドドロップ操作でできるように微調整が加えられています。

テーマは階層化されています。これは、OutSystems PlatformにはCSSの階層が存在するということを意味します。開発者は、アプリケーション全体を定義範囲とするCSSを一つのテーマの中に作成し、アプリケーションの特定部分のためにその一部だけを再定義することも可能です。標準スタイルガイドがある場合は、テーマをアプリケーションで再利用することもできます。

内蔵のCSSエディタは、FirebugやChrome Inspectorと同様、オートコンプリートの機能をサポートしています。また、アプリケーションの再コンパイルや再デプロイを必要とせずに、直ちに編集結果をページにプレビュー表示することができます。

UI拡張の例

UI拡張の優れた例として、fly.comのウェブサイトがあります。このサイトは、OutSystemsテクノロジーを用いて実装されており、オートコンプリート、スライダー、およびプログレスバーなどのリッチなビヘイビアの実装に高度なCSS、HTML5、およびJavaScriptライブラリが使用されています。高度なユーザビリティ要件が課せられたfly.comのウェブサイトは、1週間で何百万件、ピーク時には1秒間で20件にも上るフライト検索を処理する、高い拡張性に対応したソリューションです。

Pordataのウェブサイトは、欧州で最も重要な統計ウェブサイトで、すべてOutSystemsテクノロジーを用いて実装されています。このウェブサイトでは、欧州に関する大量の統計情報を利用できます。データをチャート化するグラフィック機能、動的チャート、地理情報の視覚化にOutSystems PlatformのUI拡張機能が使われました。

この例では、ユーザーインターフェイスの外部コンポーネントを使って、情報を地図上にオーバーレイ表示させています。

次の例は、動的なチャートや静的なチャートの中に情報をビジュアル表示した、よくあるウェブサイトです。 

Wodifyは、Cross Fit GymsのSaaSソリューションです。OutSystems Platformを使って構築されており、現在世界中の60,000人を超えるユーザーをサポートしています。Wodifyの機能のほとんどはOutSystems内蔵のユーザーインターフェイスウィジェットで作成されていますが、この例は、OutSystemsのインターフェースがCSSを用いてどれ程自由にスタイル変更でき、一貫性のある見た目や使い心地を実現し、複数のデバイスとフォームファクターをサポートしているのかを、最も良く示しています。

使用デバイスにより変わるWodifyのユーザーインターフェース:

ジムで使われているダッシュボードの例: