WebビューアとJavaScriptの連携方法【基本編】

2025年5月13日｜カテゴリ：開発Tips

はじめに

FileMakerのWebビューア機能を使えば、HTMLやJavaScriptといったWeb技術を活用し、標準のレイアウトでは実現できないような柔軟なUIやインタラクションを実装することができます。この記事では、JavaScriptとFileMakerをつなぐ基本的な仕組みと連携方法について、初めての方でもわかるように解説します。

Webビューアとは？

Webビューアは、FileMakerのレイアウト上にWebページ（HTML/CSS/JS）を表示するためのオブジェクトです。ローカルHTMLを埋め込むことも、外部Webサイトを表示することもできます。

最近では、グラフ、カレンダー、マップ、エディタなど、Web技術で作られたUI部品をFileMakerに組み込む用途で使われることが増えています。

JavaScriptとの連携でできること

• FileMakerのスクリプトをWebビューアから実行
• FileMaker側からJavaScript関数を呼び出す
• Webフォームを使った複雑な入力UIの実装
• データの双方向通信（値の受け渡し）

FileMaker.PerformScriptWithOption の基本

JavaScriptからFileMakerのスクリプトを実行するには、以下の構文を使用します：

FileMaker.PerformScriptWithOption("スクリプト名", "引数", 0);

• 第1引数：FileMakerで定義されたスクリプト名
• 第2引数：FileMakerに渡したい値（文字列）
• 第3引数：オプション（0: 即時実行、1: 後で実行 など）

✅ 例：HTMLボタンをクリックしてスクリプト起動

<button onclick="FileMaker.PerformScriptWithOption('JSからの通知', 'クリックされました', 0)">
  FileMakerに送る
</button>

スクリプト側の受け取り

FileMaker側のスクリプトでは、Get(ScriptParameter) 関数を使って、JavaScriptから渡された値を受け取ることができます。

注意点・セキュリティ対策

• WebビューアはFileMaker Pro上でのみスクリプト呼び出しが可能（WebDirectでは非対応）
• JavaScript内の関数名や変数名の名前衝突に注意
• 入力値はバリデーションやエスケープ処理を忘れずに

まとめ

FileMakerのWebビューアとJavaScriptの連携は、UIの自由度を飛躍的に高めると同時に、ユーザー体験を向上させる手段です。まずは、PerformScriptWithOption を使ったシンプルな連携から試してみましょう。

次回は、JavaScriptから複数値をJSONで渡す方法や、FileMakerからJavaScriptへの値渡しについても解説します。

← ブログ一覧に戻る