[初心者向け]GASだけでChatGPTのようなWebアプリを作ってみた

fujimoto.ryuji

2023.06.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

アノテーションの藤本です。

OpenAI API を利用して自分で ChatGPT みたいな Web アプリが作りたい！と思ってもハードルが高く感じる人は多いと思います。
そんな人たちのためにハードルが低く開発環境が簡単に用意できるGASでWebアプリを作ってみようというのが今回の趣旨です。
タイトルでChatGPTのようなと言っていますが、今回触れるのは初歩の部分です。質問を投げる → 回答が返ってくるという動作を確認してみたいと思います。
非エンジニアでも触れるように、コードの解説は最低限にします。

API KEY の取得

先ずは API KEY を取得しない事には始まりません。こちらのブログを参考に API KEY を取得しましょう。

GAS の用意

Googleドライブにアクセスします
新規 > その他 > Google Apps Script の順にクリックします

API KEY の保存

左側の歯車アイコンからプロジェクトの設定最下部にある「スクリプトプロパティを追加」をクリックします。
「プロパティ」には「APIKEY」
「値」に前述の内容で取得したAPI KEYを記載します。
「スクリプトプロパティ」を保存をクリックします

GASスクリプト編集

最初からあるコード.gs を以下のように編集しましょう

const doGet = (request) => {
  return HtmlService.createTemplateFromFile('index')
    .evaluate();
}

const include = (filename) => {
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

function chatGPT(talk_str) {

  if(talk_str){
    const requestBody = {
      "model": "gpt-3.5-turbo",
      "messages": [{'role': 'system', 'content': "あなたはかわいい猫です。語尾ににゃんと付けてください。"},{'role': 'user', 'content': talk_str}],
      "temperature": 1,
      "max_tokens": 512
    };

    const requestOptions = {
      "method": "POST",
      "headers": {
        "Content-Type": "application/json",
        "Authorization": "Bearer " + PropertiesService.getScriptProperties().getProperty('APIKEY')
      },
      "payload": JSON.stringify(requestBody)
    };

    var response = JSON.parse(UrlFetchApp.fetch("https://api.openai.com/v1/chat/completions", requestOptions).getContentText());

    return response.choices[0].message.content.trim();

  }else{
    return "no result";
  }
}

あなたはかわいい猫です。語尾ににゃんと付けてください。

という箇所がありますね。ここで AI の設定を入れています。この内容を変更してお好きにキャラ付けしてみてください。

 "temperature": 1

この数字が小さい程同じ返答をするようになります。 0にすると毎回同じ質問には同じ回答をするようになります。最大は2です。

 "max_tokens": 512

回答文が途中で途切れてしまう場合はこの数字を大きくしてみてください。

Webページの作成

GAS では HTML で Webページが作成できます。

今回はそのWebページで OpenAI API を利用した簡易Webアプリを作成していきます。

ファイル > ファイルを追加 > HTML

で html ファイルを作成します。今回、ファイル名は index.html としておきます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <textarea id="input" rows="4" cols="40" placeholder="質問を入力" size="20" value=""></textarea>
    <button type="button" onclick="runScript()">送信</button>
    <p id="output"></p> 

    <?!= include('script'); ?>
  </body>
</html>

javascript の作成

スクリプト部分は分けて書きます。

ファイル > ファイルを追加 > HTML

で html ファイルを作成します。今回、ファイル名は script.html としておきます。

<script>
  function sendAnswer(answer) {
    let output_area = document.getElementById("output");
    output_area.innerHTML = answer;
  }

  function runScript() {
    let input_area = document.getElementById("input");
    google.script.run.withSuccessHandler(sendAnswer).chatGPT(input_area.value);
  }
</script>

動かしてみる

デプロイ > 新しいデプロイ > 種類の選択 > ウェブアプリの順に選択します

「アクセスできるユーザー」で公開範囲を選択することが出来ます。

デプロイボタンを押すと URL が表示されますそのURLを開くと作成したWebアプリが確認できます。

「質問を入力」というところに文章を入れて「送信」をクリックします。

少し待つと…

回答が返ってきました！

最後に

実装の基礎はこれで終わりです。
あとは好きなキャラ設定を入れてみたり、CSSで装飾等をして見た目を整えてあげれば立派なチャットアプリの完成です。
是非試してみてください。

参考資料

OpenAI Platformことはじめ〜Organizationメンバーに招待されたら
 【やってみた】非エンジニアがOpenAI API×GASを活用しスプレッドシートで文章チェックを実施してみた
 [初心者向け]スプレッドシート + GAS で ChatGPT API を使ってみた

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。