FileMaker 「レイアウトツール」中級編(9章)

FileMaker公式テキスト中級編!!!

中級編では、
中級開発者として複数の利用者を想定してシンプルなカスタムAppを作成する
といった内容になります。

全16章です。
前回は、8章『画面を設計しよう』について学びました。
👉FileMaker 中級編(8章)

今回は、9章『レイアウトツール』についての知識を学びます。

画面について

画面構成の基本を確認します。
画面の表示には「表示形式」と「モード」があります。

●3つの表形式

  • フォーム形式 → 1件ごとにレコードを表示する 
  • リスト形式 → 複数件のレコードを表示する 
  • 表形式 → 複数件のレコードをスプレッドシートのように表示する  

●4つのモード

  • ブラウズモード(⌘ B)→ データの表示、作成、編集および削除を実行する 
  • 検索モード(⌘ F) → データを検索する 
  • レイアウトモード(⌘ L) → レイアウトを作成したり編集したりする 
  • プレビューモード(⌘ U) → 印刷のイメージを確認する 

レイアウトモード

基本は以前の初級編でおさえましたね!!!
👉FileMaker 【11】画面設計(レイアウト)

[レイアウトの管理]ダイアログ 

初めて扱うダイアログです。

ファイルに作成されているレイアウトを一覧で確認、管理するためには
[レイアウトの管理]ダイアログを使用します
⌘ +[Shift]+[L] 

フォルダや区切り線も使いながら、作業しやすいようにレイアウトを整理できます。
レイアウトの作成、複製、削除も可能です。 

●チェックボックス
レイアウト名の左にあるチェックボックスを「オン」にするとレイアウトポップアップメニュー に表示されます。 

レイアウトポップアップメニューでのレイアウト切り替えをさせないように利用することができます。 想定している画面遷移以外のルートでは、ユーザの期待しているレコード以外が表示されるかもしれないからです。

●レイアウトの順番 
行をドラッグすることでレイアウト順を変更できます。
変更した順番はレイアウト番号やレイアウトポップアップメニューの表示に反映されます。

※レイアウト番号
Get ( レイアウト番号 ) 関数で取得できます。
レイアウトモードのステータスツールバーにブックアイコンが表示されている場合は、そこにも表示されます。  

●ダイアログの下には、いくつかのボタンがあります。

 ・[新規]
新しいレイアウトの作成を開始します。他にもフォルダや区切り線を作成できます。
フォルダ
レイアウトをフォルダに入れて整理できます。ポップアップメニューで「フォルダ…」を選択してフォルダ名を付与すると作成されます。
区切り線
レイアウトとレイアウトの間に、区切り線を入れて整理できます。
ポップアップメニューで「区切り線」を選択すると挿入されます。レイアウトポップアップメニューにも表示されます。

[編集]
選択しているレイアウトの[レイアウト設定]ダイアログを表示します。
[複製]
選択しているレイアウトを複製して新しいレイアウトを作成します。
ウィザードは表示されません。
[削除]
選択しているレイアウトを削除します。
[開く]
選択しているレイアウトを開きます。新しいウインドウで表示されます。 

「区切り線」を使い、レイアウトの一覧表示を見やすくしたり
「フォルダ」作成をし開発者用のレイアウトをまとめて入れておくなど、レイアウトを確認しやすいように設定ができます。

レイアウトの作成

●テーブルの作成とレイアウト
新しいテーブルが作成されると、自動で次の作業が実行されます。

・ リレーションシップグラフに TOをつくる
・ 上記の TOを使ったレイアウトをつくる 

新規レイアウト作成 

⌘ N レイアウトの新規作成

[新規レイアウト/ レポート]ダイアログが表示されて、ウィザードが開始します。
3つのことを指定して進めます(「レポート」では、さらに詳細なことを指定します)

今までにもやっているので内容は省略します。。。

👉テキスト初級編を終えて「カスタムAppつくってみた」 8ステップ【5〜8】
の目次 7、「レイアウト作り」

フィールドの配置 

レイアウトは、指定したTO と、そのTO に関連するデータの入出力を行う場所です。
データを表示するには、適切なフィールドを配置する必要があります。

配置方法は大きく分けて2種類用意されています。 

・レイアウトの左パネルの「フィールド」タブ
・ ステータスツールバーの「フィールド/フィールドコントロール」ツール 

「フィールド」タブ(左パネル) 

フィールドの一覧が表示されています。
コンテンツ エリアにドラッグ& ドロップすると配置されます。
一度に1つだけではなく複数のフィールドを配置できます。

●[ドラッグ]設定 
下部の設定で、次の内容をあらかじめ選択できます。 

  • [フィールド配置] 複数のフィールドの並び方(縦/横)
  • [ラベル] フィールドラベルの位置(ラベルなしも選択可能)
  • [コントロールスタイル] フィールドのコントロールタイプ 

※配置後、インスペクタ(右パネル)で任意のスタイルを設定したり外観の変更ができます。 

