FileMaker+iOS標準機能でお絵かきしてみる

はじめまして。
このアドベントカレンダーをきっかけに書きはじめてみます。
アドベントカレンダーのエントリーを1日勘違いしており公開が遅くなってしまい申し訳ありません。。

軽く自己紹介を。
自社で使用するシステムの作成を片手間でやっております。
まだまだ初心者から脱却出来ずいつもQiitaのみなさんにはお世話になっております！
そんな中ですが自分くらいの初心者の方向けに書いてみようと思います。
文章を書くのに慣れていないため読み苦しいところもあると思いますがご了承ください^^;

今年初めてFileMakerカンファレンスに参加して、セッション内で紹介されていたこの機能。
自分でも出来そう！と思いやってみましたが、いざやってみるとなかなか躓きポイントがあったのでこちらで共有してみたいと思います。

## 大まかな処理の流れ
1. FileMakerGoで写真撮影（もしくはライブラリから選択）
2. クリップボードにコピー
3. ショートカットアプリの呼び出し
4. __クリップボード取得__
5. __マークアップアプリで加工__
6. __クリップボードにコピー__
7. __FileMakerGoアプリ呼び出し__
8. グローバルフィールドに貼り付け
9. 確認
10. 対象のフィールドに設定

1〜3、8〜10がFileMakerGo側の処理
4〜7がiOS(ショートカットアプリ)側の処理になります。

## FileMaker側構成
__フィールド構成__
今回使用しているのは３つのフィールドのみです。
(確認が不要であれば２つのフィールドでもOKです)
<img width="928" alt="スクリーンショット 2019-12-03 午後10.36.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/a1344a94-5f0c-9a3c-90aa-461b0fa7eb7c.png">

__スクリプト__
各々2行のスクリプトが４つだけ
![scripts.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/27d588c5-07a5-0948-872b-7aaf70abe53a.jpeg)

## ショートカットアプリ側
__アクション__
![markup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/e1e7628d-52a8-0f99-0115-a2bd24405aca.jpeg)
やっていることは、
1. クリップボード経由で写真を受け取る
2. マークアップツールで加工
3. 加工済みの写真を再度クリップボードに取得
4. FileMakerGo呼び出し用のURL作成(スクリプトの指定もここで)
5. URLを開いてFileMakerGoに戻る

## 躓いたポイント
__ショートカットアプリのマークアップを見付けられない__
まずこの機能を作るにあたって初めてショートカットアプリを使ったのですが、そもそもマークアップのショートカットの名前すら分からず即躓きました(笑)
アクションの検索で「マークアップ」を検索すればすぐ出てきます。

__FileMakerからショートカットアプリの呼び出し方法__
これまでURLを開くのスクリプトステップを使用したことがなかったため調べるのに時間が掛かりました。
ショートカットアプリの呼び出しには「shortcuts://run-shortcut?name=ショートカット名」を使用すればOKでした。

__画像の受け渡し方法__
編集したい画像ファイルをショートカットアプリに渡すためにどうやってファイルの受け渡しをするかを悩みました。
写真アプリの「最新の写真を取得」を使っていましたが、FileMaker側で撮影した写真が最新の写真ではないかもしれないことや、アルバムから取り込んだ写真の場合はうまく受け渡しができないなどいろいろ考えた結果、クリップボード経由でファイルの受け渡しをすればスムーズに処理できました。

__スクリプトの実行__
ショートカットアプリからFileMakerに処理を戻す際にスクリプトを指定して実行していたのですが、何度やっても「使用したアクセス権ではこの操作を実行できません」のエラーメッセージが消えず。。。
完全アクセス権を付与したりアカウントを追加してみたりといろいろ試してみましたが全てダメ。
答えはヘルプにちゃんと書いてありました。

>URL で FileMaker スクリプトを実行できるようにするには、ユーザのアカウントの fmurlscript 拡張権限を有効にしておく必要があります。アクセス権セットの拡張アクセス権の編集を参照してください。

<img width="912" alt="スクリーンショット 2019-12-22 午後8.25.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/5130f19e-b86e-c13f-c223-dc09e03ccf20.png">
ちゃんと拡張アクセス権を設定すれば何事もなかったように意図した動作が出来ました。
ヘルプ読むの大事です。


## サンプル
初期画面
<img width="375" alt="IMG_8490.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/b782ad0b-16e4-74da-e453-ef07ed174e87.png">

写真を撮影するとオブジェクトフィールドに写真が入ります。
<img width="375" alt="IMG_8491.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/5f9a5f4d-abc4-31f5-5302-301502a4bc46.png">

加工ボタンを押すとショートカットアプリに処理を引継ぎます。
マークアップを使用してペンツールや蛍光ペンツール、文字入れなども可能です。
<img width="375" alt="IMG_8492.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/3100f548-6001-f584-1445-d3e558df3e00.png">

完了を押すとFikeMakerに戻り、編集結果の確認画面がポップアップで表示されます。
<img width="375" alt="IMG_8493.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/deac2887-7a31-ca1f-92a8-9cbd88797d92.png">

ここで確定ボタンを押すとレコードのフィールドに編集後の写真が表示されます。
<img width="375" alt="IMG_8494.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91731/2477faaf-0055-3f16-2159-428f345c9a11.png">

サンプルファイルは<a href="https://www.dropbox.com/s/h249e1atbqlpy8d/MarkUP.fmp12?dl=0" target="_brank">こちら</a>からダウンロード出来ます。
ショートカットアプリの方は上の画像を参考にお作り下さい！

## おわりに
有料で高性能にお絵かきできるソリューションはありますが、とりあえず文字入れだけできれば良いとか特定の部分に丸をつけて強調したいという場合はこのパターンで十分代用可能だと思います。
簡単なサンプルでいろいろ足りていないところがあると思いますが、触ってみて下さい。