Go to Qiita Advent Calendar Top
LoginSignup
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@shi-nishimura(nishimura)inChatGPT活用相談室

【ChatGPT×Googleスプレッドシート】グラフを作成するGPTsを作ってみた

Last updated at Posted at 2023-12-11

GPTsとはオリジナルのGPTを作ることができる機能です。

そこで今回は、外部APIを呼び出す機能であるCustom Actionsも試したかったので、
外部APIをGoogle Apps Script(GAS)で作り、オリジナルGPTsを作成してみました。

完成品

スプレッドシートのデータを読み取り、データに適したグラフを作成するGPTsです。
ChatGPT Plusユーザーの方は以下リンクから使うことができます。

Spreadsheet Graph Creator の使い方

スプレッドシートIDとシート名をChatGPTに送ることで、データに適するグラフを作成してくれます。

ここで取り込んだデータはChatGPTの学習に使用されるため、個人情報や機密情報が含まれるシートを共有しないようにしてください

また、グラフを作成するシートには編集者権限が必要になります。
以下の画像のように共有設定を変更してください。

スプレッドシートの権限

処理の概要

今回作成したGPTsの処理フローは以下図の通りです。
「スプレッドシートのデータを取得するAPI」と「グラフを作成するAPI」の2つをGASで用意しました。

flow

ChatGPTには、データから作成するグラフを決めてもらう部分と、必要なAPIの呼び出しを行ってもらっています。

作成手順

スプレッドシートのデータを取得するAPIの作成

まずは、GASの新規プロジェクトを作成します。
Google Driveの新規ボタン＞その他＞Google Apps Scriptsを選択します。

create-gas

こちらがスプレッドシートIDとシート名からデータを取得する関数のコードです。
コード.gsにこちらのコードを貼り付けます。

コード.gs
function doGet(e) {
  const requiredParams = ['spreadsheetId', 'sheetName'];

  // パラメータの検証
  for (const param of requiredParams) {
    if (!e.parameter[param]) {
      return ContentService.createTextOutput(`必要なパラメータが不足しています: ${param}`)
        .setMimeType(ContentService.MimeType.TEXT);
    }
  }

  const { spreadsheetId, sheetName } = e.parameter;

  try {
    const spreadsheet = SpreadsheetApp.openById(spreadsheetId);
    const sheet = spreadsheet.getSheetByName(sheetName);

    if (!sheet) {
      throw new Error('指定されたシートが見つかりません');
    }

    const data = sheet.getDataRange().getValues();
    return ContentService.createTextOutput(JSON.stringify(data))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    return ContentService.createTextOutput(`エラーが発生しました: ${error.message}`)
      .setMimeType(ContentService.MimeType.TEXT);
  }
}

今回関数の説明は割愛しますが、パラメータとしてスプレッドシートIDとシート名を受け取るようにしています。

関数の準備ができたら、APIとして利用できるようにデプロイしていきます。
画面右上のデプロイボタンをクリックし、Webアプリとしてデプロイします。

deploy

後程、ウェブアプリのURLを使用するのでコピーしておきましょう。

グラフを作成するAPIの作成

先程と同様にGoogle Driveから新規のGASプロジェクトを作成します。

さて、グラフ作成ですがChatGPTがリアルタイムに作ったコードを実行することも考えました。
ですが、予期しない挙動をする可能性もあるので、今回はあらかじめグラフ作成の関数を準備して、必要な関数を呼び出すことにしました。

（ChatGPT先生からも以下の指摘をいただいています）

Google Apps Script（GAS）で別の関数のコードを受け取って実行する機能を実装することは、セキュリティ上のリスクが高く、一般的に推奨されていません。Google Apps Scriptはサーバー側で実行されるため、実行されるコードにはその環境の権限が与えられます。
不正なコードが実行されると、データ漏洩や他のセキュリティ問題を引き起こす可能性があります。
ただし、非常に制限された範囲で、または完全に信頼できるソースからのコードのみを実行する場合に限り、特定の方法で実装することは可能です。

グラフを作成する関数の実装

GASで標準で用意されている、以下8つのグラフについて関数を作成します。

  • 折れ線グラフ
  • エリアグラフ
  • 棒グラフ
  • カラムグラフ
  • 円グラフ
  • 散布図
  • ヒストグラム
  • トレンドライン

こちらがグラフ作成関数の実装例です。
タイトルやラベルのオプションはほとんど設定していないシンプルなものになっています。

// 折れ線グラフの作成
function createLineChart(sheet, range) {
  var chart = sheet.newChart()
    .setChartType(Charts.ChartType.LINE)
    .addRange(range)
    .setPosition(1, 3, 0, 0)
    .build();

  sheet.insertChart(chart);
}