ステータスツールバーのツール 

ステータスツールバーからのフィールド配置はレイアウトツール内の
「フィールドツール」
「フィールド/ コントロールツール」
の2種類のツールで可能です。

●[フィールドツール]
フィールドツールを長押しして、そのままドラッグします。
その後、配置したいフィールド名を選択してラベルの有無を指定します。
配置されたフィールドのコントロールスタイルの変更などはインスペクタを使います。 

●[フィールド/コントロールツール]
フィールド/ コントールツールを長押しして、表示されたポップアップメニューからコントロールスタイルを選択します。そのままレイアウト上で任意の四角形を描いてドラッグします。
その後、配置したいフィールド名を選択してラベルの有無を指定します。
配置されたフィールドのコントロールスタイルの変更などはインスペクタを使います。 

※フィールドのコントロールスタイル(右 インスペクタの「データ」タブ)
フィールドのレイアウト上の表示は、7 種類です。

  • 編集ボックス
  • ドロップダウンリスト
  • ポップアップメニュー
  • チェックボックスセット
  • ラジオボタンセット
  • ドロップダウンカレンダー
  • マスク付き編集ボックス 

コントロールスタイルは、配置時だけではなく配置後も 変更が可能です。

レイアウトの設定 

初めて扱うダイアログです。
レイアウトの設定を確認します。

次のいずれかの方法でダイアログを表示します。 

  • 方法1:メニュー
    [レイアウト]-[レイアウト設定…]メニューを選択します。
  • 方法2:その他
    ・ レイアウトバーのレイアウト名の右にある鉛筆アイコンをクリックします。
    ・[ レイアウトの管理]ダイアログで[編集]ボタンをクリックします。 

[レイアウト設定]ダイアログ 

このダイアログでは、いくつかの設定が可能です。

4種のタブ

  • 一般
  • 表示
  • 印刷
  • スクリプトトリガ

●「一般」タブ 

  • [レイアウト名]
  • [レイアウトメニューに表示させる]
    レイアウトポップアップメニューの表示/非表示
    ([レイアウトの管理]ダイアログのチェックと同じ) 
  • [レコードを表示:]
    レイアウトを表示させる TO名 
  • [レコードの変更を自動的に保存する]
    入力が終わりフィールドから離れた時に自動的に保存する。
    ※「チェックなし」だと、確認ダイアログが表示される。
  • [アクティブ時にフィールドのフレームを表示]
    入力中のフィールドのフレームを表示する。
  • [現在のレコードのみフィールドに枠を表示する]
    現在入力中のフィールドがあるレコードの、フィールド全てにフレームを表示する。
    ※リスト形式時に、有効な効果。
  • [現在のフィールドインジケータをリスト形式に表示]
    チェックが「オン」で、リスト形式の場合に、左端に『現在のレコード』がわかるようにインジケータが表示されます。 
    ※詳しくは他章で
  • [クイック検索を有効にする]
    チェック「オン」の場合、レイアウトでクイック検索が可能です。
    インスペクタの「データ」タブ の[動作]でレイアウト上のフィールドを対象とするかどうか指定します。
    なお、[クイック検索をリセット]ボタンはレイアウト上のすべてのフィールドがクイック検索の対象にリセットされます。 
    ※レイアウト上の関連TOからのフィールドはクイック検索に時間がかかります。
    これのみ選択し、「データ」タブからクイック検索をリセットすることをお勧めします。

●「表示」タブ
レイアウトのデフォルトの表示形式
レイアウトバーの「表示形式の切り替え」の有効/無効 について設定が可能です。 

ウィザードを使用して作成したレイアウトは、ウィザードで指定した表示形式以外には切り替えできないように設定されています。
他の形式に切り替えできるようにするには、このタブで設定が必要です。 

●「印刷」タブ
印刷に関する設定を行います。 

●スクリプトトリガ
レイアウトを切り替える前や後などのタイミングでスクリプトを実行するよう設定します(スク リプトトリガについては後述します)

※詳しくは他章

<レイアウト設定の変更>
レイアウト設定で指定したTO を変更する場合は注意してください。
コンテキストが変わると、レイアウト上に配置したフィールドが表示できなくなったり、スクリプトトリガで指定したスクリプトが動作しなくなることなどがあります。 

レイアウトパート

パートの種類 

11種類あります。

●上部ナビゲーション
画面の一番上に表示されます(順番は変えられません)
レイアウトのナビゲーションに使用するボタンなどを配置するパートとして使用されます。

ブラウズモードで画面をスクロールしても常に画面の上部位置に固定し表示されます。表示の拡大と縮小の影響を受けません。印刷もされません。 

<アクティブなフィールドを配置すると>
ブラウズモード:現在のレコード

●タイトルヘッダ
上部ナビゲーションの下に表示されます(順番は変えられません)
印刷では先頭ページに一度だけ表示されます。

「タイトルヘッダ」と「ヘッダ」が両方が設定されているレイアウトを印刷すると。。。
最初のページは「タイトルヘッダ」のみ印刷されます。
2 ページ目以降は「ヘッダ」のみが印刷されます。 

