FileMaker Pro×Webの可能性 - 外部Webアプリと連携する方法とは

FileMaker Proは6から7にバージョンアップした際、さまざまな機能が追加、改良された。それから約6年、Webビューアやスクリプトトリガをはじめ、外部Webアプリケーションと連携するための機能が強化されてきている。FileMaker Pro単体では実現がむずかしい機能も、外部Webアプリと効率よく連動させることで、より簡単に効率よく開発ができる可能性がある。

FileMaker ProとWebを連携させる方法とは

FileMaker Proは6から7にバージョンアップした際、さまざまな機能が追加、改良された。それから約6年、Webビューアやスクリプトトリガをはじめ、外部Webアプリケーションと連携するための機能が強化されてきている。

FileMaker Pro単体では実現がむずかしい機能も、外部Webアプリと効率よく連動させることで、より簡単に効率よく開発ができる可能性がある。外部Webアプリと連携させる場合に利用する機能はおもに次のとおり。

XMLデータソース経由のインポート
Webビューア (FileMaker Pro 8.5以降)

XMLデータソース経由のインポート

XMLデータソースのインポートではXMLファイルからのインポート以外に、HTTP経由でのXMLインポートがおこなえるようになっている。これを利用して

特定の外部WebアプリケーションにFileMaker内のデータをGET形式で渡す
外部WebアプリケーションからFMPXMLRESULT文法のXMLでレコードを取得

といった連携が可能だ。FileMaker ServerのXML Web公開ではデフォルトでこのFMPXMLRESULT文法を出力する機能が用意されているため、簡単にこの機能でデータをやりとりすることが可能だ。MySQLやPostgreSQLといったほかのデータベース、スクレイピングなどで取得したデータはいったんFMPXMLRESULT文法に加工すればFileMakerにインポートができるようになる。

FileMaker ServerのXML Web公開は最初からFMPXMLRESULT文法を出力する機能が用意されているため、簡単にこの機能でデータを受信できる。クライアントがFileMakerランタイムの場合に活躍する

MySQLやPostgreSQLといったほかのデータベース、スクレイピングなどで取得したデータでもFMPXMLRESULT文法に加工することで、FileMakerの「XMLデータソース」としてインポートできるようになる。この図ではPHPを使用しているが、自分の使いたい言語でOK

Webビューア

FileMaker Pro 8.5から利用できるようになったWebビューアは、WebブラウザをFileMaker Proにそのまま埋め込んだような機能だ。特定のURIリクエストを投げ、Webブラウザのレンダリング結果をFileMakerレイアウト内に表示する。これを利用して

特定の外部WebアプリケーションにFileMaker内のデータをGET形式で渡す
外部Webアプリケーションで特定の計算や描画をおこない、結果をFileMakerで受け取り表示する

といった連携が可能となる。FileMaker Pro 11にてグラフ描画機能が実装される前までは、Webビューア+JavaScriptライブラリまたはGoogle Chartとの連携でグラフ描画を実現できていた。

この2つの機能に次の関数などを組み合わせて用いることで、より効率よく、シームレスに動作するFileMakerアプリケーションが開発できる。

関数/機能名	説明	利用できるバージョン
GetValue	改行で区切られているテキストから特定の値を抜きだす。複数のデータをやりとりする際に	FileMaker Pro 8以降
GetLayoutObjectAttribute	レイアウトに配置したオブジェクトのさまざまな情報を取得する。外部アプリケーションと連携する場合、GetLayoutObjectAttribute( "(Webビューアに設定したオブジェクト名)" , "content")でHTMLソースを取得できる	FileMaker Pro 8.5以降
GetAsURLEncoded	文字列をURLエンコードする。XMLデータソースのインポートやWebビューアで使用するURIに特定の記号やマルチバイト文字を含めた場合、意図しない動作をする場合があるので、この関数を使用すること	FileMaker Pro 8.5以降
スクリプトトリガ	フィールドからフォーカスが外れた、値が変更されたなどのタイミングで特定のスクリプトを実行する。スクリプトトリガ登場前まではボタンなどにスクリプトを設定し、かならず1アクションをおこなう必要があった。スクリプトトリガを活用することで、シームレスに外部Webアプリとの連携をおこなうことが可能になる	FileMaker Pro 10以降

Hello, Webビューア! - Webビューアでおこなう外部アプリ連携

FileMakerに格納している情報をもとに、外部アプリケーションの情報を表示したい場合は、Webビューアにサイトのアドレスとフィールド名を指定する。顧客マスタ画面で会社の地図をGoogle Mapsで表示したい場合は、次の内容をWebビューアのアドレス欄に指定する。

"http://local.google.co.jp/maps?" & "q=" & (住所情報を格納するフィールド名) & " " & (検索したいキーワードを格納するフィールド名)

Webビューアの設定例。組み込みでGoogle Maps以外にもいくつか外部Webアプリ連携用のサイトが登録されている

会社名と住所を使用してGoogle Mapsで周辺の地図を表示する。レコードが移動、関係するフィールド内容が変更されるたびにWebビューアの内容は更新される

外部アプリケーションの情報を取得したい場合は、Webビューア・GetLayoutObjectAttribute・スクリプトトリガを活用する。ここでは例として、FileMakerで郵便番号を入力した場合に外部アプリケーションから住所を取得するサンプルを作成してみよう。使用したWebサービスはzip.cgis.bizによる郵便番号検索API。

Webビューアで使用するアドレスは次のとおり。

"http://zip.cgis.biz/csv/zip.php?zn=" & (郵便番号を格納するフィールド名)

