レスポンシブ Web ページの作成

レスポンシブ Web デザインは、さまざまなサイズのウィンドウや画面に適合するようコンテンツのレイアウトが自動的に再調整される、Web ページの作成手法です。この手法を使用すると、単一 HTML ファイルのコンテンツが、デスクトップ、ラップトップ、タブレット、スマートフォンなどの複数のデバイスに適合するよう自動的に調整されます。

レスポンシブページでは、一般の HTML ページと異なり、画面サイズの変更に反応して各コンテナの配置が自動的に変更されます。画面サイズが変わると、一般の HTML ページではコンテンツの一部と横スクロールバーが表示されますが、レスポンシブページではコンテンツ全体が表示された状態で配置が変更され、横スクロールバーは表示されません。

レスポンシブコンテナの折り返し動作

レスポンシブページが画面サイズの変更に反応する動作は「折り返し」と呼ばれます。ここでは、画面サイズの変更に反応してレスポンシブコンテナが折り返し (配置変更) される動作について説明します。下図は、レスポンシブコンテナがどのように折り返されるかを示しています。

図 A   行を基準にした 4 列と 2 列のレスポンシブレイアウトを示しています。つまり、1 行目に 4 つのコンテナ、2 行目に 2 つのコンテナが配置されています。

図 A には、4 つのコントロールが配置されたフィルタ行も表示されています。このフィルタ行は、実行時に非表示にすることも、表示することもできます。

図 B   画面幅を狭くした際にコンテナがどのように折り返されるかを示しています。各コンテナのコンテンツは、画面幅の変更に応じてサイズが調整されます。

注意：レスポンシブコンテナ内のオブジェクトは、絶対位置に配置されます。つまり、これらのオブジェクトは折り返されません。各レスポンシブコンテナは互いに相対関係で折り返されますが、コンテナ内のオブジェクトの位置は固定されます。

レスポンシブコンテナ内のオブジェクトは、定義された境界まで拡大縮小されます。詳細は、レスポンシブ Web ページの作成を参照してください。ただし、コンテナ内のオブジェクトは折り返されません。

フロー方向プロパティを使用して折り返しを制御するには

手順
1. レスポンシブ HTML ページ上のコンテナを選択します。
2. [プロパティ] パネルの [レスポンシブデザイン] セクションの [レスポンシブデザイン] セクションの [フロー方向] プロパティでドロップダウン矢印をクリックし、次のいずれかを選択します。
   • 設定しない   利用可能な領域に応じてコンテナを折り返します (デフォルト)。
   • 行   行を基準にコンテナを横方向に折り返します。
   • 列   列を基準にコンテナを縦方向に折り返します。

   注意：[フロー方向] プロパティは、レスポンシブ非対応の要素が含まれたレスポンシブコンテナには表示されません。たとえば、レスポンシブパネルにプッシュボタンを配置すると、パネルの [フロー方向] プロパティが無効 (非表示) になります。この制限を回避するには、プッシュボタンを右クリックし、コンテキストメニューから [選択項目を新規コンテナに追加] を選択します。これで、元のパネルをクリックした際に、[フロー方向] プロパティが再び有効になります。

3. ページを実行します。ブラウザのサイズを変更し、折り返し動作を確認します。

レスポンシブページの作成方法の選択

WebFOCUS App Studio でレスポンシブページを作成する方法には、レスポンシブテンプレートを使用する方法と、HTML キャンバスでレスポンシブモードを使用する方法があります。下図は、レスポンシブページを作成する際に、最適な方法をすばやく決定するためのフローチャートを示しています。

1. レポートテンプレートの使用   この方法では、定義済みテンプレートまたはデザイン時に作成したレイアウトにレスポンシブ出力ウィジェットコンテナを挿入することでページを作成することができます。HTML/ドキュメントウィザードを使用して、行基準のレイアウトにするか、列基準のレイアウトにするかを指定します。

   主な特徴

   下図のように、レスポンシブテンプレートの主な特徴は出力ウィジェットコンテナです。

   

   

   出力ウィジェットコンテナには、次の機能があります。

   • タイトルバー   編集可能なテキストタイトルを表示します。
   • イメージ   会社のロゴなどのイメージをタイトルバーの左側に挿入することができます。
   • 矢印ボタン   タイトルバー右側の矢印をクリックして、ウィジェットレベルのコントロールの表示と非表示を切り替えます。
   • 最大化ボタン   タイトルバー右側の最大化ボタンをクリックして、ウィジェットのコンテンツを最大化表示にしたり、元のサイズに戻したりできます。

   作成するレスポンシブページに 1 つまたは複数の出力ウィジェットコンテナを配置する場合、レスポンシブテンプレートを使用する方法が最も効率的です。この方法は、新しいレスポンシブ HTML ファイルを作成する場合にのみ使用します。詳細は、レスポンシブ Web ページの作成を参照してください。

2. HTML キャンバスでのレスポンシブモードの使用   この自由形式の手法では、未定義のレイアウトでレスポンシブページを作成することができます。この手動方法では、テンプレートを使用する手法より時間を要する場合がありますが、種類の異なる多数のコンテナを配置したレスポンシブページを作成する場合に適しています。

   この方法は、既存の HTML ファイルをレスポンシブページに変換する場合にも使用できます。詳細は、レスポンシブ Web ページの作成を参照してください。

レスポンシブテンプレートによるページの作成

HTML/ドキュメントウィザードでは、6 種類の定義済みレスポンシブテンプレートを選択することができます。これらのテンプレートは、よく使用されるページレイアウトを表しています。テンプレートのレイアウトをそのまま使用することも、テンプレートを使用してレイアウトを作成した後、そのレイアウトを変更することもできます。

