FMDB-blue導入のチュートリアル【基礎編】

# はじめに
FileMakerでのMarkdownエディタであるMarkdownThingの開発者[(@qbxxdp)](https://twitter.com/qbxxdp)さんから、チュートリアルがあるとよいのでは？　とご指摘いただいたので、作ってみた記事です。既存のデータベースに組み込むのも、そこまで大変ではないと思っているのですが、このチュートリアルで練習ファイルを作成し、全体の流れと、上手く動くことを確認した上で、その次に、既存のデータベースへの組み込みにチャレンジすると導入もしやすいと思います。動画は苦手なので、スクショばかりの長文ですみません。不具合報告は大歓迎です。

# このチュートリアルで作れるもの
フィールド編集のログが取られ、レコードの作成、削除、フィールドの編集についてundo、redoが可能なカスタムAppが作成できます。
![20211201_Practice1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/7d18bff8-4438-0682-54a4-5d131557dcc0.gif)


# 準備するもの
1. FileMaker Pro 19
「FMDB-blueの使い方」を読んでいただければ、FMP16までなら導入可能だと思います。 このチュートリアルではFMP19前提で進めます。

2. FMDB-blueファイル一式
    - FMDB-blue_Processor.fmp12<br>
このチュートリアルでは「Processorファイル」と呼びます。
    - SampleApp_Interface.fmp12<br>
このチュートリアルでは「Interfaceファイル」と呼びます。
    - FMDB-blue_Data.fmp12
    - SampleApp_Data.fmp12<br>
    これらのファイルは、このチュートリアル内では登場しませんが、FMDB-blueの導入、稼働には必要なファイルです。

    導入が済んでしまえば、SampleAppのファイル2つは削除してしまっても稼働に問題ありませんが、新たなファイルに導入するときには、また必要になるので、そのまま残しておいた方が無難かと思います。

    ここから最新版がダウンロードできます。
    <a href="https://github.com/siebenunddreissig/FMDB-blue"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/siebenunddreissig/FMDB-blue.png" width="460px"></a>

3. ログ記録を残したいFileMakerファイル。
    チュートリアルでは、このファイルを作成するところから始めます。
    ある程度の細工は必要ですが、どんなFileMakerのカスタムAppでも導入は可能だと思っています。本当は、どんなものでも、と言いたいですが、ダメなものもあるかも知れません。このファイルでは導入できない！ってのがあったら、ご連絡いただければ、対応策を頑張って考えます。<br>


# FMDB-blue導入のチュートリアル
## 0. チュートリアル開始前の注意事項
このチュートリアルを読んでいただくと分かると思いますが、Processorファイルと、ログを残したいFileMakerファイルとの設定を交互にやっていく感じになります。この順序を間違えると、エラーが出てうまく導入できない危険性が高まります。途中の作業でエラーが表示されたら、再度前の工程から確認した方がよいです（ちなみにカスタムApp内の「使い方」と若干順番が異なっているところはありますが、その違いはどちらでも問題ありません）。
あと、FMDB-blueファイルはカスタムメニューが設定されており、通常使用の中では、余分なところが触れられないようになっています。チュートリアルで、メニューバーに該当メニューが見つけられない場合には、ツール > カスタムメニュー > [FileMakerの標準メニュー]を選択してください。それもグレーアウトとしているときは、完全アクセスで開いていない可能性が高いです。完全アクセスのアカウントで再ログインしてください（メニューバーのSample Appかスクリプト > Development Toolsに再ログインのコマンドがあります）。
このチュートリアルは、macOS Montereyで作成しています。Windowsでも同様の流れで導入できると思いますが、[Windows用にチュートリアルを作成いただいた方](https://twitter.com/qbxxdp/status/1465333873055711239)もいらっしゃるので、参考にしてください。

## 1. ログを残したいFileMakerファイルの作成
1-1.
FMP19を起動させ、でファイルを新規作成します。
![20211130_194047.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/ee4b05a4-c61e-c37b-a999-449bd5d98380.png)

1-2.
ファイルを作成する場所はどこでもよいですが、まずは、Processorファイルがあるフォルダに作りましょう。ファイルの名前もなんでもよいですが、ここでは`AnyNameFile`にしておきます（以後、ログを残したいFileMakerファイルは「`AnyNameFile`ファイル」と呼びます）。
![20211130_194200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/75a788ff-7f51-1ee5-3708-35bf43249b4d.png)

1-3. 
フォルトの設定だと5つのフィールドが自動で作られて、追加のフィールド作成の画面になります。そこで、1つフィールドを作成します。フィールド名もなんでもよいですが、ここでは`AnyNameField`にしておきます。
![20211130_194700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/563c3cc2-cd40-ad01-5371-c617f5d6559b.png)

1-4.
あと、このファイルを再起動したときに、FMDB-blueにアクセスする際にパスワードを聞かれないようにするために、アカウントにパスワードを設定しておきます。（実運用時は、FMDB-blueを含めて、このパスワードは適切に設定してください）。
![20211130_194720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/a413f13e-54fb-d2c4-8e5d-2c5ea383f98f.png)

![20211130_194730.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/948c7667-f7b1-6fbc-6e94-2dbe083577b4.png)

これでログを残したいFileMakerファイルの作成は一旦終了です。

## 2. Processorファイルでの設定・その１
2-1.
まず、Processorファイルを開きます。
![20211130_194759.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/31717f5e-7f57-c008-f993-ef3c799b68a0.png)

2-2.
アカウント、パスワードは「admin」を入力します。
![20211130_194813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/406df343-f92e-6d07-16b6-01c972818d89.png)

2-3.
「外部データソースの管理」を開きます。
![20211130_195001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/65c05841-855a-aad4-d6cf-db573928c642.png)

2-4.
「外部データソースの管理」画面で「新規」を選択します。
![20211130_195020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/4b8da80e-ccb8-af21-f33a-ea60dd7a80dc.png)

2-5.
「ファイルの追加...」から`AnyFileName`ファイルを選択します。データソースの名前もなんでもよいですが、ここでは`AnyFileName`のままにしておきます。
![20211130_195100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/998e2715-30ab-1e42-0b7f-769e5f47535c.png)
![20211130_195114.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/532e8ab7-ff28-42b0-5dc5-c22257257feb.png)

2-6.
今度は「データベースの管理」を開きます。
![20211130_195405.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/d3675c7c-0f06-84da-215b-607f2b9f74dc.png)

2-7.
「リレーションシップ」を選択して、テーブルオカレンスの追加を行います。
![20211130_195450.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/5961c888-9b62-3889-6fde-343d6fc28f2c.png)

2-8.
「テーブルを指定」でデータソースに`AnyFileName`を選択します。この選択のときに認証を確認するアラートが表示されますが、「はい」を選択してください。ここのオカレンス名もなんでも良いですが、`AnyOccurenceName`としておきます。
![20211130_195520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/3af14aba-b67a-5e4d-faa9-df88abe9a5b9.png)
![20211130_195530.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/c7cf1ad9-95f1-4a18-4f30-30d66310bd06.png)

2-9.
次に、リレーションシップを追加します。
![20211130_200110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/51cefc0c-a930-e8ae-6d0e-a5126218542d.png)

2-10.
「リレーションシップ編集」のところで、下図の通りに設定を行います。
![20211130_200139.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/2b9aa801-4757-143b-e184-8a13b8c2468c.png)

2-11.
下図の通りになっていることを確認して、「OK」を押します。
![20211130_200200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/ac5fc121-ff97-c777-d2ae-f54750552962.png)


## 3. ログ記録を残したいFileMakerファイルでの設定・その１
3-1.
今度は、`AnyFileName`ファイルで、「外部データソースの管理」を開きます。
![20211130_200247.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/5c3b8c05-0f35-f6be-5029-7dec9fe8ce78.png)

3-2.
「外部データソースの管理」で「新規...」を選択します。
![20211130_200341.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/e54bc611-0b10-2a79-3d98-1daff62dc547.png)

3-3.
「ファイルの追加...」からProcessorファイルを選択します。この時の外部データソース名は、`e_FMDB-blue_Processor`としてください。
![20211130_200407.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/ed6498a4-df46-e60a-a18c-be207de406c1.png)

3-4.
作成されたのを確認して、「OK」を押します。
![20211130_200415.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/6954a8ec-69f2-fdd9-8510-c0db5dfa3ca0.png)

3-5.
次に、「データベースの管理」を開きます。
![20211130_200500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/6495d93e-82f1-52ef-0785-1717c6475bb8.png)

3-6.
「リレーションシップ」を選択して、テーブルオカレンスの追加を行います。
![20211130_200502.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/c937857e-31c6-7d58-fa96-b2e4d8fc0cca.png)

3-7.
「テーブルを指定」でデータソースに`e_FMDB-blue_Processor`を選択します。この選択のときに認証を確認するアラートが表示されますが、「はい」を選択してください。ここのオカレンス名は、`eM_Hub#FMDBblue`にしてください。
![20211130_200706.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/c51db139-09c9-f7bc-a67b-a3c2efa35d18.png)
![20211130_200707.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/6eb2fe80-bda8-ea35-a2f5-359cc6de0137.png)

3-8.
テーブルオカンレスが作成されたのを確認して、「OK」を押してください。ここではリレーションシップの設定は必要ありません。
![20211130_200714.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/19734fff-340e-b3e5-5f95-d6fa510a9484.png)

3-9.
次は、「スクリプトワークスペース」を開きます。
![20211130_200822.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/c432ea99-30db-0fb5-9fd7-073f9f0af948.png)

3-10.
「スクリプトワークスペース」で「インポート...」を実行します。
![20211130_200842.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/69b05516-bbd8-e41c-e720-34876ef39d57.png)

3-11.
インポート元は、Interfaceファイルを指定してください。
![20211130_200908.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/fdaaa83b-ef94-3c18-d457-41e628209dd9.png)

3-12.
「_LogSystem」のところにチェックを入れて、全部で24個のスクリプトをインポートします。
![20211130_200910.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/134a905c-a867-0929-ec0b-91f70d03795b.png)

3-13.
スクリプトのインポートが終わったら、`AnyFieldName`フィールドにカーソルを入れ（アクティブにし）た状態で、「Set TO Shift from Active Field」スクリプトを実行します。
![20211130_201047.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/4463279f-1ce1-9295-7fa5-423ffeb784e2.png)

3-14.
フォーカスが、Processorファイルに移り、「TableOccurrenceShiftの設定」について尋ねられますが、「新規作成」を選択します。
![20211130_201130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/4f9625c6-3cc9-b6ee-02de-d395f346f40f.png)


3-15.
TableOccurrenceShiftテーブルにレコードが作成されたのを確認します。ここで空欄があるのは問題ありません。次で設定を行います。
![20211130_201305.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/a76e5c34-4109-1878-c98f-4bbd1db65382.png)

## 4. Processorファイルでの設定・その２
4-1.
Processorファイルにフォーカスが移っているので、そのまま「レイアウトの管理」を開きます。
![20211130_201449.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/20354dd7-5855-85f9-b6d0-208465427e44.png)

4-2.
「レイアウトの管理」で`_Log@SampleParent.form`レイアウトを選択し、「複製」を押します。
![20211130_201525.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/f9b1cff7-578e-34dd-398b-789819e43003.png)

4-3.
複製されたレイアウトを選択し編集します。レイアウト名はなんでもよいですが、`_Log@AnyOccurrenceName.form`にしておきます。表示するレコードを`AnyOccurrenceName`にて、「OK」を押します。
![20211130_201604.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/059f9140-f62c-917b-ab74-a8fb44f4dabd.png)

4-4.
できたレイアウトを開きます。
![20211130_201623.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/90b1404c-50b3-533e-91b3-105ccdbbba5c.png)

4-5.
「レイアウトモード」にします。
![20211130_201649.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/d4f2d24c-2210-2970-98fd-56eb686ad45f.png)

4-5.
1つのフィールドを残して、残りは削除します。
![20211130_201719.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/2725a111-1f03-e880-edf2-8b9c2e0cdaea.png)

4-6.
残ったフィールドは、`AnyOccurrenceName`テーブルの`AnyFieldName`フィールドに変更します。
![20211130_201746.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/a4aa6de3-1837-f1e5-983f-42e8607adbc9.png)

4-7.
「ブラウズモード」に戻ります。
![20211130_201830.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/debf0bc6-7c55-e0fb-9a8b-001c1cf65b65.png)

4-8.
「Set TO Shift from Active Layout」スクリプトを実行します。
![20211130_201908.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/cccbfcbf-dd0d-4604-b2db-a25e5436290b.png)

4-9.
「TableOccurrenceShiftの設定」について尋ねられますが、ここでは「3」を入力して、「選択する」を押してください。
![20211130_201932.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/e2dffde4-d60c-c7ab-2900-8655a832842c.png)

4-10.
これで、TableOccurrenceShiftのレコードが全て埋まります。
![20211130_201950.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/18d84f39-ef11-397c-1aee-668248dbc50c.png)

## 5. ログ記録を残したいFileMakerファイルでの設定・その２
5-1.
`AnyFileName`ファイルに戻って、次の2つのスクリプト「新規作成」「削除」を作成します。
![20211130_202200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/5dae7bee-9b96-b5e8-9b3c-07b077201497.png)
![20211130_202300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/1ce78171-39f2-d216-63d5-2d2454362bdf.png)

5-2.
「レイアウトモード」にして、`AnyFieldName`フィールドを右クリックし、「スクリプトトリガ設定...」を開きます。
![20211130_202059.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/77b9cef9-c8da-c100-da01-641f54d07811.png)

5-3.
「OnObjectEnter」スクリプトトリガに`OnObjectEnter_Deposit_OldData()`スクリプトを、「OnObjectSave」スクリプトトリガに`OnObjectSave_Log_UpdatingField()`スクリプトを設定します。
![20211130_202100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/70c92413-c6c2-4610-e158-f6433d5424d4.png)

5-4.
「新規作成」ボタンを作成します。
![20211130_202500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/53d4d8df-f426-4013-1133-94620019d18d.png)

5-5.
「削除」ボタンを作成します。
![20211130_202516.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/0e721a53-f7d1-6010-5052-3add494d8681.png)

5-6.
Interfaceファイルに移り、「Undo」「Redo」ボタンをコピーします。各々のボタンには、グレーアウトしたボタンが配置されていますので、それも一緒にコピーします。
![20211130_202644.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/61f1bb26-371d-e4f8-b2a9-a7e1400d178b.png)

5-7.
`AnyFileName`ファイルに戻り、レイアウトモードで貼り付けします。
![20211130_202716.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/b2e286e1-74c1-14e1-37a7-2027951da2e3.png)

5-8.
これで練習ファイルの作成は完了です！
フィールドは1つだけですが、レコードを追加したり削除したり、フィールドの内容を変更したりして、undo、redoを行なってみてください。FileMaker使いの方々なら、それだけの操作でも、結構エンターテイメントになると思います。予想通り動くのが分かったら、ぜひ、Interfaceファイルも分析してみてください。


![20211201_Practice1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2283446/7d18bff8-4438-0682-54a4-5d131557dcc0.gif)


# チュートリアル後の注意事項
- 一度に複数のFMDB-blueが稼働していると、動作に不具合が生じます。FMDB-blueフォルダを複製して、個別のデータベースファイルをそれぞれの中に入れて設定して使うと、その個別のデータベースファイルを複数立ち上げた場合、FMDB-blueが複数稼働する状況になります。できればFileMaker Serverにアップロードして、共有して使われるのがよいかと思います。
- オブジェクトフィールド以外は、同様の操作で導入できます。オブジェクトフィールドは、特殊な設定が必要なので、それは、また別の話。

# あった方がよいもの
FMDB-blueを導入する上で、あった方がよいもの。

- FileMaker Server<br>
    注意事項でも記載しましたが、ローカルで個別にFMDB-blueを導入しようとすると、不具合を起こす可能性があります。それを避けるためにもサーバーにアップロードして共有した方が安定します。
- MBSプラグイン<br>
    必須ではないのですが、チュートリアルの画面の端端で、ちょこちょこ出てくるので。Demo版ですみません。
- MarkdownThing<br>
    チュートリアル作成には必須でした。完全に試したわけではありませんが、MarkdownThingにもFMDB-blueを導入できそうです。

# 謝辞
- [FM-1GP大賞発表LIVE](https://www.fm-1gp.com/post/fm-1_2021_grandprize)終了後の打ち上げzoomで、ご意見をいただいたのがきっかけです。FM-1GP運営に感謝！
- 当チュートリアルを作成するのに[MarkdownThing](https://www.fm-1gp.com/post/entryno38)（[魔改造バージョン](https://twitter.com/37_fmp/status/1465183973399617536)）を使用しています。[@qbxxdp](https://twitter.com/qbxxdp)さんに感謝！　本チュートリアルのご指導もいただいております。