1
/
5

Google Apps Scriptでアドオン作ったらたくさん苦しんだので僕の屍をこえてゆけ

どうも、エンジニアの山下です。

この度、「Robotic Crowdを支える技術」の10日目を担当することになりました。

普段はバックエンドエンジニアとしてお仕事をしていますが、最近Google Apps Scriptを使ってSpreadSheetのアドオンを作ることになりました。

取り組んでいく中でGAS特有の機能に沢山触れて躓いたので、これからGASを始める方の開発が幸多いものになるようまとめてみようと思います。

  1. ローカル開発とソースコード管理
  2. アドオンの構成
  3. スクリプトの実行方法
  4. データの保存
  5. 外部サービスとの連携
  6. ライブラリの利用
  7. 開発に便利な拡張機能たち

1. ローカル開発とソースコード管理

GASの開発はGoogleが用意しているスクリプトエディタというツールを使用しますが、できれば使い慣れたエディタを利用したいですね。

そこで利用するのがclaspというライブラリです。

Command Line Interface using clasp | Apps Script | Google Developers
"type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label
https://developers.google.com/apps-script/guides/clasp

clasp を導入することで、以下のようなコマンドを利用してスクリプトエディタとローカルで使用しているエディタを連携することができます。

$ clasp open
=> ブラウザでGASプロジェクト(スクリプトエディタ)が開く

$ clasp push
=> ローカルのコードをGASプロジェクトへpushする

$ clasp pull
=> リモートのコードをローカルへpullする
=> scriptIDを指定すると、既存のGASからローカルへコードをpullできる 

ローカルのコードをGithubへpushすることで、ソースコードを管理することが可能です。

2. アドオンの構成

プロジェクトという単位で、以下の3種類のファイルを管理します。

  • スクリプトファイル
  • HTMLファイル
  • マニフェストファイル

スクリプトファイル

サーバーサイドの処理をGoogle Apps Scriptで記述します。

データストアにアクセスやHTMLファイルの表示、入力への対応、外部APIへの接続などを行います。

スクリプトファイルは複数作成できますが、各ファイルに作成した関数はグローバル関数として扱われるため、同じ名前の関数は作れません。

HTMLファイル

サイドバーやダイアログなどのUI部分をHTMLで記述します。

CSSやJavascriptのファイルを作成することはできないので、使用したい場合は<style>や<script>タグを使用します。

<script>タグ内で、

google.script.run(関数名)

を使用することで、スクリプトファイルにある関数を実行することができます。

後述のデータストアからデータを取り出してHTMLで表示したい場合、スクリプトファイルにデータを取得する関数作成し、これをフロントから実行することで対応できます。

マニフェストファイル

oauthのスコープなど、設定を記述するファイルです。

詳しくは公式サイトを参照してください。

Manifest structure | Apps Script | Google Developers
"type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label
https://developers.google.com/apps-script/manifest

3. スクリプトの実行方法

.gsファイルに記述したスクリプトを実行する方法として、トリガーがあります。

トリガーには大きく以下の2つの種類があります。

  • Simple Trigger
  • Installable Trigger

Simple Trigger

AppScriptに組み込まれている予約済みのトリガーです。

予約済みの関数名で関数を作成することで、イベント発生時に自動で関数が実行されるようになります。

Simple Triggers | Apps Script | Google Developers
Triggers let Apps Script run a function automatically when a certain event, like opening a document, occurs. Simple triggers are a set of reserved functions built into Apps Script, like the function onOpen(e), which executes when a user opens a Google Doc
https://developers.google.com/apps-script/guides/triggers/

Installable Trigger

インストールが可能なトリガーです。主に以下の2種類を設定できます。

  • GoogleWorkspaceアプリケーションにのトリガー(スプレッドシートが更新された時やカレンダーが更新された時など)
  • 時間駆動型トリガー(特定の時間間隔など)
Installable Triggers | Apps Script | Google Developers
Like simple triggers, installable triggers let Apps Script run a function automatically when a certain event, such as opening a document, occurs. Installable triggers, however, offer more flexibility than simple triggers: they can call services that requi
https://developers.google.com/apps-script/guides/triggers/installable

設定したい時は、

  • スクリプトエディタから「現在のプロジェクトのトリガー」を選択し、手動でトリガーを設定する
  • TriggerBuilderを使用してプログラムからトリガーを設定する

という2種類の方法があります。

Class TriggerBuilder | Apps Script | Google Developers
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trad
https://developers.google.com/apps-script/reference/script/trigger-builder

4. データの保存

データを保存する方法として、以下の4つの方法があります。

  • Spread Sheetを利用
  • JDBCを利用
  • Local Storageを利用
  • Properties Storeを利用

Spread Sheetを利用する方法

SpreadsheetAppを利用してシートを読み書きすることができるので、この機能を利用してSpreadSheetをデータベースとして扱う方法です。

Class SpreadsheetApp | Apps Script | Google Developers
Google is committed to advancing racial equity for Black communities. See how. Send feedback Access and create Google Sheets files. This class is the parent class for the Spreadsheet service. Creates a new spreadsheet with the given name and the specified
https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app

