【FileMaker】詳細データをカードめくりしたい

というお題をいただいたので、サンプルを作った、というのが最近ありました。
レコード移動とポータル内のレコード移動がうまく連動できれば１画面で効率よく表示ができる感じです。

※今回こちらで紹介するサンプルは、実際にお題をいただいた方にご提示したものをアレンジした形になります。

# この記事の対象者
* FileMakerで、概要レコードレイアウトに詳細レコードをなんとか１画面でうまーく表示したい人
* 詳細レコードを矢印ボタンで表示したい人

# 最終ゴール
１画面内で、詳細レコードを矢印ボタンで移動させながら表示させる。
![FileMaker_詳細レコードのポータル移動.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/b9dcf7a9-a527-f523-35a4-96c92be38f8e.gif)

イメージはこちらです。
![スクリーンショット 2024-05-26 14.50.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/d2ce8c88-2708-105f-a17d-8bb2ddb12dc1.png)
ボタン移動1とボタン移動2の解説になります。


サンプルとして、とある企画会社が開催するカンファレンスで来場者に配布したアンケートの集計を画面に表示する、というものになります。
実際にアンケートに入力する流れはありません。
集計したアンケート内容を表示する、という部分になります。

# 実装環境
FileMaker Pro 2023で作成しましたが、本筋の部分については、特に新しい機能は使用していないので、大部分のバージョンで実装可能だと思います。
レイアウト上、比較的新しい機能を使用しているところは、お使いのバージョンで代替して実装してみてください。

それでは、作っていきましょう！

# テーブル設計
## テーブル
![スクリーンショット 2024-05-26 14.55.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/75854f40-d0db-7d8c-5505-b8357f273397.png)
1回のカンファレンスで配るアンケートを１種類（テーブル：アンケート）にし、アンケート内容は５項目（テーブル：アンケート_集計）にしました。

## フィールド
### アンケート
![スクリーンショット 2024-05-26 14.55.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/613c686d-8185-08bb-b625-0d937c7a244b.png)
アンケートタイトルと集計期間、参加人数を記録しています。
詳細レコードのカードめくり自体にはなんら影響はないので、「参加人数」フィールド以外のフィールドはなくても機能します。

### アンケート_集計
![スクリーンショット 2024-05-26 14.56.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/4182087d-8b9f-5cb0-3138-cfe7c11467ec.png)
アンケート内容のフィールドです。
「アンケート_主キー」フィールドは、「アンケート」テーブルとつなぐキーとなります。
「gカードめくり」フィールドは、矢印ボタンで表示させるレコードの主キーを入れて操作します。
「s_件数」フィールドは、アンケートが何件集計されているかというカウントをしています。

## リレーションシップ
![スクリーンショット 2024-05-26 15.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/9c6ae331-688e-66c7-01f5-8baa49863238.png)
アンケートの概要と回収したアンケートの詳細をリレーションシップグラフで繋ぎます。
リレーションシップグラフだけだとちょっとイメージしずらいかなと思ったので、具体的なイメージも添えました。

# レイアウト設計
関連づけられているテーブルを、「アンケート」テーブルにして、レイアウトを作成します。
![スクリーンショット 2024-05-26 15.13.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/c61f398c-42f9-c183-183b-b675439093f3.png)

