マスタ/詳細レイアウト

FileMaker 17の新機能「マスタ/詳細レイアウト」は従来の「ポータル」と似ていますが、対象レコードのみを表示するという特殊な性質を持っています。これを利用して従来はできなかったデータの見せ方が可能になります。
今回はbeezwaxのWill M. Bakerさんによるブログ記事を紹介します。




Master-Detail Layouts in FileMaker

(元記事はこちら)

2018/5/15
Will M. Baker

FileMaker 17の新機能であるマスタ/詳細レイアウトでは、検索結果の対象レコードがリスト形式で表示されます。ユーザがレコードを検索・絞込み・対象外にする・ソート・レコードの作成および削除を実行すると、マスタ/詳細ポータルの内容が同期して更新されます。ユーザが好きなように並べ替えられ、フィルタを適用し、行をクリックしてその行の詳細を表示できるポータルで、しかも特に設定が不要なものを想像してみてください。これがマスタ/詳細ポータルの長所です。

FileMakerデベロッパーは、今まで長年その時点で利用可能なツールを駆使してマスタ/詳細レイアウトに近いものを作ろうと苦労してきました。FileMaker 17の前には、標準のリスト/テーブルビューを使用して、レイアウトのフッターにアクティブなレコードの詳細を表示する方法がありました。もう1つの選択肢は、汎用のグローバル/インタフェーステーブルをベースレイアウトとして、関連するデータテーブルをポータルに表示するという方法です。または、自己結合リレーションを使用し、何らかの方法で対象レコードセットを判断して表示させるという方法もありました。

FileMaker 17になって、レイアウトの左側(またはどこでも好きな場所)にスペースを有効に使ったリストを表示し、アクティブなレコードの詳細をその右側に表示するということが簡単にできるようになりました。しかもスクリプトを1行も書かずに、です。マスタ/詳細レイアウトは、全体を俯瞰するリストビューと1つのレコードにフォーカスするフォームビューを組み合わせたものです。

設定方法

この機能を使用するには、[ポータル設定]ダイアログの[レコードを表示:]で[現在のテーブル]を選択します。リレーションを設定したテーブルを選択するのではなく、レイアウトのベースと同じテーブルオカレンスを選択していることに注意してください。

これで設定完了です。

「関連テーブル」を表示するポータルよりも設定できる項目が少ないことに気づくでしょう。これは、それらの動作の多くが対象レコードセットの性質を利用して自動で提供されるためです。

  • ポータルにフィルタをかけることはできません。これは、ユーザが(検索や対象外にする、などで)指定した対象レコードセットの変化に応じてポータルも同時にフィルタリングされるからです。
  • ポータルをソートすることはできません。これは、対象レコードセットをソートするのに応じてポータルも自動的にソートされるからです。
  • [このリレーションを使用してレコードを作成する]ことはできませんが、単純に対象レコードの中に新しいレコードを作成することができます。
  • ポータル行を(行を選択して)削除することはできませんが、アクティブレコードを削除できます。ポータル行に削除ボタンを配置することもできます。削除ボタンは、最初にその行をアクティブレコードにしてからそれを削除します。

(このポータルオブジェクトをコピーして、異なるテーブルオカレンスをベースにしたレイアウトにペーストすると、自動的に「関連テーブル」のポータルに変換されます。)

いくつか例を見てみましょう。

例1: レコードの移動

マスタ/詳細レイアウトでは、対象レコードセットについての情報がユーザに表示され、それらのレコードを移動するのに役立ちます。サンプルActors.fmp12では、マスタ/詳細レイアウトを最もシンプルな形で示しています。左側の任意の名前をクリックすると、対応する詳細が右側に表示されます。

名前をクリックすると、詳細が表示される
ポータル行のアクティブ状態の設定によって詳細画面と同じ色になる

ユーザは、アクティブレコードから離れたり、フォームビューのデータ入力フィールドへのアクセスを犠牲にすることなく、対象レコードセット内の他のレコードの情報を自由に見ることができます。

例2: 検索

マスタ/詳細レイアウトでは、従来のポータルのように検索モードがサポートされていますが、いくつかクールな新しい動作も可能になりました。

サンプルThings.fmp12では、それぞれ別々のオブジェクト(人物、会社、添付ファイル、住所、ToDo、トピック)を1つの表示用テーブルにまとめるために従来からある技法を使用しています。ユーザが左側のリスト行をクリックすると、右側にそのオブジェクトの詳細が表示されます。(条件による表示/非表示の機能を使って、対応するデータテーブルのフィールドのみが表示されます。)

異なる種類のアイテムが1つのリストに表示される
あるアイテムをクリックすると、関連するフィールドだけが表示される

マスタ/詳細レイアウトの新しいところは、ユーザがポータルに表示するレコードを自由に変更できる点です。クイック検索を使用してすべてのデータテーブルを同時に検索することもできます。これこそ検索の威力です!

