開発部門（プロダクト技術本部）の高玉です。

BIGLOBEではオフィス生産性ツールにGoogle Workspaceを採用していて、普段のコミュニケーションはGoogle Chatを活用しています。また、Apps Scriptを使った業務効率化も盛んです。

Apps Scriptから生成AIを呼び出せるようになったことで、さらに業務を楽しく効率的にできるのでは？と考え、2024年9月に社内で「Apps Script x AI」と題した勉強会を開催しました。

この記事では、勉強会向けに作ったハンズオンを紹介します。プログラミング初心者の方が、安心して作業できるように作ったハンズオンです。ぜひ一緒にアプリ開発を楽しみましょう！

Google Chatアプリ「ていねいちゃん」作成ハンズオン

Google Chatアプリ「ていねいちゃん」作成ハンズオン

こんにちは！今日は、Google Chatアプリ「ていねいちゃん」を一緒に作ってみましょう。ていねいちゃんは、カジュアルな言葉を丁寧な敬語に変換してくれるアプリです。変換には生成AIのGemini APIを利用しています。

このハンズオンは、プログラミング初心者でGoogle Workspaceに興味がある方、そして生成AIのAPI利用に興味があり簡単なアプリ開発を体験したい方を対象としています。

実は、同じ機能であればGem（Geminiのカスタマイズバージョン）でも実現できますが、このハンズオンでは、よりカスタマイズ性が高く、他のGoogle Workspaceサービスとの連携も容易なApps Scriptを使って構築する方法を学びます。初めての方でも迷わないように、詳しく手順を説明します。安心して進めてください！

ステップ1: Google Cloudコンソールの準備

まず、Google Cloudコンソールでアプリに必要なAPIを有効にします。

Google Cloud コンソールの新規プロジェクト作成画面にアクセスし、Googleアカウントでログインします。
プロジェクト名に「teinei-chan」と入力し、[作成] ボタンをクリックします（別のプロジェクト名でも大丈夫です）。
プロジェクトが作成されるまで待ちます。作成されると通知アイコンでプロジェクトを選択できます。プロジェクトを選択したら、プロジェクト番号をクリップボードにコピーします。
左上のナビゲーションメニューから「APIとサービス」→ 「有効なAPIとサービス」を選択します。
「＋ APIとサービスを有効にする」を押して、「Google Chat API」を検索し [有効にする] ボタンをクリックします。

OAuth同意画面を設定する

次に、アプリが利用者にアクセス権を求めるときに表示される同意画面を作成します。

「APIとサービス」の左側のメニューから「OAuth同意画面」を選択します。
「内部」を選択して、[作成] ボタンを押します（社内に限定して公開するためです。後から変更する場合は公開設定を変更する必要があり、場合によってはGoogleの審査が必要になる可能性がありますのでご注意ください）。
アプリ名は「ていねいちゃん」、ユーザーサポートメールとデベロッパーの連絡先情報にはそれぞれ自分のメールアドレスを入力します。
スクロールして「保存して次へ」をクリックします（他のフィールドは空欄でOKです）。

ステップ2: Apps Script スクリプトエディターでコードを書く

次に、Google Apps Scriptで実際のアプリの動作を作成します。

https://script.google.com/home/start?hl=ja にアクセスして、画面一番下にあるチャットアプリをクリックして新しいプロジェクトを作成してください。プロジェクト名は「TeineiChan」とします。
チャットアプリ
スクリプトエディターが表示されたら、左メニューから「プロジェクトの設定」を選びます。
Google Cloud Platform（GCP）プロジェクトの下にある [プロジェクトを変更] ボタンを押し、Google Cloudプロジェクト番号（先ほど作成したプロジェクトの番号）を入力します。これは、Apps ScriptプロジェクトとGoogle Cloudプロジェクトを紐付けることで、Apps ScriptからGoogle Cloudのサービス（Google Chat API、Gemini APIなど）を利用できるようにするためです。
プロジェクト番号を設定
次に、スクリプトエディターの「デプロイ」→「デプロイをテスト」をクリックし、ヘッドデプロイIDをメモします。このIDは、Google Chat APIの設定で、どのApps Scriptを実行するかを指定するために使用します。

ステップ3: Google Chat API の設定

Google Cloudコンソールで、Google Chat APIを設定します。

Google Cloud コンソールに戻り、Google Chat APIを検索して [管理] ボタンを押します。
「構成」タブで、以下の情報を入力します。
- アプリ名: 「ていねいちゃん」
- アバターURL: https://developers.google.com/chat/images/quickstart-app-avatar.png
- アプリの説明: 「敬語に変換します。」
インタラクティブ機能は「1:1のメッセージを受信する」をチェックして、ダイレクトメッセージで使えるようにします（Chatアプリを複数人で使う場合には「スペースとグループの会話に参加する」をチェックしますが、今回は使いません）。
接続設定に進み、「Apps Scrip」を選択し、先ほど取得したヘッドデプロイIDを入力します。

公開設定する

Google Chat APIの「構成」タブの一番下にある「公開設定」で、「このチャットアプリを一部のユーザーに公開する」を選択し、自分のGoogleアカウントを追加します（これにより、アプリを自分でテストできるようになります）。[保存] ボタンを押します。

