一覧レイアウトから素早く詳細を確認・編集したいのに、別レイアウトへ切り替えるたびに画面がバタバタ動いてしまう…。FileMakerでこんなストレスを感じている方は多いと思います。そこで便利なのが「ポップオーバー」を使った詳細編集フォームです。画面遷移をせずに、その場でコンパクトな編集画面を開けるので、ユーザーにとっても分かりやすく、操作ミスも減らせます。
ここでは、専門用語をできるだけ抑えながら、「ポップオーバーで詳細編集フォームを作る基本」をわかりやすく整理して紹介します。
ポップオーバー詳細編集フォームの考え方
ポップオーバーは、ボタンやアイコンをクリックしたときに「フキダシ」のように小さなウインドウを表示できる機能です。FileMakerでは、一覧の中にある「編集」ボタンを押したら、その行の詳細だけをポップオーバーで開き、必要な項目だけを編集する、といった使い方ができます。
レイアウトを切り替えずに編集できるため、次のようなメリットがあります。
- 一覧から離れずに編集できるので、作業の流れが止まらない
- ユーザーが今どのレコードを編集しているかが分かりやすい
- 必要な項目だけをコンパクトにまとめられる
一方で、ポップオーバーの中に何でも詰め込みすぎると、かえって分かりにくくなるので、「何を見せて、何を省くか」を整理しておくことが大切です。
基本的なレイアウト構成を決める
まずは、ポップオーバーでどんな情報を編集するかを決めます。ポイントは次の通りです。
- 一覧で「ざっくり見る情報」と「詳しく編集する情報」を分ける
- 頻繁に変更する項目をポップオーバーに集める
- 変更頻度の低い項目は別画面での詳細編集に回すことも検討する
例えば「顧客一覧」の場合、一覧には「顧客名」「電話番号」「担当者」などを表示し、ポップオーバーには「住所」「メール」「メモ」「ステータス」など、少し多めの項目をまとめる、というイメージです。
ポップオーバーボタンを作成する手順
次に、実際にポップオーバーを配置します。ここでは簡単な流れだけを紹介します。
- レイアウトモードに切り替える
- ツールバーから「ポップオーバーボタン」または「ボタン／ポップオーバーボタン」を選ぶ
- 一覧の繰り返し行（ポータルの行や一覧表示のボディ部）に小さなアイコンとして配置する
- ポップオーバーの名前やタイトル（例：「詳細編集」）を設定する
- ポップオーバーの中にフィールドをドラッグ＆ドロップして配置する
このとき、ポップオーバーのサイズは「少し余裕があるくらい」が見やすくておすすめです。あとから調整できますが、最初に大きめに作っておくとレイアウトが組みやすくなります。
編集しやすいフォームにするポイント
ポップオーバーの中身は、単にフィールドを並べるだけでなく、「ユーザーが迷わない配置」にしておくことが重要です。
- 上から下へ自然な順番で配置する
名前 → 連絡先 → ステータス → メモ、のように、入力の流れを意識して並べます。 - ラベル（項目名）をわかりやすく
社内用語や略語をそのまま使わず、一般的な言葉で表示するだけでも、かなり操作性が上がります。 - 入力エリアは十分な幅を確保する
メモ欄などは、ポップオーバー内で可能な範囲で大きくしておくと、入力ミスが減ります。 - 保存・キャンセルのボタンを用意する
FileMakerは基本的に自動保存ですが、「保存」ボタンを押したらレコードをコミットしてポップオーバーを閉じる、「キャンセル」ボタンは元の値に戻してからポップオーバーを閉じる、といった操作の方がユーザーには分かりやすいことが多いです。
簡単なスクリプト連携で使い勝手アップ
ポップオーバー自体はスクリプトがなくても動きますが、少しだけスクリプトを組み合わせると、ぐっと使いやすくなります。
例えば、次のようなスクリプトがよく使われます。
- 保存ボタン：レコードをコミットしてポップオーバーを閉じるスクリプト
「レコードをコミット」ステップで編集内容を保存し、「ポップオーバーを閉じる」ステップを続けて実行することで、安全に編集を確定できます。 - キャンセルボタン：編集前の状態に戻す
もう少し踏み込む場合は、ポップオーバーを開く前に値を変数やグローバルフィールドに退避し、キャンセル時にその値を元のフィールドへ戻してから「ポップオーバーを閉じる」、という作り方もあります。
最初は「保存ボタンを押したらレコードをコミットしてポップオーバーが閉じる」だけでも十分効果があります。運用しながら、徐々に機能を増やしていくと良いでしょう。
運用上の注意点と改善のヒント
ポップオーバーでの詳細編集フォームは便利ですが、使い方を間違えると逆に分かりにくくなります。次の点に注意して運用すると安心です。
- 1つのポップオーバーに詰め込みすぎない
スクロールしないと見えないほど項目を入れると、ユーザーが迷います。どうしても多くなる場合は、タブを使って区切るなどの工夫を検討します。 - 「一覧で確認したい情報」と「ポップオーバーで編集する情報」を定期的に見直す
現場の声を聞きながら、表示項目を入れ替えていくことで、より使いやすい画面になります。 - スマホ・タブレットでの操作も意識する
ボタンや入力欄を少し大きめにすることで、タッチ操作でもストレスなく使えるようになります。
まずはシンプルなポップオーバーを1つ作ってみて、実際に使いながら改善を重ねていくのがおすすめです。「画面遷移しない小さな編集画面」という感覚で設計していくと、自然と使いやすいフォームに近づいていきます。