<アクティブなフィールドを配置すると>
ブラウズモード:現在のレコード
印刷:最初のレコード

●ヘッダ
「上部ナビゲーション」、「タイトルヘッダ」の下に表示されます(順番は変えられません)
印刷時は各ページに表示される。
主に、画面名や表形式でフィールド名を配置するためのパートとして使用されます。

 <アクティブなフィールドを配置すると>
ブラウズモード:現在のレコード
印刷:各ページ最初のレコード

●ボディ
対象レコードの各レコードごとのデータを表示するパートとして使用されます。

 <アクティブなフィールドを配置すると>
正常に表示

●フッタ
「下部ナビゲーション」、「タイトルフッタ」の上に表示されます(順番は変えられません)
印刷時は各ページに表示される。

 <アクティブなフィールドを配置すると>
ブラウズモード:現在のレコード
印刷:各ページ最後のレコード

●タイトルフッタ
「下部ナビゲーション」の上に表示されます(順番は変えられません)
印刷時は最後のページにのみ表示される。

<アクティブなフィールドを配置すると>
ブラウズモード:現在のレコード
印刷:最後のレコード

●下部ナビゲーション
画面の一番下に表示されます(順番は変えられません)

ブラウズモードで画面をスクロールしても常に画面の下部位置に固定し表示されます。表示の拡大と縮小の影響を受けません。印刷もされません。 

<アクティブなフィールドを配置すると>
ブラウズモード:現在のレコード

●総計(前部または後部)
このパートに集計タイプのフィールドを配置すると、すべての対象レコードの集計値が表示されます。
1つのレイアウトに前部総計と後部総計を1つずつ設定できます。

・ 前部総計 表示位置はヘッダの下で小計パートとボディを下に配置できます。
・ 後部総計 表示位置はフッタの上で小計パートとボディを上に配置できます。

<アクティブなフィールドを配置すると>
前部:最初のレコード
後部:最後のレコード

●小計(前部または後部)
このパートに集計タイプのフィールドを配置すると、パートの定義で設定されているフィールドでソートされたレコードの各グループの集計値(小計)が表示されます。
1つのレイアウトに複数の小計パートを設定できますが、パートの定義で設定できるのは1レイアウトごとに1フィールド1 回だけです。
「小計」パートは「ボディ」パートの前または後に表示されます。 

<アクティブなフィールドを配置すると>
前部:区分け内最初のレコード
後部:区分け内最後のレコード

※グローバル格納のフィールドは、ヘッダやフッダでよく利用されます。

レイアウトエリア

ブラウズモードでデータが表示されるコンテンツエリアとなるのが「レイアウトエリア」です。 

レイアウトエリアのサイズ 

レイアウトエリアのサイズは、インスペクタの「位置」タブの[サイズ]に表示されています。
この数値を変更することで任意に設定できます。 

※ブラウズモードでは、ウインドウ内のコンテンツエリアよりもレイアウトエリアが大きい場合、 スクロールバーが表示されます。小さい場合は余白が表示されますが「アンカー」の設定によりコンテンツエリア一杯にレイアウトが表示されるような設定ができます。 

●パートのサイズをドラッグで変更:高さ
パートの境界線を上下にドラッグして高さを変更可能です。
パートになにかレイアウトオブジェ クトが配置されていると、それ以上は縮まりません。

しかし。。。
[Option]キー(macOS)を押しながらパートの 境界線のドラッグ  
で縮めることができます。

●パートのサイズをドラッグで変更:幅
右のレイアウトエリアの境界線を左右にドラッグしてサイズを変更できます。
配置されているレイアウトオブジェクトは関係ありません。

エリア外のレイアウトオブジェクト 

レイアウトエリアの「外」にレイアウトオブジェクトを配置できます。
その場合、ブラウズモードのフォーム形式、リスト形式ではコンテンツエリアに表示されません。

画面ステンシル 

レイアウトエリアのサイズは想定するウインドウサイズと合わせます。
サイズが大きいと、ユーザは 常に縦横のスクロール操作をする必要があるかもしれません。

レイアウトエリアのサイズを簡単に設定できるガイドが「画面ステンシル」です。
(レイアウトバー右) 

主要なパソコンやモバイルデバイスの画面サイズのガイドを表示する機能です。
いくつかのサイズ が用意されています。
さらに「カスタムサイズ」を登録することが可能です。 

レイアウトオブジェクトの識別バッジ 

レイアウトモードで[表示][オブジェクト][ボタン]メニューを選択
ボタンオブジェクトの右下に小さい水色の四角が表示されます。
これが「識別バッジ(アイコン)」です。 

これらのバッジを表示するには。。。
レイアウトモードで、
[表示][オブジェクト]メニューで表示するバッジのタイプを選択します。