定義済みテンプレートを使用する代わりに、HTML/ドキュメントウィザードでカスタムテンプレートを選択し、デザイン時にカスタムページレイアウトを作成する方法もあります。行数および列数を指定し、ページを行基準の方向にするか、列基準の方向にするかを選択することができます。これらのオプションおよび他のページオプションについての詳細は、以下のセクションで説明します。

レスポンシブテンプレートの理解

HTML/ドキュメントウィザードでレスポンシブテンプレートを選択すると、指定された行数 (または列数) とウィジェットコンテナ数のレスポンシブレイアウトが生成されます。下図は、[2-2] レスポンシブテンプレートを使用して生成されたレスポンシブレイアウトを構成要素別に示しています。下図の注釈番号は、後述の各構成要素のプロパティおよび説明の番号に対応しています。

ドキュメント   上図では注釈番号は付けられていませんが、レスポンシブテンプレートから HTML ドキュメントが生成されます。ドキュメントレベルでは、[プロパティ] パネルで編集可能な次のレスポンシブプロパティが表示されます。

次のプロパティは、DOCUMENT オブジェクトを選択した場合に、[プロパティ] パネルの [レスポンシブデザイン] セクションで設定できます。

• iFrame オブジェクトへのロード   BI Portal で使用するために、ページ全体をウィジェット (単一 DIV 項目) としてロードします。このプロパティのデフォルト値は [はい] です。
• フロー方向   レスポンシブコンテナのサイズ調整方法を制御することができます。このプロパティを [設定しない] にしておくことも、行で折り返すか列で折り返すかを指定することもできます。
• レスポンシブコンテナの作成   [はい] に設定した場合、ドキュメントに追加されたオブジェクトのレスポンシブ動作が自動的に有効になります。レスポンシブテンプレートでは、デフォルト設定で有効化されます。
• グローバルレスポンシブマージン   ページ上のすべてのレスポンシブコンテナ周囲の上下左右のマージンをピクセル単位で定義します。テンプレートには、デフォルトでマージンが設定されていません。
• RESPONSIVE：最小幅   ページサイズの最小幅 (ピクセルまたはパーセント) を設定します。ページサイズがこの値より縮小されることはなくなります。デフォルト最小幅は 320 ピクセルです。
• RESPONSIVE：最大幅   ページサイズの最大幅 (ピクセルまたはパーセント) を設定します。ページサイズがこの値より拡大されることはなくなります。この値で、デザイン時のキャンバスの幅も定義されます。この境界は、上図の項目 3 で示すように、キャンバス右側に黒色の縦線で表されます。デフォルト最大幅は [フルスクリーン] です。

  実行時には、ブラウザ全体にレイアウトが表示されます。

• コンテナの配置   ページ内のコンテナの位置を左端 (デフォルト) または中央を基準に揃えます。

次のプロパティは、DOCUMENT オブジェクトを選択した場合に、[プロパティ] パネルの [その他] セクションで設定できます。

• iFrame オブジェクトへのロード   BI Portal で使用するために、ページ全体をウィジェット (単一 DIV 項目) としてロードします。このプロパティのデフォルト値は [はい] です。

1. 主要ウィジェット   [プロパティ] パネルでは「windowPanel1 <DIV>」として定義され、デフォルトタイトルは「出力ウィジェットコンテナ」です。

次のプロパティは、主要ウィジェットのオブジェクトを選択した場合に、[プロパティ] パネルの [レスポンシブデザイン] セクションで設定できます。

• フレックス拡張   ウィンドウサイズを変更した際に、HTML ページの他の項目と相対した項目の展開順序を数値を使用して指定します。

次のプロパティは、主要ウィジェットのオブジェクトを選択した場合に、[プロパティ] パネルの [出力ウィジェット] セクションで設定できます。

• グリッドマージン   セル周囲の上下左右のマージンをピクセル単位で定義します。
• テンプレート方向   コンテンツの折り返しを行基準にするか、列基準にするかを指定します。デフォルト方向は [行基準] です。この設定を変更するには、[列基準] を選択します。
• ウィジェットタイトル   ウィジェットのデフォルトタイトルを削除し、ページコンテンツ全体の意味を表すタイトルを入力することができます。
• イメージの表示   ウィジェットの左上にイメージを表示することができます。デフォルト設定は [はい] です。
• イメージソース   表示するイメージを選択することができます。イメージの選択後、イメージファイルのパスが表示されます。
• 入力パネルの自動非表示   ページ内のコンテンツにフィルタを適用するコントロールの行をデフォルト設定で非表示にします。コントロールの行を常に表示するには、[いいえ] を選択します。
• アニメーションの選択   このウィンドウパネルに設定されているアニメーションを選択することができます。

2. ウィジェット表示ボタン   ページの右上、およびページ内の各ウィジェットの右上に矢印ボタンとボックスボタンが表示されます。矢印ボタンをクリックして、コントロールの行の表示と非表示を切り替えます。ボックスボタンをクリックして、ウィジェットを最大表示にするか、元のサイズに戻すかを切り替えます。

3. 縦のデザイン境界   キャンバスの右端に表示され、[プロパティ] パネルのドキュメントレベルで設定されたレスポンシブ最大幅を示す線です。デフォルト値は 1500 ピクセルです。

4. ウィジェットタイトル   [プロパティ] パネルでは「windowPanel2 <DIV>」として定義され、デフォルトのウィジェットタイトルは「出力ウィジェットタイトル」です。[プロパティ] パネルでデフォルトタイトルを削除し、別のウィジェットタイトルを入力することができます。デザイン時には、ウィジェットタイトルとコンテンツの周囲に赤色の枠線が表示され、そのコンテナがレスポンシブコンテナであることが示されます。

5. ウィジェットコンテンツ   [プロパティ] パネルでは「iframe1 <IFRAME>」として定義され (1 つ目のウィジェット)、ウィジェットを右クリックして、次のコンテンツを追加することができます。

