JavaScript API クイックスタート

コラボフローJavaScript APIを使い始めるまでの簡易な手順をご紹介します。

事前準備

コラボフローJavaScript APIは、コラボフローの申請書で発生する様々なイベントに対して、独自の処理を指定できるようにするカスタマイズです。そのため、JavaScript APIを使用する前には必要な「フォーム」や「経路」があらかじめ作成されている必要があります。

このチュートリアルではフォームと経路が作成済みの環境を前提に解説を行います。
フォームや経路の作成方法については「コラボフロー アプリ設定マニュアル」を参照ください。

JavaScriptファイルの作成

ここでは申請書の「新規申請画面」を開くとalertを使ってメッセージを表示する簡単な処理を作成してみます。任意のエディタで下記のコードを作成し、ファイル名を「welcome.js」として保存します。

(function() {
    "use strict";
    // 新規申請画面を開くとメッセージを表示
    collaboflow.events.on('request.input.show', function (data) {
        alert("welcome! コラボフローJavaScript API!");
    });
})();

上記のコードでは、関数「collaboflow.events.on()」で、指定された新規申請画面が読み込まれた際のイベント「request.input.show」を感知し、任意の処理（alertによるメッセージの表示）を実行する処理を記述しています。

jsファイルを作成する際は、次の点に注意してください。

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

コラボフローでの処理を安全に行うため、JavaScript APIでのJavaScriptファイルは、即時実行パターンで記述するようにしてください。またuse strictを宣言して、的確なエラーチェックが行われるようにする事を推奨します。

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

拡張子

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

文字コード

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

詳細情報

より詳細な情報については、下記のページを参照ください。

• ファイルを作成、保存する際の基本的な注意事項：「JavaScript APIを利用する - はじめに」
• コラボフローで利用可能なイベントや、イベント毎の処理の記述：「JavaScript APIを利用する - イベントの記述方法」

JavaScriptファイルの設定

次に、作成した「welcome.js」を下記の手順でコラボフローにアップロードし、申請書と関連付けます。

1. アプリ管理者のアカウントで、コラボフローにログインします。
2. アプリ設定エリアのフォーム設定画面を開き、対象のフォームを選択します。
3. 対象フォームの設定画面で「カスタマイズ」タブをクリックし、カスタマイズ画面を表示します。
   
4. [ファイルをアップロード] をクリックして、作成した「welcome.js」を指定し [保存する] をクリックします。
5. 「カスタマイズの設定を保存しました」とダイアログが表示されれば、JavaScriptファイルの設定は完了です。

処理の実行

JavaScriptファイルの設定を行ったら、対象の申請を「新規文書」画面から開いてみましょう。
文書が開くと同時に画面に「welcome! コラボフローJavaScript API!」とalertによるメッセージが表示されれば、処理は成功です。

今回は基本的なメッセージの表示を行いましたが、コラボフローJavaScript APIではこの他にも、
さまざまなイベントに応じたカスタマイズ処理を作成するためのイベントハンドラーや関数を用意しています。
詳細については、コラボフローサポートの「カスタマイズ」セクション「JavaScript APIを利用する」の各種記事を参照ください。