FileMaker 「レイアウトツール」中級編（９章）

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

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

全１６章です。
前回は、８章『画面を設計しよう』について学びました。
👉FileMaker 中級編（８章）

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

画面について

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

●３つの表形式

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

●４つのモード

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

レイアウトモード

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

［レイアウトの管理］ダイアログ 

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

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

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

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

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

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

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

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

レイアウトの作成

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

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

新規レイアウト作成 

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

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

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

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

フィールドの配置 

レイアウトは、指定したTO と、そのTO に関連するデータの入出力を行う場所です。
データを表示するには、適切なフィールドを配置する必要があります。
配置方法は大きく分けて2種類用意されています。 

「フィールド」タブ（左パネル） 

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

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

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

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

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

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

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

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

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

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

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

レイアウトの設定 

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

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

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

［レイアウト設定］ダイアログ 

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

レイアウトパート

パートの種類 

11種類あります。

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

レイアウトエリア

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

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

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

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

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

しかし。。。
［Option］キー（macOS）を押しながらパートの 境界線のドラッグ 　
で縮めることができます。

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

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

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

画面ステンシル 

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

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

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

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

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

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

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

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

ステータスツールバー 

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

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

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

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

レイアウトバー 

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

インスペクタ（右パネル）

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

●位置タブ

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

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

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

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

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

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

・⌘＋［Option］＋上下左右矢印キー

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

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

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

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

その他のタブ

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

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

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

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

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

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

オブジェクトタブ（左パネル） 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

値一覧 

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

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

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

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

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

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

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

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

 

 

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

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

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

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

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

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

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

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

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

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

クイック検索対象の指定 

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

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

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

フィールドへの移動 

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

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

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

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

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

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

ポータル

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

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

Web ビューア

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

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

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

●Webページの表示

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

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

●データURLの表示

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

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

テーマとスタイル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

いくつか解説します。

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

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

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_商品番号と商品名」
・商品詳細　「ユーティリティ商品｜選択」の「商品名」「商品画像」などのフィールドを配置

ロゴの表示

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

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

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

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

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

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

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

---

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

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