FileMakerProで湯婆婆を実装してみる

# はじめに
## 前書き
* @Nemesis さんの [Javaで湯婆婆を実装してみる
](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2) 記事に端を発した流行から早一ヶ月ほど経った今さらのリスペクト記事になります
* [FileMaker Advent Calendar 2020](https://qiita.com/advent-calendar/2020/filemaker) の 4 日目記事です
    * ちなみに [湯婆婆 Advent Calendar 2020
](https://qiita.com/advent-calendar/2020/yubaba) というのもありました！

### 注意書き
* @Nemesis さんの [Javaで湯婆婆を実装してみる
](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2) 記事より引用

> この記事は映画「千と千尋の神隠し」のネタバレになる可能性があります。「大丈夫！」って人だけ下に進んでください。

## 対象読者
* [Claris FileMaker Pro](https://www.claris.com/ja/filemaker/pro/) ユーザー／興味ある方
* 湯婆婆ネタマニア

## FileMaker Pro の tips として学べること
* スクリプト作成の基本
* カスタムダイアログによる入力受け付け
* If 分岐と早期終了
* ローカル変数／グローバル変数／マージ変数の使い方
* Random 関数 と Middle 関数
* スクリプトトリガの使い方

## 実行環境
* Windows 10 Pro
* FileMaker Pro 19.1.3.315

# 仕様
## 基本要件の確認
* 名前の入力を受け付ける
* 入力された文字列の中から一文字だけ抽出する
* 抽出された一文字を返す
* 入力値が空欄の場合はクラッシュさせるというのが元ネタへの厳密なるリスペクトになるが、今回はエラー処理まで入れることとする

## フローをもう少し具体的に
* テキストの表示
    * 湯婆婆「契約書だよ。そこに名前を書きな。」
* ユーザー操作
    * 名前の入力
* バックグラウンドの処理
    * 名前が空欄だったら入力を受け付けないようにする
    * 空欄でなければ次へ進む
* テキストの表示
    * 名前が二文字以上の場合
        * 湯婆婆「フン。●●●●というのかい。贅沢な名だねぇ。」
        * 次へ進む
    * 名前が一文字以下の場合
        * 湯婆婆「フン。●というのかい。」
        * ここで終わらせる
* バックグラウンドの処理
    * 入力された名前の中から一文字だけ抽出
* テキストの表示
    * 湯婆婆「今からお前の名前は●だ。いいかい、●だよ。分かったら返事をするんだ、●」

# 実装
## カスタムダイアログでの入力と表示
* まずはカスタムダイアログだけで入力を受け付け、結果の表示をします

### 最初に完成形と結果
* スクリプト全体

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/0e979c2a-734b-8468-d5c4-9950897965e9.png)

* 名前を入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/b97e396c-344a-8e94-34c5-aa9701655a72.png)

* 贅沢な名と言われる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/7549cc52-be75-0757-29de-9c2d92884203.png)

* 新たなる名を与えられる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/269456d8-0362-f4ed-09d6-caa2465e3e46.png)

* 新たなる名はランダムで付与される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/1cfb9933-1010-589c-8809-1e8eb0dcd94a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/550ca437-1cfa-d28c-181f-de072842ff7c.png)

* 名前が一文字の時はそのまま

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/31dae441-a748-40df-ff07-8732b65f5b04.png)

* さて、では実際の実装を一つずつおこなっていくことにしましょう

### テーブルとフィールドの用意
* `yubaba` テーブルに、グローバルのテキストフィールド `g_txt` を用意します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/d7ee08c2-b2f9-03be-15e4-e896853e4542.png)

### スクリプトの作成
* `湯婆婆_カスタムダイアログ` スクリプトを作成
* スクリプトステップ `カスタムダイアログを表示` 追記
    * 一般 タブ
        * タイトルに `"湯婆婆"`
        * メッセージに `"「契約書だよ。そこに名前を書きな。」"`
        * デフォルトボタンのみ
            * キャンセルは受け付けない！　質問には答える。
    * 入力フィールド タブ
        * 入力フィールド 1 に `yubaba` テーブルの `g_txt` フィールドを指定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/0d0abddc-ced9-2346-d279-eadf19f4b81d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/3c2411bd-d039-8e38-5d84-87a54a66de0a.png)

