top of page
検索

Claris Studio を使わずにWebフォームと無料で連携する

執筆者の写真: sagosago
1月7日読了時間: 7分

Claris Studioの便利な機能に不特定多数に対するWebフォームとの連携があります。

Webフォームとの連携をAirtableというサービスを利用して無料で実現するのがこの記事のゴールです。


期限を区切ったWebアンケート

例えば、イベントの感想を求める様なアンケートや国勢調査などです。

この様な場合はGoogleフォームやformrun、Formzuといったフォームサービスを利用すれば良いと思います。FileMakerと連携する必要はそうないでしょう。（データ洗浄といった用途で使うかもしれませんが）

formrunやFormzuであればプライバシーマークやISMSを取得しているのでプライバシーポリシーが厳しい組織でも導入できますね。


継続的に送られてくるWebフォームデータ

今回はFileMakerシステムと連携するメリットのある下記の様なケースを想定しています。

  • 来店アンケート

  • お問い合わせフォーム

  • 要望・苦情

この様なデータをフォームサービスから毎回CSVでダウンロードしてFileMakerへ取り込み・・・という運用はミスが発生する可能性が高まりますし、手間です。苦情であれば早急に対応する必要もあるでしょう。社内である程度リアルタイムに共有する必然性があります。

今回はこの様なWebフォームを想定しています。


今回のゴール

  • Claris Studioを使用せずにWebフォームとFileMakerを連携させる

  • Claris Connectを使用せずに通知を受け取る

上記を解決するためにAirtableというサービスを使います。

通知先は別のサービスとなります。


Airtableのフォーム機能との連携

Airtableを利用する理由としては

  • 無料プランがあること（1baseに1,000レコードまで）

  • REST APIでデータのダウンロードが出来ること

  • APIのドキュメントが充実していること

があります。

無料プラン、Teamプランで気をつける点は

  • 1秒5リクエストまで

  • APIの呼び出し1000回/月

  • 月初に呼び出し回数はリセット

  • オーバーした場合は月初まで使えなくなる

1000回/月÷30=33回/日となります。

1時間毎に取り込んでると720回/月となりますので、あまり頻繁に取り込むのは避けたほうが良さそうです。

詳しくは下記ページに記載があります。


Airtableのフォームの作り方

Airtableは全てクラウドで実行されます。FileMakerとは用語が異なりますが置き換えて説明していきます。FileMakerの知識がある方が前提の解説となっています。


Airtableのファイル(Base)を作る

まず、下記サイトにアクセスしてアカウントを作成してください。

その後、下記手順でBaseを作ります。BaseはFileMakerで言う所のファイルの事です。中に複数のテーブルを持つことが出来ます。



Airtableのフィールドの定義

AirtableのフィールドはFileMakerのフィールド定義と値一覧が合わさった様なイメージです。フィールド定義同時に値一覧も定義します。計算タイプもあります。

画面のあちこちに“Team”と表記がありますが、有料のプランにすると使える機能です。今回は無料プランを前提に進めます。




Airtableのフォームの作成

前の工程で作ったフィールドからWebフォームを作ります。全てのフィールドを配置する必要はなく、内部的に使うフィールドは隠しておくことができます。

単独ページとして公開することも出来ますし、既存Webページに埋め込むことも出来ます。



Airtableの通知機能の設定

Claris Connectを使用せずにAirtableのみでメールやSlackへ通知を送ることが出来ます。今回はレコードが作成されたタイミングで通知を送ります。つまり、Webフォームで送信されたタイミングで通知を受け取ることが出来ます。

今回は設定しませんが、オートメーション機能で、”もし評価が星１の時”という条件分岐を設定することも出来ます。


Airtableのビューという考え方

AirtableのビューはFileMakerのレイアウトと検索条件とソートが一緒になったような概念です。１つのテーブルに対して複数のビューを持てます。

  • 全データ

  • 未対応

  • 対応済

というようなビューを用意しておくと便利ですね。

その他にもカンバンやギャラリー、カレンダーといった見せ方があります。

下記はカレンダーです。

Airtableカレンダービュー
Airtable：カレンダー

API連携用ビューの作成

ここからAPI連携への下準備をします。

FileMakerからAirtableに対してAPI経由でデータを取得します。APIで取得できるレコード数の上限は100なので、100を超えた場合の処理を考える必要があります。

下記のような運用とします。


  1. FileMakerからAPI経由でAirtableのデータを取得

  2. 取得したAirtableのレコードIDを利用して取得済フラグをAirtableに立てる

  3. Airtable画面で取得済フラグが立っているデータだけを手動で削除


AirtableとFileMakerのAPI連携概要
Airtable

