Upgrade to Pro — share decks privately, control downloads, hide ads and more …

230713_AppSheet と ChatGPT連携させてみた!~手順をイチから解説!_吉積情報 伊藤

230713_AppSheet と ChatGPT連携させてみた!~手順をイチから解説!_吉積情報 伊藤

230713_AppSheet と ChatGPT連携させてみた!~手順をイチから解説!_吉積情報 伊藤

comucal
PRO

July 13, 2023
Tweet

More Decks by comucal

Other Decks in Technology

Transcript

  1. YOSHIDUMI Information, Inc.
    手順をイチから解説!
    AppSheet と ChatGPT連携させてみた!
    2023.
    7.
    13  20:00−21:00
    RPACommunity

    View Slide

  2. YOSHIDUMI Information, Inc.
    本日の登壇者

    View Slide

  3. YOSHIDUMI Information, Inc.
    アジェンダ
    4.ChatGPT (Open AI アカウント)
    1.連携結果の紹介
    2.AppSheet
    3.Google Apps Script

    View Slide

  4. YOSHIDUMI Information, Inc.
    1.連携結果の紹介

    View Slide

  5. YOSHIDUMI Information, Inc.
    あらかじめ登録したプロンプトの雛形を選択して、簡単に
    ChatGPTに結果を問うことができるアプリです
    雛形を登録
 情報入力
 雛形を選択
 実行
 結果取得


    View Slide

  6. YOSHIDUMI Information, Inc.
    2.AppSheet

    View Slide

  7. YOSHIDUMI Information, Inc.
    AppSheetはGoogleスプレッドシートを元にアプリが爆速で作れるおなじみのノーコードツールです!!!
    今回は2枚のシートでアプリを作ります。
    1枚目 : 「ソース」シート 

    データは作った後に入れてもOKです 

    1行目(ヘッダ)だけは必須です 


    View Slide

  8. YOSHIDUMI Information, Inc.
    AppSheetはGoogleスプレッドシートを元にアプリが爆速で作れるおなじみのノーコードツールです!!!
    今回は2枚のシートでアプリを作ります。
    2枚目 : 「アシスト」シート 

    データは作った後に入れてもOKです 

    1行目(ヘッダ)だけは必須です 


    View Slide

  9. YOSHIDUMI Information, Inc.
    拡張機能 → AppSheet → アプリを作成 で作っていきます

    View Slide

  10. YOSHIDUMI Information, Inc.
    サクサク設定していきます。まずは「データ」から。
    アシストテーブルも追加 


    View Slide

  11. YOSHIDUMI Information, Inc.
    サクサク設定していきます。まずは「データ」から。
    ソーステーブルのカラムを調整 


    View Slide

  12. YOSHIDUMI Information, Inc.
    サクサク設定していきます。まずは「データ」から。
    アシストテーブルのカラムを調整 


    View Slide

  13. YOSHIDUMI Information, Inc.
    続いて「ビュー」揃えていきます。
    「アシスト管理」画面追加 


    View Slide

  14. YOSHIDUMI Information, Inc.
    最後に、ChatGPTを呼び出す仕掛け「アクション」を追加します
    「アシスト実行」アクション追加 

    実は無くてもOKですが、ロ
    ボットボタン押して実行したい
    ので追加


    View Slide

  15. YOSHIDUMI Information, Inc.
    3.Google Apps Script

    View Slide

  16. YOSHIDUMI Information, Inc.
    AppSheetからはローコードツールの
    GASを経由してChatGPTを呼び出します。なのでスクリプトを作りましょう。
    Googleドライブにアクセスして、 

    スクリプトを新規作成します。 


    View Slide

  17. YOSHIDUMI Information, Inc.
    中身はあとで埋めるので、とりあえず関数だけ作って
    AppSheetとつなぎます。
    function getChatGPTAnswer(prompt) {
    return 'オウム返し!' + prompt;
    }

    View Slide

  18. YOSHIDUMI Information, Inc.
    AppSheet側でGASにつなぎこみを行います。そのために「
    Automation」を設定します。
    輝いていますね!

    RPAは輝きなんです!! 


    View Slide

  19. YOSHIDUMI Information, Inc.
    AppSheet側でGASにつなぎこみを行います。そのために「
    Automation」を設定します。
    「アシストトリガー」

    の値が変わったときに動き出す 

    設定です!

    [_THISROW_BEFORE].[アシストトリガー] <> [_THISROW_AFTER].[アシストトリガー]
    ※Actionを追加しない場合は、 

    Adds onlyにして 

    Conditionを空にしてください。 

    データ登録起点で動くように変わります。 


    View Slide

  20. YOSHIDUMI Information, Inc.
    AppSheet側でGASにつなぎこみを行います。そのために「
    Automation」を設定します。
    GASを呼び出し、値を取得する設
    定です!

    [アシストタイプ ].[プロンプト] & "
    文章:" & [アシストソース ]

    View Slide

  21. YOSHIDUMI Information, Inc.
    AppSheet側でGASにつなぎこみを行います。そのために「
    Automation」を設定します。
    [GAS呼び出し].[Output]
    GASから(前ステップから)戻ってきた値を 

    「アシスト結果」に書き込むステップです! 


    View Slide

  22. YOSHIDUMI Information, Inc.
    まだChatGPTのパワーが入っていないので、オウム返しするだけの状態です!

    View Slide

  23. YOSHIDUMI Information, Inc.
    4.ChatGPT (Open AI アカウント)

    View Slide

  24. YOSHIDUMI Information, Inc.
    まずはアカウントを作りましょう!

    View Slide

  25. YOSHIDUMI Information, Inc.
    まずはアカウントを作りましょう!

    View Slide

  26. YOSHIDUMI Information, Inc.
    名前と生年月日は必須

    View Slide

  27. YOSHIDUMI Information, Inc.
    電話番号で認証
    ここで注意点!

    1つの電話番号で登録できるアカウントは2つまでらしいです。

    さらに、Open AIアカウントは削除したら容易には復活できないらしいです。

    (記録として残ってしまうようで、電話番号の再利用も不可)

    無料でAPIを使える期間には制限があるので、注意しましょう!詳しくはお調べください!


    View Slide

  28. YOSHIDUMI Information, Inc.
    既に紐付けられている電話番号を使った場合
    ちなみに、電話番号に紐づけているアカウント数が多いと手前の画面でエラーになり進めません。


    View Slide

  29. YOSHIDUMI Information, Inc.
    登録に成功するとこのような画面になります
    おなじみChatGPT。

    今回はこっちは使いません 
 今回はこちら!


    View Slide

  30. YOSHIDUMI Information, Inc.
    View API keys でAPIキーをゲットしにいきます

    View Slide

  31. YOSHIDUMI Information, Inc.
    + Create new secret key をクリック

    View Slide

  32. YOSHIDUMI Information, Inc.
    わかりやすい名前をつけましょう!

    View Slide

  33. YOSHIDUMI Information, Inc.
    取得できたキーはしっかりコピーしてどこかにメモりましょう!このタイミングでしか確認できません。

    View Slide

  34. YOSHIDUMI Information, Inc.
    登録するとこんな感じ

    View Slide

  35. YOSHIDUMI Information, Inc.
    無料枠どれくらいかな?は「
    Usage」から確認できますが。。
    Free trial usage が、0$・・・?

    そうです、この例作ったアカウントは

    既に使われている電話番号を利用していて、

    とっくの昔に期限が切れていたようです(涙)


    View Slide

  36. YOSHIDUMI Information, Inc.
    ということで、期限が残っているアカウントに切り替えました。
    こちら、6月に作ったのでだいたい3-4ヶ月ぐら
    い無料期間があるようです。 

    ※どんどん短くなってきている模様。 

    無料で試すならお早めに!!! 


    View Slide

  37. YOSHIDUMI Information, Inc.
    あとは、GASにコードを書くだけです!
    文章を投げたら文章を返すシンプルなプログラム

    ※文脈考慮など奥は深いので是非カスタマイズを!


    View Slide

  38. YOSHIDUMI Information, Inc.
    コピペ用
    const OPEN_AI_KEY = 'ここにキーをいれてねー';
    function testGetChatGPTAnswer(){
    const prompt = 'プログラムの楽しさを約50文字程度で教えてください';
    const answer = getChatGPTAnswer(prompt);
    Logger.log(answer);
    }
    function getChatGPTAnswer(prompt) {
    Logger.log(prompt);
    prompt = prompt.substring(0, 1000); // 不測の事態に備えて、1000文字以降は切り捨てる。また、繰り返し呼びされた場合のケアは別途必要。
    // OpenAI APIキーを設定。https://platform.openai.com/account/api-keys にて取得。
    // アカウント登録後、約3ヶ月間5ドル分の無料枠有り。大体250万トークン程度まで利用可能。(2023年06月10日現在) (デモなので別定数を代入)
    const API_KEY = OPEN_AI_KEY;
    // リクエスト内容
    const request = {
    method: "POST",
    muteHttpExceptions : true,
    headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + API_KEY,
    },
    payload: JSON.stringify({
    'model': 'gpt-3.5-turbo', // モデルの指定。GPT-4などは全然コストが違うので要注意。
    'temperature': 1.0, // ざっくり独自性みたいなもので、0~2の範囲で指定可能。2とかになると独自すぎて文章が壊れる。1.0が無難。
    'max_tokens': 1000, // 出力されるトークン上限。料金の対象は入力メッセージも対象なので注意。
    'messages': [{'role':'user', 'content': prompt}] // 入力情報。複数の値を入れるとChatGPTみたいに文脈として参考にされるが、その分のコストも当然かかる。
    }),
    };
    // OpenAI API にリクエストを送信し、返答を得る。(サンプルなので、例外等は非考慮)
    const response = UrlFetchApp.fetch('https://api.openai.com/v1/chat/completions', request);
    const jsonObject = JSON.parse(response.getContentText());
    const resultContent = jsonObject.choices[0].message.content;
    Logger.log(resultContent);
    return resultContent;
    }

    View Slide

  39. YOSHIDUMI Information, Inc.
    コードを書いたら、一度実行しておきましょう。
    (承認を求められます)
    たしかに魔法みありますよね


    View Slide

  40. YOSHIDUMI Information, Inc.
    無事、連携できました!
    文章生成


    View Slide

  41. YOSHIDUMI Information, Inc.
    無事、連携できました!
    文章要約
 箇条書き生成


    View Slide

  42. YOSHIDUMI Information, Inc.
    無事、連携できました!
    小説化
 論破時間テスト

    魔法推しがスゴイ


    View Slide

  43. YOSHIDUMI Information, Inc.
    無事、連携できました!
    やさしい文章

    あんまり考慮してくれなかった、、

    View Slide

  44. YOSHIDUMI Information, Inc.
    余談1:そこそこ実行時間がかかるみたいなので、気軽に待ちましょう。
    求む、チューニング方法・・・!


    View Slide

  45. YOSHIDUMI Information, Inc.
    余談2:Call a webhook の Return Value対応!
    AppSheetから直接外部のAPIを叩く「Call a webhook」ですが、 

    最近「Return Value」に対応しました! 

    間にGASを挟まなくても呼び出せるかもしれません! 

    ※配列はダメみたいなので厳しそうな気がしてます,, 


    View Slide

  46. YOSHIDUMI Information, Inc.
    Google Workspace 吉積情報 検 索
    www.yoshidumi.co.jp
    当社のサポートプログラムは
    限られた社内リソースの中でしっかりとシステム移行・活用したい
    そんな担当者様・企業様に最適なご支援です。
    まずはお気軽に、オンラインミーティングをご希望ください。

    View Slide