Google Workspace addonの作成・公開方法

参照サイト

作成参考サイト
公開参考サイト

アドオン作成方法

appsscript.json の編集

1. GASの編集画面で プロジェクトの設定 > 全般設定 > 「appsscript.json」マニフェスト ファイルをエディタで表示する にチェックする

2. appsscript.jsonを編集する
   (カレンダー編集を行う場合の例)

appsscript.json

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "homepageTrigger": {
        "runFunction": "[画面作成関数名]",
        "enabled": true
      },
      "layoutProperties": {
        "primaryColor": "#673ab7",
        "secondaryColor": "#9c27b0"
      },
      "logoUrl": "https://lh3.googleusercontent.com/d/[iconのfileId]",
      "name": "[アドオンの名前]",
      "universalActions": [
        {
          "label": "[アドオンの名前]",
          "openLink": "https://www.example.com/help"
        }
      ],
      "useLocaleFromApp": true
    },
    "calendar": {}
  },
  "oauthScopes": [
    "https://www.googleapis.com/auth/script.locale",
    "https://www.googleapis.com/auth/calendar.addons.execute",
    "https://www.googleapis.com/auth/calendar",
    "https://www.googleapis.com/auth/calendar.readonly",
    "https://www.google.com/calendar/feeds"
  ]
}

[アドオンの名前]、[iconのfileId]、[画面作成関数名]をそれぞれ変更する

[アドオンの名前] → アドオンの名称(アドオン選択画面で表示される)
[iconのfileId] → Gdrive上のアイコンファイルのfile ID
[画面作成関数名] → 最初に起動される関数名

スクリプトの修正

件名と開始時間を指定して10分間の予定を作成する例
CardServiceを使用してプログラムを作成していく
CardServiceの公式

main.gs

function main() {
  // リンクを部品作成
  const link = CardService.newOpenLink()
    .setUrl("https://google.com");
  const cardLink = CardService.newTextButton()
    .setText("リンクサンプル")
    .setOpenLink(link);

  // テキストインプット例
  const cardHogeTextInput = CardService.newTextInput()
    .setFieldName("hogehoge") // フィールド名(eventで参照するときに使う)
    .setTitle("ほげほげ") // 画面に表示される項目名
    .setValue("ふがふが") // 初期値として「ふがふが」を表示する
    .setMultiline(false); // 複数行入力するか(falseなので1行入力)

  const cardTime1Input = CardService.newDateTimePicker()
    .setFieldName("time1") // フィールド名(eventで参照するときに使う)
    .setTimeZoneOffsetInMins(9 * 60) // 日本は9時間分オフセットがある
    .setValueInMsSinceEpoch(new Date()) // 初期表示に使用する時刻(現在日時にしている)
    .setTitle("時間1"); // 画面に表示される項目名

  // コールバック関数のアクション作成
  const cardCallbackAction = CardService.newAction()
    .setFunctionName('callbackFunc') // ボタンを押された時のコールバック関数
    .setAllWidgetsAreRequired(true) // 全項目必須の場合は true
    .setParameters({});

  // 送信ボタン作成
  const cardSubmitButton = CardService.newTextButton()
    .setText('送信')
    .setTextButtonStyle(CardService.TextButtonStyle.TEXT)
    .setOnClickAction(cardCallbackAction);

  // 画面部品をセクションにまとめる
  const cardSection = CardService.newCardSection()
    .addWidget(cardLink)
    .addWidget(cardHogeTextInput)
    .addWidget(cardTime1Input)
    .addWidget(cardSubmitButton);

  // セクションをカードにして返す
  return CardService.newCardBuilder()
    .addSection(cardSection)
    .build();
}

// コールバック関数
// 入力内容を元にカレンダーを操作する
// ここでは10分間の予定を作成している
function callbackFunc(e) {
  const { hogehoge, time1 } = e.formInput; // 中にsetFieldNameで指定したfieldがある
  const start = new Date(time1.msSinceEpoch); // 時間はmsSinceEpochを元にDate型を作っている
  const end = new Date(time1.msSinceEpoch);
  end.setMinutes(end.getMinutes() + 10); // 10分の予定を作成する
  const calender = CalendarApp.getDefaultCalendar(); // 自身のデフォルトカレンダーを呼び出している
  calender.createEvent(hogehoge, start, end);

  // レスポンスを返す
  return CardService.newActionResponseBuilder()
    .setNotification(
      CardService.newNotification().setText(`カレンダーに予定(${hogehoge})作成しました`)
    ).build();
}

デプロイ方法

編集中

つまずいたところメモ

GASにGCPのプロジェクト番号を設定する部分でプロジェクトIDをプロジェクト番号と勘違いして失敗して悩んだ