FileMaker 19プラットフォームのJavaScript統合

FileMaker 19のリリースによって、FileMakerとJavaScriptの統合がさらに簡単になりました。今回はJavaScript関連の新機能を解説した、Soliant ConsultingのWim Decorteさんのブログ記事を紹介します。


JavaScript Integration in the FileMaker 19 Platform

(元記事はこちら)

Wim Decorte
2020/5/20

FileMakerのカスタムAppでJavaScriptが使えるようになってからもうすでに何年も経ち、開発者コミュニティでは多くの優れたサンプルやデモファイル、技術情報が入手可能です。中でも特に注目に値するのは、我々Soliantが無償で公開しているCarafeフレームワーク (Carafe.FM)です。

FileMaker 19で新しく導入された2つのスクリプトステップと1つの関数によって、JavaScriptを使い始めるためのハードルが大きく下がり、これら3つの機能が以下の3つの大きな課題を解決します。

  • JavaScriptの関数(function)をどう呼び出すか?
  • FileMakerデータから、必要なデータをJavaScriptの関数にどう渡すか?
  • 結果の値をどうやって取得するか?

なぜJavaScriptを使うのか

もしすでにFileMakerカスタムAppでJavaScriptを使用しているのであれば、今行っている内容に新しい機能を組み込むのはとても簡単でしょう。今行っていることが、より簡単に実現できるようになるでしょう。あなたがもしまだJavaScriptを使っていないのであれば、なぜ使う必要があるのか疑問に思っているかも知れません。

ここ数年、多くのFileMaker開発者がJavaScriptの実力について言及し、それがFileMakerカスタムAppの設計方法を根本的に変えるということを実例を使って示してきました。

JavaScriptには、他のFileMaker関数やスクリプトよりも高速にデータを処理する計算能力があり、多くの繰り返しが含まれる場合は特にそうです。加えてJavaScriptは、ユーザインタフェイス用ウィジェット(部品)やデータ可視化で、他のFileMaker機能を補完してくれます。

我々Soliantの関連する最も古いブログ記事は、2014年のFileMaker 13v2が公開されたときに遡ります。その13v2のアップデートによって‘fmp’ URLを使ってスクリプトを起動できるようになりました。それ以降、JavaScriptでそれを使ってJavaScriptの結果をFileMakerに戻すことが簡単になりました。

FileMaker 16のリリースによって、JavaScriptの統合がまた少し簡単になりました。これはJSONオブジェクトと配列を簡単に構築できるようになったからで、多くの便利なJavaScriptライブラリが入力として求めているものでした。我々は2016年にJavaScript統合ライブラリの開発に着手し、それは最終的にCarafe.FMバンドルとして結実しました。

JavaScriptの実力は今まで何度も実証され、我々はその熱烈な支持者です。そして今JavaScriptはさらに簡単になります。

その仕組みは?

中核となる新機能は、以前とほぼ同じように機能します。Webビューアを使って、JavaScriptコードを含むHTMLドキュメントを保持します。JavaScriptの計算能力を活用することだけが目的であれば、HTMLは実際には何も表示する必要はありません。図1は、右側のWebビューアのソースとして機能する、もっとも基本的なHTMLを示しています。ご覧のとおり、何も表示するつもりがないので、Webビューアは空白です。ここではreceiveJSON(input)というJavaScript関数のための単なる入れ物として使っているだけです。

図1. Webビューア(右)とそのソースコード(左)

19よりも前のバージョンでは、FileMakerデータを集約してJavaScriptが理解できる形式にする方法(配列、JSON、カンマ区切りテキストを変換してHTMLソーステキストに埋め込む)を、工夫して自分で考える必要がありました。その上でJavaScript関数を実行する方法(通常はWebビューアを設定し、読み込むページがJavaScriptを起動して実行する)が必要です。それが完了したら、fmp URLの仕組みでHTMLがFileMakerにコールバックされます。
上で紹介した過去のブログ記事では、この仕組みを使っていました。

fmp URLの仕組みを使った方法の大きな欠点の一つは、WebDirectでは正しく機能しないことです。つまり、新規のWebDirectセッションを起動する新しいタブが開いてしまいます。また、URLの文字数の上限があり、FileMakerにスクリプト引数として渡すデータ量が制限されます。さらに複雑なことに、URLの文字数の上限はOSによって、数千から8万文字と異なります。

19のリリースによって、新しいJavaScript関数FileMaker.PerformScript()が使えるようになりました。この新しいJavaScript関数はfmp URLよりもはるかに使い勝手がよく、それは特にWebDirectで使う時に顕著ですが、全般的にもクロスプラットフォームになり、OSが違っても同じ動作をするようになりました。加えて大量の結果を戻せるようになりました。実験してみましたが、1億文字の結果を生成できたところであきらめました。

このJavaScript関数は非同期で実行されることに注意してください。FileMakerスクリプトの完了を待たないので、FileMakerスクリプトから結果を受け取ることはできません。

また、FileMaker 16以降、fmp URLの仕組みを使うためにユーザのアクセス権セットで拡張アクセス権のfmurlscriptを許可する必要がありましたが、19ではすべてがFileMakerの中で完結するので不要になりました。これにより一般的にはシステムのセキュリティが向上します。

以下に従来の方法と新しい方法を並べて比較しています。使用した例は、文字列を逆に並べ替える単純なJavaScriptです。“muffins”を“sniffum”に変換します。

FileMaker 13から18まで

Webビューア (オブジェクト名 ‘wv’) には、事前に計算されたHTML構文が設定されます。

クリックして拡大

