IM-FormaDesigner for Accel Platform 画面アイテム作成ガイド 第6版 2017-04-01

7.1. 概要

7.1.1. スマートフォン表示機能

IM-FormaDesignerでは、PC版でデザインした帳票をスマートフォンに最適化されたUIで表示する機能を提供しています。
スマートフォン版の画面アイテムが縦方向に配置されて表示されます。
../../_images/outline_01.png

コラム

スマートフォン表示の詳細については、「 IM-FormaDesigner 仕様書 」の「 スマートフォン 」を参照してください。

7.1.2. 画面アイテムの開発

本ドキュメントの手順に従って、製品標準以外で開発した画面アイテムについてもスマートフォン対応させることが可能です。

IM-Mobile Framework

スマートフォン版 画面アイテムは、IM-Mobile Frameworkにて提供されているモバイルフレームワーク(jQuery Mobile)を利用して開発します。

全体の作業の流れ

スマートフォン対応の基本的な流れとしては、以下の通りです。
  1. スマートフォン版の画面アイテムを実装する
    • PC版と同様に、デザイナーで設定したプロパティに基づいて画面を表示するスクリプト開発モデルの資材(プレゼンテーション・ページ/ファンクション・コンテナ)を用意します。
    • スマートフォン版のUIは、モバイルフレームワーク(jQuery Mobile 1.4.5)を利用して開発します。
  2. イベント処理を実装する
    • 画面アイテムの操作に対してイベントリスナーの設定・イベント発生時の処理を実装します。
    • イベント処理は、スマートフォン表示の画面で読み込まれる静的なJavaScriptファイルに記述します。
  3. 画面アイテムをシステムに登録する
    • 開発したスマートフォン版 画面アイテムをシステムに登録します。

注意

スマートフォン版専用のプロパティ画面を用意することはできません。
PC版に設定したプロパティ情報が画面アイテムのファンクション・コンテナの引数に渡されます。

7.1.3. 画面アイテム レイアウトパターン

モバイルフレームワークを利用して要件に合わせた独自のUIデザインを開発することが可能ですが、製品としては、スマートフォン版 画面アイテムに関して以下の3つパターンを想定しています。
../../_images/outline_02.png

コンテンツに配置する画面アイテム

メインエリアに配置する画面アイテム。
../../_images/outline_03.png

ヘッダー・フッターに配置する画面アイテム

ヘッダーまたはフッターに配置する画面アイテム。
../../_images/outline_04.png

リンク機能のある画面アイテム

メインエリアに配置された画面アイテムから別ページに遷移可能な画面アイテム。
../../_images/outline_05.png

7.1.4. 画面アイテム構成ファイル

スマートフォン版 画面アイテムを構成するファイルは、以下の通りです。
ファイル名 説明
sp_view (html) スマートフォン版 画面アイテムを出力するスクリプト開発モデルのプレゼンテーション・ページ ファイルです。
sp_view (js) スマートフォン版 画面アイテムを出力するスクリプト開発モデルのファンクション・コンテナ ファイルです。
sp_%アイテムタイプ% (js) イベント処理を記述するクライアントサイド・ファイル。
type (js) スマートフォン版 画面アイテムをシステムに登録するための設定を行うサーバサイド・ファイルです。
sp_view_ex (html) 遷移先画面(リンク機能)を出力するスクリプト開発モデルのプレゼンテーション・ページ ファイルです。
sp_view_ex (js) 遷移先画面(リンク機能)を出力するスクリプト開発モデルのファンクション・コンテナ ファイルです。