## アンケート概要部分
アンケートの概要は、画面左側に配置している部分になります。
集計件数の回収率計算は、FileMaker Pro 2023(ver.20.2)から提供されている「[レイアウト計算](https://help.claris.com/ja/pro-help/content/inserting-layout-calculations-on-layout.html)」機能を使っています。
それ以外の方法として、通常のフィールドに計算式を作成するなどもありますので、現場に合わせて実装してみてください。![スクリーンショット 2024-05-26 15.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/257edc14-ae75-9abf-2caa-3b01f0a7b85e.png)

## アンケートテーブルの移動ボタン
移動ボタンを配置します。
今なんのアンケートを表示しているか、というアンケートタイトルを配置しても分かりやすくていいと思います。
![スクリーンショット 2024-05-26 15.20.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2827fc2c-6c36-71e2-b4c0-76d46f9a6fa7.png)

## アンケート詳細の移動ボタン
１つ１つのアンケートを表示するための移動ボタンを配置します。
ここの移動ボタンを配置した部分は、先ほどのアンケートテーブルとは違い、実はポータルになっています。
![スクリーンショット 2024-05-26 15.27.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/ba1d62a9-a52c-b1f1-1b4f-bc31be7d55f9.png)
この部分のポイントは、書式で行数を「１」に設定することです。

## アンケート詳細の移動に使うテーブルを配置
みなさん、レイアウトの外って使ってますか？
表示されていないレイアウトの外にもオブジェクトを配置できるんですよ。
そして、それはちゃんと表示されているオブジェクトと同様に機能します。
なので、アンケート詳細の移動を補助する形で、一つポータルを配置しておきます。
![スクリーンショット 2024-05-26 15.32.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/57beef10-ab61-cdb3-30ab-01a86a21cbaa.png)
ここのポータルで表示するTO(テーブルオカレンス)は、「アンケート_集計」です。
また、ここでもポイントがあります。
ポータルに名前をつけるのです。
ここでは、「カードめくり_サブ」とつけています。
分かりやすければ、なんでもいいです。
行数は、何行でも大丈夫ですが、「垂直スクロールを許可」にチェックを入れておくことを忘れないでください。
「垂直スクロールを許可」を忘れると、指定した行数しか移動できません。。。

「垂直スクロールを許可」については、以下で解説しているので、参考にしてみてください。

https://qiita.com/tyuma/items/1a9ad315fee41f5d6d17

## アンケート詳細の表示
アンケート詳細の表示は、「アンケート詳細の移動ボタン」で作ったアンケート詳細のポータルに含めても問題ないです。
今回は、移動ボタンとはあまり関係がないので、別途、フィールドを画面に配置しました。
表示するTO(テーブルオカレンス)は、「アンケート_集計 2」です。
移動したアンケート詳細の内容になります。
![スクリーンショット 2024-05-26 15.36.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/971d9181-5624-64ce-4f68-f062df10302b.png)

# スクリプト
## 共通で使うスクリプト
スクリプトの中で、共通に使うスクリプトです。
### スクリプト：件数設定
![スクリーンショット 2024-05-26 15.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/cf3b5291-2db6-4621-2a93-a98c577c679b.png)
これは、回収されたアンケートが同時並行で追加されて行った時、アンケート件数が最初にこのレイアウトを開いた時と違ってしまう可能性があるので、最新のアンケート件数をレイアウトで使用しているグローバル変数に表示できるようにしています。

## アンケート詳細のスクリプト
![スクリーンショット 2024-05-26 15.41.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/4f74994e-a788-24e9-a09f-d72f7b54607f.png)

### スクリプト：最初に | アンケート集計
ポータル移動では、「[ポータル内の行へ移動](https://help.claris.com/ja/pro-help/content/go-to-portal-row.html)」を使います。
レイアウト外に配置した、ポータルです。
![スクリーンショット 2024-05-26 15.44.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/96d1d43b-0a16-0b2a-94ad-0773c91b8488.png)
3行目のグローバルフィールドには、表示しようとしているアンケート詳細の主キーを設定します。
4行目では、現在どのレコード番号を表示しているかをレイアウトに表示するグローバル変数に入れています。

### スクリプト：前に | アンケート集計
こちらも、同様にポータル移動で処理をしています。
先ほどの「最初に、、、」のスクリプトと違うのは、移動した先が先頭だった時の処理が追加されています。
![スクリーンショット 2024-05-26 15.44.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/b675bc12-d054-c92c-b275-676db56fa213.png)

### スクリプト：後ろに | アンケート集計
こちらも同じく、移動した先が最後だった時の処理を追加しています。
![スクリーンショット 2024-05-26 15.44.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/cbca4ee8-86f3-31af-1a93-4b6db1ec360b.png)

### スクリプト：最後に | アンケート集計
こちらは、「最初に、、、」と似た作りになっています。
違うところは、共通処理を最初に持ってきて、最新の集計数を持ってきているところです。
![スクリーンショット 2024-05-26 15.44.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/dffe57b0-5d0c-c0c4-d930-12423bb241ef.png)


## アンケート概要のスクリプト
次は、アンケート概要の移動ボタンです。
![スクリーンショット 2024-05-26 16.02.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/029b4543-7029-5ac5-30f2-4a14b75153c8.png)

アンケート概要は、レイアウトのTO(テーブルオカレンス)にもなっているので、そのままレコード移動が使えます。
ただ、ポータルの移動の時と同様に、最新のアンケート回収数を得たいので、共通処理も実行しています。
アンケート概要でアンケート回収数を活用したい部分は、回収率を計算する部分です。

### スクリプト：最初に | アンケート
![スクリーンショット 2024-05-26 15.43.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/9df56984-aeff-b6ba-1291-fc7e368fc209.png)

### スクリプト：前に | アンケート
![スクリーンショット 2024-05-26 15.56.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/7c3f9e04-007c-47a1-262d-d4f4126e088b.png)

### スクリプト：後ろに | アンケート
![スクリーンショット 2024-05-26 15.57.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/b2b0ea3b-2a9f-0156-d128-79c3dca7b327.png)

### スクリプト：最後に | アンケート
![スクリーンショット 2024-05-26 15.57.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/d79d1a00-3ef6-919f-9dfc-ffb07594abba.png)

## レイアウトの初期設定
レイアウトが表示された時、アンケート回収数の取得と表示されているアンケート概要の最初のアンケート詳細を表示するために、レイアウトのスクリプトトリガのOnLayoutEnterに「最初に | アンケート集計」スクリプトを実行して初期設定をしています。
![スクリーンショット 2024-05-26 16.03.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/65d1215e-642c-7aab-a367-af55459d2588.png)

# 動かしてみた？
実装は、ここまでです！
あまり今回のお題に関係しない部分は解説していない部分もありますが、実際に作ってデータを入れて体感してみてくださいね。
テストデータを追加するとき用に、レイアウトを一つ作っておくといいですよ。

リレーションシップを組むときに、リレーションシップを活用した詳細レコードの追加の部分にチェックを入れておくと、テストデータ追加のときに自動で「アンケート_集計::アンケート_主キー」フィールドに「アンケート::主キー」を設定してくれるので、便利です。
![スクリーンショット 2024-05-26 16.09.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/62f241cf-acf9-c62d-0836-bfed6b4f51cd.png)

この設定をしておくと、ポータル表示をした詳細レコードで、次のデータフィールドが現れます。
![スクリーンショット 2024-05-26 16.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/76b69aac-ef27-f999-48a0-f5b6f7cb24bb.png)

では、また！