GASでスプレッドシート内にUIを作ってみる話

こんにちは！Canal AI研究所です。
Google製品で業務効率化を行う場合、必ずといっていいほど登場するのが、「GAS（Google Apps Script）」です。
GASでは主にバックエンドで動く自動化を実行するものですが、実はGASにはUIを表示させる能力があるんです。
今回はこのUIを作りながら、メール送信の自動化を例にGASのUIについて紹介しようと思います。

この記事は、以下の方におすすめです。

1. GASについて簡単に紹介

ここでは簡単にGASについて紹介します。
GAS（Google Apps Script）とは、Googleのバックエンドで動く仕組みのことで、特定の作業を自動化し、効率良く行うことに特化したサービスです。
基本的にどのGoogle製品（スライド・スプレッドシート・ドキュメントなど）でも使うことができます。

開き方は、スプレッドシートを例にすると「拡張機能」から「Apps Script」を選択すれば開くことができます。
GASの活用には様々あり、ここでは取り上げられないほどたくさんありますので、ぜひ他の活用法も調べてみてください。

2.GASで書ける「2種類のコード」

それでは本題に移ります。
GASでUIを作成できると言う風に書きましたが、そのためにはGASで書ける2種類のコードを理解する必要があります。

1つ目は「.gsコード」です。
こちらは主に特定のアクションを実行するためのコードであり、GASを使った効率化においてはほとんどがこのコードによって実行されます。
今回のメール送信においても「メールの送信自体」はこの.gsコードによって実行されるわけです。

そんな「.gsコード」ですが、実はUIはこのコードでは表示させることができません。
先ほども言った通り、バックエンドの実行専用のコードのため、フロントエンドのコードではないからです。
そんな時に、GASで書けるもう1種類のコードが活躍します。

GASで書けるもう一つのコードは「.htmlコード」です。
こちらのコードは「フロントエンドに特化した」コードになっており、主にサイトのUIで使われるコードの種類になります。そのため、このコードがあればUIを表示させることができるのです。

「.gsファイル」と「.htmlファイル」を組み合わせることで、スプレッドシート内にUIを表示させつつメール送信の自動化が行えるのです。

3. GASコードの書き方

ここからは、GASに両方のコードを書く方法について紹介します。
Apps Scriptを開くと以下のような画面になります。

この画像内にある「コード.gs」は先ほど説明した、「.gsコード」を書き込む場所です。ここにGPTなどで出力させた自動化コードを書くことになります。

ではUIはどこに書き込めば良いのでしょうか？
実は「ファイル」の横にある「＋」ボタンを押すと、以下のような画面が出てきます。

ここで出てきた「HTML」がUIを出すためのコードが書ける場所なのです。
もう一方の「スクリプト」は「.gsコード」用のファイルを開くことになりますので、「HTML」を選択し、コードを書きます。

では実際に、両方のコードを書いてみましょう。
基本的にGPTと壁打ちしながら聞くことになりますが、私たちはこのようなプロンプトでやってみました。

ある会社では、添付した請求書に内容を入力し、様々な方法（メールや郵送など）で先方へ送っています。
今回、この中の「メールでの送信」のみを効率化したいです。 そのために以下の手段を考えています。 
・GASでUIを構築する 
・スプシ内で「メールを送信」を押すとメールアドレスを入力する項目が現れ、入力したら定型文とPDFが送信される。 
・送信後、シートの行に送付先の企業名と送信日時が打刻される 
・メールには必ず所定のメールアドレスをccで入れる 
・PDFを添付するフェーズも挟む 
これを実現するGASコードを書いてほしいです

そうすると、GPTがスクリプトとHTMLコードの両方を出してくれますので、両方をコピーし、所定の場所（スクリプトは「コード.gs」に、HTMLは先ほど作ったHTMLファイル内）に添付してください。

この際、一つ注意すべき点があります。
それは、「GPTが出してきたHTMLファイル名にGASのファイル名を変更しておく必要がある」ということです。
実際にそのUIを呼び出したい場合、「.gsファイル」に記載されているHTMLのファイル名と「実際にあるHTMLファイル」の名前が一致していて初めて、GASを実行してUIを起動できるのです。

GPTは基本的に「Sidebar.html」のような名前で出力してくるので、GAS側もそのような名前に変更しておいてください。

両方のコードが添付し終わったら、「保存」→「実行」で完了です。
権限の承認フェーズがありますが、「無題のプロジェクトに移動」→「安全ではないページに移動」で全ての権限を承認してください。セキュリティのリスクはありません。

スプレッドシートに戻ると、「拡張機能」のボタンがある列に、新たに「請求」というボタンが出ていました。

このボタンをクリックすると、普段書式設定が出てくるところに、このような画面が出てきました。

これがGASで作ったUIになります。
ここで実際にGASに組み込んでいる定型文の変更や宛先の変更なども可能ですので、かなり視覚的にみやすくなりました！

実際にテストメールを送ってみると、このようなメールが届きました。

しっかりCCも入っているだけでなく、請求書のPDFも壊れず添付されていますね！
この状態で送られてくれば、自動化は成功です。

4.まとめ

いかがでしたか？
今回は業務効率化の有名ツール「GAS」の中でも、特にUIを作れる機能について取り上げました。
GASでUIを作ることでスプレッドシート内でできることがまた一段階レベルアップしますので、ぜひこの機会に作ってみてください！

ここまで読んでいただき、ありがとうございました。
noteでは初心者向けのAI活用法や業務効率化のコツを、わかりやすく発信しています。
是非他の記事もご覧の上、「いいね」とフォローをよろしくお願いします！
株式会社Canal AIでは様々な業務効率化を実現しています。
もっと何ができるか知りたい！他の業務効率化は何があるのか？といった質問はぜひ下記リンクからいつでもご相談ください！