Logian株式会社Publicationへの投稿
👌

Studioのフォーム内容をLarkBaseに反映させて自動返信メールを送る方法

のうとみ たかし
に公開
studio
GAS
スプシ
Lark
tech

どんなことができる？

Studioで作ったサイトのフォーム結果データをGASを中継しLarkBaseに反映させることで、

  • Larkから自動返信メールを送る
  • 見込み顧客リストをLarkBase上に自動で作成...etc

といったことが可能になります。

自動返信メールを送りたいだけの場合は、シンプルにGASやZapierとの連携で設定した方が間違いなく早いです。一方で、Lark上にデータを蓄積し今後活用する予定がある場合には今回の方法を試してみてください。

Larkでアプリを作成

  1. Lark Developerにログイン

  2. Custom Appsから「Create Custom App」を選択

  3. ここでカスタムアプリの内容を好きなように決めてください。
    (ここの内容は自分が分かれば適当に入力してもらって構いません。)

  4. Featuresの「Add Features」から「Base extensions」を追加します。

  5. 続いて、Development Configurationの「Permissions & Scopes」から「Add permission scopes to app」で使用するscopeを選択します。
    今回は「Tenant token scopes」タブの「bitable:app」にチェックマークを入れます。

  6. また先ほど同様のDevelopment Configurationの中の「Test Companies & Users」から、自社をテスト対象として追加されていることを確認し、「Install this app」を行います。
    もし、画像のように自社が表示されていない場合は右上の「Create Test Company」から追加してください。

  7. 続いて、App Versionの「Version Management & Release」からバージョン設定を行います。迷ったらとりあえず以下のように入力しておいてください。

    • App version: 1.0.0
    • Update Notes: Studio連携用のアプリ

    その他は、何も入力せず、そのまま画面最下部にあるSaveを行ってください。

  8. 続いて、管理者(自社の管理者)に対して今作成したアプリのリリースの許可を求めます。
    （自分が管理者の場合でもこのリクエストは必要です）

  9. Larkのメッセージに「オープンプラットフォームアシスタント」というbotから連絡がきます。そこで送られてくるメッセージを開くと以下のようなアプリ審査の画面が表示されます。

    特に問題がなければ、このまま承認をしてください。

  10. 最後にLarkDeveloperに戻り、「Credentials & Basic Info」からApp ID(※5)とApp Secret(※6)をメモしておきます。

これで、Studio連携用のLarkアプリ作成は完了です！

Lark Baseでアプリ追加

続いては、作成したアプリを対象のBaseに追加していきます。

  1. Studioのフォーム内容を反映させたいBaseを用意し、右上の「…」＞「その他」＞「アプリを追加」を選択します。（のちにGASのスクリプトを書くときに使います）

  2. 検索窓が出てくるので、先ほど作ったアプリを検索し追加します。

LarkBaseの設定

  1. 列名をStudioで作成したフォームの内容と合わせます。
    （列の名前が「お名前」「氏名」などStudioのフォームと正確に一致していなくても問題ありません。）

  2. Baseをブラウザで開きます。

  3. ブラウザで開いたら、URLの次の(※3)(※4)の部分をメモっておいてくだい。
    https://y8yox29k7dn.jp.larksuite.com/base/●●●(※4)●●●?table=●●●(※3)●●●&view=●●●●●●●

    • ●●●(※4)●●●: 後ほど使うappTokenというものです。
    • ●●●(※3)●●●: 後ほど使うtableTokenというものです。

Studioフォームのスプレッドシート連携

Studioとスプレッドシートの連携については、Studioが公式の記事を出しているのでこちらを参考にしてください。
https://help.studio.design/ja/articles/4597354-studioフォームの回答をgoogleスプレッドシートで管理する方法

