OutSystems PlatformはレスポンシブWebデザインをサポートしますか?

はい。OutSystems Platformを使用すると、レスポンシブデザインの技術を利用できるようになります。次々と発表されるモバイルデバイスには、それぞれ異なる大きさの画面サイズが採用されています。フォームファクターの数が増えるにつれ、最少のスマートフォンから最大のコンピューターディスプレイまで、ありとあらゆるサイズの画面が登場します。それにより、例えばGalaxy NoteやiPhoneなどで使用するユーザインターフェース(UI)の微調整が難しくなります。

OutSystems Platformでは、可変グリッドデザイン機能UIウィジェットおよびSilk UIと呼ばれるレスポンシブUIフレームワークなどを採用することで、このように変化する環境に対応しています。



可変グリッド

レスポンシブデザインにおいては、可変グリッドが標準となってきています。OutSystems Platformでは、視覚的な開発環境内でドラッグ&ドロップ操作を行うことで簡単に可変グリッドを使用できます。アプリは、既存および将来リリースされるすべてのデバイスサイズに完全かつスムーズに適合します。

可変グリッドでは比例サイズ(パーセント)を指定するため、ページ内の小さなサブセクションなど、どのようなレイアウトにも使用できます。アプリケーションの小さな要素の設計や微調整を行うときも、CSSよりも便利に用いることができます。

OutSystems Platformで可変グリッドを使用する開発者は、ツールバーやコンテキストメニューから「Split」コマンドも使用できます。1クリックでコンテナを2つ、3つ、または4つに分割できます。

UIウィジェット

OutSystems Platformを使用すると、あらゆるデバイスで動作する優れたユーザインターフェースを作成できるようになります。HTML、CSS、Javascriptに精通していなくても、ビジュアルな開発環境内で、ユーザエクスペリエンスの設計と目的に合わせた微調整を行えます。しかし、新たなデバイスやアプリケーションデザインが登場すると、新しいインタラクションパターンも生まれます。

OutSystems Platformに含まれるウィジェットのセットを使用すると、使われるデバイスに縛られない、よりリッチなユーザエクスペリエンスを設計できます。アプリにデータを入力するユーザの生産性が高まるとともに、開発者チームは、ビジネス機能に注力できます。これらのウィジェットには、次のような特長があります。

  • HTMLおよびCSSの標準規格を採用しています。アクセシビリティの順守やカスタマイズ要件への対応に非常に有利です。
  • クライアントサイドのJavaScriptベースのリッチなインタラクションにより、魅力的なユーザインタラクションと必要に応じたカスタム動作の拡張を実現します。
  • ビジュアルな開発環境内で簡単に使用できます。開発者はJavaScriptのトラブルシューティングに要する多くの時間を削減できます。
  • マルチチャネル対応で複数のデバイスおよびフォームファクターで動作し適合でき、モバイルシナリオにおけるユーザビリティが大きく向上します。

レスポンシブなUIフレームワーク:Silk UI

OutSystems Platformは、1行のコードも使用せずにレスポンシブWebアプリケーションを開発するための組み込み型のフレームワークSilk UIフレームワークを採用しています。Silk UIでは、テーマ、レイアウト、パターンのすべてがレスポンシブです。しかも、他とは異なる優れたレスポンシブ機能が利用できます。Silk UIでは、すべてのコンテンツを常にブラウザーに送信し、CSSメディアクエリを使用して何をユーザに表示するかを決定するクライアントサイドアプローチではなく、サーバサイドアプローチを採用しています。

なぜSilk UIを使うべきか

モバイルの革新に従って、ユーザエクスペリエンスのハードルが高まり続けています。優れたユーザエクスペリエンスの開発は非常に難しく、CSSやJavaScriptなどのフロントエンドの開発言語を扱うには非常に高度なスキルが要求されます。このタスクを容易にするために数多くのフロントエンドフレームワークが生まれ、その一部が成功を収めています。しかし、そのようなフレームワークを利用する場合にも、前述の言語やフレームワークそのものを熟知する必要があり、アプリケーションが複雑になるにつれ、そのスキルの維持も難しくなります。

そのような背景から、OutSystemsはSilk UIを開発しました。OutSystemsは、最新のUIフレームワークのあらゆる優れた面と、迅速なビジュアルモデリング機能とを組み合わせました。この新しいフレームワークは、OutSystems Platformに直接組み込まれ、簡単なドラッグ&ドロップ操作だけで魅力的なエクスペリエンスを創り出すことができ、Javascript、HTML5、CSS3といった基盤技術の複雑さを取り除きます。