* スクリプトステップ `変数を設定` 追記
    * 名前に `$input_name`
    * 値に `yubaba` テーブルの `g_txt`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/0e65f59e-a872-dfe1-17f9-3d28b4c92c97.png)

* スクリプトステップ `フィールド設定` 追記
    *`yubaba` テーブルの `g_txt`
    * 計算式を `""` にして早々に値リセットしておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/b4ac34d6-ffb1-46f7-6628-999683a19ebb.png)

* スクリプトステップ `変数を設定` 追記
    * 名前に `$count_input_name`
    * 値に `Length ( $input_name )`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/c607abf5-9a48-5a6e-c9c9-4f879a72f45a.png)

* スクリプトステップ `変数を設定` 追記
    * 名前に `$interruption`
    * 値に以下計算式

```
If (
  $count_input_name ≤ 1;
    True;
    False
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/4dc5a2a1-ab03-4b96-86af-dc5329ea4503.png)

* スクリプトステップ `変数を設定` 追記
    * 名前に `$yubaba_output_1`
    * 値に以下計算式

```
"「フン。" & $input_name & "というのかい。" & 

If (
  not $interruption;
    "贅沢な名だねぇ。"
) & 

"」"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/7b86cb05-3485-ccfc-4b71-f07bd755e62e.png)

* スクリプトステップ `カスタムダイアログを表示` 追記
    * 一般 タブ
        * タイトルに `"湯婆婆"`
        * メッセージに `$yubaba_output_1`
        * デフォルトボタンのみ
            * 頷くのみ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/7e138319-de7e-e3aa-a0c3-806c53b288b6.png)

* スクリプトステップ `If` `End If` 追記
    * If 条件は `$interruption`
    * スクリプトステップ `現在のスクリプト終了` 追記

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/bcd326d0-55a9-7e6e-e2d7-34ea6129bf9b.png)

* スクリプトステップ `変数を設定` 追記
    * 名前に `$output_name`
    * 値に以下計算式

```
Let (
  [
    pos = Int ( $count_input_name * Random ) + 1
  ];

  Middle ( $input_name ; pos ; 1 )
)
```

* スクリプトステップ `変数を設定` 追記
    * 名前に `$yubaba_output_2`
    * 値に以下計算式