バッジの上にマウスを持っていくと、その設定内容がポップアップヘルプで表示されます。
この他にも条件付き書式、ポップアップヘルプなどが設定されていることが一目で解るようにいくつか用意されています。
またクイック検索の対象かどうかもわかるようになっています。 

ステータスツールバーとレイアウトバー 

フィールドをはじめとしてレイアウトに置かれるものは様々ですが、これらを総称して「レイアウ トオブジェクト」と呼びます。レイアウトツールを使用して設定します。 

ステータスツールバー 

ツールのボタンにはいくつかのルールがあります。

・レイアウトモードに切り替えると「選択ツール (矢印アイコン)」が選択されます。 
・他のツールを1 回クリックすると、そのボタンがグレーになります。
・レイアウトオブジェクトを作成するとグレーが解除されて選択ツールに戻ります。 

●ツールのロック
連続してツールを使用する場合は、ボタンをダブルクリックします。
ボタンが青になりレイアウトオブジェクトを追加しても解除されなくなります。
解除には、[Esc]キーや[Enter]キーを押します。
または、他のツールをクリックしても解除されます。 

●常にロックする
[環境設定]ダイアログの「レイアウト」タブで[レイアウトのツールをロックする]のチェックを 「オン」にするとクリックしたツールが常にロックされた状態になります。 

レイアウトバー 

レイアウトバーにもツールが配置されています。
・ テーマの変更
・ 画面ステンシルの表示/非表示 

インスペクタ(右パネル)

レイアウトオブジェクトの設定に使用します。
次の順番に4つのタブにツールが用意されています。

  • 位置
  • スタイル
  • 外観
  • データ

●位置タブ

位置に関する設定を行うタブです。 

 [▼位置]
レイアウトオブジェクトの位置や名前付与などに使用します。

・[名前] でレイアウトオブジェクトに名前を付与します。
オブジェクト名は[オブジェクトへ移動]スクリプトステップ などで使用できます。 

・[ポップアップヘルプ] の設定も行うことができます。 

[▼自動サイズ調整]
「アンカー」を使って、ウインドウサイズの変更に合わせてレイアウトオブジェクトのサイズを
自動変更したり、水平または垂直に移動する設定ができます。
上下左右の位置の調整が錠のマークに固定されるイメージです。

気をつけたい2パターンの違い

●フィールドが属するレイアウトに対して
レイアウトの中での上下左右の端からの距離が一定の位置に固定される。

●フィールドが所属するパネルオブジェクト(タブパネルなど)に対して
タブの中での上下左右の端からの距離が一定の位置に固定される。

少し挙動が変わるので注意⚠️

[▼配置と整列]
複数のレイアウトオブジェクトの整列、サイズを合わせる、 重ね順、グループ、ロックに使用します。
整列のショートカットを覚えると便利です。

・⌘+[Option]+上下左右矢印キー

[▼グループ化]
複数のレイアウトオブジェクトのグループ化と解除が可能です。
※グループ化後に設定したボタン設定などは、グループを解除すると消去されるため注意します。

[▼スライドと表示]
印刷時のレイアウトやフィールドの空き部分を狭める設定を行います。

[オブジェクトの表示]では 印刷時にレイアウトオブジェクトを非表示にする設定ができます。設定の結果はプレビューモード で確認できます。 

[▼グリッド]
レイアウトにグリッドを表示できます。
間隔やステップは数値を入力すると変更できます。 

その他のタブ

●「スタイル」タブ
スタイルを設定するタブです。

●「外観」タブ
見た目の設定を行うタブです。テーマやスタイルについても設定が可能です。

●「データ」タブ
レイアウトオブジェクトに表示されるデータについて設定するタブです。

[▼フィールド]
配置するフィールドの指定、コントロールスタイルの指定などを設定します。
[▼動作]
条件による非表示や、レイアウト上でフィールドへ入力できるかどうかなどを設定します。
[次のオブジェクトへの移動に使用するキー]
レイアウトオブジェクトへの移動(タブ順)に使用できるキーボードのキーを設定します。
[インプットメソッドの設定][タッチキーボードタイプ]
日本語入力のモード、iPad やiPhoneで表示するキーボードを設定します。

[▼データの書式設定]
フィールドの表示に関する書式を設定します。 

※インスペクタの設定は、本章の後半以降で徐々に解説します。 

オブジェクトタブ(左パネル) 

左パネルのタブの1 つです。

「オブジェクト」タブは、レイアウトに配置されているすべてのレイアウトオブジェクトを表示しています。 

・レイアウト上で選択したフィールドを、強調表示してくれる。
・オブジェクトタブで、フィールドを選択すると、レイアウト上のフィールドを選択してくれる。

●目のアイコン 
レイアウトオブジェクトをクリックすると、目のアイコンが表示されます。
これは、選択されていることを表しています。クリックすると非表示になります。

※非表示は、レイアウトモードでのみ機能します。
FileMaker Pro を終了して再度開くと表示が解除されます。 

●表示順の変更
行をドラッグして順を変更すると、レイアウトエリア上のオブジェクトの重ね順が変わります。