• 新規レポート   ウィジェット内に新しいレポートを作成します。
• 新規グラフ   ウィジェット内に新しいグラフを作成します。
• 新規レイアウト   ウィジェット内に新しいドキュメントを作成します。
• 既存項目のインポート   既存のプロシジャをウィジェットにインポートします。
• 既存プロシジャの参照   ウィジェットで既存のプロシジャを参照します。
• マップ   ウィジェット内に新しいマップを作成します。このオプションは、Db2 Web Query には適用されません。マップの挿入は、[既存プロシジャの参照] オプションを使用して実行することができます。
• ESRI   ウィジェット内に新しい emf オブジェクトを作成します。このオプションは、Db2 Web Query には適用されません。マップの挿入は、[既存プロシジャの参照] オプションを使用して実行することができます。
• ツールボックスとして使用   必要に応じてウィジェットを使用するための一般オプションです。たとえば、特定のアクションを実行するためのボタンを作成する場合があります。

レスポンシブテンプレートから生成されたページのコンテンツは、実行時に左から右、上から下の順序でロードされます。

レスポンシブページに見出しを追加するには、タイトルバーを右クリックし、コンテキストメニューから [ページ見出しの追加] を選択します。別の方法として、HTML/ドキュメントウィザードで [ページ見出しの追加] オプションを選択することもできます。詳細は、次の手順に記載されています。

レポートテンプレートを選択するには

手順
1. 次のいずれかの方法で HTML/ドキュメントウィザードを開きます。
   1. [ホーム] タブの [コンテンツ] グループで、[HTML/ドキュメント] をクリックします。
   2. [環境ツリー] パネルでアプリケーションフォルダを右クリックし、[新規作成]、[HTML/ドキュメント] を順に選択します。

   HTML/ドキュメントウィザードが開きます。上記の a の方法を使用した場合、HTML/ドキュメントウィザードのナビゲーションウィンドウで、新しいファイルの保存先フォルダを指定することができます。

2. [次へ] をクリックします。

   下図のように、[テンプレート、設定、テーマ] ウィンドウが開き、[レスポンシブテンプレート] セクションが表示されます。

   

3. 使用するレスポンシブテンプレートを選択します。
   • [なし] を選択すると、レスポンシブ非対応の一般的な HTML キャンバスが開きます。
   • [カスタム] を選択すると、レスポンシブテンプレートから提供されるレイアウトと異なるレイアウトをデザインすることができます。詳細は、レスポンシブ Web ページの作成を参照してください。

   この手順では、[なし] および [カスタム] は選択しないでください。

4. ページ下部の [入力コントロール] セクションで、次のいずれかを選択します。
   • 入力コントロールパネルを非表示にするには、[常に非表示] を選択します。これがデフォルト値です。ユーザは、実行時にタイトルバーの下向き矢印をクリックしてパネルを表示することができます。
   • 入力コントロールパネルを表示するには、[常に表示] を選択します。実行時にユーザがこのパネルを非表示にするには、タイトルバーの上向き矢印をクリックします。
   • ページレベルの代わりに (またはページレベルに加えて) ウィジェットレベルのコントロールを使用する場合は、[単一入力コントロールパネルの使用] のチェックをオフにします。
5. ページをはじめて開いた際にすべてのウィジェットのコンテンツをロードするには、[ロード時にリクエストを実行] を選択します。
6. [Panel1 <DIV>] レスポンシブコンテナのタイトルバーの上側にブランク領域を追加するには、[ページ見出しの追加] を選択します。たとえば、この領域に会社のロゴなどのイメージを追加することができます。
7. [完了] をクリックして、HTML/ドキュメントウィザードを閉じます。

   HTML キャンバスが開き、選択したテンプレートに対応するレスポンシブレイアウトが自動的に生成されます。

   注意：レスポンシブレイアウトをデザインする際のベストプラクティスとして、WebFOCUS App Studio の画面をフルスクリーンにすることをお勧めします。これにより、画面をスクロールせずに最大数のウィジェットへのアクセスが可能になります。

レスポンシブテンプレートのウィジェットへのオブジェクト挿入

ウィジェットを追加または削除するには

手順
1. レスポンシブ HTML ページを開きます。
2. ウィジェットを追加するには、次のいずれかの方法を使用します。
   1. 新しいウィジェットの追加先に隣接するウィジェットを選択します。そのウィジェットのタイトルバーを右クリックし、コンテキストメニューから [新規ウィジェットを前に挿入] または [新規ウィジェットを後に挿入] を選択します。

      新しいウィジェットが追加されます。

   2. 別の方法として、HTML ページのタイトルバーを右クリックし、コンテキストメニューから [テンプレートの構成] を選択することもできます。[テンプレートの構成] ダイアログボックスに、行数 (または列数) の構成が表示されます。たとえば、[3-2] と表示されます。

      新しいウィジェットを追加するために、行数または列数の構成を変更します。たとえば、新しいウィジェットを 2 行目に追加するには、値を [3-3] に変更します。

      新しいウィジェットが追加されます。

3. ウィジェットを削除するには、次のいずれかの方法を使用します。
   1. 削除するウィジェットを選択します。そのウィジェットのタイトルバーを右クリックし、コンテキストメニューから [削除] を選択します。

      ウィジェットが削除されます。

   2. 別の方法として、HTML ページのタイトルバーを右クリックし、コンテキストメニューから [テンプレートの構成] を選択することもできます。[テンプレートの構成] ダイアログボックスに、行数 (または列数) の構成が表示されます。たとえば、[3-2] と表示されます。

      ウィジェットの個数を減らすために、行数または列数の構成を変更します。たとえば、1 行目からウィジェットを削除するには、値を [2-2] に変更します。

      ウィジェットが削除されます。