クイック検索が6つのデータテーブルを横断して検索する

フォームビューレイアウトで検索を行う場合、従来は複数の検索条件が設定されているときにそれらを見やすく表示できないという制約がありました。これは、フォームビューでは一度に1つの検索条件しか表示できないためです。マスタ/詳細レイアウトを使うことで、検索モードで検索の実行前に検索条件を表示する方法の選択肢が増えました。この例では、Get ( 検索条件除外状態 ) 関数を使用して、検索条件が[除外する]なのかどうかを示しています。

このウインドウは検索モードで、
検索条件が3つあり、
そのうちの1つは[除外する]
パフォーマンスは問題ないようです。従来のポータルの場合、数百を超えるレコードを表示することは避けるようにしていましたが、マスタ/詳細ポータルの場合は、対象レコード数が100万件を超えてもポータル内のレコードのスクロールは素早く、ポータル内に関連レコードのフィールドを含んでいても影響は出ませんでした。(パフォーマンステストは、ローカルファイルとホストで共有したファイルの両方で行いました。)

例3: 見せ方の工夫

サンプルMCU.fmp12は、マスタ/詳細レイアウトを用いて対象レコードセットのデータを見やすく表示するのに役立ついくつかの方法を示しています。この例では、タブコントロールの各パネルにマスタ/詳細ポータルを配置し、各パネルはそれぞれのポータルの目的に合った方法で対象レコードを自動的にソートします。

[Title]タブは映画のタイトルをアルファベット順に並べ、画像とテキストを連動させて最も関連性の高いレコードをクリックしやすくする例を示します。これは、macOSのMail appが電子メールの本文の一部をプレビュー表示する方法と似ています。

行が選択されるとGet ( アクティブレコード番号 ) によってこのテキストがハイライトされる

アクティブな行の説明文の色を変更して、背景色が変わるのに応じて読みやすさを確保している点に注意してください。今までであれば、ボタンをクリックしてクリックした行のIDをキャッシュすることで、これを実現したでしょう。FileMaker 17では行をクリックするだけで、行のハイライトを(従来からの機能であるポータル行のアクティブ状態を使って)特別な技を使うことなく取得し、新たに導入された Get ( アクティブレコード番号 ) 関数を使用してテキストの色を設定できます。

Get ( アクティブレコード番号 ) = Get ( レコード番号 )

[Year]タブでは、ポータル内に小計パートに似た表示をさせるために古いトリックを使用しています。集計値の区切りにスペース用の線を条件によって表示させ、集計値が同じ場合は条件で非表示にしています。このサンプルが特に優れている点はそのシンプルさにあります。従来のポータルとは異なり、マスタ/詳細ポータルオブジェクトは、対象レコードセットに対するGetNthRecord関数(つまりポータル行の中での相対位置)を理解するので、各行が簡単に自分の前後の値を認識して、集計ブロックの最初あるいは最後にいるのかどうかを判断することができます。

GetNthRecord関数で隣り合った行を見て、条件による表示/非表示を行う
それによって製作年と水平線が集計ブロックごとに一度だけ出現する

以下は、Yearフィールドが集計ブロックの最初の行でない場合、条件で非表示にする方法のサンプルです。

Get ( レコード番号 ) > 1 and MOVIE::YEAR = GetNthRecord ( MOVIE::YEAR ; Get ( レコード番号 ) – 1 )

[Runtime(上映時間)]タブは、[Year]タブと同じようにデータを小計し(すべての映画を順番に見る場合の目安とするために映画を8時間単位でグループ化しています)、さらに集計フィールドを使っています。ポータルと集計フィールドを組み合わせた技は以前からありましたが、ここで新しいのはユーザがポータルでどのレコードを表示するか、どのソート順で並べるかを制御できるようになり、集計をより意味のあるものにすることができます。

現在の総計をポータルで表示
しかもユーザが並べ替えられる!

[Franchise(シリーズ)]タブは、[Year]タブと似ていますが、追加の機能として2つのレベルの小計パートで階層を表現しています。

[Tickets Sold(チケット売上)]タブでは、米国で販売されたチケットを百万枚単位のシンプルな「グラフ」で表示しています。このグラフも古くからのトリックで、繰り返しフィールドを使用しています。これは、ユーザがグラフ内の値(個々のポータル行)をクリックしてその詳細を表示できるという点で、インタラクティブな効果をグラフに与えています。

これは繰り返しの計算フィールド
チケットの売上をパーセントに変換して表示している

(注: マスタ/詳細レイアウトではポータルを使用するため、従来のポータルと同じ制限が適用されます。マスタ/詳細ポータルにはグラフ、Webビューア、別のポータルを含めることはできません。)