●オブジェクトのタイプでフィルタ 
タイプごとに表示をフィルタすることが可能です。
例えば、ボタンだけを表示するには、フィルタアイコン(ロート型ボタン)をクリックすると表示されるタイプの中から「ボタン」を選択すると表示がフィルタされます。  

●レイアウトオブジェクトの検索
上部の検索ボックスに任意の文言を入力して、その結果に合致するレイアウトオブジェクトを表示することが可能です。 

レイアウトモードでは様々な設定ができます。
しかし、一番厳格な設定はフィールドのオプション設定ということを忘れないでください👍

フィールドオブジェクトについて 

フィールドに対して、様々な設定が用意されています。

フィールドのコントロールスタイル 

フィールドのレイアウト上の表示スタイルは7種類です。

  • 編集ボックス
  • ドロップダウンリスト
  • ポップアップメニュー
  • チェックボックスセット
  • ラジオボタンセット
  • ドロップダウンカレンダー
  • マスク付き編集ボックス 

●編集ボックス
単純にフィールドにデータを表示したり入力するには「編集ボックス」を使用します。

●ドロップダウンカレンダー
日付タイプフィールドの入力補助に最適です。
カレンダーで日付をクリックすると西暦4桁の日付が入力されます。
データのレイアウト上の表示はインスペクタの[データの書式設定]で設定します。  

●マスク付き編集ボックス
見た目は編集ボックスと同様ですが、入力するとデータが「●」で表現されます。
入力されている文字数に関わらず一定数の●になります。

注意するのは、
これは「表示だけ」で格納されるデータが暗号化されているわけではないことです。
また、レイアウトごとに指定する必要があります。 

値一覧 

残りの4種のコントロールスタイルは値一覧に関するものです!

値一覧はフィールドに割り当てて入力を補助するものです。
値一覧は、複数のフィールド、ファイルで使用できます。
次の3種類を設定できます。

  • フィールドの値を使用
  • 他のファイルの値一覧を使用
  • カスタム値を使用 

●[フィールド値を使用]
TO(テーブル)とフィールド(2 つまで)を指定します。
指定したフィールドに入力されているデータによって値一覧の内容が変化します。
入力されるのは「最初のフィールド」のデータです。 

表示されるデータはユニークな内容にまとめられて、ソートされます。

<値一覧の元になるデータの範囲>
指定したTO のフィールドの
[すべての値を含める]
全てのデータを元にユニークな内容を表示するか
コンテキスト⇨ 依存しない(どこでも使える)

[次のテーブルから関連レコードの値のみを含める](動的値一覧)
指定した関連レコードのデータのみを元にするか
コンテキスト⇨ 依存しない(どこでも使える)/依存する

を選択できます。 

[2番目のフィールドの値のみを表示] 

フィールド値の値一覧では、2 つまでのフィールドを指定できます。
「最初のフィールド2番目のフィールド」の並び順でデータが表示されます。

しかし[2番目のフィールドの値のみを表示]を「オン」にすると。。。
2番目のフィールドのデータだけが表示されるようになります。

この特徴を利用して、実際に入力される内容とは別のデータを見せてユーザに選択させることが可能です。


次のようなフィールド(「商品」TO)が設定されています
・ 最初のフィールド 主キー
・ 2番目のフィールド 商品名
[全ての値を含める]と、[2 番目のフィールドの値のみを表示]が「オン」の値一覧を作成します。


レイアウトで「商品外部キー」フィールドにこの値一覧を設定すると
商品名のみのリストが表示されます。

しかし実際は、ユーザ商が品名を選択することで「商品外部キー」フィールドに「商品」 TO の主キーを入力していることになります!!!

インスペクタの[値一覧でデータ書式を上書き]
ポップアップメニューでは[値一覧でデータ書式を上書き]を「オン」にすることで実際に入力されるデータではなく、ユーザが選択した見た目のデータをレイアウト上で表示できます。 

●[カスタム値を使用]
コンテキスト⇨ 依存しない(どこでも使える)
設定されたデータ(改行区切りの文字列)が常に表示されます。

※インスペクタで[他の値の入力を許可]を「オン」にするとデータをレイアウト上から編集できます。 ただし、誰かがデータを変えてしまったら、それまでと違う内容(選択肢)になってしまうかもし れません⚠️

●[他のファイルの値一覧を使用]

 

 

値一覧を使用するコントロールスタイル 

値一覧では4 つのコントロールスタイルのいずれかを選択して使うことができます。

  • ドロップダウンリスト 候補以外の入力可能
  • ポップアップメニュー 候補のみ入力
  • チェックボックスセット 複数の値入力可能
  • ラジオボタンセット  1つの値のみ入力

・アイコンや矢印表示オプション

「表示」 クリックで動作
「非表示」 Tab等のキー操作で動作

レイアウトオブジェクトの表示/非表示 

・「 ○○」フィールドが□□だったら「△△」フィールドに入力して欲しい
・「 ○○」フィールドが ×× だったら「△△」フィールドに入力しないで欲しい
という場合の設定ができます。