Google App Scriptの設定

  1. Studioで連携したスプレッドシートを開きます。

  2. URLがhttps://docs.google.com/spreadsheets/d/●●●(※1)●●●/edit?gid=0#gid=0となっていると思いますが、この●●●(※1)●●●の部分をメモっておきます。後ほど使うspreadsheetIdというものです。

  3. 拡張機能>AppsScriptを開きます。

  4. 開いたらスクリプトを以下の内容に全て置き換えます。

    スクリプト

    **●●●(※数字)●●●**とconst payloadの内容の部分以外は、コピペでOKです。

    // 行が追加されたらLarkBaseにPOST
function onChange(e) {
  const spreadsheetId = '●●●(※1)●●●';
  const sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName('●●●(※2)●●●');
  const lastRow = sheet.getLastRow();

  const rowValues = sheet.getRange(lastRow, 1, 1, sheet.getLastColumn()).getValues()[0];

  if (rowValues[0] === '') return;

  // 二重送信防止のキャッシュ処理
  const cache = PropertiesService.getScriptProperties();
  const lastSentRow = cache.getProperty('lastSentRow');
  if (lastSentRow === String(lastRow)) {
    Logger.log("この行はすでに送信済み");
    return;
  }
  cache.setProperty('lastSentRow', String(lastRow));

  sendToLarkBase(rowValues);
}

// POSTする内容
function sendToLarkBase(rowValues) {
  const tenantToken = getTenantAccessToken(); 
  const tableToken = '●●●(※3)●●●';
  const appToken = '●●●(※4)●●●';

  const url = `https://open.larksuite.com/open-apis/bitable/v1/apps/${appToken}/tables/${tableToken}/records`;

  // カラム構成に合わせて書き換える必要あり
  const payload = {
  fields: {
    "名前": String(rowValues[0] || ''),
    "会社名": String(rowValues[1] || ''),
    "電話番号": String(rowValues[2] || ''),
    "メールアドレス": String(rowValues[3] || '')
    }
  };

  const options = {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${tenantToken}`,
      'Content-Type': 'application/json'
    },
    payload: JSON.stringify(payload),
    muteHttpExceptions: true
  };

  const response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getResponseCode());
  Logger.log(response.getContentText());

}


function getTenantAccessToken() {
  const clientId = '●●●(※5)●●●';     // LarkのApp ID
  const clientSecret = '●●●(※6)●●●'; // LarkのApp Secret

  const url = 'https://open.larksuite.com/open-apis/auth/v3/tenant_access_token/internal';
  const payload = {
    app_id: clientId,
    app_secret: clientSecret
  };

  const options = {
    method: 'POST',
    contentType: 'application/json',
    payload: JSON.stringify(payload)
  };

  const response = UrlFetchApp.fetch(url, options);
  const data = JSON.parse(response.getContentText());
  return data.tenant_access_token;
}

    このとき、●●●(※数字)●●●の部分にはそれぞれメモっておいたものを貼り付けてください。番号が埋める場所と対応しています。

    const payloadに対しては、各自のフォームの内容に合わせて変更してください。

  5. 最後に、トリガー設定（左にアイコンが6つ並んでいるうちの上から4つ目）を行います。

    • 実行する関数: onChange
    • イベントのソース選択: スプレッドシートから
    • イベントの種類を選択: 変更時
    • エラー通知設定: 毎日通知を受け取る

    上記の内容で保存をしてください。

これで設定は完了です！お疲れ様でした！
Studioのフォームから入力があると、自動的にスプレッドシートに反映されて、それがさらにLarkBaseに反映されるようになります。

LarkBaseで自動メール返信

あとは、LarkのBase上で「自動化」から「Larkメールを送信」の設定を行うことで、フォーム内容の自動返信を行うことが可能です。

終わりに

ここまで読んでいただきありがとうございました。
少々設定は面倒ですが、一度LarkのBaseに反映できるようになるとできることの幅も一気に広がります。

Logian株式会社では、データ分析だけでなくデータ収集体制の構築にも対応しております。
まずは、無料データ分析相談でお気軽にご相談ください！

https://logian.jp/data-consulting

Logian株式会社
Logian株式会社Publication

Discussion