JavascriptとFileMaker入門

FileMakerのWebビューアでJavaScriptを利用する方法については、以前SeedCodeのJason Youngさんの記事紹介しましたが、今回は同じテーマでSoliant ConsultingのMike Duncanさんの記事を紹介します。


soliant consulting

JavascriptとFileMaker入門
( Getting Started with Javascript and FileMaker )

Mike Duncan
2014/4/13

FileMaker Inc.がFileMaker Pro 13のアップデートを公開しました (詳細はこのリリースノートを参照してください)。FileMaker ProとFileMaker Pro Advancedの改善点リストの中の一つが、FMP URLプロトコルの機能の拡張で、WebビューアからFileMakerスクリプトを呼び出して実行できるようになりました。

これは大事件です

Webビューアとのやりとりがこれで双方向になりました。FileMakerからWebビューアを設定し、Webビューア内で起こった結果からデータを戻せるようになったのです。

今まではこの機能はFileMaker GoかあるいはFileMaker ProをFileMaker Serverでホストしている場合にのみ利用することができました。この制約がなくなることにより、開発者にとってはソリューションを拡張・改良するための大きな可能性が広がります。

この記事では、Webビューアとデータをやりとりできるということがなぜ大事件なのかということを説明します。

課題:Webビューアからデータを取得する

今までも、WebビューアでJavascriptを利用して凝った部品を作って、画面上でFileMakerのインターフェース部品と並べることはできました。問題は、Webビューアの中で行うことはそのWebビューアの中に隔離されたままで、FileMakerがそれを知る術はありませんでした。

従来はWebビューアから情報を取得してFileMaker側に返す機能は、開発時の制限要因でした。しかし、この機能がついにすべての環境で全面的に利用できるようになったことで、そのしくみを理解してソリューションの中でどのように使うかをしっかり学ぶ価値がでてきました。

Hello Worldのサンプル

まずは、ダイアログに「Hello World」というメッセージを表示するシンプルなスクリプトから始めます。新規ファイルでも既存のファイルでも構いません。メニューのスクリプト->スクリプトの管理…でScriptMakerを開きます。

新規スクリプトを作成し、名称を「Hello」にします。 スクリプトステップ「カスタムダイアログを表示する」を追加し、タイトルを「Hello」、メッセージを「Hello World」に設定します。キャンセルボタンを削除し、「OK」をクリックしてスクリプトを保存します。

ここでレイアウト上にWebビューアを配置します。表示するのはクリックするリンクだけです。WebビューアのWebアドレスを次のように設定します。

"data:text/html,<html><body><a href=\"fmp://$/" & Get ( FileName ) & "?script=Hello\">" & "Hello World" & "</a></body></html>"

これは、Webビューア内に表示するHTMLをすべて記述するデータURLという方式です。

Webビューアの設定画面で「OK」をクリックして保存し、レイアウトを保存してブラウズモードで動作を確認します。Webビューアに表示される文字をクリックしてみてください。ダイアログに先ほど設定したメッセージが表示されます。

ここで起こっていることを一つずつ見ていきましょう。クリックされたURLはfmpプロトコルを使用しています。FileMakerをインストールした時に、OSにこのプロトコルが登録されて、「fmp://」で始まるURLが起動された時にはその処理をFileMakerに渡すようになっています。

URLの次の部分はドル記号($)で、アプリケーションが今開いているファイルを参照します。ここでこれを使っている理由は、Webビューアが属する、現在開いているファイルからスクリプトを実行しているからで、ファイル名はFileMakerのGet ( ファイル名 )関数で取得できます。これによって、自分が現在属している今開いているファイルを常に参照します。

URLの残りの部分 (?script=Hello) はFileMakerに対してどのスクリプトを実行するかを指示しています。またURLにparamの値を持ってスクリプト引数を渡すことも可能です。

そのリンクをクリックすると、FileMakerを起動して今開いているファイルに対して「Hello」というスクリプトを実行するよう指示していることになります。リンクをクリックした時にはそのファイルの中にいることになるので、そのファイルが開いているということがわかっています。

他に何ができるか?スクリプト引数を追加する…

一つの例としては、Webビューアに表示されたHTMLフォームに入力されたデータを集めることができます。これは単なる一例で、これを読んだ方が自分のソリューションで何が可能になるか想像力を働かせてもらうためのきっかけとして紹介します。

FileMakerでは、カスタムダイアログを使わない限りは、ネイティブな方法でパスワード入力時のように入力を伏せ字にするフィールドを持つことはできません。パスワード入力用のフィールドをレイアウト上に作りたい場合、スクリプトトリガを使うなど方法は限られます。

この例では、Webビューアを使ってHTMLフォームにパスワードタイプのフィールドを表示しています。HTMLはパスワードタイプのフィールドをネイティブでサポートしていて、フォームが送信されるとそのフィールドの値をFileMakerのスクリプトに引数として渡します。

スクリプトを作成して名称を「Password」として、“You entered the Password: “ & Get ( スクリプト引数 )というメッセージを表示するように定義します。

スクリプトを保存して、Webビューアを作成して次のWebアドレスを設定します。

"data:text/html," & "<html><body style=\"margin:4px; border:0; font: 10pt normal arial, sans-serif;\">

Password:<br />
<form onsubmit=\"return submitForm()\">
<input id=\"pass\" type=\"password\" /><br />
<input type=\"submit\" value=\"OK\" />
</form>