ある条件に合致したらフィールドが「表示/非表示」になる という機能です。

1、フィールドを選択
2、 インスペクタの「データ」タブの[▼動作]
[次の場合にオブジェクトを隠す]で設定
3、 オブジェクトを表示しない場合の計算式を入力
 見積管理::見積状況 ≠ “結果確定済” 
見積もり状況が「結果確定済」でない場合表示しない。

●表示形式とレイアウトオブジェクトの表示/非表示
表形式では、この設定が有効になりません。
また、リスト形式表示では、表示されている各レコード に対して評価が起こります。
そのために、たくさんの非表示設定をすると表示が遅くなること があります。

● レイアウトオブジェクトの表示/非表示の注意点
ポータルそのものやポータル行中のフィールドなどに適用できますが、ポータル行の表示/非表示には使えません。
その場合はポータルフィルタを使います。そして、タブパネル、スライドコントロールパネルの1つのパネルだけに適用することはできません。

クイック検索対象の指定 

レイアウト設定で[クイック検索を有効にする]のチェックが「オン」の場合、クイック検索が有効 です。
さらに、レイアウト上に置かれているフィールドごとに「クイック検索の対象/非対象」を設定できます。 

・ 集計タイプフィールド
・ オブジェクトタイプフィールド
・ グローバル格納フィールド

 

これら以外は、レイアウトに配置されると自動的にクイック検索の対象に設定されます
(クイック検索も索引を使用しています)

表示][オブジェクト][クイック検索]メニューを選択するとバッ ジ(虫眼鏡マーク)が表示されます。検索に時間がかかるフィールドがバッジの色でわかります。

・ 緑はクイック検索対象
・ 黄はクイック検索対象であるが、検索に時間が掛かるもの
索引が作成されないフィールド、または、関連テーブルのフィールド
・ グレーはクイック検索対象外 

フィールドへの移動 

フィールドに関する設定は、他にもあります。どのような順番で入力するかです。

・インスペクタの「データ」タブの[▼動作]
「次のオブジェクトへの移動に使用するキー」 のチェックのオン/オフで設定  

3 種類のキーで移動することが可能です。
・[ Tab]
・[ Enter]
・[ return] 

<設定の注意点>
フィールドの移動に[Enter]キーを使用すると
・ レコード確定
・ スクリプトの再開
・ 検索実行
が[Enter]キーでできません。
また、フィールドに改行を入力できないようにするためにも使用できます。

 

フィールドの移動に[Retern]キーを使用すると
・ フィールドの中に改行を入力する
ができなくなります。 

●タブ順 
[レイアウト][タブ順設定…]メニューで[タブ順設定]ダイアログから
現在の設定を確認したり順番を設定できます。 

様々なレイアウトオブジェクト 

初級編でも学習してきましたので、新しいもののみ解説します。

  • テキスト/線/図形
  • ボタン/ボタンバー/ポップオーバーボタン
  • タブコントロール/スライドコントロール
  • ポータル
  • Web ビューア
  • グラフ 

ポータル

レイアウトに指定されているTO の関連レコードを複数表示するために使用するものです。

●ポータルの中の配置
ポータルに表示するレイアウトオブジェクトは、1 行目に配置します。

配置できるのは。。。

・ フィールド
・ テキスト
・ 線/図形
・ 画像
・ ボタン/ボタンバー/ポップオーバーボタン 

配置できないものは。。。
・ タブコントロール/スライドコントロール
・ グラフ
・ Webビューア
・ ポータル 

Web ビューア

レイアウトにWeb サイトを表示するために使用するレイアウトオブジェクトです。
入力されているデータをURLの引数として使用することも可能です。 

Web ビューアをレイアウト上に配置すると次図のダイアログが表示され、
Web ビューアの設定を行うことができます。 

大きく分けて2通りの使い方ができる

  • Webページの表示
  • データURLの表示

<注意事項>

・URLスキーマーを正しく指定 「https://」「ftp://」「file://」etc.

・OSのデフォルトのブラウザに準拠(Macはsafari)
※これらの環境で動作すれば、問題なく表示できる。


・ブラウザのセキュリティ・機能設定を確認(JavaScript etc.)
※そのブラウザの設定などがそのまま引き継がれる。
無効になっている設定があると使えないこともある。

●Webページの表示

地図を表示したりWeb検索などが可能です。
URLをフィールド値や計算式で指定することも可能です。

なお、インターネット上のWeb サイトの表示を前提としたWeb ビューアを使用する場合、
インターネットに接続できるネットワーク環境が必要です。 

例1 Webページの表示
1、Webビューアの範囲指定
「Webビューアの設定」のダイアログ表示

2、[Webアドレス][指定…]をクリックすると「計算式の指定」ダイアログが表示
3、計算式を入力
ユーティリティ管理::g_Webビューアテスト
のフィールドを選択。[OK]


