ChatGPTに聞きながら、仕組みを作ってみた: 中小企業診断士佐川博樹のブログ

これをやってみようかと思っている。ちょっと小さいので、クリックして原寸表示で見てください。

実は基本機能でできる

何をしたいかって要は、Google Spreadsheetにあるデータを使って、Gmailを自動で配信しようと思うのです。

実はこれ、Googleの何らかのサブスクリプションに登録しているとGmailの機能でできたりするのだけど、活用できるITリテラシの高い人はサブスクリプションに入るかもしれないけど、そうでない人は入らない。

となると、無料でできる範囲を探りたくなる(笑)。中小零細企業はそういうものです。

で、ちなみに、GASでGmailを送ろうとすると、1日100通の制限があるようです。

プログラムも頑張れば書けるけど

一応、昔はプログラマーでもあったので、頑張れば書けるけど、そんな時間は正直無い。
なので、ChatGPTにプログラムは書いてもらうことにする。

使う仕組みは、

Google Spreadsheet
Google App Script
Gmail

の3つです。

まずはスプレッドシートを用意する

まずはスプレッドシートを用意します。こんな感じ。

中のデータは、ChatGPTに5人分、この項目で作って、とお願いしたら10秒で完成。
まあ、後でテストで使うので、メールアドレスは私が持っているものに書き換えておくことにする。

仕様書を作る

つづいて、ChatGPTに命令するための仕様書を作ります。プロンプトってやつですね。

この書き方は、「ChatGPTと一緒に仕事効率化アプリをつくる方法」という本を参考にさせてもらった。

だいぶ詳しく書いたつもりだけど、どうだろうか。

ChatGPTに食わせてみる

この仕様書をChatGPTに食わせるとコードが2つ出てくる。

ひとつはindex.html。

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
/* 簡単なスタイル設定 */
.form-group { margin-bottom: 15px; }
label { display: block; font-weight: bold; }
input[type="text"], textarea { width: 100%; padding: 8px; }
button { margin: 5px; padding: 8px 16px; }
</style>
</head>
<body>
<div>
<div class="form-group">
<label for="emailSubject">メールタイトル</label>
<input type="text" id="emailSubject" name="emailSubject">
</div>
<div class="form-group">
<label for="emailBody">メール本文</label>
<textarea id="emailBody" name="emailBody" rows="8"></textarea>
</div>
<div class="form-group">
<label for="emailLabel">ラベル</label>
<input type="text" id="emailLabel" name="emailLabel">
</div>
<button onclick="sendEmail()">送信</button>
<button onclick="cancel()">キャンセル</button>
</div>

<script>
// 送信ボタンが押された時の処理
function sendEmail() {
const emailSubject = document.getElementById('emailSubject').value;
const emailBody = document.getElementById('emailBody').value;
const emailLabel = document.getElementById('emailLabel').value;

// エラーハンドリング
if (!emailSubject) {
alert('メールタイトルを入力してください');
return;
}
if (!emailBody) {
alert('本文を入力してください');
return;
}

// 確認メッセージ
if (confirm('本当に送信しますか？')) {
google.script.run.withSuccessHandler(() => {
alert('メールを送信しました');
document.getElementById('emailSubject').value = '';
document.getElementById('emailBody').value = '';
document.getElementById('emailLabel').value = '';
}).sendEmails(emailSubject, emailBody, emailLabel);
}
}

// キャンセルボタンが押された時の処理
function cancel() {
if (confirm('本当に終了しますか？')) {
google.script.host.close();
}
}
</script>
</body>
</html>

もうひとつは、code.gs。

// 初期表示
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}

// メール送信処理
function sendEmails(subject, body, label) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sending');
const data = sheet.getDataRange().getValues();

// 1行目はヘッダーなので除外
const headers = data[0];
const emailIndex = headers.indexOf("メールアドレス");
const nameIndex = headers.indexOf("氏名");
const positionIndex = headers.indexOf("役職");
const companyIndex = headers.indexOf("会社名");
const departmentIndex = headers.indexOf("部署");
const commentIndex = headers.indexOf("コメント");