6行目と9行目では、上で説明したURLの文字数制限の不一致によるmacOSとWindowsの挙動の違いに応じてHTMLおよびJavaScript構文を設定しています。

並びを逆にする文字列は、このテキストブロックの一部になり、Webビューアのソースとして設定されます。

11行目でWebビューアが設定されます。これによってHTMLがロードされてJavaScriptが実行されます。

HTMLとJavaScriptは次のようになります。

クリックして拡大

赤字の行でJavaScriptが実行されます。

緑色の行では、スクリプトを実行しJavaScriptの結果をFileMakerスクリプトに引数として渡すfmp URLにリダイレクトするように、HTMLページが設定されます。

FileMaker 19

ここでは、HTMLコードとJavaScriptコードがすでに存在し、Webビューアがすでにロードされています。しかしこれだけでは、以前のようにJavaScriptを実行しません。

JavaScriptは新しいスクリプトステップ WebビューアでJavaScriptを実行 で、JavaScript関数の名前と必要な引数(並びを逆にする文字列)を指定して実行します。

クリックして拡大

HTMLとJavaScriptコードは格段にシンプルになり、新しいJavaScript関数 FileMaker.PerfromScript() を使用してFileMakerスクリプトを呼び出してその結果を得ることができます。

macOS、Windows、iOS、WebDirectで挙動に違いはありません。

クリックして拡大

Webビューアの役割は、もはや複数のJavaScript関数を保持する静的なライブラリであり、呼び出されるのを受け身に待っているだけとなります。Webビューアをアクティブにするためにいちいちロードする必要はありません。代わりに新しいスクリプトステップで名前で呼び出します。

WebビューアでJavaScriptを実行 スクリプトステップは、サーバ実行には対応していないので、[サーバ上のスクリプト実行]、サーバでのスケジュール実行、Data API、XML、PHP APIでは使えないことに注意してください。

この新しいスクリプトステップとJavaScript関数が、今回簡素化されたJavaScript統合の中核となります。これにより、JavaScriptの実装がはるかに簡単になり、オペレーティングシステムやさまざまなFileMakerクライアントプラットフォーム間での一貫性が大幅に向上します。

上の例は、JavaScriptの純粋な計算能力を利用することに関するものです。JavaScriptのその他の大きなユースケースとして、ユーザインタフェースとデータ可視化があります。我々Soliantが提供するオープンソースツールキットCarafe.FMで多くのサンプルを見つけることができるでしょう。カレンダー、柔軟なテーブルビュー、地図、ナビゲーション部品、高機能なドリルダウンチャートなど、多岐に渡ります。







これらのUIウィジェットとデータ可視化ツールを使用する際の課題の1つは、多くの場合、ベースとしているJavaScriptライブラリに渡すために大量のFileMakerデータを取得する必要があることです。この作業は19の新しいスクリプトステップ FileMaker Data APIを実行 で簡単になりました。このステップを使ってクエリを作成し、結果のFileMakerデータをJSON形式で取得できます。
このステップについて重要な点として、その名前にもかかわらず、このスクリプトステップはFileMaker Server Data APIのRESTサービスを呼び出しません。このステップの名前が少し残念なのは、Data APIという表現がサーバ機能のREST APIに強く関連付けられている点です。確かに内部的には同じData APIエンジンを使っていて、同じクエリ構文を使い、同じ形式のJSONを返します。

この新しいスクリプトは、以下の点でexecuteSQL()関数に似ていると言えます。

  • ユーザの現在のコンテキストに関係なく、ソリューションの任意の場所からデータを取得できる
  • データを作成・編集することはできない (将来のリリースで変更される可能性あり)
  • スクリプトを実行することはできない (将来のリリースで変更される可能性あり)

ただし、指定したレイアウトに基づいてデータが返されるという点が異なります。ターゲットレイアウトにあるポータルを含むすべてのフィールドが返されます。

クエリ構文はData APIヘルプに説明があります。JSONオブジェクトのもっともシンプルな形式で、使用するレイアウトと返されるレコード数のみを指定します。もちろん、複数の検索条件や、対象レコードで開始レコード (オフセット)やレコード数 (制限)、ソート順を指定するなど、クエリをより複雑にすることも可能です。オプションの指定方法についてはData API ヘルプで参照できますが、例えばスクリプトの実行には今回のリリースでは対応していないので注意が必要です。

図2. クエリの例

 

図3. 結果のJSON

このスクリプトステップが役立つのは、データをJavaScript関数に直接渡すときです。JavaScriptはJSONの解析が非常に高速であるため、Webビューアに送信する前にFileMakerデータをJSONに変換するのに時間はかかりません。もはやWebビューアのHTMLソースにデータを置き換える必要はありません。WebビューアでJavaScriptを実行スクリプトステップで呼び出すJavaScript関数に、引数としてこのJSONを直接渡すことができます。

図4. JavaScript関数を呼び出して引数を渡す

ここでも、大量のJSONデータでテストしましたが、JavaScript関数に渡すことができるデータ量の制限には行き当たりませんでした。

もちろん、新しいスクリプトは多くの他の目的にも使用できます。たとえば、純粋にFileMaker内部で処理するために、データを自身の外部APIに送信するなどです。このスクリプトステップは、すべてのクライアント、WebDirect、サーバ実行、Data APIで完全にサポートされています。

最後に

FileMakerカスタムAppでJavaScriptを使うことがまた一段と簡単になりました。私たちは、この分野でコミュニティから何が出てくるかを楽しみにしています。Carafe.FMの今後の更新リリースからも目を離さないでください。

Leave a Reply