Google WorkspaceのアドオンでDriveとSlackを繋げてみた

PHONE APPLI Advent Calendar 2021 12/17日担当の僕です。

当初は、10日に書く予定でしたがサボり癖が発生し17日になりました。
今回は、Google Workspaceのアドオン機能が面白そうなので少し触ってみました。
( 中の人は、開発者ではないので細かい点はご容赦ください。 )

アドオンとは

Google Workspaceでは、以下リンクに記載がある通り、
Gmail、カレンダー、ドライブのサイドパネルにカスタムアプリを表示できる機能があります。

今回やってみたこと。

今回は、お試しという事で以下を作成しました。

Google Drive上で任意のファイルを選択した際に、自作アドオンでファイルの共有リンクを作成。
共有リンクをslackのIncoming Webhookで特定のチャンネルへ送信。
( 作り込めば任意のユーザ、チャンネルへ送信もできると思います。 )
今回作成したものであれば、Google Drive上で 2クリックで簡単にslackユーザへファイル共有が可能です。( 大袈裟... )

イメージは、以下となります。

実際の動作遷移

Google Driveでファイルを選択後、自作アドオンを開くと選択済みのファイルをslackへ送信するボタンを押下。

ボタンを押すことで、自作アドオンが内部的にファイルの共有リンクの作成とslackへの送信をしてくれます。

作り方

以下リンクからプロジェクトを作成。
https://script.google.com/home

プロジェクト作成後、プロジェクトの設定から
「appsscript.json」マニフェスト ファイルをエディタで表示するをONに変更。

エディタを開き以下の3ファイルを作成・変更。

appsscript.json

{
  "timeZone": "America/New_York",
  "dependencies": {
    "enabledAdvancedServices": [
      {
        "userSymbol": "Drive",
        "version": "v2",
        "serviceId": "drive"
      }
    ]
  },
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": [
    "https://www.googleapis.com/auth/drive.addons.metadata.readonly",
    "https://www.googleapis.com/auth/script.locale",
    "https://www.googleapis.com/auth/drive",
    "https://www.googleapis.com/auth/script.external_request"
  ],
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Qiita用",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
      "useLocaleFromApp": true,
      "homepageTrigger": {
        "runFunction": "onHomepage",
        "enabled": true
      },
      "universalActions": [
        {
          "label": "Help",
          "openLink": "https://www.google.com/"
        }
      ]
    },
    "drive": {
      "onItemsSelectedTrigger": {
        "runFunction": "onDriveItemsSelected"
      }
    }
  }
}

Common.gs

function onHomepage(e) {
  //ファイルが何も選択されていない時の動作
  return createCard( true);
}
function createCard(isHomepage) {
  // Explicitly set the value of isHomepage as false if null or undefined.
  if (!isHomepage) {
    isHomepage = false;
  }
  //今回は、ファイルが何も選択されていない際は、hello worldと表示してます。
  var text = CardService.newTextParagraph().setText("Hello World")
  var section = CardService.newCardSection()
  .addWidget(text)
  var card = CardService.newCardBuilder()
  .addSection(section) 
  //描画
  return card.build();
}

Drive.gs

//ファイルが選択された際に実行するファンクション
function onDriveItemsSelected(e) {
  console.log(e);
  //選択されたファイル名を取得
  var file_name = e['drive']['activeCursorItem']['title']
  var text = CardService.newTextParagraph().setText(`選択中のファイル${file_name}をslackへ送信する.`)
  //送信ボタンを作成
  var action = CardService.newAction().setFunctionName("doSharingFile")
  var button = CardService.newTextButton().setText("送信").setOnClickAction(action)
  var button_set = CardService.newButtonSet()
  .addButton(button)

  var section = CardService.newCardSection()
  .addWidget(text)
  .addWidget(button_set)
  var card = CardService.newCardBuilder()
  .addSection(section)
  //描画
  return card.build()
}
//送信ボタンが押された際の動作
function doSharingFile(e){
  console.log(e)
  //ファイルIDを取得
  var file_id = e['drive']['activeCursorItem']['id']
  //ファイルIDからファイルオブジェクトを取得
  var file = DriveApp.getFileById(file_id)
  //ファイルの共有設定を定義
  //今回は、同じドメインかつ編集権限をつけてます。
  file.setSharing(DriveApp.Access.DOMAIN , DriveApp.Permission.EDIT )
  //共有リンク取得
  var file_link = file.getUrl() 
  //slackへ送信する
  var code = doSendMessageTeams(file_link)
  var text = CardService.newTextParagraph()

  //送信の成功・失敗で分岐
  if(code == 200){
    text.setText("送信成功")
  }else{
    text.setText("送信失敗")
  }
  var section = CardService.newCardSection()
  .addWidget(text)
  var card = CardService.newCardBuilder()
  .addSection(section)
  return card.build()

}

//slackへ送信するファンクション
function doSendMessageTeams(msg){
  //payload定義
  var payload = {
    "text" : msg
  }
   var options =
   {
     "method" : "post",
     "contentType": "application/json",
     "payload" : JSON.stringify(payload),
     "muteHttpExceptions": true,
   };
  //URLは、ご自身のslackのIncoming webhookを指定ください。
  var response = UrlFetchApp.fetch("https://hooks.slack.com/services/hogehoge", options);
  console.log(response.getResponseCode())
  return response.getResponseCode();
}

それぞれ簡単にどういうことをしているかを説明すると、、

appsscript.json

このファイルでは、アドオンの設定を主に記載しています。
今回は、Google DriveのAPIを使っているので、以下を変更しています。
enabledAdvancedServices
oauthScopes
また、Drive以外のサービスで使えるようにするには、addOnsの箇所にカレンダーなどを追加すれば良いです。

Common.gs

こちらは、共通部分の処理を記述してます。
ただ、今回はあまり使用していません。

Drive.gs

こちらは、Driveで使う処理を記述してます。
今回は、ここをメインで記載しています。

参考サイト

https://developers.google.com/apps-script/add-ons/cats-quickstart
https://developers.google.com/apps-script/reference/drive