これでGoogle Chat APIの設定は完了です！

ステップ4: 動作確認

Google Chatで「ていねいちゃん」と会話してみましょう。

Google Chatを開き、左上にある「チャットの新規作成」を押して「ていねいちゃん」を検索し、チャットを開始しましょう。
メッセージを送信すると、最初はオウム返しでメッセージが返ってくることを確認してください。

ステップ5: Geminiでテキストを生成する

次に、メッセージを敬語に変換するコードを追加します。

Gemini APIを有効にしてAPIキーを作成する

まず、Gemini APIを利用するのに必要なAPIキーを作成します。このAPIキーを知っている人は誰でもこのAPIを使えるようになります。絶対に公開しないでください。

Google Cloudコンソールに戻り、左上のナビゲーションメニューから「APIとサービス」→ 「有効なAPIとサービス」を選択します。
「＋ APIとサービスを有効にする」を押して、「Gemini API」を検索し [有効にする] ボタンをクリックします。
「APIとサービス」の左側のメニューから「認証情報」を選択します。
「＋認証情報を作成」を押して「APIキー」を選択します。
作成されたAPIキーをクリップボードにコピーします。
認証情報を作成

スクリプトプロパティにAPIキーを保存する

APIキーはできるだけ秘匿したいです。スクリプトに直接記述すると、スクリプトの参照権限を持っている人に丸見えになってしまいます。スクリプトプロパティを使うことで、編集権限を持っている人にのみ見えるようにします。

スクリプトエディターに戻り、左側のメニューから「プロジェクトの設定」を選びます。
下にスクロールして [スクリプトプロパティを追加] ボタンを押して、新しいプロパティを入力できるようにします。
プロパティに「API_KEY」と入力し、値にコピーしたAPIキーをペーストします。
最後に [スクリプトプロパティを保存] ボタンを押します。
スクリプトプロパティを保存

コードを追加する

左メニュー「エディタ」を選択し、コード.gsに次のコードを追加します。

 function generateText_(text) {
   const apiKey = PropertiesService.getScriptProperties().getProperty('API_KEY');
   if (!apiKey) throw Error(`API_KEY がスクリプトプロパティに保存されていません。`);
   const url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=' + apiKey;
   const data = {
     contents: [{
       parts: [{ text }]
     }]
   };
   const response = UrlFetchApp.fetch(url, {
     method: 'POST',
     contentType: 'application/json',
     payload: JSON.stringify(data),
     muteHttpExceptions: true,
   });
   if (response.getResponseCode() !== 200) {
     throw new Error(response.getContentText());
   }
   const json = JSON.parse(response.getContentText());
   return json.candidates[0].content.parts[0].text;
 }

 function testGenerateText() {
   const input = 'BIGLOBEについて教えて';
   const output = generateText_(input);
   console.log(output);
 }

コードを保存すると、エディタ上部の「実行する関数」に「testGenerateText」が表示されます。「実行」を押すと、Apps Scriptが使用する権限の確認プロセスがはじまります。権限を許可すると、実行ログに結果が表示されます。
保存した関数を実行

もし Generative Language API has not been used in project <あなたのプロジェクト番号> before or it is disabled. と表示される場合、Gemini APIが有効になっていません。手順を見直して、有効にしてください。

ちなみにApps Scriptでは、generateText＿のように、関数名の最後にアンダースコアをつけると、プラベート関数として扱われます。プライベート関数はエディタから直接実行できません（実行する関数、に表示されません）。関数が増えても、どの関数を実行すればいいんだっけ？と迷わなくなるので、ぜひ活用してください。

ステップ6: 敬語変換機能を追加

いよいよ丁寧な言い回しに変換する機能を追加します。

左メニュー「エディタ」を選択し、コード.gsに次のコードを追加します。

 function makePolite_(message) {
   const prompt = `次のカジュアルな表現を、ビジネスシーンで使える丁寧な敬語に変換してください。二重敬語は禁止です。できるだけ簡潔に、敬意を込めた言い回しを使ってください。JTF日本語標準ガイドに従ってください。

   ${message}`;

   return generateText_(prompt);
 }

また、onMessage 関数はすべて削除して、次の新しい onMessage 関数に置き換えます。以前のonMessageはオウム返しをしていましたが、新しい関数では、Gemini APIを利用して受信したテキストを丁寧に言い換えます。
```
 function onMessage(event) {
   return { text: generate(event.message.text) };
 }
```

スクリプトを保存したら、Google Chatで「ていねいちゃん」に話しかけてみましょう！カジュアルなメッセージを送信すると、丁寧な敬語に変換されて返ってきます。

ただし、生成AIは完璧ではありません。文脈によっては不自然な表現になる可能性があることを、予めご了承ください。

なお、プロンプトに「JTF日本語標準ガイドに従ってください」という指示を追加しました。スタイルガイドはこちらで公開されています。

www.jtf.jp

例えば、このガイドラインでは句読点や言い回しなどについて細かなルールが定められており、プロンプトでこの指示を与えることで、より自然で読みやすい敬語表現が生成されるようになります。