ユーザー・インタフェース

Oracle Application Express 4.2には、デスクトップとモバイル機器向けに複数のユーザー・インタフェースを定義できる機能が導入されました。以下の項では、設計に関わるさまざまな検討事項について概説します。

• ユーザー・インタフェースの設計
• モバイル・アプリケーション
• レスポンシブ・デザイン
• レスポンシブ・デザインとモバイル設計の比較

ユーザー・インタフェースの設計

最適なユーザー・インタフェースを設計するための原則は、新しいアーキテクチャの登場に合わせて変化および進化し続けてきたことです。古いメインフレーム・アプリケーションのスクリーンはキーボード入力のみを基準に設計されており、ページ上の項目の順序が非常に重要でした。ところが、クライアント・サーバー・アプリケーションのユーザー・インタフェースの設計では、通常、複数の項目を1行に配置し、スクロールしなくてもあらゆるものが1つのスクリーンに収まっている必要がありました。Webアプリケーションが登場すると原則となる設計が再度変化し、1つの行に表示する項目をごく少なくする代わりに、必要に応じて縦スクロールが使用されました。今度は、モバイル・アプリケーションとタブレット・アプリケーションの登場によりユーザー・インタフェースの原則が再度変化し、ポインティング・デバイスの代わりにタッチ操作を使用する、非常にナビゲートしやすいスクリーンに最小限の情報を表示することになりました。

Oracle Application Express 4.2には、jQuery Mobileを使用してモバイル・アプリケーションを宣言的に定義できる機能が導入されました。アプリケーション・ビルダーは機能強化され、1つのアプリケーションで複数のユーザー・インタフェース、つまりデスクトップとモバイルの両方に対応できるようになりました。したがって開発者は、構築するアプリケーションをデスクトップ専用にするか、モバイル専用にするか、または両方に対応したものにするかを選択できます。アプリケーションに定義したそれぞれのユーザー・インタフェースは、独自のテーマ、ログイン・ページ、ホーム・ページ、およびグローバル・ページ（旧称ページ0）を持ちます。アプリケーション内にページを定義する場合は、そのページに関連付けるユーザー・インタフェースを指定する必要があります。使用できるページの種類と領域の種類は選択したユーザー・インタフェースに応じて変化し、ページおよび領域を作成するウィザードで使用できるオプションも同様に変化します。たとえば、地図、データ読込みと他の種類のページ、およびインタラクティブ・レポート領域は、デスクトップ・ページのみでサポートされます。同様に、モバイル・ページの構成要素としてもっとも一般的なものは、レポートとフォームではなくリストとフォームです。

モバイル・アプリケーション

モバイル・アプリケーションは、スマートフォン・デバイス上でのみ動作するように設計されたアプリケーションです。このアプリケーションをスムーズに使用できるようにするには、モバイル接続に最適化された極めて小さいセマンティックHTMLで構築する必要があります。Oracle Application Express 4.2以降にはjQuery Mobileが組み込まれており、開発者はモバイル・アプリケーションを短時間で構築できます。jQuery MobileベースのWebページでは、モバイル機器専用に構築されたフレームワークを使用します。jQuery Mobileは、イメージとCSSファイルをわずかしか含まないコンパクトで最小限のWebサイトの作成を可能にする軽量なフレームワークです。また、向きの変化やタッチ・イベントといったモバイル機器固有のイベントを認識し、対応できるようになっています。jQuery MobileベースのアプリケーションはHTML構造が比較的静的なため、CSSを介したルック・アンド・フィールの変更を、Theme Rollerなどのツールを使用して簡単に実行できます。

Oracle Application Expressで開発したモバイル・アプリケーションは、モバイル機器のブラウザ内で実行するブラウザベースのアプリケーションです。そのため、このアプリケーションはOracle Databaseと通信するための接続が必要であり、接続していない環境では稼働できません。jQuery Mobileを使用すると、iOS、Android、Blackberry、およびWindowsをはじめとする任意のモバイル・オペレーティング・システム上でこのアプリケーションを実行できます。HTML5機能を搭載したモバイル機器では、HTML5の日付ピッカー、フィールド定義に基づいて異なるキーパッドを表示するサブタイプなど、アプリケーションへの組込みが可能なすべての機能を活用できます。旧型の機器でもアプリケーションはレンダリングされますが、機能は最新のものではありません。ブラウザベースのアプリケーションを開発するおもな利点は、1度だけ開発すれば大半のモバイル機器で使用できる点です。ただし、連絡先リストなどのデバイス組込み機能へのアクセスに関して大きな制約が1つあります。この制約は、ハイブリッド・ソリューションの作成を可能にするPhoneGapなどのソリューションを統合することで軽減できます。ハイブリッド・ソリューションでは、ネイティブ・アプリケーション・ラッパーを使用してWebアプリケーションが表示されます。