こちらの関数の作成にもChatGPTを活用しました。

「GASで折れ線グラフを作成する関数を作成してください」 という簡単なプロンプトを投げるだけで作成してくれるため、プログラミングに自信がない方でも簡単に作成できるかと思います。

メイン関数の実装

APIのメインとなる関数を実装します。
パラメータとして、グラフを作成する対象のスプレッドシートIDとシート名、作成するグラフの関数名（action）を受け取るようにします。

こちらがメイン関数のコードです。

コード.gs
function doGet(e) {
  // リクエストからスプレッドシートIDとシート名を取得
  var spreadsheetId = e.parameter.spreadsheetId;
  var sheetName = e.parameter.sheetName;
  // 作成するグラフ
  var action = e.parameter.action;

  // スプレッドシートとシートを取得
  var spreadsheet = SpreadsheetApp.openById(spreadsheetId);
  var sheet = spreadsheet.getSheetByName(sheetName);

  // スプレッドシートのデータを取得
  var range = sheet.getDataRange();
  try {
    switch(action) {
      case 'createLineChart':
        return ContentService.createTextOutput(createLineChart(sheet, range));
      case 'createAreaChart':
        return ContentService.createTextOutput(createAreaChart(sheet, range));
      case 'createBarChart':
        return ContentService.createTextOutput(createBarChart(sheet, range));
      case 'createColumnChart':
        return ContentService.createTextOutput(createColumnChart(sheet, range));
      case 'createPieChart':
        return ContentService.createTextOutput(createPieChart(sheet, range));
      case 'createScatterChart':
        return ContentService.createTextOutput(createScatterChart(sheet, range));
      case 'createHistogram':
        return ContentService.createTextOutput(createHistogram(sheet, range));
      case 'createScatterChartWithTrendline':
        return ContentService.createTextOutput(createScatterChartWithTrendline(sheet, range));
      default:
        return ContentService.createTextOutput("未知のアクションです。");
    }
  } catch (error) {
    return ContentService.createTextOutput("エラーが発生しました: " + error.message);
  }
}

コードの実装が完了したら、Webアプリとしてデプロイします。

GPTsの設定

APIの作成が終わったので、いよいよGPTsの作成にうつります。

GPTsは普段ChatGPTを使う時と同じように、チャット形式で設定を進めることができます。
左側が設定を行うチャット画面、右側が作ったGPTsを確かめる画面です。

gpts-create

今回使用したプロンプト

プロンプトは手順をステップごとに明確に指定することを意識しました。
こちらが今回使用したプロンプトです。

データに適したグラフをGoogle Apps Scriptsで作成するGPTを作りたいです。
以下の手順で作成を進めてください。

1.スプレッドシートIDとシート名を確認する：
データはスプレッドシートのデータを使うので、まずユーザーにスプレッドシートIDとシート名を確認します。

2.スプレッドシートの内容を取得するAPIにリクエストを送る：
ユーザーから指定されたスプレッドシートIDとシート名を使ってAPIにリクエストを送り、スプレッドシートの内容を取得します。

3.最適なグラフを考案する：
データに適したグラフを考えます。グラフは以下の8つから選ぶようにします。
以下8つの中に適切なグラフがない場合は、最もデータに適したグラフを1つだけ提案してください。
提案の際には、以下の出力形式に従って出力してください。

#作成グラフ一覧
・折れ線グラフ
・エリアグラフ
・棒グラフ
・カラムグラフ
・円グラフ
・散布図
・ヒストグラム
・トレンドライン

#出力形式
このデータに適切なグラフは ##グラフ名 です。
なぜなら、##グラフを選んだ理由 です。

4.グラフ作成APIを呼び出す：
ユーザーから指定されたスプレッドシートIDとシート名、及び以下のaction名を使ってAPIにリクエストを送り、グラフ作成APIを実行します。
なお、適切なグラフが選択肢にない場合は、最適なグラフを作成するプログラムをGoogle Apps Scriptで作成し、ユーザーに提案してください。

#action名
・折れ線グラフ：createLineChart
・エリアグラフ：createAreaChart
・棒グラフ：createBarChart
・カラムグラフ：createColumnChart
・円グラフ：createPieChart
・散布図：createScatterChart
・ヒストグラム：createHistogram
・トレンドライン：createScatterChartWithTrendline

5.日本語で回答する：
回答はすべて日本語で応答してください。

指示を送ると、指示内容をもとに名前とアイコンを提案してくれます。
こちらもあわせて設定しておきましょう。

Custom Actionの設定

先程作成した2つのAPIをActionsとして登録します。
Configureタブの下の方にActionsの設定があります。