ウィジェットに別のオブジェクトを追加するには

手順
1. ウィジェットに配置されているオブジェクトをクリックします。
   • ウィジェットにレポートまたはグラフが配置されている場合、別のレポートまたはグラフを追加することはできますが、その他のタイプのオブジェクトを追加することはできません。
   • ウィジェットにツールボックスが配置されている場合、別のレポートまたはグラフを追加することはできますが、デフォルト設定で [自動サイズ変更] オプションは無効になります。このオプションを手動で設定する必要があります。

   [プロパティ] パネルを開き、[iFrame] が選択されていることを確認します。

2. [コンポーネント] タブで、追加するオブジェクトをクリックします。たとえば、[レポート] または [グラフ] をクリックします。

   ウィジェットは縦方向に分割することも (2 つのオブジェクトを横に並べて配置)、横方向に分割することもできます (2 つのオブジェクトを縦に並べて配置)。カーソルをウィジェットの右側または左側、あるいは上側または下側に移動します。

   既存のコンテンツがカーソルの反対側に自動的に移動します。

3. 新しいオブジェクトを挿入する側をクリックします。

   ウィジェットが 2 つの列または行に自動的に均等分割されます。選択した側に、iFrame 内のレポートアイコンまたはグラフアイコンが表示されます。

   注意：新しい iFrame を追加した後、その追加操作を取り消す場合は、iFrame を右クリックし、[削除] を選択することができます。ただし、元の iFrame は自動的に拡大されず、ウィジェット内の元の領域全体には戻りません。実行時には、元の iFrame のコンテンツが領域全体に表示されます。デザイン時には、部分的な表示状態のまま残ります。デザイン時のページ外観を実行時と同様の外観にするには、元の iFrame をクリックし、ウィジェットの領域全体に収まるよう手動でドラッグします。

4. アイコンを右クリックし、コンテキストメニューからオプションのいずれかを選択して、新しいオブジェクトを作成します。たとえば、[既存プロシジャの参照] オプションを選択します。
5. ウィジェットのタイトルバーをクリックして [プロパティ] パネルを開きます。[列数] プロパティは、デフォルト設定で [自動] に指定されています。ドロップダウンリストを使用して、ウィジェットに配置する列数を選択します。2 つのオブジェクトを横に並べる場合は [2] を選択します。2 つのオブジェクトを縦に並べる場合は [1] を選択します。

   ページを実行して、複数のオブジェクトが配置されたウィジェットをプレビュー表示し、変更後のコンテンツが正しく表示されることを確認します。

レスポンシブページでページレベルのコントロールを適用するには

手順
1. 共通のコントロールを使用する複数のレポートまたはグラフを作成し、「レポートテンプレートを選択するには」の手順に従って、レスポンシブレイアウトのウィジェットにこれらのレポートまたはグラフを追加します。

   コントロールが含まれたレポートをウィジェットに追加すると、[新規パラメータ] ダイアログボックスが開きます。このダイアログボックスを使用して、複数のコントロールに連鎖を設定します。連鎖を設定すると、連鎖内の 1 つ目のコントロールから選択された値に基づいて、2 つ目のコントロールの値がフィルタされます。たとえば、State コントロールと City コントロールに連鎖が設定されている場合、州の値が選択された時点で、その州に属する都市名のみが City コントロールに表示されます。

   詳細は、HTML キャンバスでの連鎖の設定を参照してください。

2. ページを実行します。次の点に注意してください。
   • コントロールの名前および値は、タイトルバーのページタイトル末尾に追加されます。
   • コントロール入力パネルは表示されません。これがデフォルト値です。
3. タイトルバー右上の下向き矢印をクリックして、コントロールの入力パネルを表示します。

   HTML 出力を閉じ、HTML キャンバスに戻ります。

4. ページを開いた際にコントロールの入力パネルが表示されるよう設定するには、次の手順を実行します。
   1. タイトルバーをクリックして [プロパティ] パネルを開きます。

      [windowPanel1 <DIV>] レベルのプロパティが表示されます。

   2. [入力パネルの自動非表示] の値を [いいえ] に変更します。
   3. ページを実行します。コントロール入力パネルが表示されます。
5. 入力パネルの左側にコントロールを表示するには、次の手順を実行します。
   1. コントロール入力パネルをクリックして [プロパティ] パネルを開きます。
   2. [コントロールパネル] の値を [はい] に変更します。
   3. ページを実行し、ページを拡大してフルスクリーンにします。入力パネル内の複数のコントロールすべてがパネルの左側 (ユーザが期待する位置) に表示されます。

   [コントロールパネル] の値を [はい] に設定していない場合、ページサイズが大きくなると、これらのコントロールが自動的に右側に展開され、ページ幅全体が使用されます。

レスポンシブページでウィジェットレベルのコントロールを適用するには

手順
1. ページレベルのコントロールを使用するレスポンシブ HTML ファイルを開きます。たとえば、「レスポンシブページでページレベルのコントロールを適用するには」の手順に従って作成したファイルを開きます。

   「ウィジェットを追加または削除するには」の手順に従って、新しいウィジェットを行に追加します。

2. コントロールを使用するレポートまたはグラフを作成し、新しいウィジェットに追加します。この手順の目的から、このページの他のレポートで使用されているコントロールと異なるコントロールを使用します。

   コントロールが含まれたレポートをウィジェットに追加すると、[新規パラメータ] ダイアログボックスが開きます。このダイアログボックスでは、デフォルト設定でコントロールを作成するよう指定されています。[OK] をクリックします。

