UI部品 基本編
Forguncyのプラグイン「インラインフレームタブ」を使用すると、ページの中に別のページを埋め込むことができます。
この機能を使って、今回はページ上に地図を埋め込む方法を解説します。
今回の例で使用するのは顧客一覧ページからそれぞれの顧客の詳細情報を見られるページに遷移するプログラムです。
データベース上に保存されている住所のデータを利用して、ページ上に表示する地図のURLを動的に生成するプログラムを作成します。
| プロジェクトファイル （作成バージョン：8.0.42.0） | map-before.fgcp map-after.fgcp（実装済みプロジェクトファイル） |
1.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順1-1.テーブルを確認
ナビゲーションウィンドウのテーブル欄には顧客マスタというテーブルが存在します。
このテーブルには顧客の名前やふりがな、住所や電話番号など基本的な顧客の情報が格納されています。
手順1-2.ページを確認
ナビゲーションウィンドウから顧客一覧ページを開きます。
このページにはリストビューが配置されており、中には顧客の名称と詳細ページへ遷移するための詳細ボタンが配置されています。
ナビゲーションウィンドウ上で太字表記になっているのはスタートページに指定されている証で、アプリケーションを起動したときに最初に開くページとしてこの顧客一覧ページが開きます。
顧客詳細ページには、顧客マスタが持つ各項目が表示されるよう既にセットされています。
ページ下部にある太い黒枠で囲われたセル範囲は、これから解説する手順で地図を表示するエリアです。
2.プラグインをインストールする
ファイル操作コマンドを使用するには、Forguncyにプラグインをインストールする必要があります。
プラグインのインストール方法については、オンラインヘルプを参照してください。
今回ご紹介するファイルの名前変更処理では、「インラインフレームタブ」のインストールが必要となります。
3.インラインフレームタブの配置
顧客詳細ページに地図を表示するためのインラインフレームタブ型セルを配置します。
手順3-1.セル型の変更
顧客詳細ページの太い黒枠で囲まれたセル範囲を選択します。
その状態で、リボンの[ホーム]>[セル型]のドロップダウンからインラインフレームタブを選択します。
セルがインラインフレームタブ型になると、下図のように「タブ1」「タブ2」と書かれたタブがプレビュー表示されます。
今回はタブを切り替える必要はないので、右ペインの[セル型]タブのタブを表示しないにチェックを入れて個の表示を消しておきます。
4.地図の動的表示設定
顧客一覧ページから顧客詳細ページに遷移した際に、選択した顧客のデータから地図を埋め込む設定を行います。
手順4-1.ページロード時のコマンド設定
顧客詳細ページが開く時に、その顧客の住所データを取得し地図ページを生成する処理をページロード時のコマンドで実装します。
顧客詳細ページを開いた状態で右ペインの[ページ設定]タブにあるページロード時のコマンド…ハイパーリンクを押下し、コマンドウィンドウを開きます。
手順4-1-1.住所データを取得
顧客マスタから住所のデータを取得します。
[新しいコマンド]ボタンを押下し、変数の設定コマンドを追加します。
変数名に「住所」と入力し、詳細を以下のように設定します。
- 変数値：データベースのテーブルを参照
- 対象テーブル：顧客マスタ
- 単一のフィールド
- 対象フィールド
- 対象フィールド：[住所]
| フィールド | 条件 | 値 |
|---|---|---|
| [顧客名] | =（等しい） | =F5 |
手順4-1-2.住所データを取得
埋め込む地図ページのURLを生成します。
[新しいコマンド]ボタンを押下し、変数の設定コマンドを追加します。
変数名に「マップURL」と入力し、変数値を以下のように設定します。
- 変数値：値、または数式
- =”https://maps.google.co.jp/maps?output=embed&q=”&住所
手順4-1-3.インラインフレームタブ型セルに地図ページを表示
手順3で配置したインラインフレームタブ型セルに生成したURLの地図ページを埋め込みます。
[新しいコマンド]ボタンを押下し、インラインフレームタブにページを表示コマンドを追加します。
外部ページ（アドレス指定）を選択し、アドレス欄に先ほど作成した変数マップURLを使い「=マップURL」と入力します。
これで設定は完了です。
5.デバッグを実行する
デバッグ実行してページを確認します。
デバッグを行うには、リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
顧客一覧ページで任意のレコードの[詳細]ボタンを押下すると顧客詳細ページへ遷移し、住所欄に記載の通りのGoogleMapが表示されていることが確認できます。
ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。
こちらもぜひご活用ください。
