Web ビューアで JavaScript を使用したスクリプト作成

JavaScript を使用して、たとえば独自のユーザインターフェースコントロールの作成などの操作を Web ビューア内で実行することができます。またはサードパーティの JavaScript ライブラリを使用して、インタラクティブなカレンダーを表示したりグラフを描画することもできます。さらに Web ビューア内の JavaScript と FileMaker のスクリプトを使用して相互を呼び出して情報を渡すこともできます。たとえばユーザが Web ビューアのインタラクティブなカレンダーでイベントを作成した場合、JavaScript から FileMaker スクリプトを呼び出して各イベントのレコードを作成できます。

Web ビューア内の JavaScript から FileMaker のスクリプトへ

Web ビューアで Web ページのロードが終了した後、JavaScript で次のいずれかの関数を呼び出して現在のファイルで FileMaker スクリプトを実行することができます:

コピー 
FileMaker.PerformScriptWithOption (スクリプト, 引数, オプション);

// 動作は上記オプションが「0」の場合と同じです。
FileMaker.PerformScript (スクリプト, 引数);

各要素の意味

たとえば、FileMaker スクリプトを呼び出す JavaScript 関数は次のようになります:

コピー 
function performFileMakerScript() {
    FileMaker.PerformScriptWithOption ("FileMaker スクリプト名", "オプション引数", "3");
}

FileMaker.PerformScriptWithOption() 関数の動作は非同期的で、FileMaker スクリプトの完了を待ちません。したがって、FileMaker スクリプトは呼び出し元の FileMaker.PerformScriptWithOption() 関数に値を返しません。

FileMaker.PerformScriptWithOption() 関数が実行されるとき、FileMaker スクリプトは現在のコンテキストで実行されます。したがって、JavaScript の実行が始まった後、FileMaker.PerformScriptWithOption() 関数が呼び出される前にコンテキストが変化した場合、FileMaker スクリプトは新しいコンテキストで実行されます。たとえば、状況によっては、ユーザまたはスクリプトによって途中で異なるレイアウトやレコードに移動する可能性があります。これに対処するには、FileMaker.PerformScriptWithOption() 関数でオプションの引数を使用して、レイアウトとレコード ID、または FileMaker スクリプトが実行されるレコードの主キーなどのコンテキスト情報を渡すことができます。

FileMaker スクリプトから Web ビューア内の JavaScript へ

FileMaker スクリプトの [Web ビューアで JavaScript を実行] スクリプトステップで、JavaScript 関数を呼び出してオプションの引数を渡すことができます。[Web ビューアで JavaScript を実行] スクリプトステップを参照してください。

例