<script>
function submitForm() {
theParam = document.getElementById(\"pass\").value;
theURL = \"fmp://$/" & Get ( FileName ) & "\?script=Password&param=\" + theParam;
window.location = theURL ;
document.getElementById(\"pass\").value = \"\";
return false;
} </script>

</body></html>"

HTML中のダブルクオート(“)の前にはバックスラッシュ(\ [日本語環境では¥])を入れます。そうすることによってFileMakerがエラーを出さずにHTMLを表示できます。

HTMLとJavascriptに馴染みがある方であれば、このコードが送信時にJavascriptが実行されるシンプルなフォームであることがわかるでしょう。Javascriptが入力フィールドをIDで参照してその値を取得します。

そしてURLを組み立ててFileMakerファイルに返し、先ほど作成したスクリプトを呼び出して、フォームに入力した値をスクリプト引数として渡します。

これを保存してブラウズモードにします。パスワードフィールドに何かテキストを入力すると、自動的にドットで置き換えられます。リターンキーを押すかOKボタンを押すと、FileMakerスクリプトが実行され入力した内容が表示されます。

もちろん通常はパスワードを誰かに見せるということはしません。引数を渡すしくみを示すのが今回の目的です。

次はちょっと楽しいもの

次は少し楽しいことをしてみましょう。Javascriptでできることはここで紹介する例にとどまらず、ネット上には優れたライブラリや情報が無限にあります。jQueryは私のお気に入りで、簡単に利用する事が可能です。

私が見つけたのは、カラーピッカーです。ここ(http://bgrins.github.io/spectrum/)から参照でき、無料で利用できます。さてFileMakerのレイアウト上にカラーピッカーを作ってフィールド色を自由に選んだ色に設定したいという場合、どうすればいいでしょうか?

この例では、いくつかのフィールドを作って、HTMLとJavascriptを入力しやすいようにしました。つまり、FileMakerがコードを計算の一部として評価するのではなく、フィールドからテキストを挿入するため、すべての引用符の前にバックスラッシュを入れなくてもよくしました。

全体を2つの部品に分け、FileMakerが現在のファイルのファイル名を評価する部分を間に入れて、最終的に全部を組み合わせてできあがったHTMLをWebビューアに表示しています。

"data:text/html," & resources::html1 & "fmp://$/" & Get ( FileName ) & "?script=SetRGB&param=\" + getRGB + \"" & resources::html2

このしくみを機能させるリソースとして、外部参照によってjQuery、カラーピッカーのJavascript、CSSを読み込みます。この方法ではFileMaker内に作り込む手間は軽減されますが、時間をかけられるのであれば、ローカルに持たせることも可能です。このサンプルをインターネット接続なしで動作させたい場合はそのように作る必要がありますが、このサンプルではWebページを表示するのと同じ要領で動的に読み込んでいます。

このサンプルでは、ユーザが色を選択した時に実行されるjQueryのコールバック関数にFMP URLを追加しました。これによって選択されたRGBパラメータが渡され、FileMakerのフィールドに保存されます。対応するjavascript(実行時にFileMakerによってjQueryのコールバック関数に設定される)は次のようになります。

change: function() {
var getRGB = $("#full").spectrum("get");
window.location = "fmp://$/Javascript_Example?script=SetRGB&param=" + getRGB + "";
},

次にFileMakerの世界に戻り、フィールドに入っているデータを対象に処理を続けることができます。色を変えたいフィールドの自動入力の計算式で、Webビューアから取得したRGB値を解析します。自動入力の計算式を次のように設定します。

Let ([
myField = Self;
values = Substitute ( RGB ; ["rgb("; ""] ; [")"; ""] ; [","; "¶"] );
red = GetValue ( values ; 1 );
green = GetValue ( values ; 2 );
blue = GetValue ( values ; 3 );
end = "" ] ;
Case (
IsEmpty (RGB); TextColorRemove ( myField ) ;
TextColor ( myField ; RGB ( red ; green ; blue ) )
)
)

ここで「フィールドに既存の値が存在する場合は置き換えない」のチェックボックスのチェックを外して、新しい値が設定されるたびに更新されるようにします。カラーピッカーから新しい値を選択すると、Javascriptから引数を渡すスクリプトを介してFileMakerのフィールドに値が設定されます。FileMakerのフィールドに値が保存されると、自動入力フィールドが選択した色に更新されます。すばらしい!

本記事で紹介した内容は、以下のサンプルファイルで確認することができます。 できるだけシンプルな構造にして理解しやすいよう考慮しました。これらのサンプルで、画面をもっと整理することもできたと思いますが、中身をいろいろいじってもらうためにあえてそのままにしました。

Javascript_Example.zip

Webビューアを使用する際には、次の点にも注意してください:

  1. コンテキストは現在のレコードです。今自分がいるレコードごとにWebビューアが読み込まれます。
  2. FileMaker Goでは、一つのレイアウトに置けるWebビューアの数には制限があります。
  3. (主に開発者向け)FileMakerのバージョンは1つに統一する方がいいでしょう。

もちろんここでは、できることのほんの一部を紹介しただけです。JavascriptをFileMakerの開発時のツールに加えることができれば強力な武器になります。ぜひこのタイミングを逃さないようにしましょう!

リファレンス

  1. W3 Schools Javascript Tutorial http://www.w3schools.com/js/default.asp
  2. jQuery http://jquery.com/

Leave a Reply