API操作を間違って消してしまうことがないよう手動で削除という安全策を取りました。

取り込んだものは削除されるのでAPIで取得できるレコード数の上限はクリアされます。

ここでのポイントは、まだ取り込んでないデータと取込済のデータをAirtableのビューで切り分けします。

未取込のAirtableのビューに対してAPIで取得します。

取込済のAirtableのビューに対して削除操作をします。




Airtableのトークンの設定

FileMakerとAPI連携するための準備です。トークンという長いテキストを生成します。

読み取り、書き込みの権限を付与してください。

※このトークン設定は過去の記事時点から変更されています



AirtableとFileMakerの動作確認

FileMaker側の解説は後回しにして、まずは動作を確認します。

1ファイル（Airtable用語ではBase）で5000レコード

APIの1回で取得できるレコードは最大100。

それを超えるような業務でなければ対応できるのではないでしょうか。

今回はテーマの技術解説を解りやすくするために、なるべく解りやすく無駄な機能は省いて作っています。実際の業務に適用する場合は例外的な処理も考慮しないといけないでしょう。その場合はご相談ください。



FileMakerの設定

Airtableのヘルプが実際に作っているファイルを使って解説してくれるので、解りやすいです。

Airtableのヘルプ
Airtableのヘルプ

データ取得の設定

データを取得する設定は下記となります。

JSONは１レコード単位で分解し、フィールドへ入れます。

AirtableからAPIでデータ取得するスクリプト
Airtable

URL：

https://api.airtable.com/v0/appHlGF4NractI28M/tblvXwRFJgPWjBYoj?view=List_Mi

cURL：

-H "Authorization: Bearer patRwt0kiSMyWPk（省略：トークンが入ります）"

URLのパラメータはどうなっているかというと、API URL encoder tool が用意されています。

[Base ID]、[Table Name]は設定されているので、設定するのは[View]だけです。”List_Mi”と入力します。

そうすると、下の黒い部分のURLが自動的に変更されます。そのURLをコピーしましょう。

この画面でもデータのフィルタは出来るようなのですが、GUIでした方が結果のデータもイメージしやすいので楽かと思います。




データ更新の設定

AirtableからAPIでデータ更新するスクリプト
AirtableからAPIでデータ更新するスクリプト

データ取得に比べると少しややこしいですが、最終的に下記のようなJSONを作っています。

{
  "records": [
    {
      "id": "recLFGyAMNHOP8TF7",
      "fields": {
        "取込済": true
      }
    },
    {
      "id": "recvesk8YntFSratP",
      "fields": {
        "取込済": true
      }
    },
    {
      "id": "recz3Z2l0k803Hl3p",
      "fields": {
        "取込済": true
      }
    }
  ]
}

AirtableのレコードIDと取込済フラグをtrueにします。他の項目の更新が必要な場合は項目を追加します。

これらを分解してSubstitute関数で置換しています。

URL:

https://api.airtable.com/v0/appHlGF4NractI28M/tblvXwRFJgPWjBYoj?maxRecords=100&view=List_Mi

cURL：

-X PATCH https://api.airtable.com/v0/appHlGF4NractI28M/Form
-H "Authorization: Bearer patRwt0kiSMyWPk（省略：トークンが入ります）"
-H "Content-Type: application/json"
-data @$DATA

ここで、最終的に作成するJSONを$DATAという変数に入れて、cURLで”@$DATA”と指定します。


サンプルファイル

FileMakerのサンプルファイルがダウンロードできます。

トークン部分は下記テキストで置き換えています。Airtableで生成して置き換えてください。

YOUR_SECRET_API_TOKEN




AirtableとFileMakerの連携実績について

”とにかくスゴいカスタムApp”を競うコンテスト「FM-1グランプリ」の作品応募システムに使用されています。

当初はGoogleフォームを使おうと思っていたのですが、Googleフォームは添付ファイルをアップロードするにはGoogleへのログインが必要でした。

応募のハードルを下げるためにログイン不要で添付ファイルをアップロードすることが出来るツールとしてAirtableを選択しました。最終的にはFileMakerにダウンロードし、審査に使用しました。

詳細の記事



 


(株)未来Switchでは

通勤中にスマホでサクサク見れる

【FileMaker1分動画】を配信中です


字幕多めで電車でも見やすくなっていますので

ぜひご覧下さい





 


イベントはPeatix(ピーティックス)にて掲載しています

フォローしていただくと、未来Switch開催のイベント通知が来るようになります

不定期開催の予定ですのでチェックしてみてくださいね


困りごとを解決する近道があるかも

閲覧数：71回0件のコメント

最新記事

すべて表示

コメント

bottom of page