3. ページを実行します。デフォルト設定では、新しいウィジェットにコントロール入力パネルが表示されます。
4. 新しいウィジェットでコントロール入力パネルを非表示にするには、次の手順を実行します。
   1. 「ウィジェットを追加または削除するには」の手順に従って、新しいウィジェットを行に追加します。手順 2 で作成したレポートを新しいウィジェットに追加します。

      [新規パラメータ] ダイアログボックスが表示されます。

   2. [パラメータグループ化オプション] ドロップダウンリストから [新規シングルレイヤフォーム] を選択し、[OK] をクリックします。

      [新規パラメータ] ダイアログボックスが閉じます。入力パネルが非表示になります。

コントロール入力パネルをアニメーション化するには

手順
1. レスポンシブテンプレートを使用して作成され、入力コントロールが配置されている HTML ページを開きます。
2. [タスクとアニメーション] パネルを開きます。[jQuery アニメーション] セクションで、[新規作成] ボタンをクリックします。

   新しいアニメーションが作成され、デフォルト名が自動的に割り当てられます。たとえば、「アニメーション 1」という名前が付けられます。アニメーションの名前を変更するには、デフォルト名をクリックして新しい名前を入力します。

   注意：アニメーションのターゲットを [選択済みターゲット] ボックスで指定する必要はありません。このボックスはブランクにします。

3. [効果] セクションで、[タイプ] ドロップダウンリストからアニメーションを選択します。必要に応じて、[オプション] および [値] ドロップダウンリストから値を選択し、指定したアニメーションに適用します。
4. パネルの最下部で、[アニメーションの切り替え] のチェックをオンにします。

   これで、アニメーションをウィンドウパネルに適用する準備ができました。

5. レスポンシブレイアウトで、コントロール入力パネルを表示するウィジェットのタイトルバーをクリックします。
6. [プロパティ] パネルを開きます。[出力ウィジェット] セクションで、[アニメーションの選択] テキストボックスをクリックします。ドロップダウンリストからアニメーション名を選択します。たとえば、[アニメーション 1] を選択します。
7. HTML ページを実行します。タイトルバーの上下の矢印ボタンをクリックして、コントロール入力パネルを開いたり閉じたりした際のアニメーションを確認します。

パネルサイズの最大値および最小値を設定するには

手順
1. コントロールが配置されているレスポンシブパネルをクリックするか、ウィジェットのタイトルバーをクリックして、[プロパティ] パネルを開きます。

   [プロパティ] パネルの [windowPanel <DIV] レベルには、[最小幅]、[最大幅]、[最小高さ]、[最大高さ] プロパティがあります。デフォルト設定では、これらの値はブランクです。

2. ピクセル数またはパーセント値を直接入力することができます。たとえば、「50px」や「50%」と入力します。

   別の方法として、次の手順のようにコンテキストメニューを使用することもできます。

3. コントロールが配置されているレスポンシブパネルを右クリックするか、ウィジェットのタイトルバーを右クリックします。コンテキストメニューから [サイズの更新] を選択します。

   [サイズの更新] のサブメニューが表示されます。

   [最小サイズの更新] を選択すると、現在選択されているコンテナのサイズ (ピクセル数またはパーセント値) が [最小幅] および [最小高さ] プロパティに挿入されます。この場合、このコンテナは、レスポンシブレイアウトに表示されているサイズより小さくなることはありません。

   注意：[最小サイズの更新] を選択した場合、デザイン時にオブジェクトサイズは変更されませんが、実行時にはサイズが変更されます。

   [現在の値を使用] を選択すると、現在選択されているコンテナのサイズが次のように適用されます。

   • 最小サイズ   [最小幅] および [最小高さ] プロパティに、選択したコンテナで使用されているピクセル数が挿入されます。
   • 最大サイズ   [最大幅] および [最大高さ] プロパティに、選択したコンテナで使用されているピクセル数が挿入されます。
   • 最小高さ   [最小高さ] プロパティに、選択したコンテナで使用されているピクセル数が挿入されます。
   • 最小幅   [最小幅] プロパティに、選択したコンテナで使用されているピクセル数が挿入されます。
   • 最大高さ   [最大高さ] プロパティに、選択したコンテナで使用されているピクセル数が挿入されます。
   • 最大幅   [最大幅] プロパティに、選択したコンテナで使用されているピクセル数が挿入されます。

実行時にウィジェットをロードするには

手順
1. [タスクとアニメーション] パネルを開き、[load] タスク、[ロード時] トリガタイプを順に選択します。
2. [リクエスト/アクション] セクションで、[リクエストの選択] ボタン横の下向き矢印をクリックします。

   ドロップダウンリストが表示されます。

3. [リクエストの実行] を選択し、iframe を選択します (例、iframe2)。

   選択した iframe が [リクエスト/アクション] ボックスに追加され、ハイライト表示されます。

4. [ターゲットタイプ] ドロップダウンリストから [フレーム] を選択します。[ターゲットフレーム] ドロップダウンリストから、ハイライト表示されているフレームに対応する iframe を選択します (例、iframe2)。ページを実行します。

   実行時にコンテンツがロードされます。

5. ページ内で実行時にロードされない iframe のすべてに対して上記の手順を繰り返します。

カスタムレイアウトを作成するには

手順
1. 次のいずれかの方法で HTML/ドキュメントウィザードを開きます。
   1. [ホーム] タブの [コンテンツ] グループで、[HTML/ドキュメント] をクリックします。

      または

   2. [環境ツリー] パネルでアプリケーションフォルダを右クリックし、[新規作成]、[HTML/ドキュメント] を順に選択します。

   HTML/ドキュメントウィザードが開きます。上記の a の方法を使用した場合、HTML/ドキュメントウィザードのナビゲーションウィンドウで、新しいファイルの保存先フォルダを指定することができます。

2. [次へ] をクリックします。

   [テンプレート、設定、テーマ] ウィンドウが開き、[レスポンシブテンプレート] セクションが表示されます。