これで郵便番号が入力された場合、CSVがWebビューアに表示されるようになる。スクリプトでWebビューアの内容を取得できるよう、オブジェクト名に名前をつけておく。ここでは「web_viewer」とした。


Webビューアの設定例。進行状況バーの表示やステータスメッセージの表示は不要なのでチェックを外す	オブジェクト名は自分でわかりやすい名称をつけておけばOK。ここでは「web_viewer」とした

次にスクリプトを2つ用意する。

A. 郵便番号フィールドからフォーカスが外れた場合に、ウェイトを置いてBを実行するスクリプト
B. Webビューアのソースから住所情報を取り出すスクリプト

それぞれのスクリプト内容は次のとおり。

Aのスクリプト「ウェイト」。1秒のウェイトをおいたあと、Bのスクリプトを実行する

Bのスクリプト「郵便番号から住所を取得」。Webビューアの内容からCSVを取得。1行目の内容でエラー判定をおこなったあと、2行目の住所情報をフィールドに設定する

Aスクリプト「ウェイト」

# Webビューアで表示が完了するまでのウェイト
スクリプト一時停止/続行 [ 間隔（秒）: 1 ]
スクリプト実行 [ 「郵便番号から住所を取得」 ]

Bスクリプト「郵便番号から住所を取得」

フィールド設定 [ 顧客マスタ::住所; "" ]
# Webビューアの結果より、1行目と2行目を変数に格納
変数を設定 [ $lines; 値:Substitute ( GetValue ( GetLayoutObjectAttribute ( "web_viewer" ; "content" ) ; 1) ; [ "," ; "¶" ] ; [ "\"" ; "" ] ) ]
変数を設定 [ $lines[2]; 値:Substitute ( GetValue ( GetLayoutObjectAttribute ( "web_viewer" ; "content" ) ; 2) ; [ "," ; "¶" ] ; [ "\"" ; "" ] ) ]
# 1行目の6列目を使用してエラー判定
If [ 1 = GetValue ( $lines[1] ; 6 ) ]
# 正常処理 - 2行目の5,6,7列目を住所にフィールド設定
フィールド設定 [ 顧客マスタ::住所; GetValue ( $lines[2] ; 5 ) & GetValue ( $lines[2] ; 6 ) & GetValue ( $lines[2] ; 7 ) ]
Else
# エラー処理
フィールド設定 [ 顧客マスタ::住所; "エラー: " & GetValue ( $lines[1] ; 7 ) & " / " & GetValue ( $lines[1] ; 8 ) ]
End If

スクリプトトリガで郵便番号フィールドに対して、OnObjectExitイベント時にAのスクリプトが実行されるようにする。ウェイトをおくことで、Webビューアのロード完了時にBのスクリプトを実行。郵便番号から住所を取得する。

スクリプトトリガで郵便番号フィールドに対して、OnObjectExitイベント時にAスクリプト「ウェイト」が実行されるように

「郵便番号から住所を取得」スクリプトの処理内容は次のとおり。

3~4行目の変数設定

GetValue ( GetLayoutObjectAttribute ( "web_viewer" ; "content" ) ; 1 )でCSVの1行目を取得。Substitueであらかじめカンマを改行文字に、ダブルクォーテーションを削除しておく。こうしておくことで、GetValue ( $lines[1] ; (列番号) )で取得したい情報が取り出せるようになる。2行目も同様。

6行目のIf文

エラー判定をおこなっている。郵便番号検索APIでは1行目の6列目に結果コードが返るようになっている。1の場合は正常、0の場合はエラーとみなす。

8行目のフィールド設定

GetValue ( $lines[2] ; 5 )でCSV2行目の5列目(都道府県)を取得している。同様に6列目(市区町村)、7列目(住所)を取得し、フィールド設定で住所フィールドに貼り付ける。

11行目のフィールド設定

GetValue ( $lines[1] ; 7 )でCSV1行目の7列目(エラー番号)、8列目(エラー内容)を取得、フィールド設定で貼り付ける。

ブラウズモードで郵便番号フィールドに対して操作をおこなうと、郵便番号検索API経由での住所情報を取得、結果をFileMakerに格納する。

郵便番号を入力すると郵便番号検索API経由で住所を取得、フィールドに格納する

不正な郵便番号の場合はエラー内容を格納する

個々の機能を組み合わせるだけで、簡単に外部Webアプリケーションとの連携が可能になるFileMaker。外部DBやWebアプリケーションと連携するAPIを自作すれば、より活用の幅が広がること間違いなしだ。FileMakerとWebアプリケーションを連携し、よりリッチなUIを備えるアプリケーションを開発してみよう。

■「ファイルメーカー選手権2010」　11/23までテンプレート受付中!

ファイルメーカー社のデータベースソフト「FileMaker Pro」で作成したテンプレートから、優れた作品を決めるコンテストです。6つのジャンル(ビジネス、ホーム、エンターテイメント、教育、医療、その他)において、ユニークでアイデアあふれるテンプレートを募集します。FileMaker Proをお持ちでない方は、FileMaker Pro公式サイトから無料評価版をダウンロードしてご使用いただけます。

各賞の受賞者にはMacBook ProやVAIOなど豪華賞品を授与します。審査員による選考のほか、読者投票による「読者賞」や学生向けの「学生賞」なども実施。学生の応募者は、1度の応募で2回受賞するチャンスです。投稿された作品は誰でもダウンロードして使用できます。

ファイルメーカー選手権2010　コンテストページにて、本ページを執筆している西村俊一氏のブログ「Factory a go-go!」をご覧いただけます。コンテスト期間中に、FileMaker関連の情報やニュース、本連載の告知などの記事を続々と掲載する予定です。お楽しみに!