configure

Actions設定のCreate new actionボタンをクリックするとActionsの詳細な設定画面に遷移します。

actions-setting

ここで設定が必要になるのは、Schemaです。
Schemaの設定はこちらの記事を参考にさせていただきました。

こちらが私が指定しているSchemaです。
それぞれ作成したAPIのWebアプリURLを該当箇所に貼り付けて使用してください。

{
  "openapi": "3.1.0",
  "info": {
    "title": "Spreadsheet Data Retrieval API",
    "description": "API to retrieve data from a specified Google Spreadsheet.",
    "version": "v1.0.0"
  },
  "servers": [
    {
      "url": "https://script.google.com"
    }
  ],
  "paths": {
    "スプレッドシートのデータを取得するAPIのWebアプリURL（https://script.google.comは除く）": {
      "get": {
        "description": "Retrieve data from a specified Google Spreadsheet sheet.",
        "operationId": "getSpreadsheetData",
        "parameters": [
          {
            "name": "spreadsheetId",
            "in": "query",
            "description": "The ID of the Google Spreadsheet.",
            "required": true,
            "schema": {
              "type": "string"
            }
          },
          {
            "name": "sheetName",
            "in": "query",
            "description": "The name of the sheet in the Google Spreadsheet.",
            "required": true,
            "schema": {
              "type": "string"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Successful response with the data from the spreadsheet.",
            "content": {
              "application/json": {
                "schema": {
                  "type": "array",
                  "items": {
                    "type": "array",
                    "items": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "400": {
            "description": "Bad Request. Parameters missing or incorrect.",
            "content": {
              "text/plain": {
                "schema": {
                  "type": "string"
                }
              }
            }
          },
          "500": {
            "description": "Internal Server Error",
            "content": {
              "text/plain": {
                "schema": {
                  "type": "string"
                }
              }
            }
          }
        }
      }
    },
    "グラフを作成するAPIのWebアプリURL（https://script.google.comは除く）": {
      "get": {
        "description": "Create a graph in the specified Google Spreadsheet.",
        "operationId": "createGraph",
        "parameters": [
          {
            "name": "spreadsheetId",
            "in": "query",
            "description": "The ID of the Google Spreadsheet.",
            "required": true,
            "schema": {
              "type": "string"
            }
          },
          {
            "name": "sheetName",
            "in": "query",
            "description": "The name of the sheet in the Google Spreadsheet.",
            "required": true,
            "schema": {
              "type": "string"
            }
          },
          {
            "name": "action",
            "in": "query",
            "description": "The action to be performed.(function name)",
            "required": true,
            "schema": {
              "type": "string"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Successful response with the data from the spreadsheet.",
            "content": {
              "application/json": {
                "schema": {
                  "type": "array",
                  "items": {
                    "type": "array",
                    "items": {
                      "type": "string"
                    }
                  }
                }
              }
            }
          },
          "400": {
            "description": "Bad Request. Parameters missing or incorrect.",
            "content": {
              "text/plain": {
                "schema": {
                  "type": "string"
                }
              }
            }
          },
          "500": {
            "description": "Internal Server Error",
            "content": {
              "text/plain": {
                "schema": {
                  "type": "string"
                }
              }
            }
          }
        }
      }
    }
  },
  "components": {
    "schemas": {}
  }
}

これですべての設定が完了したので、右上のSaveボタンから公開範囲を選択して保存すると自分で作成したGPTsが使えるようになります。

さいごに

Schemaの設定ははじめ？？？でしたが、いろんな記事やChatGPTを使って無事にGPTsを作ることができました。
（改良の余地は多々ありますが。。。）

作ってみた感想としては、 ChatGPTとGASを簡単に連携できるのは便利！ ということです。
GASは簡単にスプレッドシートやドキュメントの操作ができるので、これらGoogleのサービスを使っている方には活用場面が多いと感じました。

簡単な自動化ツールがGPTsで他にも作れそうなので今後も引き続きいろんなGPTsを作ってみようと思います。

ChatGPT活用相談室

ChatGPT活用相談室では、ChatGPTの活用方法や企業活用例を紹介しています。

また、ChatGPTの社内導入から運用、研修・セミナーなどのサービスも行っております。

  • ChatGPTを導入したいが、セキュリティの懸念がある
  • 自社の業務に合わせてカスタマイズしたいが、社内にできる人材も時間もない
  • 社内ルールやガイドラインの策定など、運用方針の確立に困っている

など、ChatGPTに関する課題やお悩みがあればお気軽にご相談ください。
初回のご相談は無料 で承っております。詳細はこちらからご確認ください！

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?