IM-FormaDesigner for Accel Platform 作成者 操作ガイド 第24版 2019-08-01

5.1.9. スマートフォン表示を設定する

IM-FormaDesigner で作成したアプリケーションでは、スマートフォンで表示したときにPCと同じ表示にするか、スマートフォンに適した表示にするかを設定できます。
ここでは、フォームのPC表示・スマートフォン表示の設定方法について説明します。

5.1.9.1. 「スマートフォン表示」とは

IM-FormaDesigner のアプリケーションの実行画面に対し、スマートフォンに適したレイアウトで表示できます。
「スマートフォン表示」を利用するためには、以下の2つの手順の設定が必要です。
  1. フォーム・デザイナでの「スマートフォン設定」でのスマートフォン向けレイアウトの設定
  2. フォーム遷移詳細編集での「スマートフォン表示」の設定
それでは、具体的な手順を説明します。

コラム

「スマートフォン設定」にて、利用可能な画面アイテムについては、「 IM-FormaDesigner リリースノート 」の「 IM-FormaDesigner 機能一覧 」を参照してください。

5.1.9.2. スマートフォン向け画面の表示を設定する

「スマートフォン設定」でスマートフォン向けのレイアウトを設定する

「スマートフォン表示」を利用する場合、対象のフォーム単位に「スマートフォン設定」でレイアウトを設定します。
「スマートフォン設定」では、フォーム上の画面アイテムの配置順に基づいて、縦1列のレイアウトに自動調整します。
../_images/sp_layout.png
フォームの作成後に、「フォーム・デザイナ」から以下の手順で「スマートフォン設定」でレイアウトを設定します。
  1. 作成済みのフォームに対して、編集画面を表示します。

  2. 「スマートフォン設定」をクリックします。

    ../_images/proc_1_110.png
  3. 「プレビュー」をクリックし、スマートフォン表示のプレビュー画面を表示します。
    初期状態は、フォームの配置順に基づいて、自動的にレイアウトを生成するため、スマートフォンに適した表示のできていない個所を確認します。
    ../_images/proc_1_21.png
  4. スマートフォンでのレイアウトを適切な内容とするために、アイテムの設定を変更し、「確定」で保存します。

    • 水平線を挿入する

      項目間を区切る目的で「水平線」を挿入することができます。
      (アイテムの「横線」「縦線」はスマートフォンでは表示対象外です。)
      1. 「スマートフォン設定」の「水平線」をドラッグし、アイテム一覧部分の任意の場所にドロップします。

        ../_images/horizontal_line_1.png
      2. プレビューで確認すると、「水平線」が挿入されたことが確認できます。

        ../_images/horizontal_line_2.png
    • ボタンの表示場所を変更する

      ボタン系のアイテムは、ヘッダ・コンテンツ・フッターに配置することができます。
      初期では、「フッター」に配置されます。
      1. 「スマートフォン設定」のフッターにある「ボタン」をドラッグし、ヘッダーに移動します。

        ../_images/move_button_1.png
      2. プレビューで確認すると、ヘッダーにボタンが表示されることが確認できます。

        ../_images/move_button_2.png

        コラム

        フッターに5つ以上配置した場合、4番目以降のボタンは「more」から別途表示される画面から操作します。
    • アイテムの表示を変更する

      スマートフォン向けに、アイテムの表示・非表示を設定できます。
      1. 「スマートフォン設定」で非表示にするアイテムの「設定」をクリックします。

        ../_images/set_display_1.png
      2. 設定に表示されるアイコンが image_display から image_none になったら、スマートフォンでは表示されなくなります。

        ../_images/set_display_2.png
  5. スマートフォン設定で「確定」をクリック後、「更新」をクリックして保存します。

    ../_images/proc_1_31.png

スマートフォンで表示する画面を設定する

フォーム遷移の「スマートフォン表示」を有効にすると、「スマートフォン設定」のレイアウトを実行画面で利用できます。
  1. 「スマートフォン設定」を行ったアプリケーションの「フォーム遷移一覧」を表示します。

  2. 「スマートフォン表示」の対象の画面の「詳細編集」をクリックします。

    ../_images/proc_2_110.png
  3. 「スマートフォン表示」を「スマートフォン版」として、「更新」をクリックします。

    ../_images/proc_2_21.png
  4. 以上で、スマートフォン向けのレイアウトで表示するための設定が完了しました。

5.1.9.3. 「スマートフォン設定」画面の機能と各部の説明

「スマートフォン設定」画面については、「 IM-FormaDesigner デザイナヘルプ 」の「 スマートフォン設定 」を参照してください。