レスポンシブ・デザイン

ユーザー・インタフェース設計の原則として最近普及し始めているものの1つに、レスポンシブ・デザインがあります。レスポンシブ・デザインはWebサイトの設計方法の1つで、さまざまなサイズのデスクトップ・ブラウザまたはラップトップ・ブラウザ、さらにはタブレットやスマートフォンの表示可能領域にレイアウトが収まるようにする手法です。スクリーンが比較的大きい場合はレイアウト全体が表示されます。スマートフォンおよびタブレットでは、デバイスのスクリーン・サイズに合わせてレイアウトが変更されます。そのために、特定の要素の位置をずらす、サイズを変更する、すべて非表示にする、などの処理が行われます。必要なすべてのコンテンツを、ユーザーが無理なく快適に使えるような形でどのデバイスにでも表示するためです。Oracle Application Express 5.0では、真にレスポンシブな"標準"のテーマであるUniversal Themeが導入されており、開発者はレスポンシブにするように特別な方法でページを設計する必要がありません。この点で、Oracle Application Express 4.2のTheme 25が大幅に改善されています。Theme 25には、レスポンシブ・レイアウトの実現を可能にする構成要素とテンプレートが用意されていました。しかしながら、このテンプレートを使用するかどうか、また本当にレスポンシブなページになるようにコンテンツを配置するかどうかは、開発者に任されていました。注意点はほかにもあり、既存のアプリケーションをTheme 25に変換する場合は、アプリケーションのページを調査して適切なテンプレートとレイアウトが定義されていることを確認する必要があります。

複数のデバイスで商用アプリケーションを配信するためにDemand-Analysisがどのようにレスポンシブ・デザインを活用しているかをご確認ください。

レスポンシブ・デザインとモバイル設計の比較

この2つのアプローチのおもな相違点は、レスポンシブ・デザインでは1つのWebページをどのデバイスでも使用できるのに対し、jQuery Mobileでモバイル・アプリケーションを構築する場合はデスクトップ向けページのほかにjQuery Mobileベースのページを作成する必要があるところです。レスポンシブ・デザインのテクニックを使用すると保守すべきページが1つだけになると聞くと、別々の2つのページを保守するよりも魅力的に思えるかもしれません。ただし、jQuery Mobileベースのページは一般的にとても小さく、最小限の静的コンテンツが読み込まれます。これに対してレスポンシブ・サイトでは、デスクトップ・ブラウザに最適なコンテンツも含めた完全なページが常に読み込まれます。CSSスプライト、JavaScriptコードの圧縮およびその他のテクニックを使用すると、ページ・サイズを縮小できる可能性があります。ただし、大きいヘッダー、サイドバー、リッチ・ページ・コンテンツなどのコンテンツは依然として読み込む必要があり、後からクライアント側で選別して非表示にするしかありません。

おもな判断材料は、開発しようとしているサイトやアプリケーションの種類と表示する予定のコンテンツです。たとえば、会社のホーム・ページ、カタログ、ライブラリ、Wikiなどのインスタンス用のマーケティング・サイトには、レスポンシブ・デザインが適しています。顧客管理アプリケーション、ビジネス・インテリジェンス・ツール、在庫アプリケーションなどの生産性アプリケーションは、jQuery Mobileベースのユーザー・インタフェースの有力候補です。この種のアプリケーションに求められるのは、応答時間の短さと使いやすいデータ入力フォームであり、デバイスのネイティブ・コントロールの使用による優れた操作性です。ネイティブ・アプリケーションのタッチ・コントロールを使用してデータをすばやくフリップ操作するのに慣れている場合は、スワイプ操作でコンテンツのページをめくる、向きを変えて領域を使いやすくする、コンテキストに応じたソフトキーパッドを表示するなど、同等のエクスペリエンスをjQuery Mobileアプリケーションで得られます。もちろん、この種のアプリケーションもデスクトップ向けページをいくらかレスポンシブにし、デスクトップでもタブレットでも問題なく動作するようになれば理想的です。