3. [レスポンシブテンプレート] セクションで [カスタム] を選択します。[完了] をクリックします。

   レイアウトが開き、[テンプレートの構成] ダイアログボックスが表示されます。

4. [方向] エリアで、[行基準] または [列基準] を選択します。
5. [行番号の選択] および [行あたりのコンテナ数] テキストボックスで、次のように値を指定します。
   1. [行番号の選択] テキストボックスに [1] が表示された状態で、[行あたりのコンテナ数] テキストボックスの上下の矢印ボタンを使用して、1 行目に配置するウィジェットの個数を指定します。

      注意：上下の矢印ボタンを使用してください。テキストボックスに値を直接入力することはできません。

   2. [行番号の選択] ドロップダウンリストから [2] を選択します。
   3. [行あたりのコンテナ数] テキストボックスの上下の矢印ボタンを使用して、2 行目に配置するウィジェットの個数を指定します。
   4. 必要に応じて上記の手順を繰り返して、カスタムレイアウトを定義します。

      [テンプレートの構成] ダイアログボックスを閉じます。

6. 入力コントロールのページレベルの動作を定義には、次の手順を実行します。
   • [プロパティ] パネルの [windowPanel1 <DIV>] レベルで、[入力パネルの自動非表示] プロパティを [はい] に設定します。実行時にユーザがこのパネルを表示するには、タイトルバーの下向き矢印をクリックします。これにより、ページレベルの動作が制御されます。
   • [プロパティ] パネルの [windowPanel2 <DIV>] レベルで、[入力パネルの自動非表示] プロパティを [はい] に設定します。実行時にユーザがこのパネルを表示するには、タイトルバーの下向き矢印をクリックします。これにより、ウィジェットレベルの動作が制御されます。ウィジェットレベルのコントロールを使用するウィジェットごとに、この手順を繰り返します。
   • コントロール入力パネルを表示するには、[いいえ] を選択します。実行時にユーザがこのパネルを非表示にするには、タイトルバーの上向き矢印をクリックします。
7. ページ見出しを追加するには、ページのタイトルバーを右クリックし、コンテキストメニューから [ページ見出しの追加] を選択します。たとえば、この領域に会社のロゴなどのイメージを追加することができます。

レスポンシブモードの HTML キャンバスでのページ作成

この自由形式の手法では、未定義のレイアウトでレスポンシブページを作成することができます。この手動方法では、テンプレートを使用する手法より時間を要する場合がありますが、種類の異なる多数のコンテナを配置したレスポンシブページを作成する場合に適しています。この方法は、既存の HTML ファイルをレスポンシブページに変換する場合にも使用することができます。

次のコンテナは、デフォルト設定でレスポンシブオブジェクトです。

• レポート
• グラフ
• フォーム (シングルレイヤ、マルチレイヤ)
• タブ (上揃え、下揃え、左揃え、右揃え)
• アコーディオン (縦、横)
• ウィンドウ
• 出力ウィジェット
• グループボックス
• パネル
• フレーム
• マップ
• ESRI マップ

レスポンシブモードで新しいコンテンツを作成するには

手順
1. 次のいずれかの方法で HTML/ドキュメントウィザードを開きます。
   1. [ホーム] タブの [コンテンツ] グループで、[HTML/ドキュメント] をクリックします。
   2. [環境ツリー] パネルでアプリケーションフォルダを右クリックし、[新規作成]、[HTML/ドキュメント] を順に選択します。

   HTML/ドキュメントウィザードが開きます。

2. [次へ] をクリックします。

   下図のように、[テンプレート、設定、テーマ] ウィンドウが開き、[ページ設定] セクションが表示されます。

   

3. [ページ設定] セクションで [レスポンシブデザイン] を選択します。

   注意

   • デフォルト設定では、[デフォルトレスポンシブコンテナの作成] オプションが選択されています。[新規パラメータ] ダイアログボックスを使用してコントロールを作成すると、レスポンシブコンテナとともにフォームおよびコントロールが作成されます。
   • [デフォルトレスポンシブコンテナの作成] のチェックをオフにすると、フォームオブジェクトのレスポンシブコンテナは作成されません。
   • デフォルト設定では、コントロールはレスポンシブ対応ではありません。コントロールを描画し、そのコントロールを右クリックして [選択項目を新規コンテナに追加] を選択すると、コントロールの周囲にレスポンシブコンテナが描画されます。
   • 非レスポンシブコンテナをレスポンシブコンテナに変更するには、そのコンテナを選択し、[プロパティ] パネルで [レスポンシブ有効] プロパティを [はい] に設定します。

4. [完了] をクリックします。

   HTML キャンバスが開きます。[プロパティ] パネルの [DOCUMENT] レベルのプロパティで、[レスポンシブデザイン] プロパティ値が [はい] に設定されます。

   HTML/ドキュメントウィザードを使用する代わりに、HTML キャンバスでファイルを開き、[レスポンシブデザイン] プロパティ値を手動で [はい] に設定することもできます。

   コンテンツは、[レスポンシブデザイン] プロパティを [はい] に設定する前に HTML キャンバスに追加することができます。ただし、コンテンツを追加する前に [レスポンシブデザイン] プロパティを [はい] に設定にしておくと、次のような利点があります。デザイン時の利点は次のとおりです。

   • レスポンシブの最小幅と最大幅が設定される。
   • キャンバスの右端に最大幅を視覚的に示す縦線が表示される。
   • [ランタイムプレビュー] 機能を使用して実行時の外観をプレビュー表示できる。

HTML ファイルをレスポンシブに変換するには

手順
1. 既存の HTML ファイルでレスポンシブ動作を有効にするには、[環境ツリー] パネルでファイルをダブルクリックするか、ファイルを右クリックして [開く] を選択します。

   HTML キャンバスに HTML ファイルが開きます。