JDBCを利用する方法

JDBCサービスを通して、外部のデータベースを利用する方法です。

JDBC Service | Apps Script | Google Developers
This service allows scripts to connect to JDBC-compliant databases, including Google Cloud SQL, MySQL, Microsoft SQL Server, and Oracle. See also the guide to JDBC.
https://developers.google.com/apps-script/reference/jdbc

Local Storageに保存する方法

localStorageプロパティを利用して、ローカルのStorageオブジェクトへアクセスする方法です。

Window.localStorage
localStorage プロパティはローカルの オブジェクトにアクセスすることができます。 localStorage は sessionStorage によく似ています。唯一の違いは、 localStorage に保存されたデータには保持期間の制限はなく、 sessionStorage に保存されたデータはセッションが終わると同時に(ブラウザが閉じられたときに)クリアされてしまうことです。 localStoragesessionStorageに保存されるデータは そのページのプロトコル固有である ことに
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

Properties Storeに保存する方法

Properties Serviceを利用して、プロジェクトやドキュメントにデータを保存する方法です。

key / valueでデータを保存することができます。

Class PropertiesService | Apps Script | Google Developers
Google is committed to advancing racial equity for Black communities. See how.
https://developers.google.com/apps-script/reference/properties/properties-service

ScriptProperties / UserProperties / DocumentProperties の3種類があり、主な違いは以下の通りです。

以下のようなスクリプトでデータを扱うことができます。

const scriptProperties = PropertiesService.getScriptProperties();
scriptProperties.setProperty(key, value)
=> ScriptProperties Storeに保存
 
scriptProperties.getProperty(key)
=> ScriptProperties Storeから取得

scriptProperties.deleteProperty(key)
=> ScriptProperties Storeから削除

5. 外部サービスとの連携

Google Workspaceアプリケーションに関しては、Google Workspace Services を利用してGASのコードで簡単に操作できます。

例えば、Gmailを送るコードは以下の通りです。

GmailApp.sendEmail(メールアドレス、タイトル、本文)

詳しくは、下記リンクのGoogle Workspace Services を参照してみてください。

Reference overview | Apps Script | Google Developers
Google is committed to advancing racial equity for Black communities. See how.
https://developers.google.com/apps-script/reference


また、Slackや我らがRobotic CrowdなどAPIを公開しているサービスについては、UrlFetchAppを使用して連携することができます。

Class UrlFetchApp | Apps Script | Google Developers
"type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label
https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app

例えば、Robotic Crowdは以下のようなコードでワークフローを実行することができます。

UrlFetchApp.fetch("https://api.roboticcrowd.com/v1/session_queues", option)

認証に関しては、別途連携サービスの仕様に従って実装する必要があります。

6. ライブラリの利用

スクリプトエディタのリソース > ライブラリからスクリプトIDを指定することで、他の人が作成したGAS専用のライブラリを使用することができます。

npmモジュールをインストールして使うことはできません。

Libraries | Apps Script | Google Developers
"type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label
https://developers.google.com/apps-script/guides/libraries

様々なライブラリが公開されているので、検索して使ってみてください。

GASのおすすめライブラリ一覧!使い方やインポート手順についても解説! | monoblog
GAS(Google Apps Script) の開発をしていると、既存の関数では手の届かない「かゆいところ」が出てきますよね。 また、別サービスとAPI連携したいこともあるでしょう。 今回は、GASを使う人は知っておくべき 便利でおすすめのライブラリ を紹介します。 記事の終わりではライブラリの使い方やインポート方法についても解説するので、ぜひ最後まで読んでください。 「 Underscore.js」は一言でいうと「 100種類以上の便利関数が使えるようになるライブラリ 」です。 配列操作やオブジェクト
https://monoblog.jp/archives/6019

7. 開発に便利な拡張機能たち

開発の際に使用してよかったものを紹介します。

AppScript Color

AppsScript Color
This extension change the color style of the google apps script editor. It also allow to use folders with folder/subFolder/file
https://chrome.google.com/webstore/detail/appsscript-color/ciggahcpieccaejjdpkllokejakhkome

スクリプトエディタ上でディレクトリを使用できるようになり、見やすくなります。

  • 拡張機能使用前
  • 拡張機能使用後


Google Apps Script Github アシスタント

Google Apps Script GitHub アシスタント
GitHub/GitHub Enterprise/Bitbucket/GitLabでGASのインラインコードを管理
https://chrome.google.com/webstore/detail/google-apps-script-github/lfjcgcmkmjjlieihflfhjopckgpelofo?hl=ja

スクリプトエディタ上にGithubのメニューが表示され、連携がしやすくなります。


以上、参考になれば本望です。

次は17日に何か書きます。お楽しみに。

Invitation from オートロ株式会社
If this story triggered your interest, have a chat with the team?
オートロ株式会社's job postings
11 Likes
11 Likes

Weekly ranking

Show other rankings
Like Tomoya Yamashita's Story
Let Tomoya Yamashita's company know you're interested in their content