これらの見え方の工夫はすべてFileMaker 16でも可能でしたが、場合によってはより簡単に作れるようになりました。またどのような場合でも、対象レコードセットの威力を利用できるようになりました。

上級テクニック

マスタ/詳細のレイアウトを少し発展させてみましょう。

例1: カスタムソート

サンプルClickable Column Headers.fmp12はMCUのサンプルに似ていますが、複数のタブを1つのポータルに統合しています。列ヘッダをクリックすると、対象レコードセット(つまりポータル)がソートされ、クリックした値をキャッシュしてどの列をソートしたかをヘッダとポータルに示します。

対象レコードはYearでマニュアルでソートされている
列ヘッダと小計区切り線は、並び順を検知して解釈している

この例も上級レベルで、カスタムメニューを使用してマニュアルのソートをサポートします。ユーザが対象レコードセットをソートした後、スクリプトはレコードのソート方法を判断します。並べ替えの順序が認識されると、列見出しと集計オブジェクトがそれに応じた形で表示されます。これにより、ユーザは好みのとおりソートできながら、理解しやすい見せ方で表示できます。(この手法は、計算コストの高いExecuteSQLクエリを複数使用しているため、レコード数が多い場合はあまり推奨されません。)

ここでは集計フィールドのリストを新しい方法で使用しています。従来は、ユーザにポータルのフィルタリングを許可した場合、フィルタの結果としてポータルに表示されていたレコードをプログラムにも認識させるために余計な作業が必要でした。マスタ/詳細レイアウトでは、ポータルのレコードとソート順が対象レコードセットと一致するため、集計フィールドのリストを見るのと同じくらい簡単になります。

例2: サイドバー

Mailのようなアプリでサイドバーについて私が気に入っている点は、サイズを変更したり、閉じたりすることができるということです。画面のスペースを有効に活用することは重要なので、ユーザがサイドバーを表示するかどうかを決められるということは使い勝手を向上させます。サンプルActors.fmp12をもう一度見てください。マスタ/詳細ポータルの右側にカーソルを合わせると、垂直の区切り線が表示されます。この線は実はボタンで、クリックすると…

クリックしてサイドバーを閉じる

…サイドバーが閉じられます。区切り線はウィンドウの左側に隠れています。その上にカーソルをホバーさせると表示され、クリックするとサイドバーを再度開きます。

クリックしてサイドバーを開く

この表示/非表示の切替えの手法はおそらくあまり目立たず、かつ/または既存のアプリで使用されるメタファーと似ていません。しかし、それをどう実装するかに関係なく、ボタンと条件による表示/非表示を利用して、ユーザが限られた画面スペースを自由に活用することができます。このテクニックを利用して、ユーザがすでによく知っている既存のインターフェイスに、マスタ/詳細ポータルをこっそり導入することができます。ポータルをデフォルトでは非表示にしておいて、ボタンを配置してそれを表示させることができます。

例3: レコードレベルのソート

最後にサンプルManual Sort.fmp12を使って、FileMakerの対象レコードセットを私がどれだけ気に入っているかを再度強調したいと思います。私は対象レコードを細かく管理できる機能について試していると飽きることがありません。検索・対象外にする・ソートを駆使することで、対象レコードセットをほぼ自分が望むように見せることができます。ほぼ。唯一FileMakerが標準の機能で提供してくれないのは、レコードレベルのソートです。つまり「レコードCを表示してから、レコードA、次にレコードB」ということを言っています。

ポスターを別のポスターの上にドラッグするとリストの並び順が変わる

私は、先人の考案したドラッグ&ドロップのテクニックを使って、このようなレベルのレコード単位のソート(特に映画のランキングなどに有用)を実現する手法を長年使ってきました。このサンプルでは、ある映画のポスターを別の映画の上にドラッグすると、それにしたがってリスト内の映画の並びが入れ替わります。このテクニックは新しいものではありませんが、ここではポータル内でドラッグ&ドロップを行うと、それが対象レコードセットの並び順を変更することになります。

ドラッグ&ドロップの動作が対象レコードセットに対して動作することになるので、レコードのサブセット(例えばレコード5,10, 15)を対象レコードにして、その3レコードだけを並べ替えるとどうなるでしょうか? スクリプトは、そのサブセット内のレコードの位置を入れ替えることはできますが、そのサブセット内でだけしか有効になりません。全レコードが対象になったときには、それらはグループとして、他のレコードとの相対的な位置が変更されることはありません(たとえば、3つのレコードをどのような順序に並び変えても、位置は5,10, 15のままです)。サンプルのスクリプトを開いて、これがどのように実現されているかを見てみてください。

というわけで、コンパクトでかつカスタマイズ可能な(ポータルの形の)リストを、項目をクリックしたら詳細を表示でき、レコードの並び順を自由に変えられるという機能付きで手に入れることができました。

Super cool.

Leave a Reply