レスポンシブWebデザインのサポート
目次
OutSystemsでは、レスポンシブな設計技法を使用することができます。モバイルデバイスは、新作が発表されるたびに画面サイズが大幅に変化します。フォームファクタが増えるにつれて、最小のスマホから最大のPCディスプレイまでサイズは多様化していきます。このことにより、Galaxy NoteやiPhoneなどを使用する際のUI（ユーザーインターフェイス）調整はますます難しくなってきています。
OutSystemsでは、フルードグリッド設計機能、UIウィジェットおよび「OutSystems UI」と呼ばれるレスポンシブUIフレームワークにより、企業のあらゆるアプリケーションをこうした状況に対応させることができます。
フルードグリッド
フルードグリッドは、レスポンシブ設計では標準となっています。OutSystemsでは、ドラッグ&ドロップするだけで、ビジュアル開発環境でフルードグリッドを使用することができます。アプリは既存のどのデバイスのサイズにもスムーズかつ完全に適応し、将来の変化にも対応できます。
フルードグリッドでは比例サイズ（パーセントで設定）を使用するため、ページ内の小さなサブセクションなどあらゆるレイアウトに利用することができます。アプリケーションの小さな要素のデザインや微調整にあたっても、CSSより手軽に使用できます。
OutSystemsでは、フルードグリッドと併せてツールバーやコンテキストメニューに用意されているsplitコマンドも使用できます。クリック1回で、コンテナを2つ、3つまたは4つに分割することが可能です。
UIウィジェット
OutSystemsを使用すると開発チームは、あらゆるデバイスで機能する優れたユーザーインターフェイスを構築することができます。HTML、CSS、JavaScriptの専門家でなくても、ビジュアルデザイナでユーザーエクスペリエンスを設計し、ニーズに合わせて微調整することが可能です。しかし新しいデバイスやアプリケーション設計の登場により、新しいインタラクションパターンが出現してきます。
OutSystemsには、よりリッチなマルチチャネルのユーザーエクスペリエンスの創出に役立つウィジェットが用意されています。これにより、ユーザーはアプリへのデータ入力効率を高めることができ、開発チームはビジネス機能に注力することができます。こうしたウィジェットには、以下の特徴があります。
- HTMLおよびCSS規格に準拠しています。これは、アクセシビリティへの準拠やカスタマイズ要件の面で大きなメリットとなります。
- クライアント側の優れたJavaScriptインタラクションにより、ユーザーの心をとらえるユーザーインタラクションや、必要に応じたカスタム動作の拡張が可能になります。
- ビジュアル開発環境で簡単に使用することができるため、JavaScriptのトラブルシューティングに長い時間をかけずに済みます。
- マルチチャネル対応であるため、複数のデバイスやフォームファクタに適応して動作しモバイルシナリオでのユーザビリティを格段に向上させます。
レスポンシブUIフレームワーク: OutSystems UI
OutSystemsには、コードを一切書かずにレスポンシブWebアプリケーションを開発できる、ビルトインのOutSystems UIフレームワークがあります。OutSystemsでは、テーマ、レイアウト、パターンのすべてがレスポンシブです。しかも、他のものより優れています。OutSystems UIでは、常にすべてのコンテンツをブラウザに送り、ブラウザがCSSメディアクエリを使用してユーザーに何を表示するかを決定する一般的なクライアント側アプローチではなく、サーバー側アプローチをとっています。
OutSystems UIを選択すべき理由
モバイル革命により、ユーザーエクスペリエンスの重要性は増すばかりです。優れたユーザーエクスペリエンスを構築するのは簡単なことではありません。CSSやJavaScriptのようなフロントエンド開発言語に十分精通していることが要求されます。このタスクを容易にするために多くのフロントエンドフレームワークが登場し、その一部は成功を収めています。しかし、こうした言語やフレームワーク自体を十分に理解していることが前提になっていることに変わりはなく、アプリケーションが画面の単なる寄せ集めの域を超えてしまうと維持が困難になってしまいます。
OutSystemsは、こうした状況に対応するためにOutSystems UIを開発しました。Silk UIは、最新のUIフレームワークの様々な長所に、高速ビジュアルモデリングを組み合わせたものです。この新しいフレームワークは、OutSystemsに直接プラグインできます。JavaScript、HTML5、CSS3といった基盤テクノロジーの複雑さや変化を排除し、ドラッグ&ドロップという簡単な操作で魅力的なエクスペリエンスを生み出すことが可能になります。
ローコード
OutSystems UIは、完全にレスポンシブなフレームワークです。すぐに使用できるUIパターンが多数用意されているため、コーディングを一切行わずに、簡単なドラッグ&ドロップで優れたUIを簡単に構築できます。CSSを習得が最も難しい言語のひとつとみなす開発者が少なからずいることと、デバイスのフォームファクタの多様化によって新たな課題が出現していることを鑑みると、複雑さを排除することが問題解決の鍵となります。
ローコードアプローチは、開発者の生産性を向上させ、ユーザビリティを高め、特別な設定なしでルックアンドフィールを向上します。また、魅力的なユーザーエクスペリエンスを創出するにあたって開発者に求められるスキルを軽減します。
テーマ
このフレームワークには、Web用のテーマ2つとモバイル用のテーマ3つが用意されています。いずれもカスタマイズ可能であり、完全にレスポンシブです。トップメニューおよびサイドメニューのテーマは、様々な基本レイアウトに対応してレイアウトを調整します。端末用テーマは、タブレットサイズまでの端末フォームファクタ向けです。タブレット用レイアウトはタブレットフォームファクタ向けに特別に設計されたものであり、画面サイズの大きさをより有効に活用できます。ユニバーサルテーマは、同じ画面セットで2つの異なるレイアウトを提供する単一のアプリケーションに最適です。また、フォームファクタに応じて機能が異なります。
何十もあるパターンは、いずれも全テーマでシームレスに機能し、ルックアンドフィールにもなじみます。デバイスの種類に関係なく適用でき、デザイン性が高いことは、ユーザーにより実証されています。
|
トップメニュー
|
サイドメニュー
|
|
端末
|
タブレット
|
|
ユニバーサル
|
UIパターン
ボタングループ、トグルボタン、ドロップダウン、バルーン、カルーセルといった多くの魅力的な新規パターンやコントロールを備えた一連のビルド済みWebブロックで、既存のOutSystemウィジェットを拡張することができます。これにより、アプリケーションのユーザーインターフェイス構築を手軽に行えるようになります。
モデリングしやすい最新式のレイアウトでコンテンツを表示するUIパターンから、革新的なコントロール、データを視覚化する要素、デザイン性の高いメール、そして新しいナビゲーション機能に至るまで、アプリケーションに必要となるパターンがほぼ網羅されています。また、レスポンシブ動作を可能にしたり、モバイルエクスペリエンスを作り上げる設計になったりしている特殊なパターンもあります。これらは、様々なデバイスやフォームファクタにわたる作業を簡素化します。
パターンにはすべてベストプラクティスがビルトインされているため、非常に堅牢であり、実行時も高いパフォーマンスを発揮します。一方で、ビジュアルエディタのドラッグ&ドロップによるエクスペリエンスも維持提供します。
画面テンプレート
OutSystemsでは、ビルトインロジック、スタイル、サンプルデータの用意された完全に機能的な画面テンプレートが利用できるため、エンタープライズアプリケーションの開発が容易になります。これらの画面は、一般的なエンタープライズアプリケーションのユースケースに対応しており、世界をリードするアプリケーションを幅広く研究することで生まれたUI/UX設計のベストプラクティスを活用することができます。
導入画面、ディレクトリ、製品詳細、買い物かご、およびリストやギャラリーなどのプロファイルなど、あらゆる画面を企業のブランドガイドラインに合わせて完全に編集・カスタマイズできます。
変更するウィジェットにエンティティをドラッグ&ドロップするだけで、独自のデータも簡単に接続可能です。
サーバーの応答性
OutSystems UIでは、テーマ、レイアウト、パターンのすべてがレスポンシブです。表示すべき内容をブラウザまたはデバイスが決めるクライアント側アプローチではなく、RESS（サーバー側コンポーネントによる応答性）と呼ばれるサーバー側アプローチを採用しています。コンテンツは、特定のデバイスに送信される前にサーバーで計算され最適化されます。ページを適応させることでフィット感およびパフォーマンスが向上します。この手法は、ブラウザやデバイスに決定を委ねるアプローチと比べて、以下の点で優れています。
- サーバーが使用中のデバイスを認識しているため、必要とされる情報のみをブラウザに送信できる。
- CSSメディアクエリが存在しないため、特定のデバイス向けCSS命令がわかりやすくなる。
- サーバーでのデバイス対応に、様々な戦略を用いることができる。
レスポンシブパターンを使用すると、CSSやJavaScriptを1行も書くことなく、各デバイスタイプに対してどのレスポンス動作をとるべきかを定義することができます。さらに、多数用意されているビジュアルAPIを活用し、アプリを使用しているデバイスタイプに応じてサーバーロジックを実行することも可能です。たとえば、アプリがタブレット端末やデスクトップPC上で実行されている場合にはデータベースから特定のデータのみを取り出し、スマホ上で実行されている場合には最適化バージョンの画像を取り出すといった形です。