コードレス

Silk UIは完全にレスポンシブなフレームワークです。数十ものすぐに利用可能なパターンを備え、コーディングを必要とせずに、ドラッグ&ドロップ操作だけで美しいUIを構築できます。開発者の間では、CSSはマスターするのが最も難しい「言語」の1つであるとされています。各種デバイスの広範なフォームファクターが新たな課題をもたらすなか、CSSの煩雑さから解放されることはこの課題を解決するキーとなります。

このコードレスのアプローチは、開発者の生産性を後押して、ユーザビリティを促進し、デザインと使い心地を改善して購入後すぐ使えるようにします。またリッチで魅力的なユーザエクスペリエンスを作成するために要求される開発者のスキルを最小限に抑えます。

テーマ

このフレームワークは4つのテーマを備えています。それぞれがカスタマイズ可能でありレスポンシブに完全に対応します。LiverpoolとDublinは異なる基本レイアウトを提供し、Tokyoではハイブリッドモバイルアプリ開発に特化したテーマを提供しています。Lisbonは提供されたパターンを活用しながらこれまでとは全く違ったデザインを作りたいという開発者に向いています。

数十あるパターンは、すべてのテーマ内でそのデザインと使い心地に馴染むようにシームレスに機能します。

Dublin
   

Lisbon
   

Liverpool
   

Tokyo
   

 

 

パターン

数十種類のプリビルトされたWebブロックを使用して、OutSystemsのウィジェットを拡張できます。ボタングループ、トグルボタン、ドロップダウン、バルーン、カルーセルなどのエキサイティングなコントロールやパターンが追加できます。これにより、アプリケーションのユーザインターフェースの作成をスムーズに行えるようになります。

コンテンツをモデリングしやすく、洗練されたレイアウトで表示するためのパターン、最新のコントロールセット、データを視覚的に表示するのための要素、見栄えの良いEメール、新しいナビゲーションメカニズムなど、アプリケーション開発に必要となるほとんどのパターンがカバーされています。レスポンシブな動作を可能にしたり、モバイルエクスペリエンスを作成するためのパターンも用意され、異なるデバイスやフォームファクターをまたいだ複雑な作業が簡素化されます。

これらのパターンにはベストプラクティスが組み込まれており、非常に高い堅牢性と実行時のパフォーマンスを提供しながら、扱い慣れた開発環境内でのドラッグ&ドロップ操作が可能です。

サーバサイドのレスポンシブデザイン対応

Silk UIでは、テーマ、レイアウト、パターンのすべてがレスポンシブ対応です。ブラウザーまたはデバイスがどのコンテンツを表示するかを決定するクライアントサイドアプローチに先行し、RESSと呼ばれるサーバサイドアプローチが適用されます。サーバサイドアプローチでは、コンテンツをサーバからデバイスに送信する前に計算と最適化が行われます。このようにページを適合化することにより、フィット性およびパフォーマンスが向上します。サーバサイドアプローチは、ブラウザーまたはデバイス側で処理を行う場合と比較して、次の点で優れています。

  • サーバは使用中のデバイスを認識しているため、必要なコンテンツのみがブラウザーに送信される。
  • CSSのメディアクエリを使用しないため、特定のデバイスに対するCSSインストラクションが識別しやすくなる。
  • 異なる方法を使用してサーバ上でデバイスを処理できる。

レスポンシブパターンを使用すると、CSSやJavaScriptを駆使することなく、どのデバイスタイプに対しどのレスポンシブ動作を実行すべきかを定義できます。さらに、数多くのビジュアルAPIが利用可能であり、開発者はアプリを使用するデバイスのタイプに応じてサーバロジックを実行できます。たとえば、タブレットまたはデスクトップ上でアプリを実行している時のみデータベースから特定のデータを取得する、あるいは、スマートフォン上でアプリを実行する場合には最適化された画像を取得するというように定義できます。

Silk UIのレスポンシブなフレームワークおよびAPIに関する詳細を知るには、これらのチュートリアルをご覧ください。

サンプルページおよびサンプルアプリ

サンプルページおよびサンプルアプリのセットが提供されているので、開発者は見て学び、すぐにページを立ち上げることができます。OutSystemsは数十ものレスポンシブデザインおよびモバイルページのサンプルを用意し、開発者や開発チームがUIをイメージして構築できるようにしています。

Silk UIのWebサイトを参照してすぐにSilk UIを始めましょう