collaboflow.proxyではじめる外部API連携

コラボフロー JavaScript API

コラボフローには、申請書をJavaScriptによってカスタマイズするためのコラボフロー JavaScript APIが用意されています。
本APIを利用することで、下記の例のようなさまざまなアクションを申請書上に実装する事が可能となります。

• 通常のフォーム設計機能だけでは不可能な複雑な入力チェックを実現する
• 特定の条件に一致する場合、入力パーツを表示/非表示にする
• 特定の条件に一致する場合、必要な値を自動的にセットする

collaboflow.proxyではじめる外部API連携

さらに、コラボフロー JavaScript APIには、クロスドメインの制限を回避して、外部WebサイトのREST APIを呼び出すための関数も用意されています。

今回は、collaboflow.proxyを使った外部API連携について、基礎からわかりやすく解説していきます。

collaboflow.proxyとは？

collaboflow.proxyは、外部のREST APIを非同期で実行するための関数です。
この機能を使うことで、外部システムとのデータのやり取りを簡単に実装することができます。

外部のAPIを実行する

基本的な使い方

各HTTPメソッド（GET、POST、PUT等）に対応した関数が用意されており、すべての関数がPromiseを返します。

// GETリクエストを送信
collaboflow.proxy.get(
    'https://api.example.com/data',     // APIのエンドポイントURL
    { 'Content-Type': 'application/json' }, // ヘッダー情報
    'json'  // レスポンスの形式
).then(function(response) {
    // 成功時の処理
    console.log('データ取得成功:', response);
}).catch(function(error) {
    // エラー発生時の処理
    console.error('エラー発生:', error);
});

主なHTTPメソッド

collaboflow.proxyでは、以下のHTTPメソッドが利用可能です：

GET: データの取得
POST: データの作成
PUT: データの更新
DELETE: データの削除
PATCH: データの部分更新
HEAD: ヘッダー情報の取得

非同期処理を同期的に扱う方法

JavaScriptで非同期処理を同期的に扱う方法がいくつかあります。
以下のような場合に非同期処理の同期的な実装が必要となります。

• 複数のAPIから順番にデータを取得する必要がある場合
• APIのレスポンスを待ってから次の処理を実行したい場合
• 処理の順序を確実に制御したい場合
• エラーハンドリングをまとめて管理したい場合

その中でも、async/awaitを使う方法は、コードの可読性が高く、直感的に書けるため人気があります。
以下がasync/awaitを使用したサンプルコードです

複数のAPIを順番に呼び出すシンプルな例

async function getApiData() {
   try {
       // 1つ目のAPI呼び出し
       const userData = await collaboflow.proxy.get(
           'https://api.example.com/users',
           { 'Content-Type': 'application/json' },
           'json'
       );

       // 2つ目のAPI呼び出し
       const orderData = await collaboflow.proxy.get(
           'https://api.example.com/orders',
           { 'Content-Type': 'application/json' },
           'json'
       );

       // 成功時は両方のデータを返却
       return {
           success: true,
           users: userData.body,
           orders: orderData.body
       };

   } catch (error) {
       // エラー時
       return {
           success: false,
           error: error.message
       };
   }
}

// 実際の使用例：この関数の中でawaitを使って呼び出します
async function processData() {
   const result = await getApiData();
   if (result.success) {
       console.log(result.users, result.orders);
   }
}

まとめ

collaboflow.proxyを使えば、外部APIとの連携を簡単に始めることができます。

基本的な使い方さえ理解できれば、どんな場面でも応用が効くようになります。
実際の実装方法は、プロジェクトごとに求められる要件が異なりますが、基本的なパターンをベースにしながら、カスタマイズしていくのがおすすめです。

それぞれのプロジェクトに合わせて、最適な形での実装を楽しんでください！