コラボフォーム JavaScript API クイックスタート

コラボフォーム JavaScript APIを利用する簡易な手順をご紹介します。

事前準備

コラボフォーム JavaScript APIは、フォームで発生する様々なイベントに対して独自の処理を指定できるようにするカスタマイズです。JavaScript APIを使用する前に、対象のフォームが作成・公開されている必要があります。

JavaScriptファイルの作成

ここでは、フォームが表示されたときに alert でメッセージを表示する簡単な処理を作成します。
任意のエディタで下記のコードを作成し、ファイル名を「welcome.js」として保存します。

(function () {
  "use strict";
  // 公開フォーム表示時にメッセージを表示
  collaboform.events.on("form.show", function (data) {
    alert("welcome! コラボフォームJavaScript API!");
  });
})();

上記のコードでは、「collaboform.events.on()」で、フォーム入力画面が読み込まれた際のイベント「form.show」を感知し、alertによるメッセージ表示を実行する処理を記述しています。

即時実行パターンの記述とStrictモードでの実行

グローバル変数の汚染を防ぐため、JavaScript APIでのJavaScriptファイルは即時実行パターンで記述することを推奨します。また「use strict」を宣言して、的確なエラーチェックがおこなわれるようにすることも推奨します。

// 関数の即時実行
(function () {
  "use strict";
  // ここに処理を記述
})();

拡張子

作成したJavaScriptの拡張子には「.js」を指定してください。

文字コード

JavaScriptファイルの文字コードは「UTF-8（BOMなし）」で保存してください。

JavaScriptファイルの設定

次に、作成した「welcome.js」をコラボフォームにアップロードして、フォームに関連付けます。

1. 管理者のメンバーでコラボフォームにログインします。
2. フォーム一覧から対象のフォームの設定を開きます。
3. 「カスタマイズ」をクリックし、カスタマイズ画面を表示します。
   
4. 「アップロードするファイルの安全性を確認済みです。不正なスクリプトはフォームの利用者に影響を及ぼす可能性があることを理解しています。」のチェックボックスをONにします。
5. [ファイルをアップロード] をクリックして、作成した「welcome.js」を選択します。
   
6. [保存] をクリックします。
7. 保存が完了したら、設定は完了です。

処理の実行

設定完了後、対象の公開フォームを開いてみましょう。
フォームが開くと同時に 「welcome! コラボフォームJavaScript API!」 とalertによるメッセージが表示されれば成功です。

今回は基本的なメッセージの表示をおこないましたが、コラボフォームJavaScript APIでは他にもさまざまなイベントに応じたカスタマイズ処理を作成するためのイベントハンドラーや関数を用意しています。

詳細については、以下の記事をご確認ください。

• 利用可能な画面、イベントの一覧
• イベントの記述方法
• パーツのデータと状態の操作