FileMakerとJavascript：AJAX POST |

今回は、前回のSoliant ConsultingのMike DuncanさんによるJavascriptに関する記事の補足として、AJAX技術を利用する方法についての記事を紹介します。

FileMakerとJavascript：AJAX POST
( FileMaker and Javascript: AJAX POST )

Mike Duncan
2014/11/17

前回の記事「Getting Started with Javascript and FileMaker ( JavascriptとFileMaker入門 )」の補足として、今回は、FileMakerの機能を拡張する、AJAX技術を利用してPOSTメソッドでURLへの送信を実現する方法を見ていきます。

POSTとは？

POSTはWebサーバに情報を送信するHTTPメソッドの1つです。HTTPメソッドはいくつかありますが、GETとPOSTがもっともよく使われます。これらはHTMLフォームの中でform要素の属性として指定されます。

2つのメソッドの主な違いは、GETがすべてのデータをURLに含んで送信するのに対し、POSTはデータをメッセージボディの中に入れます。POSTを使えば、URIの文字数制限に関係なく、多量のデータを送信することができます。

AJAXとは？

AJAXはAsynchronous Javascript and XML(非同期なJavascriptとXML)の略です。名前に反してXMLの使用は必須ではありません。90年代のある時期に、マイクロソフトがXMLHttpRequest (XHR)という技術のサポートを開始しました。これはJavascriptがWebページの全体をリロードすることなく情報を要求したり返したりするために使用するオブジェクトです。

我々の目的のためには、非同期という点は重要です。Webプログラムからデータを取得する他の方法に対して、この方法ではスクリプトがバックグラウンドで動作している間に他の操作を続けることができます。

そもそもなぜこれを行うのか？

FileMaker 13では、「URLから挿入」スクリプトステップで(httppostを介して)このリクエストメソッドの使用が部分的にサポートされました。「部分的に」と言った理由は、リクエストの中でhttpヘッダやその他の属性の設定については制御できないからです。一部のサードパーティのWebサービスでは、特定のヘッダ情報を設定しなくてはいけないものもあります。

リクエスト処理にJavascriptを使用することによって、一般的によく用いられるキー/値のペアをテキストとして送信する方法ではなく、JSONやXMLなどのフォーマットで内容を送信するのと同時にHTTPヘッダの設定を制御することができます。

さらに、この方法はプラグインを使用しないのでFileMaker Goでも動作します。WebDirectでも動作するかもしれませんが、FMP URLを介して情報を返すという方法はWebDirectでは動作しないため、同じような機能を実現するためにはカスタムWeb公開を使う方法があります。

サンプルファイルの仕組み

サンプルファイルでは、シンプルなJavascript(jQueryなどの外部ライブラリは使用していません)でリクエストを生成して、その結果をレスポンスとして返し、データベースにログを記録します。リクエストを実行するためのHTMLの値を入れ替えることによって、簡単に他のいろいろな目的のためにこのコードを再利用することができます。

RequestBin (http://requestb.in/)というWebサービスを使えば、サンプルファイルで使用するURLを作成して、HTTPリクエストがWebサーバにどう受け取られるかを調べることができます。まずはサンプルデータベースの「Form Action」フィールドにURLを入れてみてください。

サンプルには3つのレコードが入っていて、3種類のデータ送信を試すことができます。1つめは、馴染みのあるキー/値ペアのクエリ文字列で、コンテントタイプがtext/htmlに設定されています。他の2つは、JSONとXMLをPOSTリクエストの全体として、他のパラメータを付けずに送信します。これがリクエストの全体であると宣言するために、送信するデータの適切なコンテンツタイプとして、”application/json”か”text/xml”を選択します。

フィールドに設定した値はスクリプトでjavascriptに置き換えられ、WebビューアでHTMLを表示しJavascriptを実行します。表示されるべきHTMLは何も返されないので、これはレイアウトの見える部分よりも右側に隠したWebビューアで実行されます。大事なのはJavascriptがちゃんと仕事をして、結果をFileMakerに戻してくれることです。

スクリプトが必要なHTMLとJavaScriptを設定してWebビューアで実行し、返される結果を待ちます。AJAXコードがレスポンスを取得すると、現在のファイルを参照するFMP URLが呼び出され、スクリプトが起動されてレスポンスが渡され、それをフィールドに書き込みます。サーバの反応がない場合に備え、どれだけレスポンスを待ち続けるかを「OnTimerスクリプトをインストール」で設定します。

サンプルファイルでは最初のOnTimerスクリプトを3秒後に設定し、レスポンスがない場合、スクリプトがポップオーバーを開いてユーザが待っている間に値を変えるのを防ぎ、さらに別のOnTimerスクリプトをインストールして27秒後(結果として30秒後)に実行するようにしています。

30秒たってもWebサーバからレスポンスがない場合、ポップオーバーを閉じてレスポンスがなかったことをログに記録し、OnTimerスクリプトをアンインストールします。レスポンスを取得した場合は、レスポンスをログに記録して、同じくOnTimerスクリプトをアンインストールします。

PUTメソッドとDELETEメソッド

情報を送信する場合のメソッドとしてはGETとPOSTの他に、いくつかのメソッドがサポートされていて、Webサービスによってはそれらを使わなくてはいけない場合もあります。そのうちPUTとDELETEは、RESTful Webサービスでリソースの状態を更新したり変更するのに使われ、それぞれリソースの更新や削除を行います。

これらはPOSTと同じ役目を果たし、データがリクエストの本体に入れられて送られます。違いはリクエストがサーバ側でどう受け取られるかで、それによって違う方式でサーバサイドスクリプトを呼び出すことになります。

POSTまたはGETを使用した他の例と同じように、すべてが期待通りに動作するかテストをしたほうがいいでしょう。このサンプルは、JavaScriptを活用してデスクトップやモバイルアプリケーションの機能を拡張するための出発点として示しました。

以下のGitHubページからサンプルファイルを取得できます：

https://github.com/SoliantMike/FM-AJAXPOST

(右カラム下方の”Download Zip”のリンクをクリックしてください。)

補足…CORSについて

AJAXはクライアントのブラウザで実行されるJavascriptであるため、クロスサイトスクリプティングの懸念があります。これは、あるページ上のスクリプトが違うドメインにアクセスして、そのページ上のコードを実行する問題に関連します。

Cross-Origin Resource Sharing (CORS)は、ドメインをまたいだスクリプトの通信を許可するW3Cの仕様です。CORSはすべての最新の(modern)ブラウザでサポートされており、FileMakerのWebビューアでもサポートされています。Webサービスを提供するサイトにはAJAXによる呼び出しをサポートするものもあれば、しないものもあります。

もしあなたのPHPスクリプトでCORSを有効にしたいのであれば、以下のコードを最初の部分に追加します。

// enable cors
// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
  header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Max-Age: 86400'); // cache for 1 day
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

  if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
  if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
    header("Access-Control-Allow-Headers: 
{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
}

あとは、いつものように、 テスト、テスト、テスト 。

参考情報

AJAX: http://en.wikipedia.org/wiki/Ajax_(programming)
GET vs. POST: http://www.w3schools.com/tags/ref_httpmethods.asp
FileMaker 13: Getting Started with Javascript: http://www.soliantconsulting.com/blog/2014/04/getting-started-javascript-and-filemaker

FileMakerとJavascript：AJAX POST ( FileMaker and Javascript: AJAX POST )