【FileMaker】QRコードを読み込んで湯婆婆に名前を決めてもらう

# ネタに乗ってみる
最初記事を読んだ時にムッチャ真面目でムッチャ面白くて、やっぱこういうことは面白くないとな。と思ってたらアドカレができてて最後の一枠が残っていたのでドキドキしながら参加ボタンをポチりました。

原作者(元ネタ)様の記事：[Javaで湯婆婆を実装してみる - Qiita](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)

湯屋と湯婆婆の画像は、[スタジオジブリさまのサイト](https://www.ghibli.jp/info/013344/)からお借りしました。
常識の範囲内、、、と思ってます。
ちなみに「千と千尋の神隠し」は、子供が小さい頃テレビのロードショーで観ていたら「親が子供の目の前で豚になっていく」というシーンに自分の親（私）と重ねて想像してしまい衝撃を受けて、それより先のストーリーを観れてません。

# FileMaker バージョン
この記事では、[FileMaker](https://www.claris.com/ja/)で湯婆婆ります。
実行環境はiPadの[FileMaker Go](https://www.claris.com/ja/filemaker/go/)です。
QRコードの読み込み機能はバージョン13から追加されています。
13以上で実装してみてください。

# 動き
まずは、FileMaker Goでどのように湯婆婆の契約処理が行われるか、こちらをどうぞ。
名前が１文字の場合もあります。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これも。<a href="https://twitter.com/hashtag/%E6%B9%AF%E5%A9%86%E5%A9%86?src=hash&amp;ref_src=twsrc%5Etfw">#湯婆婆</a> <a href="https://twitter.com/hashtag/FileMaker?src=hash&amp;ref_src=twsrc%5Etfw">#FileMaker</a> <a href="https://twitter.com/hashtag/filemakergo?src=hash&amp;ref_src=twsrc%5Etfw">#filemakergo</a> <a href="https://t.co/MhZhVVjbl8">pic.twitter.com/MhZhVVjbl8</a></p>&mdash; Guppy Web Service (@GuppyWebService) <a href="https://twitter.com/GuppyWebService/status/1338456003369549827?ref_src=twsrc%5Etfw">December 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 契約書を準備する
今回はQRコードに隠した（？）名前をFileMaker Goで読み取るため、[無料サイト](https://qr.quel.jp/text.php)でQRコードを作りました。
また、画面上に名前を入力してもいいのですが、ここはやはり契約書があるとそれっぽいかな、と思い、用意しました。
![スクリーンショット 2020-12-12 20.19.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/40a6c898-bfb3-ed83-2fd1-213eafda1b37.png)

# 画面遷移
動画でも確認できますが、改めて画面遷移。
FileMaker Goで湯婆婆ファイルを開くと、湯屋が表示されます。
![スクリーンショット 2020-12-12 20.26.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/e11e0e2a-5a04-d835-14b4-f60f4f8fe1e6.png)
湯屋の入り口をタップすると、湯婆婆登場です。
![スクリーンショット 2020-12-12 20.26.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/5b0a5ef8-a7d1-6ee1-4a59-8c545a0c9bf6.png)
契約書を読み取るべく、下に読み取り部分がスタンバイしています。
湯婆婆に喋らせるために、湯婆婆の口元をタップすると、契約書に名前を書けと言われます。
![スクリーンショット 2020-12-12 20.27.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/eb35bdee-4b05-bb97-d2b9-ab212df1d64a.png)
この吹き出しをタップすると、iPadのカメラが起動し、QRコードを読み取り、湯婆婆に名前を読み取られます。
![IMG_0676.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/b7482b85-69f3-598a-3b2a-88dc273847a1.png)
名前が１文字の場合は、名前だけのセリフが出てきます。
![IMG_0677.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/d447c04a-55e2-787c-a367-aeec3a19ef82.png)
ちなみに、QRコード読み取りをキャンセルすると、書いたかどうか確認されます。
![IMG_0675.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/d6cfa6fb-53e7-9008-b8ea-a2de0b9f2269.png)
残念ながらクラッシュ湯婆婆は見れません。

# 実装
## 湯屋入り口
入り口付近（？）に透明なボタンを設置し、タップしたら湯婆婆画面に遷移するように実装します。
![スクリーンショット 2020-12-12 20.54.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/e96f75b7-2321-6b43-a23d-4ebba4f3005e.png)

## 湯婆婆画面
湯婆婆画面を表示する時にスクリプトで使っているフィールドをクリアする処理を挟んでいます。
![スクリーンショット 2020-12-12 21.02.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/fcfa3481-04fc-b781-eb01-685ec73e23a6.png)

使っているフィールドは、グローバルフィールド一つのみです。
![スクリーンショット 2020-12-12 20.58.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/9ff2fad9-540c-4e70-90c4-b5e68c03faf5.png)

吹き出しは、ポップオーバーボタンで実装しています。
↓こちらもボタン自身は透明にしています。
![スクリーンショット 2020-12-12 20.57.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/867d59e9-bf64-993d-1955-3b8a4a885df7.png)
↓この吹き出しのテキストフィールドがさらにボタン仕掛けになってます。
![スクリーンショット 2020-12-12 21.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/0a268f68-22e8-8ea4-95b9-9d4249bc083d.png)
↓チェック後の吹き出しには、yubabaCheckスクリプトでセットしたグローバル変数を表示しています。
![スクリーンショット 2020-12-12 20.59.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/a4c44bb0-1b4e-1f9b-583a-5a805c3c6d6a.png)
↓吹き出しを開くために、吹き出し（ポップオーバー）に名前をつけてます。間違ってボタンにつけないように。
![スクリーンショット 2020-12-12 21.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2f4c6f44-cc71-d139-d36b-191b74641365.png)
↓名前が１文字の時には「贅沢な、、、」以下を出さないように、「次の場合にオブジェクトを隠す」の設定をしています。
![スクリーンショット 2020-12-12 21.00.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/5fae43a8-76d7-83cd-adda-97cb62015961.png)
↓QRコード読み込みがキャンセルされた時のポップオーバーボタンも、他のボタンと同様、透明にしています。
![スクリーンショット 2020-12-12 21.00.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/6c4823c6-5821-2dbb-09f0-c36a736a973f.png)
↓こちらの吹き出しにも自動で開くために名前をつけています。（まさに千と千尋。。。）
![スクリーンショット 2020-12-12 21.01.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/65c68300-bca3-7b48-550c-45949ffacf7d.png)

実装としてはこんな感じです。

# 湯婆婆の音も入れたかった
音声も入れて湯婆婆を演出したかったのですが、さすがに著作権的に無理だろうと思い、吹き出しのみにしました。

# アイコンも作ってみた
ついでなので、湯婆婆アイコンも設定しました。
![IMG_0678.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/49a34df8-d336-d3b1-6436-bd8f7e99e5df.png)
↓アイコンは、ファイルオプションで指定できます。
![スクリーンショット 2020-12-12 21.31.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/92b89f70-dc98-950a-9786-7798253d96be.png)
単純に湯婆婆画像を切り抜いただけですが、FileMaker Goを開いた時に出現する湯婆婆アイコンは迫力があります。


師走の楽しいひとときでした。

# 追記
他のFileMakerでの湯婆婆も是非ご覧ください。
湯婆婆画像は同じですが、切り口が違って、色々と参考になります。
[FileMakerProで湯婆婆を実装してみる](https://qiita.com/Hi_Noguchi/items/63c7dadda520a62bda9a) @Hi_Noguchi