Google Workspace Add-ons 開発について（メモ）

# ごあいさつ

Google Workspace Add-ons の開発について、自分用のメモを作りました。
まだ日本語での情報はあまり出回っておりませんので、お困りの方も少なからずいらっしゃるのではないか、と存じます。他の開発者の方々の便宜に供するために共有しておきます。
自分もまだ学習数ヶ月目の素人ですので、誤った記載があるかも知れません。お気づきの点、ご指摘下さい。ご指導、ご鞭撻のほど、何卒よろしくお願い致します。

なお、参考になるページの一覧を末尾に掲載しておりますので、そちらもお役立て下さい。




# 概観（大まかな見取り図）

最初に公式のクイックスタートをご覧になると読みやすいと思います
公式のクイックスタート（猫の写真を表示するやつ。20分くらいあれば実装までできます）
https://developers.google.com/workspace/add-ons/translate-addon-sample


## 基本構造について

二層構造になっている

総則　→　manifestファイル
各則　→　それぞれのgasファイル

Common.gsで共通部分を定める
さらに詳細な部分は、アドオンするGoogleのサービスごとに分けて書く

e.g. Drive.gs, Calendar.gs, Gmail.gs

## 作業の流れ

### 1) まず、manifestファイルを作る

manifestファイルの主な目的は2つ

① OAuthScopesを書く
→　ユーザのプライバシーに過度の介入をしないため、使える権限を明確にしておく（いわば制限規範）

②トリガーを設定する
→　各則の関数を作動する条件を決めておく

### 2) gasを書く

manifestでは権限とトリガーを定めた
具体的なgasファイルでは、manifestで定めた権限の範囲内で、トリガーにより作動する関数を書く

#### gasファイルの構造

JavaScriptとほぼ一緒
アドオン内で表示される部分は「CardService」で書く。大まかに説明すると、以下の通り

・DOMと結構似ている

・documentに相当するものがcard

・ボタンなどの要素をwidgetと呼ぶ

・widgetを定義し、cardの中に配置し、card.build()で表示する、という流れ


# より具体的に

想定される小目的ごとに、構文の紹介

膨大になってしまうので、本文中には書かず、リンクを貼ります。自分の能力の限界を越えるものは、先人の記事のリンクを貼らせてもらいます。

## (1) ボタンを表示したい場合
(1-1) アドオン内でアクションするボタン
クイックスタート参照。

(1-2) リンクを開くためのボタン
クラス "OpenLink" にURLを設定し、button.setOpenLink(CardService.newOpenLink()~)で詳細を定めてbuttonを設置する
https://developers.google.com/apps-script/reference/card-service/open-link

## (2) Drive を操作したい
DriveAppを用いる
https://developers.google.com/apps-script/reference/drive/folder#createFolder(String)

## (3) Sheet を操作したい
公式リファレンス：
https://developers.google.com/apps-script/reference/spreadsheet

手順：
・マニフェストで 'https //www.googleapis.com/auth/spreadsheets' の権限を書き込んでおく

・シートの操作にはSpreadsheetAppを用いる

・シートを作成、取得　→　セルを取得　→　値の操作という順序

・なお、SpreadsheetAppで新規スプレッドシートを作る際はフォルダを指定できず、必ずマイドライブに作成される。
そのため、マイドライブに作成後、指定のフォルダにコピーし、元のシートを削除する
。
2020年に moveメソッドが実装された。
[fileオブジェクト].moveTo([移転先のfolderオブジェクト]);
で移転する

参照：ITライター　もりさんの記事
https://moripro.net/gas-create-new-spreadsheet/
gasをスプレッドシートに紐づけていない場合（アドオン作成では、こちらの方が通常でしょうね）には、書き方がやや異なり、

SpreadsheetApp.getActiveSpreadsheet();　ではなく、
SpreadsheetApp.openById('<キー>');　でファイルを補足する。ここからは同じ処理

参照：株式会社イノベーション　エンジニアブログより（すももさんの記事）
http://tech.innovation.co.jp/2018/05/02/G-A-S-Slack.html
先述の通りで、ファイルの移転方法は変わっている




# 参考になるページ
## 概要が分かるありがたい記事
https://www.wantedly.com/companies/tutorial/post_articles/297304
https://news.mynavi.jp/article/gas-13/

## 公式ページとクイックスタート（デプロイまで）
https://developers.google.com/workspace/add-ons/overview
https://developers.google.com/apps-script/concepts/deployments

## マニフェストについて
簡単に言うと：アドオンの動作をメタに記述した総則
https://qiita.com/tanaike/items/b3538e7550555ebb51f5
https://developers.google.com/apps-script/manifest/addons

## GoogleAPIのOAuth2.0スコープについて
簡単に言うと：使う権限の事前申告（ユーザーのプライバシーのため）
https://developers.google.com/identity/protocols/oauth2/scopes

## Card Service について
簡単に言うと：DOM の Document みたいなもの
https://developers.google.com/apps-script/reference/card-service

## HomepageTrigger manifest resource
https://developers.google.com/apps-script/manifest/homepage-trigger

## property stores について
簡単に言うと：key-valueの対応でデータを保管するもの

公式ガイド
https://developers.google.com/apps-script/guides/properties

### ちなみに：chrome.storage は使えない？？（よく分かっていない……）

参考：chrome.storageについて

chrome.storage を利用したchromeへのデータ保存（@shimutaya さんが2015年09月04日に作成）
https://qiita.com/shimutaya/items/e8835d6ce794ef6c73cf

公式リファレンス
https://developer.chrome.com/docs/extensions/reference/storage/

## 新しい機能（もっぱら自分用のメモ）
Google スプレッドシートのタイムライン表示がスゴイ
https://www.gizmodo.jp/2021/05/google-spreadseat-timeline.html

Jamboard で学習をもっと面白く
https://edu.google.com/intl/ja/products/jamboard/