【FileMaker】FileMaker Goで署名をもらう時に変なところを押されない ＆ 署名を上書きされないために

FileMaker Goを受付などの端末にしている際、お客さまから署名をいただくことがあると思います。
カード決済や受取としてのサインなど。
FileMaker Goだと、署名欄はオブジェクトフィールドなので、こんな出方になると思います。
![IMG_0614.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/ac51e66f-465c-e68a-b61c-0921a8ede45f.png)
この状態でお客さまへお渡ししたら、サインするのにカメラを起動してしまったり、写真をタップして会社の写真などが露出してしまうかもしれません。
これに一手間加えて、スタッフもお客さまも使いやすいシステムにしていきましょう！

# 改良したバージョン
まずは、改良したバージョンをみてください。
(1)
![IMG_0615.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/66fd2706-8bcc-7bdd-7b87-2217764da5e8.png)
何も入力されていないフィールドに、薄い字でガイドが書いてあります。

(2)
![IMG_0616.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/679595c8-1533-ec7c-8a69-8429b2f11914.png)
ガイド通りにタップすると、選択肢が出てきますので、スタッフ側で「署名」をタップして、お客さまへお渡しします。
お渡しする際に、画面を見ながら「サインが終わったら承認をタップしてください」と一言添えるといいかもしれませんね。

(3)
![IMG_0619.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/9e4358c5-bb43-50ac-6ec7-f13f86d284d7.png)
お客さまはサインし、「承認」をタップします。

(4)
![IMG_0618.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2ee9815d-8c50-0f0d-a6ef-903039a86d7a.png)
「承認」をタップすると、カスタムダイアログが表示され、スタッフに返すよう、促されます。

(5)
![IMG_0620.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/6aca7919-1f85-36eb-169d-b0a793536216.png)
サインがフィールドに反映されました。

(6)
![IMG_0621.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/97d7764a-b36b-7007-0b0f-68f822e65c75.png)
サインが入っている状態でサイン領域をタップすると、先ほどとは違い、「表示」が出てきます。

(7)
![IMG_0622.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/5c864a4f-cdba-2022-aca3-0f8272499f7f.png)
表示のみで、変更できません。

# スタッフもお客さまも迷わない設計にする
この一言に尽きるのですが、単純に署名としてフィールドを配置するだけではなく、ちょっとした手間をかけてあげることで端末を使うストレスが軽減されます。

今回施したTipsは、以下の3つになります。
・__フィールドに何をすればいいかガイドを表示__
・__サインし終わったらどうするかを促すダイアログを表示__
・__サインし終わったら、書き換えられないようにする__

# 実装方法
では、Tipsを一つずつ見ていきましょう。

## フィールドに何をすればいいかガイドを表示
フィールドのプレースホルダテキストを編集します。
この設定は、フィールドが空の場合に表示されるようになっていますので、いろいろなところで応用ができます。
例えば、電話番号のハイフン入りのサンプルを表示しておくと、「このフィールドの電話番号はハイフンを入れて入力をするんだな」とわかります。
![スクリーンショット 2020-11-20 14.56.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/f512c64c-2c2b-626f-d65e-0e5dd08e85b9.png)

## サインし終わったらどうするかを促すダイアログを表示
スクリプトトリガの設定で、OnObjectModifyに仕掛けます。
![スクリーンショット 2020-11-20 14.57.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/0cdf2034-b2f1-17a0-2f5c-aac5d2c34088.png)

## サインし終わったら、書き換えられないようにする
一つのフィールド配置に見えますが、、、
![スクリーンショット 2020-11-20 14.58.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/ffb209eb-4350-9f19-25ff-b33016091cd0.png)

実は同じフィールドを二つ重ねています。
![スクリーンショット 2020-11-20 15.24.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2305302c-4e3e-52b8-c4b5-3324a875f7f0.png)

入力専用のフィールドと、表示専用のフィールドにしています。

入力専用のフィールド配置は、「すでにサインが入力されていた場合、表示しない」設定にします。
![スクリーンショット 2020-11-20 14.57.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/43a64896-1d94-38b8-0460-b00ce0b6aa58.png)

表示専用のフィールド配置は、先ほどとは逆に、「サインが未入力の場合、表示しない」設定にします。
プラス、フィールド入力の「ブラウズモード」のチェックを外します。
このチェックを外すことで、表示専用になります。
![スクリーンショット 2020-11-20 14.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/3201ad8f-b817-2d70-2186-65fd7e0dda6e.png)

# 「使いやすい」と思う部分の相違
開発者の立場からすると、「受取サインって書いてあるから署名の部分しか選択しないだろう」と思いがちですが、使う側からすると、どこをタップすればいいのか、タップしたらどうすればいいのか、間違ってタップして壊してしまったらどうしよう、、、と不安になって何もできなくなってしまいます。
実際に現場で使ってもらって、どうすれば迷わずにシステムを使ってもらえるかを聞き出し、追加していき、何も迷うことなくタブレットを使ってもらうことに近づけていきましょう。
現場では単に「このフィールドは何していいかわからないよ」の一言しか返ってこないかもしれません。（いや、一言返ってくるだけでも素晴らしいんです！）
その一言を掘り下げて、どうすれば現場にフィットするか、現場ごとに違うはずです。
実際、「こうすれば迷わないだろう」と先回りして実装したことが逆にうざったいシステムになってしまい、実装を削除することになることもあります。
初めはシンプルに、でも徐々に使いやすく、という時にこうした使いやすさも加えてみてください。