Skip to content
espar form DOCS

外部API連携

espar form は、フォームに入力された値を外部システムに登録できます。これを外部API連携機能といいます。

連携する外部システムは、既存クラウドサービスでも構いませんし、独自に開発したシステムでも構いません。本ページでは外部システムの必要条件や、既存クラウドサービスの例として Google SpreadSheet や kintone と連携する方法について解説します。

 

外部API連携のシステム要件

espar form と外部連携しようとするシステムは以下の条件を満たす必要があります。

  • espar form のサーバから HTTP/HTTPS 通信が可能なこと
  • POST や GET の RestAPI が実装されていること

上記の要件が満たされていれば、クラウドサービスでも独自システムでも構いません。

 

kintone 連携

Cybozu社のクラウド型データベース kintone に、espar form で入力された値をそのまま登録することができます。以下に連携する手順を示します。

A. kintone側の準備

  • (1) espar form のフォーム入力値を格納するため、専用のkintoneアプリを作成する
  • (2) kintoneのアプリ設定で、espar form の入力フォームと同じだけの要素を登録する externalapi_2-1-2
  • (3) 各要素のフィールドコードに、espar form を使っているフォーム入力要素の name 値を指定する (以下は espar form で <input type="text" name="url"> に入力された値を格納するkintone用フィールドの設定) externalapi_2-1-3
  • (4) アプリの設定から [APIトークン]→[生成する] で以下の通り API key を生成。アクセス権の [追加] のチェックをONにして保存 externalapi_2-1-4
  • (5) 生成されたAPIトークンは後で espar 管理画面で使用するのでコピーしておく

B. espar form 管理画面の設定

  • (1) espar の管理画面にログインして [フォーム] タブをクリックし、設定したいメールテンプレートをリストボックスで選択

  • (2) [外部API連携] タブをクリック externalapi_2-2-2

  • (3) [外部API連携を使用する]にチェックを入れて、各項目に以下の通りに入力する

    API形式その他
    HTTPメソッドPOST
    API URLhttps://[company ID].cybozu.com/k/v1/record.json
    HTTPヘッダーContent-Type: application/json
    X-Cybozu-API-Token: [kintone アプリの API Key]
    ボディテンプレート(4)を参照

  • (4) ボディテンプレートに以下の通り入力。{{ .company }} などの表記はメールテンプレートの変数の表記 (以下の例は、company というフィールドコードを持つkintoneのフォーム項目に、espar form で name="comopany" となっている input 要素の値を格納すること意味する)

    {
      "app":[kintone アプリのID],
      "record":{
        "company": {
          "value":"{{ .company }}"
        },
        ...(入力項目の数だけ繰り返し)...
      }
    }

Google SpreadSheet 連携

Google社のクラウド型スプレッドシートに、espar form で入力された値をそのまま登録することができます。以下に連携する手順を示します。

A. SpreadSheet 側の準備

  • (1) Google Drive の画面から新規にスプレッドシートを作成
  • (2) (1)で作ったスプレッドシートを開きメニューから [ツール]→[スクリプトエディタ] をクリック externalapi_3-1-2
  • (3) スクリプトエディタが開く externalapi_3-1-3
  • (4) コード.gs の内容を全て削除し、以下のものに差し替えて [ファイル]→[保存] をクリック 
    function doPost(e){
      const ss       = SpreadsheetApp.getActiveSpreadsheet();
      const sheet    = ss.getSheetByName('[シートの名前]');
      const postData = JSON.parse(e.postData.contents);
    

      // 行の最後に値を追加
      sheet.appendRow([postData.[name属性値], postData.[name属性値], ...(入力要素の数だけ繰り返し)]);
    

      // JSONオブジェクトを返す
      const response = {"success": true, "message": "ok"};
      return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
    }
    externalapi_3-1-4
  • (5) プロジェクト名を指定するのを促すダイアログが表示されれば、任意の名称を入れて [OK] をクリック externlaapi_3-1-5
  • (6) スクリプトエディタのメニューから [公開]→[Webアプリケーションとして導入] をクリック externalapi_3-1-6
  • (7) 設定用のダイアログが表示されるので、以下の通りに設定して [Deploy] またはをクリック
    Project version:New
    Execute the app as:Me(自分のメールアドレス)
    Who has access to the app:Anyone, even anonymous

externalapi_3-1-7

  • (8) 認証が必要な旨のダイアログが表示されるので「許可を確認」をクリック externalapi_3-1-8
  • (9) 認証用の別ウィンドウが開くのでアカウントを選択する externalapi_3-1-9.png
  • (10) [許可] をクリックする externalapi_3-1-10.png
  • (11) スクリプトエディタの画面に戻るとWebアプリケーションとして公開されたことを示すダイアログで表示される Current web app URL をコピー(後で使用する) externalapi_3-1-11

B. espar form 管理画面の設定

  • (1) espar の管理画面にログインして [フォーム] タブをクリックし、設定したいメールテンプレートをリストボックスで選択

  • (2) [外部API連携] タブをクリック externalapi_2-2-2

  • (3) [外部API連携を使用する]にチェックを入れて、以下の通りに入力する

    API形式JSON
    HTTPメソッドPOST
    API URL[SpreaSheetの準備中に取得した公開API用のURL]
    HTTPヘッダー指定なし
    ボディテンプレート指定なし

  • (4) espar admin を保存して、送信テスト。正しく連携されていると以下の通り SpreadSheet に問い合わせが蓄積されていく externalapi_2-2-2