ここに示す例では、Web ビューア内に単純なユーザインターフェース要素を作成し、それらの値を FileMaker テーブルに格納された値に設定し、Web ビューアで値を変更することをユーザに許可し、新しい値を元の FileMaker テーブルに送り返します。

  1. 次のテキストフィールドを使用して「Web フォーム」という名前のテーブルを作成します:

    • Web ビューアソース (グローバル格納を使用)

    • 名前

    • 評価

    • 色

    データベーステーブルの定義およびフィールドの定義と変更を参照してください。

  2. 「Web フォーム」に基づくレイアウトで、次の設定を使用して Web ビューアを追加します:

    • Web アドレス「Web フォーム::Web ビューアソース」

    • [Web ビューア内容とのインタラクションを許可] を選択

    • [JavaScript による FileMaker スクリプトの実行を許可] を選択

    • オブジェクト名「Web ビューア」

    レイアウト上での Web ビューアの使用、およびオブジェクトの名前付けを参照してください。

  3. 同じレイアウトで、手順 1 の各フィールドのフィールドオブジェクトを追加します。

    レイアウト上のフィールドの配置と削除を参照してください。

  4. ブラウズモードで、レコードを追加します。

    レコードの追加、複製、および削除を参照してください。

  5. Web フォーム::Web ビューアソースフィールドで、次のデータ URL を入力します:

    コピー 
    data:text/html,
    <html>
        <head>
            <style>
                div { padding-bottom:0.5em; }
            </style>
        </head>

        <body>
            <div>
                <label for="name">名前:<br></label>
                <input id="name" type="text" value="default">
            </div>
            <div>
                <label for="rating">評価:<br></label>
                0 <input id="rating" type="range" min="0" max="10"> 10
            </div>
            <div>
                <label for="color">色:<br></label>
                <input id="color" type="color">
            </div>
            <button onclick="submitForm()">送信</button>
        </body>

        <script>
            function submitForm() {
                var name = document.getElementById("name").value;
                var rating = document.getElementById("rating").value; 
                var color = document.getElementById("color").value;
                var param = name + '\n' + rating + '\n' + color;
                FileMaker.PerformScriptWithOption (
                    "Web フォームからのデータを格納", param, "0"
                ); 
            }

            function setUserData(name, rating, color) {
                document.getElementById("name").value = name; 
                document.getElementById("rating").value = rating; 
                document.getElementById("color").value = color;
            } 
        </script>
    </html>

    このデータ URL は、Web ビューアが表示されるときに常にロードされる HTML と JavaScript を提供します。Web ページには簡単なフォームが表示され、テキストフィールドの名前、スライダで選択された 0 から 10 までの評価、ポップアップで選択された色、および送信ボタンが含まれています。

  6. [スクリプトワークスペース] で、「Web ビューアでユーザデータを設定」というスクリプトを次のように作成します:

    コピー 
    スクリプト一時停止/続行 [間隔 (秒): .001]
    Web ビューアで JavaScript を実行 [オブジェクト名: "Web ビューア" ; 
        関数名: "setUserData" ; 
        引数: Web フォーム::名前, Web フォーム::評価, Web フォーム::色]

    スクリプトの作成と編集を参照してください。

    FileMaker WebDirect が短い時間停止し、Web ビューアで JavaScript 関数 setUserData を呼び出す前に Web ビューアが Web ページのロードを完了する時間が与えられます。「スクリプト一時停止中」というメッセージがステータスツールバーに表示されないようにするには、[ツールバーの表示切り替え] スクリプトステップを使用できます。

  7. 「Web フォームからのデータを格納」という名前のスクリプトを次のように作成します:

    コピー 
    変数を設定 [$jsParameters ; 値: Get (スクリプト引数)]
    フィールド設定 [Web フォーム::名前 ; GetValue ($jsParameters ; 1)]
    フィールド設定 [Web フォーム::評価 ; GetValue ($jsParameters ; 2)]
    フィールド設定 [Web フォーム::色 ; GetValue ($jsParameters ; 3)]

    Web ビューアでユーザが [送信] ボタンをクリックすると、Web フォームに設定された値が「Web フォーム」テーブルのフィールドに格納されます。

  8. フィールドデータが変更された場合に Web ビューアを更新するため、レイアウトモードで手順 6 の「Web ビューアでユーザデータを設定」スクリプトを実行する OnRecordLoad および OnRecordCommit スクリプトトリガを追加します。

    ボタンの定義または変更、およびレイアウトのスクリプトトリガの設定を参照してください。

ブラウズモードで、Web フォームに値を設定して [送信] をクリックしてみます。「名前」、「評価」、「色」フィールドの値は Web フォームの設定値に合わせて変化するようになります。また、フィールドデータを変更してレコードを確定すると変更内容が Web ビューアに表示されます。

メモ 

  • FileMaker スクリプトを実行するように Web ビューアを設定するときには、[JavaScript による FileMaker スクリプトの実行を許可] オプションを選択する必要があります。レイアウト上での Web ビューアの使用を参照してください。セキュリティ上の理由で、このオプションが選択されていない場合は FileMaker.PerformScriptWithOption() 関数を呼び出しても何も実行されません。

  • FileMaker WebDirect では、セキュリティのため Web ブラウザでの同一オリジンポリシーに従っているため、Web ビューアの Web ページと FileMaker WebDirect の Web ページが同じオリジンである場合にのみ、Web ビューア内の JavaScript と FileMaker のスクリプトで相互を呼び出すことができます。(Web ページのオリジンとは、URL スキーム、ホスト名、およびポートです。)

  • FileMaker WebDirect では、Web ビューアに指定される HTML が上記の例のように「data:text/html,」で始まる必要があります。そうでない場合、FileMaker.PerformScriptWithOption() 関数の呼び出しは失敗します。