for (let i = 1; i < data.length; i++) {
const row = data[i];
let personalizedSubject = subject;
let personalizedBody = body;

// テンプレート内の変数を置き換え
personalizedSubject = personalizedSubject.replace(/\$氏名/g, row[nameIndex])
.replace(/\$役職/g, row[positionIndex])
.replace(/\$会社名/g, row[companyIndex])
.replace(/\$部署/g, row[departmentIndex])
.replace(/\$コメント/g, row[commentIndex]);
personalizedBody = personalizedBody.replace(/\$氏名/g, row[nameIndex])
.replace(/\$役職/g, row[positionIndex])
.replace(/\$会社名/g, row[companyIndex])
.replace(/\$部署/g, row[departmentIndex])
.replace(/\$コメント/g, row[commentIndex]);

// Gmail送信
GmailApp.sendEmail(row[emailIndex], personalizedSubject, personalizedBody, {
labelIds: [label]
});
}
}

これらが、1分も使わずに出てくる。プログラマの仕事がなくなっちゃうな。
ま、逆手にとって、エンジニアがこれを活用すれば、コーディング効率は圧倒的に上がりそうでもある。

実行の準備作業

さて、では、実行環境を整えていく。といっても、３つだけである。
ひとつは、Google Spreadsheet内のApps Scriptのところにindex.htmlを貼り込む作業。
もうひとつは、同じくGoogle Spreadsheet内のApps Scriptのところにcode.gsを張り込む作業。
最後は、デプロイ作業（実際に仮実行してみる）。この際、初めて実行するときはGoogleから認証を求められます。

では、ひとつずつやってみよう。
先ほど用意したGoogle Spreadsheet。データが入っているシートの名前を「Sending」と変えておく。
プログラム内にこのシートからデータを読み込むように指定しているので。

さらに、上部メニューの[拡張機能]→[Apps Script]と選択すると、Apps Scriptの画面に切り替わる（新しいタブが表示される）。
一応、アプリの名前を付けてみた。

画面左上の方にある[ファイル]の横に[＋]ボタンがあるので、これを押して、HTMLを選択する。

無題と表示されるので、[ index ]に書き換えると、初期のHTMLが画面右側に表示される。ここをいったん全部削除。
そして、さっき、ChatGPTが出力してくれたindex.htmlファイルをコピーして貼り付ける。
貼り終わったら、念のため、実行ログの隣にある「プロジェクトを保存」のアイコンをクリックして保存する。

次に、code.gsも同様にして貼り付ける。
先ほどはHTMLを選んだが、今度は、[＋]→スクリプトを選択して、codeに名前を変更する。正直この名前は何でもOKだと思う。
そして、ChatGPTが出力してくれた、code.gsの中身に入れ替える。先ほどのindex.htmlと同じである。

これで実行の準備は整った。デプロイ（実際の実行）に移る。

はじめての実行

ということで、画面上部、右の方にある[デプロイ]から[新しいデプロイ]を選ぼう。

すると、新しいデプロイの画面が出てくるので、歯車の設定ボタンを押して[ウェブアプリ]を選ぼう。

選ぶと画面右側に設定フォームが出てくる。ここに必要な項目を入力する。まあ、適当で大丈夫。
ただし、アクセスできるユーザーというところは、念のために自分のみにしておきましょう。

完了すると「デプロイを完了した」というようなメッセージが出てくる。
そこに、URLがあるので、それをクリックすると実行できる。

アクセス承認の画面が出る場合あり

このGASのデプロイをやるとき、Spreadsheetとの連携が初めてだと、「Google hasn't verified this app」という画面が表示される。
この画面が出てきたときには、「Advanced」というリンクをクリックして、認証作業をする必要がある。

ただし、これは1回やればその後は聞かれない。

URLをクリックして実行

先ほどのデプロイを完了したという画面にあった、URLをクリックしてみると、

この画面が表示される。おお、実行されている感がする。
メールタイトル、メール本文、ラベルというところに情報をいろいろ入れて、送信ボタンを押せば、本当にメールが送られる。
既にテスト済みである(笑)。

プログラムコードは1行も触っていないし、HTMLも1行も手で書いてない。が、きちんと実行するプログラムができている。
恐ろしいことだ。

体裁を整えておく

とはいえ、見栄えがあまりにもひどいと思うので、その辺はHTMLやCSSを少し調整しようかと思う。
使用方法などもまとめて、このプログラムをこのブログ内で整理して公開する予定である。

最後に

こうした小さなプログラムでも役に立つことはあるだろうから、またアイデアを考えて、ChatGPTとともに何かを作ってみたい。
それを積み上げていって、クライアントさんにも使ってもらい、IT化、DXの一助にしてもらえれば何より。

中小企業診断士佐川博樹のブログ

2024/10/26