4、「ユーティリティ管理::g_Webビューアテスト」のフィールドにURLを入力。
確定するとWebビューアにWebサイトが表示される。

例2 Google Web 検索の使用
1、Webビューアの範囲指定
「Webビューアの設定」のダイアログ表示

2、[Webサイトの選択]「Google Web 検索」を選択。

3、[クエリー]を選択。(検索条件を入れる)
ユーティリティ管理_商品|選択::商品名

4、商品名を切り替えると、検索内容も変化する。

●データURLの表示

Web ビューアはインターネット以外の情報の表示が可能です。
data:text/html」という接頭語からはじまる「データURL」を計算式などで作成し
カスタムWebアドレスとして使用します。

例えば、HTML やJavaScript をフィールドにテキストデータとして格納して、Web ビューアで表示することが可能です。 

例1 WebビューアにHTMLを表示させる
1、Webビューアの範囲指定
「Webビューアの設定」のダイアログ表示

2、[Webアドレス][指定…]をクリックすると「計算式の指定」ダイアログが表示
3、計算式を入力
“data:text/html,” & ユーティリティ管理::g_Webビューアテスト
(データURLを使うという宣言)

4、「ユーティリティ管理::g_Webビューアテスト」(グローバル格納)のフィールドに
htmlを記述すると反映されたものがWebビューアに表示される。

例2 Webビューアに画像(バイナリーデータ)を表示させる
1、Webビューアの範囲指定
「Webビューアの設定」のダイアログ表示

2、[Webアドレス][指定…]をクリックすると「計算式の指定」ダイアログが表示
3、計算式を入力
“data:image/gif;base64,” & Base64Encode ( ユーティリティ管理_商品|選択::商品画像 ) 

Base64Encode  >>> オブジェクト関数の1つ。バイナリーデーターをテキストに変換する。
※Webビューアはテキストタイプしか扱えないため

4、商品名を切り替えると、画像内容も変化する。

テーマとスタイル

テーマとスタイルを有効利用することで以下のメリットがあります。

  • インターフェースの統一感
  • 開発効率の向上
  • パフォーマンスの向上

●スタイルとテーマの保存

現在割り当てられているスタイルの詳細な書式は、「外観」 タブで変更することが可能です。変更があると○に▼の ボタンが赤くなります。

赤になっている表示の保存の仕方で、変更したスタイルの反映のされ方が変わります

●特定のレイアウトオブジェクトのみに反映させる
○に▼の ボタンが赤いまま特に保存しない。

●同じレイアウト上の他のレイアウトオブジェクトにも反映させる
スタイルを保存します。
○に▼の 赤ボタンをクリックすると「上書き保存」「新しく保存」が選べます。

●スタイル変更を別のレイアウト上でも反映させる
スタイルとテーマの両方に変更を保存します。
※先にスタイルを保存してから、テーマの保存をする必要があります。

その他にも様々な設定があります。実際に色々触って確認してみてください!

おすすめ

レイアウトのテーマやスタイルは、画面ごとに細かく設定をすると複雑になります。

 

一つのカスタムAppを作る際には、見本のレイアウトを作成し、あらかじめテーマ&スタイルを決めておくと良いです。
追加がある場合は、その見本レイアウトにまた追加していきます。

レイアウトオブジェクトの表示の優先順位

スタイル以外に、レイアウトオブジェクトの色や塗りつぶし、線などを設定するものには条件付き書式があります。これらの表示の優先順位を覚えていると便利です。

  1. 条件付き書式
  2. ローカル書式
  3. レイアウトに保存されているスタイル(変更されたもの=カスタムスタイル)
  4. テーマに保存されているスタイル(変更されたもの=カスタムテーマ)
  5. レイアウトのデフォルトスタイル
  6. テーマのデフォルトスタイル

※「フォーカス」時には、フォーカス に設定されている内容が優先されます。

上の順位ほど、ブラウズモードでのレイアウト表示に優先されます。

画面の構成:マスタ/詳細レイアウト

レイアウトの中に、マスタ(リスト形式)と詳細(フォーム形式)の両方を表示させることができます。
2つの方法があります

  • 「現在のテーブル」ポータルを利用する
    (FileMakerプラットフォーム17以降の新しい機能)
  • X(デカルト積)関連

◆「現在のテーブル」ポータルを利用する

・関連は不要
・レイアウトのTO・・・表示させたいソーステーブルのアンカー
・一覧表示・・・対象レコードをポータル内で一覧表示
・選択したレコードが詳細表示される

以下の条件に合う場合に使用してください

  • 膨大な対象レコードには不向き
  • ポータルやリレーションの機能に制限あり
    (ソートできない)
  • FileMaker17プラットフォーム以降の機能

ポータルで現在のテーブルを選択

特に機能を作成していませんがポータルの行をクリックするだけで右側に
詳細情報が表示されるようになりました。

この機能は、ポータルの作成時に[レコードを表示:]で「現在のテーブル」を選択した場合のみ動作します。マスタ/詳細レイアウトの作成にとても便利です。

