【FileMaker】複数の写真をFileMakerに取り込みたい - elemental_dropzone add-on

今回は、addonの紹介です。
FileMakerのオブジェクトフィールドに写真などを挿入する際、複数まとめてドラッグ＆ドロップして入れ込みたい、って思いませんか？
いちいち１枚ずつ入れるのって、かったるいですよね。
標準機能では今のところ叶いませんが、アドオンで叶います！

https://www.elemental-fm.com/elemental-dropzone

その名も、"elemental_dropzone"

# FileMaker対応バージョン
elemental_dropzoneが指定するバージョンになります。
ただ、どこに書いてあるのか見つけられなかったのですが、JavaScriptを使っているようなのでJavaScriptが扱えるFileMakerバージョンであれば問題ないと思います。

# インストール
1.取説ファイルのダウンロード
elemental_dropzoneサイトから「DOWNLOAD NOW」ボタンをクリックしてファイルをダウンロードします
![スクリーンショット 2022-12-04 14.46.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/8f44ea8a-772b-13bb-3398-23d1de70972c.png)

2.取説ファイルからアドオンファイルをダウンロード
![スクリーンショット 2022-12-04 14.48.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/8d7145b5-7312-5b9b-bc35-bf19aa1fc20e.png)

3.解凍
ダウンロード時に解凍されていなかった場合は、解凍します。
![スクリーンショット 2022-12-04 14.46.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/00f01766-c665-06ad-19f3-0388a4a0dcdd.png)


4.FileMaker所定のフォルダに保存
OSによってパスが違います。

<dl>
<dt>MacOS</dt><dd>/Users/<username>/Library/Application Support/FileMaker/Extensions/AddonModules</dd>
<dt>Windows</dt><dd>Users/<username>/AppData/Local/FileMaker/Extensions/AddonModules</dd>
</dl>

フォルダの位置は、設定によってはフォルダなどに表示されない場合もありますので、Macの場合はフォルダでライブラリを表示しておいてください。
![スクリーンショット 2022-12-04 15.31.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/c9c8ae42-96f2-f9b1-e2b6-85eafd26258d.png)



ここではMacの場合で説明します。
![スクリーンショット 2022-12-04 15.18.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/3dd23e05-6960-7914-fb49-e46a433415ec.png)


FileMakerを起動していた場合は、再起動してください。

# 実装
では、シンプルに複数の写真をドラッグ＆ドロップしてそれぞれのレコードのオブジェクトフィールドに写真を保存する流れでサンプルを作っていきます。

1.FileMakerを開いてレイアウトモードにして、「アドオン」タブで「＋」をクリック
![スクリーンショット 2022-12-04 14.44.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/a60f1e93-c0db-aeb5-7782-c76fcc2ffb57.png)

2.アドオンウインドウにあるelemental_dropzoneアドオンを追加
![スクリーンショット 2022-12-04 15.18.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/dc670889-4968-15a1-15f0-2076e2f88dde.png)


3.レイアウトに配置
![スクリーンショット 2022-12-04 15.18.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/4eb6317b-afe7-2eea-f6ce-d11b9ca880c4.png)
これで複数の写真を取り込むアドオンの配置になります。

4.自身のFileMakerでオブジェクトを入れるフィールドを指定
あとは、自身のAppのどのオブジェクトフィールドにこの写真を入れるか、テーブル定義をしていきます。
今回は、「製品写真データ」というオブジェクトフィールドを作りました。
![スクリーンショット 2022-12-06 15.58.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/9060e46b-0f1f-68eb-0427-16764e4d91da.png)

5.スクリプトを修正
elemental_dropzoneアドオンを入れると"Process File"というスクリプトが自動的に出来上がるので、そのスクリプトを修正します。
修正する箇所は、「ここをカスタマイズせよ」とコメントがあるので、その部分内で修正します。
![スクリーンショット 2022-12-06 15.46.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/4f8c36d3-2e38-e336-0aaf-e64350359965.png)

今回は、単純にオブジェクトフィールドに写真を入れるだけなので、実装してある箇所はコメントアウトし、新規レコード作成とフィールド設定のみを追加しました。
![スクリーンショット 2022-12-06 15.49.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/a83abb92-c244-9b11-6a2c-672754b511c9.png)
すでに、ドラッグ＆ドロップで取得した写真のコンテンツ情報は"$contents"という変数に格納されているので、それをデコードしてからオブジェクトフィールドに入れてあげます。

このスクリプトの別なところを間違って修正したくないので、この部分は別スクリプトにしてスクリプト実行ステップで呼んであげる形にすると安全だと思います。

実装は、ここまでです。

# 動き
この実装で、どんな感じで動くのか、みていきましょう。

1.複数ファイルをフォルダからドラッグ＆ドロップでelemental_dropzoneのエリアへ持っていきます。
![スクリーンショット 2022-12-06 15.50.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/548688d9-a3dd-e343-b33c-a65bb4cb4e78.png)

2.処理中は、"uploading,,,"とメッセージが表示されます。
![スクリーンショット 2022-12-06 15.51.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/1b3d0ccb-9aef-b736-bedc-9642bc631ce4.png)

3.それぞれのレコードのオブジェクトフィールドに保存されました！
![スクリーンショット 2022-12-06 15.50.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/d4caf5ba-cc3d-48b6-0276-dda23a335178.png)

# 処理時間
環境にもよりますが、すぐにレコードの表示に反映される感じではなく、一拍置くような動きでしたので、トランザクション系の速度重視の実装よりもマスタ系などで処理が多少かかってもいいケースの方が適しているかもしれません。

ではでは。