2. [プロパティ] パネルで、ドロップダウンリストから [DOCUMENT] を選択します。

   ドキュメントのプロパティが表示されます。

3. [レスポンシブデザイン] プロパティで、ドロップダウンリストから [はい] を選択します。

   各コントロール要素をそれぞれ個別のレスポンシブコンテナに配置するかどうかを確認するメッセージが表示されます。

4. 次のいずれかを選択して、レスポンシブコンテナの追加方法を指定します。
   1. [はい] をクリックすると、下図のようにコントロール領域に複数のコンテナが追加されます。

      

      3 つのコンテナが 4 つ目の大きいサイズのコンテナ内に配置されています。これらのコンテナの赤色の枠線は、これらがレスポンシブコンテナであることを示しています。

   2. [いいえ] をクリックすると、コンテナは追加されません。このオプションは、ページ上にネストされたオブジェクトが多数ある場合に役立ちます。このオプションを使用しない場合、各オブジェクトにそれぞれ独自のコンテナが配置されます。

      後から別のコンテナを追加することもできます。

      1. コンテナ内でグループ化する複数のコントロールオブジェクトを選択します。
      2. 選択したオブジェクトのいずれかを右クリックし、コンテキストメニューから [HTML オブジェクトの操作] を選択します。
      3. [コンテナの結合] を選択します。
      4. フレームをレスポンシブにするには、フレームを選択して [プロパティ] パネルを開きます。[レスポンシブ有効] プロパティ値を [はい] に設定します。

   これで、HTML キャンバスがレスポンシブモードになります。HTML キャンバス上のフレームおよびコントロールがレスポンシブコンテナ内に配置され、赤色の枠線で示されます。

   注意：HTML ファイルで [子要素の自動サイズ変更] オプションを有効にしていた場合、そのオプションは新しいレスポンシブ動作 (コントロールのサイズを自動的に変更) で置き換えられます。

   次のプロパティが、DOCUMENT オブジェクトの [プロパティ] パネルの [レスポンシブデザイン] セクションに表示されます。これらの値は変更することができます。

   • レスポンシブ有効   HTML ページのレスポンシブ動作を有効にします。[はい] に設定すると、その他のレスポンシブデザインのプロパティが使用可能になります。
   • フロー方向   レスポンシブコンテナのサイズ調整方法を制御することができます。このプロパティを [設定しない] にしておくことも、行で折り返すか列で折り返すかを指定することもできます。
   • レスポンシブコンテナの作成   [はい] に設定した場合、ドキュメントに追加されたオブジェクトのレスポンシブ動作が自動的に有効になります。
   • グローバルレスポンシブマージン   ページ上のすべてのレスポンシブコンテナ周囲の上下左右のマージンをピクセル単位で定義します。テンプレートには、デフォルトでマージンが設定されていません。
   • RESPONSIVE：最小幅   コンテナ幅がこの最小値 (ピクセルまたはパーセントで指定) より小さくなった場合、要素の位置が変更されることも、サイズが変更されることもありません。
   • RESPONSIVE：最大幅   コンテナ幅がこの最大値 (ピクセルまたはパーセントで指定) より大きくなった場合、要素の位置が変更されることも、サイズが変更されることもありません。

   レスポンシブコンテナを選択すると、次のプロパティが、[プロパティ] パネルの [レスポンシブデザイン] セクションに表示されます。

   • レスポンシブ有効   デフォルトで [はい] に設定されています。この場合、パネルがレスポンシブ動作を示します。
   • フレックス拡張   コンテナのサイズを変更した際に、HTML ページの他の項目と相対した項目の展開順序を数値を使用して指定します。
   • コンテンツの配置   レスポンシブコンテナのオブジェクトの実行時の配置を制御します。次のオプションのいずれかを選択します。
     • ブランク <設定しない>   複数のオブジェクトは、デフォルト設定でコンテナの左端寄りで位置が揃えられます。
     • 開始   複数のオブジェクトは、コンテナの左端で位置が揃えられます。
     • 終了   複数のオブジェクトは、コンテナの右端で位置が揃えられます。
     • 中央揃え   複数のオブジェクトは、コンテナの中央で位置が揃えられます。
     • 間隔   複数のオブジェクトは、幅に基づいて均等配分されます。最初のオブジェクトは左端に近い位置、最後のオブジェクトは右端に近い位置、その間の複数のオブジェクトは間隔が均等配分されます。
     • 余白   複数のオブジェクトは、幅と高さに基づいて均等配分されます。
   • フロー方向   レスポンシブコンテナのサイズ調整方法を制御することができます。このプロパティを [設定しない] にしておくことも、行で折り返すか列で折り返すかを指定することもできます。
   • レスポンシブ幅   オブジェクトの幅を実行時にレスポンシブ調整するかどうかを指定します。デザイン時に設定した幅をキャンバスで保持する場合は、[いいえ] を選択します。
   • レスポンシブ高さ   オブジェクトの高さを実行時にレスポンシブ調整するかどうかを指定します。デザイン時に設定した高さをキャンバスで保持する場合は、[いいえ] を選択します。

   キャンバスで、レポートコンポーネントやグラフコンポーネントなどの iFrame オブジェクトを選択した場合は、次のプロパティが、[プロパティ] パネルの [レスポンシブデザイン] セクションに表示されます。

   • レスポンシブ有効   オブジェクトがレスポンシブ動作を示すかどうかを指定します。
   • フレックス拡張   コンテナのサイズを変更した際に、HTML ページの他の項目と相対した項目の展開順序を数値を使用して指定します。
   • レスポンシブ幅   オブジェクトの幅を実行時にレスポンシブ調整するかどうかを指定します。デザイン時に設定した幅をキャンバスで保持する場合は、[いいえ] を選択します。
   • レスポンシブ高さ   オブジェクトの高さを実行時にレスポンシブ調整するかどうかを指定します。デザイン時に設定した高さをキャンバスで保持する場合は、[いいえ] を選択します。

   レスポンシブモードでは、HTML キャンバスの右端に黒色の縦線が表示されますが、これはレスポンシブ最大幅を視覚的に示す線です。この線を確認するには、右方向にスクロールします。