設定によるポータルの動作の違い

[レコードを表示:]で「現在のテーブル」を選択すると、次のポータル設定は変更できません。

  • ポータルレコードのソート なし
  • ポータルレコードのフィルタ なし
  • ポータルレコードの削除の許可 オン
  • 垂直スクロールを許可 オン
  • レコード終了時にスクロールバーをリセット オフ

いくつか解説します。

●ソートと現在のテーブルのポータル
現在のソート順がポータルに適用されます。

●検索モードと現在のテーブルのポータル
ポータル内に表示されるレコードを変更するには、検索をします。

1、検索条件に切り替えます。
2、右側の「商品番号」フィールドに「30001…30002」と入力します。
3、ステータスツールバーで「検索実行」をクリックします。
4、検索結果は、2 件です。ポータル行も対象レコードと同じく2行です。

ポータルに表示されるのは、現在の対象レコードであることがわかります。

●レコード削除と現在のテーブルのポータル
レイアウト上でレコードを削除すると、当然ですがポータル上の当該行もなくなります。

●スクリプトトリガなど
ポータル行をクリックするとレコード移動が起きるため、レコード確定なども起きます。 OnRecortCommit や OnRecordRoad などのスクリプトトリガが実行されます。

アクティブな行

現在選択されている行を分かりやすくするための関数があります。

今回の場合を考えてみます。
左に置いたポータルの商品一覧で、現在どの商品を選択しているか分かりやすいように◉のアイコンのボタンを設定します。

1、◉ボタンを選択。
右パネルのインスペクタの「データ」タブ
[動作][次の場合にオブジェクトを 隠す]に計算式を設定。

2、Get(レコード番号) ≠ Get(アクティブレコード番号 )
Get (アクティブレコード番号)関数は、現在の対象レコード内の現在のレコードを表す番号が結果になります。対して、Get( レコード番号 ) は、現在の対象レコード内のレコードの位置(何番目か)を表す番号が結果となります。

◆X(デカルト積)関連

関連を使用する方法です。
X(デカルト積) >>> リレーションの記号の一つ。全てのレコードを通す。

・関連は必要
・レイアウトのTO・・・一般的にはグローバル格納を集約させているTOGのアンカー
・一覧表示・・・全ての関連レコードをポータル内で一覧表示
・選択した関連レコードが詳細表示される
・ボタン設定が必要

1、まず、レイアウトを置くTOを、グローバル格納を集約させているTOGのアンカーに設定する。
テキストの場合だと「ユーティリティ管理」

2、このグローバル格納フィールドを照合フィールドとして2種類の関連を作ります。
・左側の商品のポータルを表示するための関連照合条件が「X」
・右側に選択された 1 商品の詳細を表示するための関連照合条件が「=」

3、左ポータルのフィールドにボタンの設定
「ボタン設定」[処理:]
「単一ステップ」
フィールド設定[ユーティリティ管理::g_商品選択;ユーティリティ管理_商品::主キー

4、レイアウト配置
・商品一覧のためのポータル 「ユーティリティ管理_商品」「c_商品番号と商品名」
・商品詳細 「ユーティリティ商品|選択」の「商品名」「商品画像」などのフィールドを配置

ユーザが任意のポータル行 をクリックすると「商品情報」テーブルの「主キー」フィールドのデータが「g_ 商品選択」フィールドへ入力されることで画面右側に商品の情報が表示される、という仕組みです。

なぜグローバル格納か?

今回のレイアウト表示は、個人が内容確認のためなどに使用するものであり、他人の操作と連動させる必要がないため☝️

ロゴの表示

デカルト積関連を使って一つだけの関連レコードを取り扱う

会社名とロゴマークを考えてみましょう。
「見積情報」(現在20件)と「配布用資料」(現在10件)に表示させたいとします。

1、「基本情報」という会社名、ロゴマークを保存するテーブルを作ります。

2、リレーションを設定します。
「見積情報」TOと「基本情報」TO
「配布用資料」TOと「基本情報」TOを関連付けます。

「見積情報」ー「見積情報_基本情報」
「配布用資料」ー「配布資料_基本情報」
※主キー同士をデカルト積(X)で結びます。

3、レイアウトの配置
見積情報レイアウト上に「見積情報_基本情報」の会社名、ロゴのフィールドを配置。
配布用資料レイアウト上に「見積情報_基本情報」の会社名、ロゴのフィールドを配置。

今回設定した全てのレイアウトに、同じ(一つの)情報が表示されます。


グローバル格納でも同じようなことができますが、グローバル格納のデータは実在しないものです。会社の基本情報などは、実在させるべきデータですのでデカルト積を使います。

本来は外部キーを設定してリレーションを組む必要があるはずですが、レコードが1つと決まりきっているため、わざわざ外部キーを設定しなくても関連付けができるのです😆


以上で9章は終わりです。

次回は10章「関数と計算式」について学習していきます😁

コメント

タイトルとURLをコピーしました