```
"「今からお前の名前は" & $output_name & "だ。いいかい、" & $output_name & "だよ。分かったら返事をするんだ、" & $output_name & "」"
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/6b2b5c4b-4b04-416b-5a9a-7f3685bb53ef.png)

* スクリプトステップ `カスタムダイアログを表示` 追記
    * 一般 タブ
        * タイトルに `"湯婆婆"`
        * メッセージに `$yubaba_output_2`
        * デフォルトボタンのみ
            * 頷くのみ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/b27aba13-35e4-d06e-ef52-f96c0899d3bd.png)

* 以上で完了！


## レイアウトでの入力と表示
* 次にレイアウトで入力を受け付け、結果の表示をするようにしてみます

### 最初に完成形と結果
* スクリプト全体

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/44b5ec86-b49d-d860-3366-473e073120fd.png)

* 名前を入力する前

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/16c878c8-527e-192f-45b7-ee157d913c94.png)

* 名前を入力して確定すると（フィールドからカーソルを外すと）贅沢な名と言われ、新たなる名を与えられる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/9e99532e-e767-9f92-3d73-613eeab7a0d1.png)

* 新たなる名はランダムで付与される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/eb54747a-9583-0498-acd3-08d1fa133607.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/0993a3c1-0164-7130-2224-892e33104f6a.png)

* 名前が一文字の時はそのまま

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/f8c27b61-d6ad-a581-98cc-e4e84e048d9b.png)

* さて、では実際の実装を一つずつおこなっていくことにしましょう

### レイアウト作成
* 湯婆婆の素材画像を [公式サイト](http://www.ghibli.jp/works/chihiro/#frame) から拝借する

> ※画像は常識の範囲でご自由にお使いください。

* 湯婆婆の素材画像をレイアウトに貼り付ける
* 名前入力のために `g_txt` フィールドを置く
    * 適当に白い背景をセットしたりラベルテキストを付けたりする
* マージ変数 `<<$$yubaba_output>>` を置く
* レイアウトモードで確認
    * もっと契約書っぽいレイアウトにしたければしてもヨシ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/565d7e20-552f-3b46-f0c5-d4ba13aca182.png)


### スクリプトの作成
* スクリプトステップ `If` `End If` 追記
    * If 条件は `IsEmpty ( yubaba::g_txt )`
    * スクリプトステップ `変数を設定` 追記
        * 名前に `$$yubaba_output`
        * 値に `"「契約書だよ。そこに名前を書きな。」"`
    * スクリプトステップ `ウインドウ内容の再表示` 追記
    * スクリプトステップ `現在のスクリプト終了` 追記

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/a5b991e3-3859-7441-fbe5-5045fb6bcdfd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/b8693372-7b26-2bcb-bf06-c40e04ee8ec8.png)

* `$input_name`, `$count_input_name` 変数を設定するスクリプトステップを、先にカスタムダイアログで作成したスクリプトからコピーしてきてペースト
    * 中身はそのまま

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/55a75699-66cf-d172-2d87-18f8cc99b7fc.png)

* スクリプトステップ `If` `End If` 追記
    * If 条件は `$count_input_name ≤ 1`
    * スクリプトステップ `変数を設定` 追記
        * 名前に `$$yubaba_output`
        * 値に `"「フン。" & $input_name & "というのかい。」"`
    * スクリプトステップ `ウインドウ内容の再表示` 追記
    * スクリプトステップ `現在のスクリプト終了` 追記

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/a54eff17-3438-37ab-ce91-06d83a61d689.png)


* `$output_name` 変数を設定するスクリプトステップを、先にカスタムダイアログで作成したスクリプトからコピーしてきてペースト
    * 中身はそのまま

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/a1cf8269-dc8c-4bb2-f7f4-000efab0ed79.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/1e283f8f-443e-bc5a-8d25-1a29c5f8a5c9.png)

* スクリプトステップ `変数を設定` 追記
    * 名前に `$$yubaba_output`
    * 値の計算式は以下

```
"「フン。" & $input_name & "というのかい。贅沢な名だねぇ。」" & ¶ & 
"「今からお前の名前は" & $output_name & "だ。いいかい、" & $output_name & "だよ。分かったら返事をするんだ、" & $output_name & "」"
```

* スクリプトステップ `ウインドウ内容の再表示` 追記


### スクリプトトリガの設定
* `レイアウト設定` の `スクリプトトリガ` タブにて `OnLayoutEnter` でスクリプト `湯婆婆_レイアウト`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/29bb8910-e32a-807a-c3a9-aa9848f37062.png)

* 設置したフィールド `g_txt` のスクリプトトリガ設定にて `OnObjectExit` でスクリプト `湯婆婆_レイアウト`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/baa019fe-8a64-d2d4-04f4-96529b213e9f.png)


* 以上！


# おわりに
## 雑感
* 私はいったい何をやっているんだろう……？
* FileMaker Pro 楽しいと思っていただけたら幸い！

## 2020/12/15 追記
* @tyuma さんによる FileMaker Go の QR コードを使ったさらに素敵で楽しい実装例の記事はこちらです！
    * [Qiita - 【FileMaker】QRコードを読み込んで湯婆婆に名前を決めてもらう](https://qiita.com/tyuma/items/a8a887e019b1d5e58ae7)