Google Apps Scriptで綺麗な営業報告を自動化する方法【GAS】
GeminiアプリのCanvasによるインフォグラフィック、非常に綺麗なレイアウトでデータや文章から視覚化をしてくれる優れた機能です。このインフォグラフィックでテンプレートを作成し、日々の営業報告のデータを差し込んで自動で報告書を上司にメールすることが出来たら、営業に掛かる負担が相当量下がると思います。
そこで以前レスポンシブメールをGASで送るという記事の応用編として、このGeminiのインフォグラフィックで作ったテンプレを使って、営業報告自動化をしてみたいと思います。
リンク
目次
今回利用する素材
- ダッシュボード活用術 - Google Spreadsheet
- Gemini API
以前、AppSheetで利用した素材がちょうど営業向けのダミーデータになっているのでこれを活用します。顧客情報、商談情報、そして納品情報の3つが格納されており、これらを元にインフォグラフィックを作成し、メールに直接挿入して送信するという流れです。
毎回定型のテンプレートとしてインフォグラフィックのHTMLは利用するので、このテンプレートの調整が肝になります。
図：こんな感じでメールが送られます
手動で作るレイアウトメール
Gmailのメール作成画面上からも、企業がDMで送ってるような綺麗なメールは最近は作成できるようになっています。今回の取組は、これをHTMLのテンプレートで作成し、データを差し込み、GASで送信するものです。手動で作成する方法は以下の通りですが、自由にHTMLを組めるわけではないので、手動で作る場合は割と制限されます。
- Gmailで新規にメールを作成する
- 作成画面下部にあるレイアウトを選択をクリックする
- 表示されてるレイアウトを選択するか？自身でレイアウトを構築を選ぶ（今回はお知らせレイアウトを選んでみました）
- 用意されてるレイアウトのパーツを置き換えたり追加したりして、仕立て上げる
- 挿入をクリックする
- メールに差し込まれるので、送信をする
これで綺麗なレイアウトのメールが送られます。
図：レイアウトメールの新規作成
図：レイアウトの編集
事前準備
APIキーの取得
GeminiのAPIキーが必要です。以下のエントリーに独立してまとめています。課金されますので利用のしすぎには要注意。また課金されていない場合、学習に利用されてしまう恐れがあるので、きちんとGoogle Cloud上で課金アカウントとの紐付けなどをしておきましょう。
スクリプトプロパティに値を格納
前述までに取得しておいたGeminiのAPIキーについて、GASのスクリプトプロパティに値をセットします。
- apikey : Gemini APIのAPIキー
図：スクリプトプロパティに格納する
テンプレートのHTMLを生成する
調整上の注意点
通常のCanvasでインフォグラフィックスを作ると、tailwind.cssやcharts.jsといったライブラリを活用した非常に綺麗なHTMLが作成されます。Google SitesやPDF生成ならば問題ないのですが、これはGmail内では使えません。これらを含めて、以下の点に注意して、作成してもらう必要があります。
- 各パーツのCSSについてはタグ内のインラインで指定が必要です。
- メディアクエリを使って、各ブロックの表示をPC向けとモバイル向けで切り替える処置が必要です。
- チャート表示には静的な画像である必要があるので、「quickchart.io」を使ったチャート生成が必要（image-charts.comだとウォーターマークが邪魔になる）
- グラフに送るデータの日本語などはURLエンコードする必要がある
- またレイアウト組みは、divタグで組むのではなく古典的なtableタグで組む必要がある。
Canvasで作成する
プロンプトで調整する
まずは、実際のデータ(顧客データ、商談、納品)を今回ファイルとして添付し、以下のようなプロンプトでCanvasを使って初期テンプレートを作成してもらいます。その後、実際にこれをGmailで送ってみて、PCとモバイルで正常に動作するか？を調整したものを、HTMLファイルとして保存します。
各ブロックの間のマージンであったり、ブロックの幅の不均衡など細かい点が必ず出てくるので、このあたりを１つずつ調整を掛けて表示テストをしましょう。
図：テンプレートをGeminiで作成中の様子
あなたは腕利きの営業マンです。アップロードした3つのPDFファイルを元に、毎月の営業報告レポートを上司に提出する必要があります。 以下の要件に従って、インフォグラフィックでレポートを作成してください。 ただしこのHTMLは、後でGASでMailAppで送る為に利用するので、出力形式の指定を守って生成してください。 #アップロードしてる3つのPDF - 顧客リスト：顧客の一覧。ID列が顧客に割り当てられた固有のIDです。 - 商談 : 顧客との日々の商談情報とその内容。顧客IDが顧客リストのIDとリンクしている。またステータスは商談の進捗具合。 - 納品 : 顧客に納品された商品の一覧。顧客IDが顧客リストのIDとリンクしている。 #報告すべき指定の年月 2025/7/1〜2025/7/31まで #必ず追加すべき報告内容 - 指定期間内における商談の進捗内容の要約 - 指定期間内における商談内容の要約 - 前年同月比の商談回数比較 - 前年同月比の納品商品の金額比較グラフ（棒グラフ） - 商談している対象顧客のジャンル別のグラフ（円グラフ） - 商談している対象顧客の住所からわかる都道府県別のグラフ（横棒グラフ） - 右上に報告者として「帆桁歩下丸」という名前を入れてください。 #出力形式の指定 ## HTMLとデザイン - PCとスマートフォンの両方で最適に表示されるようにしてください。 - CSSの メディアクエリ (@media screen and (max-width: 600px)) を使用し、画面幅が600px以下の場合は、横並びの要素が縦並びになるようにレイアウトを調整してください。 - divレイアウトではなく、tableタグを使用したレイアウトを基本としてください。 - CSSは、<style>タグ内に記述するレスポンシブ対応部分を除き、インライン形式で各HTMLタグに直接記述してください。 ## 出力上の指定内容 - 最終的な成果物は、単一のHTMLファイルとしてください。 - グラフはすべて QuickChart.io を使用して、静的な画像（<img>タグ）として埋め込んでください。 - JavaScriptを使用した動的なグラフ描画や、他の画像生成サービスは使用しないでください。 - グラフのURLに含まれる日本語のラベルは、URLエンコードしてください。 - 全体的に清潔感のある、ビジネスレポートとして適切なデザインにしてください。じ
最終的に採用したHTMLテンプレート
最終的に色々な微調整を加えて完成させたHTMLは以下のようなものになりました。PCでもモバイルでも正常に動作します。値はとりあえずのものであるので、この時点では気にする必要性はありません。
このHTMLデータは、GASのスクリプトエディタにて、index.htmlを作成し貼り付けておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025年上半期 営業活動報告書</title>
<style>
/* スマートフォン用のレスポンシブ対応スタイル */
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
padding: 16px !important;
}
.summary-card,
.summary-content {
width: 100% !important;
display: block !important;
margin-bottom: 16px !important;
}
.spacer {
display: none !important;
}
.header-title {
font-size: 22px !important;
}
.header-info {
font-size: 12px !important;
}
.graph-cell {
display: block !important;
width: 100% !important;
margin-bottom: 16px !important;
box-sizing: border-box;
/* 追加 */
}
.graph-cell:last-of-type {
margin-bottom: 0 !important;
}
.graph-row-1 {
padding-bottom: 16px !important;
}
.graph-row-2 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
</style>
</head>
<body
style="margin: 0; padding: 0; font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; background-color: #f3f4f6;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #f3f4f6;">
<tr>
<td align="center">
<table class="container" width="650" border="0" cellspacing="0" cellpadding="24"
style="max-width: 650px; width: 100%; background-color: #ffffff; border-radius: 16px; margin: 16px 0;">
<!-- ヘッダー -->
<tr>
<td style="border-bottom: 2px solid #2563eb; padding-bottom: 16px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<h1 class="header-title"
style="margin: 0; font-size: 28px; font-weight: bold; color: #1f2937;">
月次営業活動報告書</h1>
<p style="margin: 4px 0 0; font-size: 16px; color: #6b7280;">2025年上半期 (1月-6月)
</p>
</td>
<td align="right" class="header-info"
style="font-size: 14px; color: #374151; white-space: nowrap;">
<p style="margin: 0; font-weight: bold;">報告者: 山田太郎</p>
<p style="margin: 4px 0 0; font-size: 12px; color: #6b7280;">2025/07/01</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- サマリーカード -->
<tr>
<td style="padding-top: 24px; padding-bottom: 8px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="summary-card" width="32%"
style="background-color: #eff6ff; border-left: 4px solid #3b82f6; padding: 16px; border-radius: 0 8px 8px 0;">
<h3
style="margin: 0 0 8px 0; font-size: 16px; font-weight: bold; color: #1e3a8a;">
総商談件数</h3>
<p style="margin: 0; font-size: 32px; font-weight: bold; color: #2563eb;">
48<span style="font-size: 16px; margin-left: 8px;">件</span></p>
<p style="margin: 8px 0 0; font-size: 12px; color: #6b7280;">新規リード獲得: 6件</p>
</td>
<td class="spacer" width="2%"></td>
<td class="summary-card" width="32%"
style="background-color: #f0fdf4; border-left: 4px solid #22c55e; padding: 16px; border-radius: 0 8px 8px 0;">
<h3
style="margin: 0 0 8px 0; font-size: 16px; font-weight: bold; color: #166534;">
当期間納品金額</h3>
<p style="margin: 0; font-size: 32px; font-weight: bold; color: #16a34a;">
¥93,190</p>
<p style="margin: 8px 0 0; font-size: 12px; color: #6b7280;">前年同期間比: <span
style="font-weight: bold; color: #16a34a;">+1.4%</span></p>
</td>
<td class="spacer" width="2%"></td>
<td class="summary-card" width="32%"
style="background-color: #fefce8; border-left: 4px solid #eab308; padding: 16px; border-radius: 0 8px 8px 0;">
<h3
style="margin: 0 0 8px 0; font-size: 16px; font-weight: bold; color: #854d0e;">
活動ハイライト</h3>
<p style="margin: 0; font-size: 14px; color: #374151; line-height: 1.6;">
期間内に2件の新規成約を獲得(顧客ID: 64, 6)。特に建設業界での成功事例は横展開の足がかりとなります。</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 活動内容サマリー -->
<tr>
<td style="padding-top:16px; padding-bottom: 24px;">
<h2 style="margin: 0 0 16px 0; font-size: 22px; font-weight: bold; color: #1f2937;">活動内容サマリー
</h2>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="summary-content" width="49%"
style="background-color: #f9fafb; border-radius: 8px; padding: 20px; vertical-align: top;">
<h3
style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: #374151;">
商談進捗の要約</h3>
<ul
style="margin: 0; padding-left: 20px; color: #4b5563; font-size: 14px; line-height: 1.8;">
<li><span style="font-weight: bold; color: #16a34a;">成約：</span>2件（顧客ID: 64,
6）利用開始手続きが完了。</li>
<li><span style="font-weight: bold; color: #2563eb;">交渉：</span>4件（顧客ID: 12,
17, 44, 79）価格や納期を最終調整中。</li>
<li><span
style="font-weight: bold; color: #eab308;">提案：</span>8件の顧客に対し、具体的な提案とデモを実施。
</li>
<li><span style="font-weight: bold; color: #dc2626;">失注/休眠：</span>3件（顧客ID:
5, 9, 19）予算都合やプロジェクト凍結が原因。</li>
</ul>
</td>
<td class="spacer" width="2%"></td>
<td class="summary-content" width="49%"
style="background-color: #f9fafb; border-radius: 8px; padding: 20px; vertical-align: top;">
<h3
style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: #374151;">
所感・今後のアクション</h3>
<p style="margin: 0; color: #4b5563; font-size: 14px; line-height: 1.8;">
建設業・飲食業を中心に多くの商談機会を得られました。成約した顧客ID64（有限会社
松尾アーキテクト）は良い成功事例であり、他社への展開に活かしていきます。失注・休眠案件については、定期的な情報提供を行い、関係を維持します。
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- グラフセクション -->
<tr>
<td class="graph-row-1" style="padding-bottom: 24px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="graph-cell" width="48%"
style="padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; vertical-align: top;">
<h3
style="margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #374151;">
前年同期間比 - 納品金額</h3>
<img src="https://quickchart.io/chart?c=%7Btype%3A%27bar%27%2Cdata%3A%7Blabels%3A%5B%272024%E5%B9%B4%E4%B8%8A%E5%8D%8A%E6%9C%9F%27%2C%272025%E5%B9%B4%E4%B8%8A%E5%8D%8A%E6%9C%9F%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27%E7%B4%8D%E5%93%81%E9%87%91%E9%A1%8D%27%2CbackgroundColor%3A%5B%27rgb(107%2C%20114%2C%20128)%27%2C%27rgb(34%2C%20197%2C%2094)%27%5D%2Cdata%3A%5B91934%2C93190%5D%7D%5D%7D%2Coptions%3A%7Blegend%3A%7Bdisplay%3Afalse%7D%2Cscales%3A%7ByAxes%3A%5B%7Bticks%3A%7BbeginAtZero%3Atrue%7D%7D%5D%7D%7D%7D"
alt="納品金額比較グラフ" style="width: 100%; height: auto; max-width: 100%;">
</td>
<td class="spacer" width="4%"></td>
<td class="graph-cell" width="48%"
style="padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; vertical-align: top;">
<h3
style="margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #374151;">
商談顧客のジャンル</h3>
<img src="https://quickchart.io/chart?c=%7Btype%3A%27pie%27%2Cdata%3A%7Blabels%3A%5B%27%E5%BB%BA%E8%A8%AD%E6%A5%AD%27%2C%27%E9%A3%B2%E9%A3%9F%E6%A5%AD%27%2C%27IT%27%2C%27%E8%A3%BD%E9%80%A0%E6%A5%AD%27%2C%27%E6%95%99%E8%82%B2%27%2C%27%E5%B0%8F%E5%A3%B2%E6%A5%AD%27%2C%27%E4%B8%8D%E5%8B%95%E7%94%A3%27%2C%27%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E6%A5%AD%27%2C%27%E5%8C%BB%E7%99%82%27%5D%2Cdatasets%3A%5B%7Bdata%3A%5B5%2C5%2C4%2C4%2C4%2C3%2C2%2C2%2C2%5D%2CbackgroundColor%3A%5B%27rgb(239%2C68%2C68)%27%2C%27rgb(249%2C115%2C22)%27%2C%27rgb(59%2C130%2C246)%27%2C%27rgb(22%2C163%2C74)%27%2C%27rgb(139%2C92%2C246)%27%2C%27rgb(234%2C179%2C8)%27%2C%27rgb(217%2C70%2C239)%27%2C%27rgb(14%2C165%2C233)%27%2C%27rgb(99%2C102%2C241)%27%5D%7D%5D%7D%2Coptions%3A%7Blegend%3A%7Bposition%3A%27right%27%2Calign%3A%27start%27%7D%2Cplugins%3A%7Bdoughnutlabel%3A%7Blabels%3A%5B%7Btext%3A%2731%27%2Cfont%3A%7Bsize%3A20%7D%7D%2C%7Btext%3A%27Total%27%7D%5D%7D%7D%7D%7D"
alt="顧客ジャンルグラフ" style="width: 100%; height: auto; max-width: 100%;">
</td>
</tr>
</table>
</td>
</tr>
<!-- 都道府県別グラフ -->
<tr>
<td class="graph-row-2" style="padding-bottom: 24px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="graph-cell"
style="padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; vertical-align: top;">
<h3
style="margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #374151;">
商談顧客のエリア（都道府県別）</h3>
<img src="https://quickchart.io/chart?c=%7Btype%3A%27horizontalBar%27%2Cdata%3A%7Blabels%3A%5B%27%E5%A4%A7%E9%98%AA%E5%BA%9C%27%2C%27%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C%27%2C%27%E6%84%9B%E7%9F%A5%E7%9C%8C%27%2C%27%E6%9D%B1%E4%BA%AC%E9%83%BD%27%2C%27%E5%9F%BC%E7%8E%89%E7%9C%8C%27%2C%27%E5%85%B5%E5%BA%AB%E7%9C%8C%27%2C%27%E7%A6%8F%E5%B2%A1%E7%9C%8C%27%2C%27%E5%8C%97%E6%B5%B7%E9%81%93%27%2C%27%E4%BA%AC%E9%83%BD%E5%BA%9C%27%2C%27%E5%BA%83%E5%B3%B6%E7%9C%8C%27%2C%27%E5%8D%83%E8%91%89%E7%9C%8C%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27%E5%95%86%E8%AB%87%E9%A1%A7%E5%AE%A2%E6%95%B0%27%2CbackgroundColor%3A%27rgb(139%2C92%2C246)%27%2Cdata%3A%5B5%2C4%2C3%2C3%2C2%2C2%2C2%2C2%2C1%2C1%2C1%5D%7D%5D%7D%2Coptions%3A%7Blegend%3A%7Bdisplay%3Afalse%7D%2Cscales%3A%7BxAxes%3A%5B%7Bticks%3A%7BbeginAtZero%3Atrue%2CstepSize%3A1%7D%7D%5D%7D%7D%7D"
alt="顧客都道府県別グラフ" style="width: 100%; height: auto; max-width: 100%;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
コードと実行結果
ソースコード
冒頭の各種グローバル変数に必要な値を書き込んで、geminiReporter関数を実行します。スクリプトトリガーで使うことも想定し、スプシのデータはopenByIdで指定しています。
index.htmlをテンプレートとして取得しておき、プロンプト内で他のスプシデータ等と共に埋め込んでおきます。細かな制約や指示をプロンプトで事細かに指定して、レスポンスはHTML形式なので、直接bodyとしてMailAppで送信を行います。
送信プロンプトの量を削減する為に、startdateとenddateの値でもって、事前に商談や納品のデータをフィルタしたものを送ったほうが尚良いと思います（Geminiに日付判定させるのは曖昧な場合もある為）。
//Geminiへリクエスト
const endpoint = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=";
//読み書き先スプシのID
const ssid = "読み書き先のスプレッドシートのIDを入れる";
//送信先メールアドレス
const to = "ここに送信先メールアドレスを入れる"
//報告者名の指定
const reporter = "山田小五郎"
//集計期間の開始日付と終了日付の指定
const startdate = "2025/07/01";
const enddate = "2025/07/31";
//ファイル名から特定しGeminiに読み取らせる
function geminiReporter() {
//プロパティの値を取得する
let prop = PropertiesService.getScriptProperties()
let apikey = prop.getProperty("apikey");
//リクエストURLを構築する
let url = endpoint + apikey;
//スプレッドシートのデータを取得
let ss = SpreadsheetApp.openById(ssid);
let kokyaku = ss.getSheetByName("main").getRange("A1:E").getValues()
let syoudan = ss.getSheetByName("商談").getRange("A1:E").getValues();
let nouhin = ss.getSheetByName("納品").getRange("A1:G").getValues();
//HTMLテンプレートを取得する
let template = HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();
//プロンプトを構築する
let prompt = `あなたは腕利きの営業マンです。送信データを元に、毎月の営業報告レポートを上司に提出する必要があります。以下の要件に従って、インフォグラフィックでレポートを作成してください。レポートは、指定のHTMLテンプレートを元に作成し、集計した値等を該当箇所に差し込んで作成し、HTML形式で出力が必要です。
#重要事項
- 出力事例に従ったデータだけを返してください。余計な解説や説明は一切不要です。
- 送信データの１行目はヘッダー行で、各列の名称が入っています。
- 送信データにおいて、レポート作成対象となるデータの期間で指定したデータのみを対象に集計し、報告対象としてください。
#作成するにあたっての重要事項
- HTML作成は、アップロードした指定のHTMLテンプレートを土台にし、該当する値を差し込んで作成してください
- 指定のHTMLテンプレートのレイアウトを改変しないでください
- 指定のHTMLテンプレートのインラインのCSSを改変しないでください
- スマホ対応の為に冒頭のStyleにてメディアクエリを使ってるので、破壊的変更はしないでください。
- グラフ作成はquickchart.ioを利用しています
- 報告者の欄は、「${reporter}」という名前をいれるようにしてください。
#送信データ
##顧客リスト
${kokyaku}
##商談
${syoudan}
##納品
${nouhin}
#指定のHTMLテンプレート
${template}
#各送信データの列の構造
##顧客リスト
- ID列 : 顧客単位に割り振られた固有のID（重複なし）
- 顧客名 : 対象の顧客の会社名
- 住所 : 対象の顧客の会社の所在地の住所
- 電話番号 : 対象の顧客の会社の電話番号
- ジャンル : 対象の顧客の主たる業種名
##商談
- ID : 商談ごとに割り振られたユニークなID（重複なし）
- 顧客ID : 商談した対象顧客のID。顧客リストのIDとリンクしています。
- 訪問日 : 商談をした日付（yyyy-mm-ddの形式になってる）
- 打ち合わせ内容 : 商談時の打ち合わせの内容
- ステータス : 現在の商談進捗ステータス。プルダウン選択でいくつかのパターンがある
##納品
- ID : 納品ごとに割り振られたユニークなID（重複なし）
- 顧客ID : 納品した対象顧客のID。顧客リストのIDとリンクしています。
- 納品日 : 納品をした日付（yyyy-mm-ddの形式になってる）
- 商品名 : 納品した商品の名称
- 単価 : 納品した商品の単価
- 数量 : 納品した商品の数量
- 価格 : 単価 * 数量で計算した納品金額合計
#レポート作成対象となるデータの期間
- 開始日付:${startdate}
- 終了日付:${enddate}
#集計対象
- 総商談件数の集計値は、報告すべき指定の年月の期間の間の対象レコード数（訪問日が基準）
#出力データ
指定のHTMLテンプレートを土台にして各種値を差し込んだものを、HTML形式で返してください。
#集計ルールの再確認
HTML形式での最終出力前に、必ず以下の内容を再確認してから、集計値に誤りが無いか？誤りがあれば再集計して反映をしてください。
- 集計期間が一致しているかどうか？
- 集計すべき列の値であるかどうか？
- 集計結果の値が確実に、報告すべき指定の年月の期間内に合致した内容であるか？
- 最終出力のHTMLデータの構造でオカシナ点があった場合には、最初からやり直してください。
`;
//payloadを構築する
let payload = {
'contents': {
'parts': [
{
'text': prompt
}
]
},
'generation_config': {
'temperature': 0,
'topP': 0,
'maxOutputTokens': 14000
}
};
//リクエストオプション
let options = {
'method': 'POST',
'contentType': 'application/json',
'payload': JSON.stringify(payload)
};
//Geminiにリクエスト
let response = UrlFetchApp.fetch(url, options);
let json = JSON.parse(response.getContentText());
//結果を受け取る
if (json && json.candidates && json.candidates.length > 0) {
let result = json.candidates[0].content.parts[0].text;
//余計な文字を除外する
let body = result.replace("```json","");
body = body.replace("***","");
body = body.replace("```","");
body = body.replace("```html","");
body = body.replace("\n","");
body = body.replace(/^html/, '');
//レスポンシブメールの送信
MailApp.sendEmail({
to: to,
subject: "インフォグラフィックメールテスト",
htmlBody: body,
name: "営業報告書",
noReply: true
});
//処理完了
return true;
} else {
return false;
}
}
実行結果
無事に集計が成功し、データの差し込みが完了すると、index.htmlのテンプレートに指定期間の値が集計されたり、分析結果の内容が変わると思います。そしてこのレイアウトのままメールが届くので、相手はいちいちドキュメントを開くことなくメール上で直接的に報告書を確認することが可能です。
応用することで、数々のシステムの通知メールをこのように綺麗なインフォグラフィック形式で置き換えて送ることができるので、簡素でつまらない通知メールが、綺麗で華やかなメールに生まれ変わります。
まだ、多少おかしな点があるものの、これらはコード内のプロンプトで事細かに指定してあげれば、コントロールが可能だと思います。
図：集計期間を変えて実行してみた
図：スマートフォン表示
注意点
初期テンプレート作成時はGeminiアプリ上での作業なので、スプレッドシートをPDF化したものをベースに作成しています。しかし、ここで生成された情報を細かく見てみると、集計結果が明らかに間違ってるケースが多く、これは「PDFのレイアウトが生成AIから見たら読みにくいデータ」ということで、読み取りミスをしている結果です。
過去他の事例でも同様の事がありましたが、一見すると非常に整った表形式に見えても、PDFは非常に複雑な構造で実現をしている為、集計という作業に大きな影響を与えることがままあります。よって、実際にアプリで使う場合にはPDFを用いるのではなく「配列データやCSVデータ」という形でGeminiに渡してあげないと、折角の報告書が間違ってるということが起こりかねません。
故に今回GASからのGeminiへの依頼は、スプシのデータを配列そのままで送り込んで上げています。