5. コンテナ内のコンテンツを別のコンテナに移動するには、[配置] タブの [レスポンシブデザイン] グループで [選択の切り替え] をクリックします。現在のコンテナから別のコンテナにコンテンツをドラッグし、[ユーティリティ] タブの [ランタイムプレビュー] をクリックします。
6. ハンバーガーメニューの [実行] ボタンをクリックして、HTML 出力をフルスクリーンで表示します。画面の幅を徐々に狭くして、コンテンツが折り返される様子を観察します。

先頭行をコントロールのみに制限するには

手順
1. 次の要件を満たす HTML ページを開きます。
   • レスポンシブモードの HTML キャンバスで作成された HTML ページ。

   • 入力コントロールが配置されている HTML ページ。
2. 複数の入力コントロールがすべて単一コンテナ内でグループ化されていることを確認します。グループ化されていない場合は、次の手順を実行します。
   1. Ctrl キーを押しながら、すべてのコントロールを順に選択します。
   2. コントロールのいずれかを右クリックし、[HTML オブジェクトの操作] を選択します。
   3. コンテキストメニューから [選択項目を新規コンテナに追加] を選択します。

      選択したコントロールすべてを囲む枠線が表示されます。この赤色の枠線は、コンテナがレスポンシブであることを示します。

3. 入力パネルの左側にコントロールを表示するには、次の手順を実行します。
   1. コントロール入力パネルをクリックして [プロパティ] パネルを開きます。
   2. [コントロールパネル] の値を [はい] に変更します。
   3. ページを実行し、ページを拡大してフルスクリーンにします。先頭行にコントロールのみが表示されます。また、入力パネル内の複数のコントロールすべてがパネルの左側 (ユーザが期待する位置) に表示されます。

   [コントロールパネル] の値を [はい] に設定していない場合、ページサイズが大きくなると、これらのコントロールが自動的に右側に展開され、ページ幅全体が使用されます。

ポータルで使用するレスポンシブページを作成するには

手順
1. 次の要件を満たす既存のレポートを選択するか、新しいレポートを作成します。
   • WHERE 句で動的パラメータが指定されている。
   • デフォルトとして _FOC_NULL が使用されている。
   • [複数選択 OR] タイプのパラメータが含まれている。
   • [ファイル/フォルダのプロパティ] パネルで [パラメータ実行] プロパティ値が [いいえ] に設定されている。
2. 次の手順に従って、レスポンシブ HTML ページを作成します。
   1. [ホーム] タブの [コンテンツ] グループで [HTML/ドキュメント] をクリックするか、[環境ツリー] パネルでフォルダを右クリックし、[新規作成]、[HTML/ドキュメント] を順に選択して、HTML/ドキュメントウィザードを起動します。[次へ] をクリックします。

      [テンプレート、設定、テーマ] ウィンドウが開きます。

   2. [ページ設定] エリアで [レスポンシブデザイン] を選択し、[完了] をクリックします。

      HTML キャンバスが開きます。[プロパティ] パネルの [DOCUMENT] レベルで、[レスポンシブデザイン] プロパティが [はい] に設定され、[iFrame オブジェクトへのロード] プロパティが [はい] 設定されていることを確認します。

      [iFrame オブジェクトへのロード] プロパティを有効にすると、ポータル内のオブジェクトをコンテナの端に重ね合わせることが可能になります。たとえば、日付フィールドに値を挿入するポップアップカレンダーが配置されている場合、ユーザが日付を選択するためのカレンダーをコントロールコンテナに重ね合わせることができます。

      注意：[iFrame オブジェクトへのロード] プロパティを有効にすると、ページに <iFrame> タグの代わりに <DIV> タグが作成されます。ポータルは、<DIV> タグで囲まれた単一 HTML キャンバスページに制限されます。

      [RESPONSIVE：最小幅] は [320px] に設定され、[RESPONSIVE：最大幅] は [フルスクリーン] に設定されています。これらのデフォルト値は、ピクセル単位またはパーセント値で編集することができます。

   3. [リクエストとデータソース] パネルで [新規作成] アイコン横の下向き矢印をクリックし、[リクエスト -> パラメータ -> フィルタパネル] を選択します。

      [ファイルを開く] ダイアログボックスが表示されます。

   4. 手順 1 で指定したプロシジャを選択し、[OK] をクリックします。

      [新規パラメータ] ダイアログボックスが開きます。

   5. [上記の順序でコントロールに自動連鎖を設定する] を選択し、[OK] をクリックします。

      [新規パラメータ] ダイアログボックスが閉じ、HTML キャンバス上のコンテナ内にコントロールが表示されます。赤色の枠線は、レスポンシブデザインが有効であることを示します。

   6. [タスクとアニメーション] パネルを開き、送信ボタン (task2) の [リクエスト/アクション] 値が [リフレッシュ1]、[ターゲットタイプ] が [BI Portal のリフレッシュ] に設定されていることを確認します。
   7. キャンバスを右クリックして [ランタイムプレビュー] を選択するか、[ユーティリティ] タブの [ランタイムプレビュー] をクリックします。コンテンツが最大幅にまで拡張されます。キャンバス右端の黒色の縦線は、指定したフルスクリーン最大幅を視覚的に示す線です。
   8. HTML ページを保存します。

レスポンシブデザイン使用時のヒント