## はじめに
ChatGPTなどのAPIを使うことで、これまで難しかった書類から必要な情報をピックアップする処理や、多言語への変換などがとても容易に行えるようになりました。
しかしながら、その処理はある程度の曖昧さを含まざるを得ないため、1回だけで最適な答えを出すこと難しいケースは多々あります。
そこで今回は、再帰的にChatGPTのAPIへ指示を出すことで、答えを洗練させられるかどうか、検証してみました。

## OpenAIチャットAPIでアイディアを再帰的に洗練させる

OpenAIのチャットAPIとTypeScriptを使い、アイディアを段階的に洗練させるプログラムを紹介します。  

### 作ってみたプログラム

```typescript
import dotenv from "dotenv";
import OpenAI from "openai";
import { zodResponseFormat } from "openai/helpers/zod";
import { z } from "zod";

dotenv.config({ path: `${__dirname}/.env` });

// APIの返答の形式を安定化させるため、Zodを使ってフォーマット指定を行います
const responseFormat = z.object({
  idea: z.string()
});

const main = async () => {
  // OpenAIの初期設定
  const client = new OpenAI({
    organization: process.env.CHAT_GPT_ORGANIZATION_ID,
    project: process.env.CHAT_GPT_PROJECT_ID,
    apiKey: process.env.CHAT_GPT_API_KEY
  });

  const MAX_COUNT = 5; // 再帰処理で呼び出す回数制限

  const getIdeas = async (
    question: string,
    ideas: string[],
    count: number = 1
  ) => {
    // 最初の指示
    let content = `## 指示
次に挙げる議題について、アイディアを出してください
「${question}」

## 制限事項
- 200文字程度で出してください`;

    // 再帰的に呼び出された時の指示
    if (count > 1) {
      content = `## 指示
次に挙げるアイディアを類推を使って洗練させてください
課題: ${question}
アイディア：「${ideas[ideas.length - 1]}」

## 制限事項
- 200文字程度で出してください`;
    }

    // チャットAPIの実行
    const chatCompletion = await client.chat.completions.create({
      model: "gpt-4o-mini",
      response_format: zodResponseFormat(responseFormat, "idea"),
      messages: [
        {
          role: "user",
          content
        }
      ]
    });

    // APIのレスポンスをパースして、情報を取得
    const responseMessage =
      JSON.parse(chatCompletion?.choices?.[0]?.message?.content ?? "{}")
        ?.idea ?? "";

    // 過去データに追加
    ideas.push(responseMessage);

    // 再帰的に呼び出す
    if (count < MAX_COUNT) {
      return getIdeas(question, ideas, count + 1);
    }

    return {
      question,
      ideas
    };
  };

  // 関数の実行
  const result = await getIdeas(
    "アジア向け越境ECを国内メーカーの販売担当者へ広告する場合の効果的なバナーデザイン",
    []
  );

  console.log(result);
};

main()
  .then(() => {
    console.log("Done");
  })
  .catch((error) => {
    console.error("Error:", error);
  });
```

#### プログラムの解説

- `.env`ファイルに定義されたAPIキーなどの環境変数を`dotenv`で読み込みます。
- Zodを使い、APIレスポンスの形式（idea: string）を指定することで、レスポンスの型を保証し、安定性を高めます。
- `getIdeas`関数は、指定回数（MAX_COUNT）まで再帰的にChatGPT APIへリクエストを送り、毎回新しいアイディアを生成・洗練します。
- 1回目は議題からアイディアを生成し、2回目以降は直前のアイディアをさらに洗練するよう指示します。
- すべてのアイディアは配列に蓄積され、最終的にまとめて出力されます。

### 実行結果例

#### 1回目
```md
1. クリーンでモダンなデザインを使用し、アジア市場を象徴する色彩（赤、金など）を取り入れる。
2. 商品写真を大きく配置し、目立たせることで視覚的インパクトを強調。
3. アジア顧客のニーズを反映したメッセージ（例：トレンド性や伝統的価値）を強調。
4. 言語はターゲット地域に応じたローカリゼーションを施し、親しみやすさを演出。
5. "越境ECで新市場開拓！"などのキャッチコピーで興味を引く。
```

#### 3回目
```md
アジア向け越境ECのバナーデザインには、
1. アジア特有の色（赤、金）を取り入れたクリーンでモダンなデザインが効果的。
2. 大きな商品写真でインパクトを与え、
3. トレンドと伝統を融合させたメッセージで興味を引く。
4. 各地域の言語で親しみやすさを演出し、
5. "新市場開拓のチャンス！"などの魅力的なキャッチコピーを加えることで、販売担当者の関心を高める。
```

#### 5回目
```md
「アジア向け越境ECのバナーデザインでは、
1. アジアの文化に根ざした明るい色合い（特に赤や金）を使用し、パッと目を引くデザインに。
2. 商品の魅力を伝えるために、大きな商品画像を配する。
3. トレンドと伝統を融合したキャッチコピーで感情に訴えかけ、
4. 地域ごとの言語で表記して親しみを感じさせる。
5. 更に、「新市場開拓は今がチャンス！」というポジティブなフレーズで顧客の関心を引く。
```

### 感想
結果を見てみると、アイディアそのものが洗練されているというより、文章として洗練されていっているという感じでした。
「洗練させる」ということが、人間にとっても解釈が難しいように、そもそも曖昧な指示なのが原因かもしれませんね。
また、ただ繰り返せばいいというわけではなさそうです。
ただし、情報を絞り込んでいくなど、プロンプトや利用目的を工夫すれば、この方法も有効に活用できる可能性があります。

### 注意
- 実案件でAPIを再帰的に利用する場合、API利用コストの増大や、レスポンスの質が頭打ちになる可能性についても、さらなる検証が必要です。

### 参考サイト
- <a href="https://platform.openai.com/docs/overview" target="_blank" rel="noopener noreferrer">Overview - OpenAI API</a>

large_eycatch.png

medium_eycatch.png

small_eycatch.png

thumbnail_eycatch.png

eycatch.png

OpenAIのチャットAPIを再帰的に呼び出す方法を検証してみた

## はじめに
最近、台湾でめっちゃ流行ってるのは、**ChatGPTでジブリ風の画像を生成すること**です！
ChatGPTに会員登録したら遊べます、無料版には一日約３枚しか生成できないけど、有料版なら一応無制限になります！

## 私も早速遊んでみました！
まず自分はジブリ風の中でどんな様子なのかを気になってて、とりあえず自撮りの一枚をアップロードしました！

![S__140148768_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148768_0_ba823cad73.jpg)
![S__140148767_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148767_0_8ccf617bc6.jpg)

なんか面白いなー！と思って、先日チェンマイに象と遊んだ写真なら、めっちゃ綺麗に生成されるじゃないかなと思って、またすぐにアップロードしました。

![S__140148771_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148771_0_7a67b25d57.jpg)
![S__140148770_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148770_0_4d1fce6fec.jpg)

ここで急に思ったのが、ジブリ風が作れるなら、もっと指示したらどうなるかなと思って、「もののけ姫」のような感じで作成してくださいって指示をしたら、もう一枚の写真が生成されてて、本当に「もののけ姫」の画風の画像が生成されて、めっちゃすごいな！と思いました！

![S__140148772_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148772_0_fa90e4f62f.jpg)

## すぐにジブリ風を飽きてきた。
なんか細かい指示できるなら、ちょっと自分が飼ってるウサギも遊んでみたいなと思ってて、自分のうさぎは人間になったら、どんな様子かなと思って、ChatGPTに作ってもらいましたー！

![S__140148774_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148774_0_bfe2012578.jpg)
![S__140148775_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148775_0_50f39ec501.jpg)

**きゃー！めっちゃ可愛い♡**と思ってて、本当の人間ならば？と思って、更に指示をしたら...：

![S__140148777_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148777_0_640db87b75.jpg)
![S__140148778_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148778_0_844a2151ff.jpg)

すごっ！外国人だ！ここでもし色んな指示をして、例えば「アジア人の女の子に生成してください」とか、絶対色々面白かったけど、私は無料版を使っているから、１日の制限があって、更に画像の修正を入れたら１時間後を待たなくちゃいけないです。

## 画像ではなく、自分のキャラクターも生成できるって聞いたら...

何?! 自分のキャラクターも生成できる？更に自分が好きなアイテムも入れられるなんてって聞いたら、早速私が一番好きなワンチャンとうさぎちゃんをアイテムにしたら、こんなパッケージのモノが出て来ましたー！

![S__140148779.jpg](https://cont.sterfield.co.jp/uploads/S_140148779_9740f1d9e7.jpg)

すごくないー♡ ただこれを作成するのに、細かい指示を書かなければならないです。また色んな画像の提供も必要で、どのモノが
どの位置に置くのか、色は何なのか、名前の「Yumi」のこともどんな感じで表示されるのかまで、細かく書かないとね！

## まとめ
私はまた他に、ディズニー風とかの画風も色々遊んでみたし、自分を動物に変身したりもしてたw
ChatGPTは普段仕事で使っているが、仕事上だけではなく、プライペートでも色々遊んでみてくださいね！

![S__140148783_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148783_0_a77271af75.jpg)
![S__140148782_0.jpg](https://cont.sterfield.co.jp/uploads/S_140148782_0_87dcafb732.jpg)

large_S__140148781_0.jpg

medium_S__140148781_0.jpg

small_S__140148781_0.jpg

thumbnail_S__140148781_0.jpg

S__140148781_0.jpg

ChatGPTで画像作成を遊ぼう！

## はじめに

GitHub Copilot Chat は、VS Code 内でチャット形式でコードに関する質問やエラー修正、最適化の提案を依頼できる強力なツールです。本記事では、Copilot Chat の活用方法を紹介し、コーディング効率を大幅に向上させるための具体的な手順やコマンドを解説します。

## Copilot Chat のメリット

- **リアルタイムサポート**：コードに関する疑問をその場で解決でき、作業効率が向上します。
- **コード生成と最適化**：テストコードの作成や重複コードの排除を自動化し、コードの質を改善します。
- **エラー修正**：エラー箇所を素早く指摘し、具体的な修正案を提示してくれるため、デバッグ作業がスムーズに進みます。
- **ドキュメント生成**：JSDoc コメントを自動生成し、コードの可読性と保守性を高めます。

これらの機能を活用することで、コーディングの効率が大幅に向上します。次のセクションでは、GitHub Copilot Chatのセットアップ手順について説明します。

## セットアップ手順

1. **VS Codeのインストール**
   - [公式サイト](https://code.visualstudio.com/download)から最新のVS Codeをダウンロードし、インストールします。

2. **GitHub Copilotのインストール**
   - VS Codeを開き、拡張機能ビューを開きます。
   - 検索バーに「GitHub Copilot」と入力し、拡張機能をインストールします。

3. **GitHubアカウントのリンク**
   - GitHub Copilotを使用するには、GitHubアカウントが必要です。アカウントを作成し、VS Codeにログインします。

これで準備完了です。

![copilot_img_01.jpg](https://cont.sterfield.co.jp/uploads/copilot_img_01_0ee6bdf5c3.jpg)

## Copilot Chat の便利なスラッシュコマンド

以下に、特に役立つ Copilot Chat のスラッシュコマンドを5つ紹介します。

### 1. /explain: コードを解説
1. 解説したいコードを選択。
2. Ctrl + / で Copilot Chat を開き、/explain と入力。

```css
.example {
  width: 100px;
  height: 100px;
  background-color: blue;
}
```
Copilot Chatで /explain と送信すると、選択したコードの解説をCopilotが提供してくれます。コードの意図や動作を理解するのに役立ちます。

![copilot_img_02.png](https://cont.sterfield.co.jp/uploads/copilot_img_02_92bd6d0f25.png)

### 2. /tests: テストコード生成
1. テストを書きたい関数を選択。
2. Copilot Chat を開き、/tests と指示。

```javascript
export function add(a, b) {
  return a + b;
}
```
![copilot_img_03.jpg](https://cont.sterfield.co.jp/uploads/copilot_img_03_e615f7b1ca.jpg)
Copilot Chatで /tests と送信すると、次のようにテストコードが生成してくれます。
```javascript
// add.test.js
import { add } from './add';

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});
```

![copilot_img_09.png](https://cont.sterfield.co.jp/uploads/copilot_img_09_49fadbe438.png)
Copilot Chatで jest.config.js を作成してください と送信すると、次のようにテストコードが生成してくれます。

```javascript
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
};
```

Jest を使うなら、次の手順を実行します。

```bash
npm install --save-dev jest ts-jest @types/jest
```

`package.json` にスクリプトを追加：
```json
{
  "scripts": {
    "test": "jest"
  }
}
```

テスト実行：
```bash
npm test
```

結果：
![copilot_img_04.jpg](https://cont.sterfield.co.jp/uploads/copilot_img_04_e905eee6a0.jpg)

### 3. /fix: エラー修正
1. エラーがあるコードを選択。
2. Copilot Chat を開き、/fix と入力。

```css
/* 修正前：セミコロン抜けやプロパティのミス */
.example {
  width: 100px
  height: 100px;
  background-colour: blue;
}
```
![copilot_img_05.png](https://cont.sterfield.co.jp/uploads/copilot_img_05_61595bd033.png)

Copilot Chatで /fix と送信すると、次のようにセミコロンの抜けやプロパティのミスなどを自動で修正してくれます。

```css
/* 修正後 */
.example {
  width: 100px;
  height: 100px;
  background-color: blue;
}
```

### 4./optimize: コードの最適化
1. 改善したいコードを選択。
2. Copilot Chat を開き、/optimize と送信。

```css
/* 最適化前：冗長なプロパティ */
button {
  display: block;
  display: flex;
  color: black;
  color: #000000;
  padding: 10px;
  padding-left: 10px;
}
```
![copilot_img_06.png](https://cont.sterfield.co.jp/uploads/copilot_img_06_03aa376538.png)

Copilot Chatで /optimize と送信すると、次のように重複プロパティを削除し、無駄を減らします。

```css
/* 最適化後：無駄を削減 */
.button {
  display: flex;
  color: #000;
  padding: 10px;
}
```

### 5./doc: ドキュメントコメント生成

1. ドキュメントが必要な関数を選択。
2. Copilot Chat で、/doc と送信。

```javascript
function add(a, b) {
  return a + b;
}
```
![copilot_img_07.png](https://cont.sterfield.co.jp/uploads/copilot_img_07_5664e6cbc8.png)

Copilot Chatで /doc と送信すると、次のように読み手に優しいコメントを付けてくれる便利な機能です。
```javascript
/**
 * Adds two numbers together.
 *
 * @param {number} a - The first number.
 * @param {number} b - The second number.
 * @returns {number} The sum of the two numbers.
 */
function add(a, b) {
  return a + b;
}
```

## まとめ
GitHub Copilot Chat は、開発者のコーディング体験を大きく向上させる強力なツールです。本記事で紹介したスラッシュコマンドを活用することで、コードの理解、エラー修正、最適化、テスト作成、ドキュメント生成といった作業を効率よく進められます。特に、/explain でコードの意図を確認したり、/fix でエラーを素早く修正したりと、日々の開発をサポートしてくれる便利な機能が満載です。

今回紹介したもの以外にも、Copilot Chat には便利なコマンドがたくさんあります。ぜひ Copilot Chat を使いこなして、より快適で生産的な開発環境を手に入れてください！

## 参考サイト
[https://qiita.com/kohashi/items/05bc01cbb3a74fdc7227](https://qiita.com/kohashi/items/05bc01cbb3a74fdc7227)



GitHub Copilot Chat を活用して効率的にコーディングする方法

## はじめに

ChatGPT API 呼び出しを含むコードのユニットテストは、レスポンスが一定でないため難しいと思われがちですが、いくつかのポイントを押さえることで実装可能です。本記事では、Jest を用いた ChatGPT API のユニットテスト実装方法について、実例を交えながら解説します。

## 対象読者

- ChatGPT API を利用する開発者
- Jest を用いたユニットテストの経験者
- API 連携を含むコードのテストに課題を感じている方

## 前提知識

- JavaScript の基本的な知識
- Jest を用いたユニットテストの経験
- ChatGPT API の利用経験

## 実装例

ChatGPT API を利用したコードのテスト実装例として、2 つの入力を比較して大きい方を返す関数 `greaterOf` のテストコードを作成します。

**テスト対象のコード (greaterOf.js)**

```javascript
import OpenAI from "openai";

/**
 * OpenAIのAPIを使用して2つの入力を比較し、大きい方を返します。
 */
const greaterOf = async (
  openai: OpenAI,
  a: string,
  b: string
): Promise<string> => {
  const chatCompletion = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    response_format: { type: "text" },
    messages: [
      {
        role: "system",
        content: `1件目の入力と2件目の入力を比較して大きい方の入力をそのまま返してください。`,
      },
      {
        role: "user",
        content: a,
      },
      {
        role: "user",
        content: b,
      },
    ],
  });

  return chatCompletion?.choices?.[0]?.message?.content?.trim() ?? "";
};

export default greaterOf;
```

**テストコード (greaterOf.test.js)**

```javascript
import OpenAI from "openai";
import greaterOf from "./greaterOf";

const runTests = process.env.CHAT_GPT_TEST;

(runTests ? describe : describe.skip)("greaterOf", () => {
  const openai = new OpenAI({
    organization: "********", // API接続情報を外部から注入
    project: "********", // API接続情報を外部から注入
    apiKey: "********", // API接続情報を外部から注入
  });

  test.each`
    a                     | b                         | expected
    ${"木星"}             | ${"土星"}                 | ${"木星"}
    ${"北海道"}           | ${"スコットランド"}       | ${"スコットランド"}
    ${"セーム・シュルト"} | ${"シャキール・オニール"} | ${"シャキール・オニール"}
  `("greaterOf($a, $b) should return $expected", async ({ a, b, expected }) => {
    for (let i = 0; i < 3; i++) {
      const result = await greaterOf(openai, a, b);
      expect(result).toBe(expected); // 結果を検証
    }
  });
});
```

## 実装のポイント解説

- **テスト対象の関数は同じ入力に対して同じ出力を返すように設計する:** 出力が一定にならない関数の動作はテストケースで確認するのが難しいです。
- **API 接続情報の外部注入:** テストコードでは、API キーなどの接続情報を環境変数から取得しています。これにより、本番環境とテスト環境で異なる設定を使用できます。
  - **対応箇所:** テストコードの `const openai = new OpenAI({ ... });`
- **テストデータの準備:** `test.each`を用いて、複数のテストケースを簡潔に記述しています。各テストケースでは、入力値 `a`、`b` と期待される出力値 `expected` を定義しています。
  - **対応箇所:** テストコードの `test.each`
- **繰り返し実行:** 各テストケースを 3 回繰り返して実行しています。ChatGPT API のレスポンスは変動する可能性があるため、複数回実行することで結果の安定性を確認しています。
  - **対応箇所:** テストコードの `for (let i = 0; i < 3; i++) { ... }`
- **テストのスキップ:** 環境変数 `CHAT_GPT_TEST` が設定されている場合のみテストが実行されるようにしています。これにより、CI 環境などで API キーを保護し、テスト実行時間を短縮できます。
  - **対応箇所:** テストコードの `(runTests ? describe : describe.skip)("greaterOf", () => { ... });`

## まとめ

本記事では、Jest を用いた ChatGPT API のユニットテスト実装方法について解説しました。API 接続情報の外部注入、テストデータの準備、繰り返し実行、テストのスキップなどのポイントを押さえることで、ChatGPT API を含むコードのテストを効果的に行うことができます。

ユニットテストはコードの品質向上に不可欠です。ChatGPT API を利用したアプリケーション開発においても、ユニットテストを積極的に導入し、より信頼性の高いソフトウェア開発を目指しましょう。

small_OpenAI-black-monoblossom.png

thumbnail_OpenAI-black-monoblossom.png

OpenAI-black-monoblossom.png

Jest で実装する ChatGPT API のユニットテスト

生成AIが生み出す「ハルシネーション」―すなわち、事実とは異なるもっともらしい情報の出力―は、業務利用や重要な意思決定において大きなリスクとなっています。そこで注目されるのが、複数の生成AIを同時に利用してその出力を比較・検証できるツール「[ChatHub](lhttps://chathub.gg/ja)」です。

本記事では、ChatHubの基本機能や活用事例、そして他の類似サービスとの実際の比較を通じ、ハルシネーション対策としての有用性について詳しく解説していきます。

## ChatHubとは？その基本機能と概要

![DALL·E 2025-02-06 16.21.10 - A digital screenshot-style illustration of a Chrome extension interface featuring the 'ChatHub' logo. The interface displays multiple chat windows on .webp](https://cont.sterfield.co.jp/uploads/DALL_E_2025_02_06_16_21_10_A_digital_screenshot_style_illustration_of_a_Chrome_extension_interface_featuring_the_Chat_Hub_logo_The_interface_displays_multiple_chat_windows_on_7bb6de6b74.webp)

ChatHubは、Google Chromeの拡張機能として提供されるツールで、複数の生成AI（ChatGPT、Gemini、Claude、Bing、Perplexity、Llama2など）に対して、同時にプロンプトを送信し、その回答を並列で比較できる画期的なプラットフォームです。  
従来、各生成AIごとに個別のタブを開いて利用していた場合、同じ質問に対する回答を逐一確認する手間がかかっていました。しかし、ChatHubを利用することで、複数のAIの出力を一画面上に集約し、どの回答がより正確か、どのAIがどのタスクに適しているかを容易に判別できるようになります。

【機能の主な特徴】  
- **並列比較機能**：同一のプロンプトを複数のAIに同時送信し、回答を並べて表示。  
- **ハルシネーション対策**：異なるAIの回答を比較することで、誤った情報（ハルシネーション）を見抜く手助けとなる。  
- **カスタマイズ性**：無料版では2つ、有料版（ChatHub プレミアム）では最大6つの生成AIを同時利用可能。  
- **拡張機能としての利便性**：Chromeブラウザから簡単にアクセスでき、操作は直感的。

## ハルシネーション対策としてのChatHubの有用性

【見出しイメージ画像案】  
「AIが出力した複数の文章の中から、正しい情報を選択するユーザーのイラスト」  ![DALL·E 2025-02-06 16.25.31 - A futuristic illustration of a user selecting the correct information from multiple AI-generated responses. On the left and right, different AI chat w.webp](https://cont.sterfield.co.jp/uploads/DALL_E_2025_02_06_16_25_31_A_futuristic_illustration_of_a_user_selecting_the_correct_information_from_multiple_AI_generated_responses_On_the_left_and_right_different_AI_chat_w_d14c735711.webp)
（例：左右に異なるAIの回答が表示され、中央でユーザーが真実を見極めるシーン）

生成AIの大きな課題は、入力プロンプトに対して不正確な、あるいは架空の情報を生成してしまう「ハルシネーション」です。例えば、同じ「日本の総理大臣は？」という質問に対して、ChatGPT、Claude、Geminiなどが微妙に異なる回答を返すケースがあります。  
ChatHubはこの問題を解決するために、以下の2点で非常に有用です。

1. **多角的な情報比較**  
　複数の生成AIに同時に質問することで、各AIの出力内容を並列で確認できます。もし一部のAIだけが誤った情報を返している場合、他のAIと比較することでその違いが明確になり、正しい情報を選び出すことが容易になります。

2. **信頼性の向上**  
　各AIはそれぞれ得意な分野やアルゴリズムに基づいて情報を生成しているため、同一の質問に対して複数の視点からの回答が得られます。これにより、情報の真偽を判断するための「クロスチェック」が可能になり、誤情報のリスクを大幅に低減させることができます。

【実際の比較例】  
例えば、「2023年の箱根駅伝の順位は？」というプロンプトを送信した場合、ChatGPTは表形式で詳細な順位情報を出力し、Bingはトップ3の情報のみを返すといった違いが確認できます。こうした具体例から、ユーザーは各生成AIの強みと弱みを把握し、用途に応じた最適なAIを選択することができます。

## ChatHubの利用方法とそのメリット

![DALL·E 2025-02-06 16.26.30 - An infographic-style illustration explaining the ChatHub interface. The image includes labeled sections such as 'Prompt Input Field,' 'AI Comparison R.webp](https://cont.sterfield.co.jp/uploads/DALL_E_2025_02_06_16_26_30_An_infographic_style_illustration_explaining_the_Chat_Hub_interface_The_image_includes_labeled_sections_such_as_Prompt_Input_Field_AI_Comparison_R_50037da0b9.webp)

ChatHubの利用方法は非常にシンプルです。まず、ChromeウェブストアからChatHub拡張機能をインストールします。インストール後は、画面下部のチャット入力欄にプロンプトを入力するだけで、あらかじめ設定した複数の生成AIに同時に質問が送信され、各AIの回答が並列で表示されます。

【利用のメリット】  
- **作業効率の向上**：一度に複数のAIから回答を得られるため、従来のようにタブを切り替える手間が省け、記事作成やリサーチのスピードが飛躍的に向上します。  
- **コスト削減**：正確な情報を早期に見極めることができ、誤った情報に基づく無駄な作業や修正作業が減ります。  
- **多用途な活用**：ビジネス文書作成、プログラミング支援、翻訳、マーケティング戦略の立案など、様々な業務に柔軟に対応可能です。  
- **ユーザーインターフェースのカスタマイズ**：有料版ではテーマカラーの変更、チャット履歴の全文検索、画像入力機能など、より高度な機能を利用できるため、自社のニーズに合わせた環境構築が可能です。

## 他の類似サービスとの比較

【見出しイメージ画像案】  
「複数のAIツール（ChatGPT、Gemini、Claudeなど）のロゴが並んでいる比較チャートのイラスト」  
（例：各サービスのロゴと主要機能、料金プラン、得意分野を表したチャート）

ChatHubは、複数の生成AIを一括で利用できる点で非常に魅力的ですが、類似の生成AIサービスとしては以下のようなものがあります。

他の類似サービスとして、生成AI本体ではなく、ChatHubのように複数のAIチャットボットを同時に利用できるツールは、いくつか存在します。以下の例は、単体の生成AIではなく、複数のAIを一括して比較・連携できるプラットフォームとして参考になります。

### 1. ChatALL  
ChatALLは、GitHubで公開されているオープンソースプロジェクトで、ChatGPT、Bing Chat、Google Bardなど複数のAIチャットボットを一つの画面で利用できるツールです。これにより、ユーザーは異なるAIの回答を一度にチェックし、比較検討することができます。ChatALLは主に技術者向けですが、カスタマイズや拡張が可能で、生成AIの回答の違いを確認したい場合に有用です。

### 2. 天秤AI  
天秤AIは、日本のIT関連大手企業が手がけたツールで、最大6つの生成AIチャットボットを同時に利用できるプラットフォームです。ChatHubと同様、同一プロンプトに対する複数の回答を並列に表示することで、情報の正確性を検証しやすくする仕組みが特徴です。特に、日本語対応が充実しており、初心者でも扱いやすい点が評価されています。

### 3. ChatLLM Network  
研究論文「ChatLLM Network: More brains, More intelligence」では、複数の対話型大規模言語モデル（LLM）がネットワーク上で連携し、協力して回答生成や意思決定を行う仕組みが提案されています。この概念は、単なる並列利用を超えて、AI同士が互いにフィードバックし合いながら、より客観的な回答を導くためのシステムを目指しており、今後の実用化が期待される領域です。

---

これらのツールやプロジェクトは、ChatHubのように単一の生成AIではなく、複数のAIチャットボットを同時に利用して、各々の回答を比較検証できるという点で共通しています。ユーザーは、これらのプラットフォームを利用することで、各AIの強みや弱みを把握し、より正確な情報の選別や効率的な情報収集が可能になります。

これらの情報をもとに、各類似サービスの特徴やメリット・デメリットを比較しながら、自社に最適なプラットフォームを選択することが重要です。

## 実際に並列比較してみた文章例

![ChatHub.png](https://cont.sterfield.co.jp/uploads/Chat_Hub_60262c8542.png)

以下は、ChatHubを用いて「今の日本の総理大臣は誰ですか？」という質問に対して、各生成AIが返した回答の一例です。

- **ChatGPT（GPT-4）**：「現在の日本の総理大臣は岸田文雄（きしだ ふみお）です。」  
- **Gemini（Google）**：「現時点では選挙または政治家に関する回答には対応できません。私はできる限り正確に回答するようトレーニングされていますが、間違えることがあります。私が選挙や政治に関する議論において精度を高められるようになるまでは、Google 検索をご利用ください。」  
- **Claude**：「現在の日本の総理大臣は石破茂（いしば しげる）氏です。2024年10月1日に就任し、岸田文雄前総理の後任として務めています。」

このように、各AIがほぼ同じ回答を返している場合は信頼性が高いと判断できますが、もし一部のAIが明らかに誤った情報を出した場合、その回答は除外するなど、ユーザーが最終判断を下す材料となります。

また、同一の質問に対して細かい部分でニュアンスが異なる場合（例：具体的な政策の説明や支持率の記載など）、それらを総合的に比較することで、より正確な情報を得ることが可能です。これがChatHubの並列比較機能の大きなメリットと言えます。

## ChatHubの有料版と無料版の違い

![5r86lknk.png](https://cont.sterfield.co.jp/uploads/5r86lknk_89feb803a0.png)

ChatHubは基本的に無料で利用でき、無料版では2つの生成AIを同時に使うことができます。しかし、有料版（ChatHub プレミアム）にアップグレードすると、以下のような追加機能が利用可能になります。

- **使用可能な生成AI数**：無料版は2つ、有料版は最大6つまで同時利用可能。  
- **Webアクセス機能**：最新情報を取得するためのWeb検索機能が搭載され、生成された回答に最新のデータを反映可能。  
- **チャット履歴全文検索**：過去のチャット内容をキーワード検索でき、必要な情報をすぐに抽出可能。  
- **テーマのカスタマイズ**：自分好みの表示テーマやカラー設定ができ、作業環境をパーソナライズできる。  
- **画像入力機能**：有料版では画像も入力できるため、テキストだけでなく、画像を組み合わせたプロンプトが可能に。  
- **優先サポート**：トラブル発生時に迅速なサポートを受けることができる。

このような有料版の機能により、より高度な業務利用やクリエイティブな作業が可能となり、特にプロフェッショナルな現場では大きなメリットがあります。

## まとめ：ChatHubが切り開く生成AI活用の新時代

【見出しイメージ画像案】  
「未来のオフィスで、複数のAIとともに生産性が向上しているイメージ」  
（例：現代的なオフィスで、ChatHubを利用して効率的に作業を進めるビジネスパーソンのシーン）

これまで、生成AIはその高性能さゆえに業務の効率化やクリエイティブな作業の支援に活用される一方、ハルシネーションという重大なリスクも抱えていました。そんな中、ChatHubは複数の生成AIを並列に比較することで、誤った情報のリスクを大幅に軽減し、正確な情報収集を実現するツールとして注目されています。

・**多角的な視点の獲得**：各AIの強みを組み合わせ、真偽の確認が容易に。  
・**作業効率の劇的向上**：一度に複数の回答を得られるため、リサーチ時間が大幅に短縮。  
・**柔軟なカスタマイズ性**：有料版により、さらに高度な機能で自社のニーズに最適な環境が構築可能。

また、ChatHubはChatGPT、Gemini、Claude、Microsoft 365 Copilotなど、各主要な生成AIサービスと併用することで、それぞれの出力の違いや強みを活かし、最適な情報を抽出することができるため、今後ますますその活用範囲が広がることが期待されます。

生成AIの進化は止まることがありません。新たな技術やツールが次々と登場する中で、ChatHubのような並列比較ツールは、ビジネスやクリエイティブな現場での意思決定をサポートするための必須ツールとなるでしょう。皆さんもぜひ、ChatHubを活用して、生成AIの真価を実感してみてください。

以上のように、ChatHubはハルシネーション対策としてだけでなく、複数の生成AIの出力を効率的に比較し、最適な情報を得るための強力なツールです。これにより、誤情報リスクを低減し、正確で信頼性の高いコンテンツを生み出すことができます。ぜひ一度、ChatHubの無料版から試してみて、その効果を実感してください。

（※本記事は最新のWeb情報を元に執筆しており、情報は随時更新される可能性があります。）


large_DALL·E 2025-02-06 16.20.00 - A futuristic digital workspace with multiple AI operating simultaneously. A modern office with high-tech holographic displays showing AI responses fro.webp

medium_DALL·E 2025-02-06 16.20.00 - A futuristic digital workspace with multiple AI operating simultaneously. A modern office with high-tech holographic displays showing AI responses fro.webp

small_DALL·E 2025-02-06 16.20.00 - A futuristic digital workspace with multiple AI operating simultaneously. A modern office with high-tech holographic displays showing AI responses fro.webp

thumbnail_DALL·E 2025-02-06 16.20.00 - A futuristic digital workspace with multiple AI operating simultaneously. A modern office with high-tech holographic displays showing AI responses fro.webp

DALL·E 2025-02-06 16.20.00 - A futuristic digital workspace with multiple AI operating simultaneously. A modern office with high-tech holographic displays showing AI responses fro.webp

生成AIのハルシネーション対策における「ChatHub」の有用性とは？

# はじめに
近年、チームワークや情報共有の重要性が高まる中で、さまざまなツールやサービスが活用されています。その中でも、GoogleスプレッドシートとGoogle Chatは、多くの企業や組織で利用されている定番ツールです。
この記事では、Google Apps Scriptを使用して、Google スプレッドシートで特定の操作が行われた際にGoogle Chatへ自動で通知を送る方法について、その**手順**と**応用例**を紹介します。

### 手順概要
1. Google Chat Webhook URLの取得
2. Google Apps Scriptの作成
3. Google Apps Scriptのトリガー設定
4. Google Chatへの通知送信の確認

#### 1. Google Chat Webhook URLの取得
最初に、Google Chatに通知を送信するためのWebhook URLを取得します。

1. Google Chatを開き、通知を送りたいチャットルームを選択します。
2. チャットルーム名をクリックし、「アプリと統合」を選択します。
3. 「+Webhookを追加」をクリックし、名前を入力して「保存」をクリックします。
4. 表示されたWebhook URLをコピーします。このURLは後でスクリプト(手順2)に使用します。

 ![](https://cont.sterfield.co.jp/uploads/webhook_f7e4ed54ef.png) 

**補足**

・Webhook URLは、Chatルームごとに個別に発行されます。

・複数のWebhook URLを作成し、異なるChatルームへ通知することも可能です。


#### 2. Google Apps Scriptの作成
次に、Google スプレッドシートに関連付けるGoogle Apps Scriptを作成します。

1. 対象のGoogle スプレッドシートを用意して開きます。
2. メニューバーから「拡張機能」をクリックし、「Apps Script」を選択します。
3. スクリプトエディタが開きます。新しいプロジェクトが作成され、デフォルトのコードエディタが表示されます。
4. 以下のコードをエディタに貼り付け、Webhook URLを先ほどコピーしたURLに置き換えます。

 ![](https://cont.sterfield.co.jp/uploads/script_4be5865e34.png) 

```
function sendToGoogleChat(message) {
  var url = "YOUR_WEBHOOK_URL";  // ここをWebhook URLに置き換えます

  var payload = JSON.stringify({ "text": message });
  
  var options = {
    "method": "POST",
    "contentType": "application/json",
    "payload": payload
  };

  UrlFetchApp.fetch(url, options);
}

function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  var range = e.range;
  var editedValue = range.getValue();
  var message = "Cell " + range.getA1Notation() + " was edited. New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
このスクリプトは、スプレッドシートのセルが編集された際に、その情報をGoogle Chatに送信します。

**ポイント**

・YOUR_WEBHOOK_URL を、1で取得したWebhook URLに置き換えてください。

・必要に応じて、messageの内容を編集してください。


#### 3. Google Apps Scriptのトリガー設定
1. スクリプトを保存し、トリガーを設定してスクリプトが自動的に実行されるようにします。
2. スクリプトエディタの時計アイコン（「トリガー」）をクリックします。
3. 「トリガーを追加」をクリックし、「notifyOnEdit」を選択します。
4. イベントの種類を「スプレッドシートから」に設定し、「編集時」を選択します。
5. 保存してトリガーを有効にします。(認証ダイアログが出てくる場合は、認証を行います。)

 ![](https://cont.sterfield.co.jp/uploads/trigger_7bf337dbff.png) 

#### 4. Google Chatへの通知送信の確認
設定が完了したら、実際にGoogle スプレッドシートでセルを編集してみてください。編集が行われると、指定したチャットルームに通知が送信されるはずです。

 ![](https://cont.sterfield.co.jp/uploads/spreadsheet_ba705a00a8.png) 

 ![](https://cont.sterfield.co.jp/uploads/chat_05129bfbf6.png) 


### 応用例
#### 応用例1: 特定のシートやセル範囲でのみ通知を送る
特定のシートやセル範囲に変更があった場合のみ通知を送るようにスクリプトをカスタマイズできます。

```
function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  
  // シート名が「Sheet1」でない場合は通知を送らない
  if (sheet.getName() != "Sheet1") {
    return;
  }

  var range = e.range;
  var editedValue = range.getValue();
  var message = "Cell " + range.getA1Notation() + " was edited. New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
これにより、「Sheet1」でのみ変更があった場合に通知が送られます。


#### 応用例2: 通知内容の詳細化
通知内容を詳細にカスタマイズすることも可能です。例えば、変更があったセルの前の値と新しい値の両方を通知に含めることができます。

```
function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  var range = e.range;
  var oldValue = e.oldValue;  // 前の値
  var editedValue = range.getValue();  // 新しい値
  var message = "Cell " + range.getA1Notation() + " was edited. Old value: " + oldValue + ", New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
これにより、編集前と編集後の値を通知に含めることができます。


# まとめ
Google Apps ScriptとWebhookを使って、スプレッドシートの操作をGoogle Chatへ自動通知する方法をご紹介しました。これにより、チームメンバーは**リアルタイムで情報共有**でき、**タスク管理**や作業のトラッキングが**効率化**されます。ぜひ、活用してチームワークを強化してください。

large_eyecatch.png

medium_eyecatch.png

small_eyecatch.png

thumbnail_eyecatch.png

eyecatch.png

Googleスプレッドシートでの操作をGoogleChatに通知する方法

## はじめに
Eコマース（電子商取引）サイトは、近年のテクノロジーの進化とともに急速に発展しています。その中で、生成AI（人工知能）の活用が注目されています。生成AIは、データを基に新しいコンテンツを生成する能力を持ち、Eコマースにおける顧客体験の向上、運営の効率化、売上の増加に貢献することが期待されています。本ブログでは、具体的な事例を用いながら、生成AIをEコマースサイトにどのように有効活用できるかを1万字程度で詳しく解説します。

## 生成AIとは？
 ![](https://cont.sterfield.co.jp/uploads/Gemini_Generated_Image_9s6v209s6v209s6v_33e4d606d3.jpeg) 
生成AIとは、ニューラルネットワークを用いて新しいデータやコンテンツを生成する人工知能技術の一種です。この技術は、文章、画像、音声、動画など多岐にわたるコンテンツの生成に利用されます。生成AIは、従来のルールベースのAIとは異なり、膨大なデータを学習し、パターンを見つけ出して新しい情報を作り出す能力を持っています。

## Eコマースにおける生成AIのメリット
生成AIをEコマースサイトに活用することで得られるメリットは多岐にわたります。以下に主要なメリットを挙げます。

### パーソナライズドコンテンツの提供
生成AIを活用することで、ユーザー一人一人に最適化されたパーソナライズドコンテンツを提供することができます。例えば、ユーザーの過去の購買履歴や閲覧履歴を基に、おすすめの商品や関連するコンテンツを自動生成することが可能です。これにより、ユーザーは自分に合った情報を迅速に得ることができ、購買意欲を高めることができます。

### 自動商品説明の生成
商品の説明文を自動生成することも生成AIの大きな利点です。特に、大規模なEコマースサイトでは、数千から数万の商品を取り扱っており、全ての商品説明を手作業で作成するのは非常に時間と労力がかかります。生成AIを用いることで、高品質で一貫性のある商品説明を迅速に生成することができます。

### 効率的なカスタマーサポート
生成AIは、カスタマーサポートの効率化にも寄与します。チャットボットを用いて、24時間対応の顧客サポートを提供することができます。生成AIを活用することで、より自然な会話が可能となり、顧客満足度を向上させることができます。

## 生成AI導入のステップ
 ![](https://cont.sterfield.co.jp/uploads/Gemini_Generated_Image_9s6v1y9s6v1y9s6v_d127933595.jpeg) 
生成AIをEコマースサイトに導入するためのステップを以下に示します。

### ニーズの特定
まずは、自社のEコマースサイトにおいて生成AIをどのように活用したいのか、そのニーズを明確にします。パーソナライズドレコメンデーション、商品説明の自動生成、カスタマーサポートの効率化など、具体的な目的を設定することが重要です。

### データの収集と整備
生成AIを効果的に活用するためには、高品質なデータの収集と整備が不可欠です。ユーザーの購買履歴、閲覧履歴、商品情報など、生成AIが学習するためのデータを収集し、適切に整備することが求められます。

### AIモデルの選定とトレーニング
収集したデータを基に、適切なAIモデルを選定し、トレーニングを行います。ここでは、生成AIの専門知識が必要となるため、社内のデータサイエンティストや外部の専門家の協力を得ることが推奨されます。

### システムの統合
トレーニング済みのAIモデルをEコマースサイトのシステムに統合します。ここでは、サイトのフロントエンドおよびバックエンドのシステムと生成AIの連携をスムーズに行うための技術的な調整が必要です。

### テストと改善
導入後は、生成AIのパフォーマンスを定期的にテストし、必要に応じて改善を行います。ユーザーからのフィードバックを収集し、AIモデルの精度向上に役立てることが重要です。

##  生成AI活用の具体的事例ニュース
以下、Eコマースサイトにおける生成AI活用事例のニュースを10個ご紹介します。

- 【必読】コマースリーダー2700人の声を元にした5つのAI活用術 - Salesforce

セールスフォースが、2700人のコマースリーダーを対象に行った調査結果に基づいて、EコマースにおけるAI活用5つのポイントを紹介しています。
https://www.salesforce.com/news/stories/ai-agents/

- AIを活用したECサイトの実例 - Multifverse

商品レコメンデーション、チャットボット、需要予測など、EコマースサイトにおけるAIの具体的な活用例を紹介しています。
https://www.multifverse.com/

- ECサイトに生成AIを導入するメリット・デメリットを徹底解説！ - AI研究所

生成AIをECサイトに導入する際のメリットとデメリット、具体的な活用事例などを紹介しています。
https://ai-kenkyujo.com/news/ec-seiseiai/

- AIを活用してECサイトの運用を効率化する7つの機能とは？ - ebisumart

商品レコメンデーション、チャットボット、需要予測、画像生成など、ECサイトの運用を効率化するAI機能7つを紹介しています。
https://www.ebisumart.com/blog/ai/

- ECサイトにおけるAI（人工知能）活用方法とは？ - 株式会社いつも

顧客対応、商品レコメンデーション、需要予測など、ECサイトにおけるAIの具体的な活用方法を紹介しています。
https://itsumo365.co.jp/blog/post-20132/

- 【事例あり】ECサイトにおけるAI活用事例5選と導入効果とは？ - HubSpot

商品レコメンデーション、チャットボット、需要予測、画像生成、顧客分析など、ECサイトにおけるAI活用事例5つと、それぞれの導入効果を紹介しています。
https://ec-orange.jp/ec-media/?p=19454

- 【2023年版】eコマースにおけるAI活用事例10選と導入のメリット・デメリット | トランシーバー

商品レコメンデーション、チャットボット、画像生成、需要予測、広告配信など、eコマースにおけるAI活用事例10選と、導入のメリット・デメリットを紹介しています。
https://www.dsk-cloud.com/blog/gc/13-use-cases-of-ai-in-business

- 【2023年最新】ECサイトにおけるAI活用事例と導入効果とは？ | AI転用ラボ

商品レコメンデーション、チャットボット、需要予測、画像生成、顧客分析など、ECサイトにおけるAI活用事例と、導入効果を紹介しています。
https://ec-orange.jp/ec-media/?p=19454

- 【保存版】ECサイトにおけるAI活用事例12選と導入のメリット・デメリット | データ分析ツールの選び方 | ツールラボ

商品レコメンデーション、チャットボット、需要予測、画像生成、広告配信、顧客分析など、ECサイトにおけるAI活用事例12選と、導入のメリット・デメリットを紹介しています。
https://ec-orange.jp/ec-media/?p=19454

- 【2023年最新】ECサイトにおけるAI活用事例と導入効果とは？ | AI転用ラボ

商品レコメンデーション、チャットボット、需要予測、画像生成、顧客分析など、ECサイトにおけるAI活用事例と、導入効果を紹介しています。
https://dl.acm.org/doi/10.1145/3474085.3475624

これらの事例は、ほんの一例です。生成AIは、日々進化しており、今後さらに多くの活用事例が生まれていくことが期待されます。

## 生成AIの将来展望
 ![](https://cont.sterfield.co.jp/uploads/Gemini_Generated_Image_9s6v1x9s6v1x9s6v_4cf827d35d.jpeg) 
生成AIの技術は日々進化しており、今後さらに多くの分野での活用が期待されています。Eコマースにおいても、新たな技術の導入により、より高度なパーソナライズドコンテンツの提供や、効率的な運営が可能となるでしょう。

例えば、生成AIを活用したバーチャルショッピングアシスタントや、リアルタイムでの在庫管理、さらにはAR（拡張現実）やVR（仮想現実）と組み合わせたショッピング体験の提供などが考えられます。これにより、ユーザーはより豊かで便利なショッピング体験を享受できるようになるでしょう。

## まとめ
生成AIは、Eコマースサイトにおいて多大な可能性を秘めています。パーソナライズドコンテンツの提供、自動商品説明の生成、効率的なカスタマーサポートなど、多岐にわたるメリットを享受することができます。また、具体的な導入ステップを踏むことで、生成AIを効果的に活用し、ビジネスの成長を促進することが可能です。

今後も技術の進化に伴い、生成AIの活用範囲はますます広がることが予想されます。Eコマース業界において、生成AIをいかに効果的に取り入れるかが、競争力を維持し、さらなる成長を遂げる鍵となるでしょう。

最後にネタバレになりますが、本ブログ記事は、ChatGPTとGemini、Copoilotを用いてアイキャッチ画像を含めて執筆しています。


large_Gemini_Generated_Image_9s6v1z9s6v1z9s6v.jpeg

medium_Gemini_Generated_Image_9s6v1z9s6v1z9s6v.jpeg

small_Gemini_Generated_Image_9s6v1z9s6v1z9s6v.jpeg

thumbnail_Gemini_Generated_Image_9s6v1z9s6v1z9s6v.jpeg

Gemini_Generated_Image_9s6v1z9s6v1z9s6v.jpeg

ECサイトにおける生成AIの活用事例2024

近年、ウェブサイトのコンテンツを取得するスクレイピング技術が増えています。この記事では、一般的なスクレイピングの方法をChrome拡張機能として実装します。特に、動的に読み込まれるコンテンツへの対応として、MutationObserverを使用した方法に焦点を当てて解説します。
これら、全てChatGPTとの対話で作ることができます。

なお、サードパーティのサイトに対してスクレイピングを行う際には、そのサイトの利用規約やrobots.txtを確認して、違反行為をしないよう注意が必要です。

## 1. 前提となる技術

- JavaScriptの基本知識
- Chrome拡張機能の概念
- DOM操作の基本

## 2. ターゲットとなる情報

- 商品名
- 価格
- 商品のリンク

などを決めます。

## 3. 動的コンテンツとは？
近年のウェブページは、ページの初回読み込み時にすべてのコンテンツが読み込まれるわけではなく、ユーザーの操作に応じて後からコンテンツが動的に追加されることが多いです。このような動的コンテンツの取得は、単純なスクレイピング技術では難しい場合があります。

## 4. MutationObserverとは？
MutationObserverは、DOMの変更を監視するための強力なAPIです。これを使用すると、DOMに変更があった際にコールバック関数を実行して、変更された要素に対して操作を行うことができます。動的コンテンツのスクレイピングにおいて非常に役立つツールとなります。

## 5. スクレイピングの実装
まず、Chrome拡張機能としての基本的な構造を構築します。

- manifest.jsonの作成
- ポップアップHTMLの作成
- コンテンツスクリプトの作成

具体的なスクレイピング処理は割愛いたしますが、例えば、もし構造が以下のようであれば

```
<li class="item">
    <a href="product_link">Product Name</a>
</li>
```

コンテンツスクリプト（content.js）は以下のように記述します。

```
let links = Array.from(document.querySelectorAll('.item a'));
```

## 6. 工夫した点: MutationObserverの活用
このガイドの主要なポイントは、MutationObserverの活用です。Shopeeのページは、新しい商品情報が動的に読み込まれることが多いため、このAPIを使用してDOMの変更を監視し、新しく追加された商品情報も取得するようにしました。

## 7. まとめ
この記事では、スクレイピングするための方法をChrome拡張機能として紹介しました。特に、動的コンテンツの取得に焦点を当て、MutationObserverを活用する方法を取り上げました。この手法は、他の多くのウェブサイトでも適用可能で、動的コンテンツの取得に苦労している方にとって有益な情報となることを願っています。


large_DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

medium_DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

small_DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

thumbnail_DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

DALL·E 2023-10-27 12.49.25 - Photo of a laptop screen displaying lines of code related to web scraping, with the ChatGPT logo prominently visible in the top corner. Beside the lap.png

ChatGPTで作るChrome拡張機能を利用した動的コンテンツのスクレイピングガイド

今回は、Chrome拡張機能の作成についての基本的なガイドをシェアしたいと思います。
「ChatGPT”の”Chrome拡張機能」ではなく、「ChatGPT”で”Chrome拡張機能」を作ってみたです。
Chrome拡張機能は、Google Chromeのブラウザに新しい機能を追加するためのプラグインのようなものです。
なので、ブラウザ上でこんなのあったら良いのになと思ったら、自分で割と簡単に作れてしまうのです。この辺りがChatGPTの革命的なところですね。

ちなみに、MicrosoftEdgeもChromeと同じChromiumベースなので、自作拡張機能を追加することが可能になっています。

## 拡張機能の基本的なファイル構成
 ![](/uploads/chrome_Extension_a9b20e3317.png) 
ファイル構成としては上図を準備します。
各ファイルの役割は以下です。
chatGPTに作ってもらう時もChrome拡張機能にしてとプロンプトに入れると大抵の場合、下記の基本ファイルの記述を教えてくれるので、それらをエディタに記述し、それぞれのファイル名と拡張子で保存をし、任意のフォルダに格納するだけです。
アイコンはchatGPTでは作ってくれないので画像ファイルとして別途用意して下さい。

簡単にリサイズできるサイトもご参考までに。
https://resizeappicon.com/

1. マニフェストファイル (manifest.json): 拡張機能のメタデータを提供します。名前、バージョン、権限、ブラウザアクションやページアクション、コンテンツスクリプトなどの拡張機能の主要な情報を含むJSON形式のファイルです。
2.  バックグラウンドスクリプト (background.js): ブラウザやページのイベントに反応して、拡張機能の主要な機能を制御します。
3. コンテンツスクリプト (content.js): 直接ウェブページにインジェクトされ、ページのDOMを変更する役割を持っています。
4. ポップアップ: ブラウザのツールバーにある拡張機能のアイコンをクリックしたときに表示される小さなウィンドウです。ポップアップのHTML (popup.html) とそれに関連するJavaScript (popup.js) が含まれます。
5. オプションページ: 拡張機能の設定をユーザーがカスタマイズできるページ。options.html と options.js が含まれます。
6. アセットや他のリソース: アイコンや画像、その他の必要なリソース。例えば、icon.png など。
 ![](/uploads/_2518b036c6.png) 

## Chrome拡張機能のインストール手順
 ![](/uploads/2_24dc3436fa.png) 
上述の構成に格納したフォルダを指定することで読み込みが完了すると拡張機能に自分の作ったものが表示されます。

1. Google Chromeブラウザを開きます。
2. URLバーに chrome://extensions/ を入力して、拡張機能のページを開きます。
3. ページの右上にある「デベロッパーモード」のトグルをオンにします。
4. 「パッケージ化されていない拡張機能を読み込む」ボタンをクリックして、作成した拡張機能のディレクトリ（フォルダ）を選択します。
## デバッグ方法
 ![](/uploads/3_b34eedf322.png) 
やっぱり最初の質問でいきなり動くものは作れないので、これもChatGPTにエラーの内容を修正してもらいながら進めます。各種デバッグの方法を記載します。
1. chrome://extensions/ にアクセスします。
2. インストールした拡張機能のリストから、デバッグしたい拡張機能の「詳細」ボタンをクリックします。
3. 「バックグラウンドページ」のセクションに「検証」または「background.html」のリンクが表示されている場合、それをクリックすることで、Chrome Developer Toolsが開きます。
4. ポップアップをデバッグするには、拡張機能のアイコンをクリックしてから右クリックし、「検証」を選択します。
5. コンテンツスクリプトのデバッグは、ページ上で右クリックして「検証」を選び、コンソールを開いてエラーやログを確認します。


## まとめ
 ![](/uploads/4_517f67b3ea.png) 
皆さんも是非、自分のChrome拡張機能を作成してみてください！
拡張機能欄に自分のアイコン（当社のロゴ）が表示された時はプチ感動しました。
構想中のものは、アクティブなタブに対して情報を取得し、日々の業務を楽にするような便利拡張機能なのですが、まだまだ試作中なので、具体的な拡張機能は次回としたいと思います。




large_439082_I made a Chrome extension with ChatGPT! _xl-1024-v1-0.png

medium_439082_I made a Chrome extension with ChatGPT! _xl-1024-v1-0.png

small_439082_I made a Chrome extension with ChatGPT! _xl-1024-v1-0.png

thumbnail_439082_I made a Chrome extension with ChatGPT! _xl-1024-v1-0.png

439082_I made a Chrome extension with ChatGPT! _xl-1024-v1-0.png

ChatGPTでChrome拡張機能を作ってみた！



## はじめに
近年、テクノロジーの進歩により、自然言語処理の分野でも驚くべき進歩がありました。その中でも、OpenAIのChatGPTは、会話を自然な形で行い、言語モデリングの能力を備えた最新の言語モデルです。また、Google Apps Script（GAS）は、G Suiteの一部として提供されるクラウドベースのスクリプト環境です。本記事では、chatGPTとGASを組み合わせて、議事録要約ツールを作成する方法について紹介します。特に、長文に対応する機能を追加する方法に焦点を当てます。

前回は、Makeというノーコードツールを使って、chatworkにまで送信する流れを作りましたが、トークン数の制限があり、長文に対応ができないという課題が残っておりましたが、今回はその課題を克服した改良版になります。

https://sterfield.co.jp/blog/18142/


## chatGPTの導入
まず、chatGPTを使って自然言語処理のパワーを手に入れましょう。OpenAIのAPIを使用すると、chatGPTを簡単に利用することができます。APIキーを取得し、適切なエンドポイントに接続します。Pythonや他のプログラミング言語を使用して、APIとのインタラクションを設定しましょう。

今回は冒頭にある通り、Google Apps Script（GAS）とモデルはgpt-3.5-turboで作成しました。

## GASでの要約機能の作成
GASを使用することで、Googleドキュメントやスプレッドシートなど、G Suiteのさまざまなアプリケーションを拡張することができます。GASエディタを開き、新しいプロジェクトを作成しましょう。次に、chatGPT APIとの通信を設定するために必要なコードを追加します。これにより、議事録のテキストをchatGPTに送信し、要約を取得できるようになります。

GASのコードそのものもChatGPTに書いてもらいました。
また、プロントはPROMPTYさんの[【プロンプト解説】ChatGPTで要約を作成する方法](https://bocek.co.jp/media/formula/making-document/110/)という記事を参考にさせて頂きました。  
一番最初の指示文は以下です。最終形態の内容とは異なります。
 ![](/uploads/Summarizing_GAS_Code_1_e667531717.png) 


書いてもらったコードをスプレッドシート＞拡張機能＞Apps Scriptで開いたページのコード.gs欄にベタっと貼り付けます。
 ![](/uploads/Chat_GPT_GAS_Google_1_8c0845570a.png)     

 ![](/uploads/chat_GPT_GAS_Apps_Script_36d07dd8ad.png) 

その後、Apps Scriptのまま、▶︎実行を押すとスクリプトが動作し、不完全な場合、エラーが返ってくるので、そのエラーコードをChatGPTに貼り付けると修正コードを返してくれるという具合で何往復も行いました。

 ![](/uploads/Summarizing_GAS_Code_82ac14433b.png) 

この工程はプロンプトエンジニアリングといって良いのでしょうか。

## 長文対応の実装
議事録は通常、長い文章で構成されることがあります。要約ツールをより実用的にするためには、長文にも対応する必要があります。chatGPTにはテキストのトークン制約があるため、長い文章を一度に送信することはできません。しかし、GASを使用して長文を複数のパートに分割し、chatGPTに渡すことができます。それぞれのパートの要約を取得し、最終的な要約として結合します。

以下が1024トークンごとに分割する部分のスクリプトです。

```
  // 1024トークンごとにテキストを分割します。
  var tokens = Math.ceil(cellContent.length / 1024);
  for (var i = 0; i < tokens; i++) {
    var part = cellContent.slice(i * 1024, (i + 1) * 1024);

    // partが空ではないことを確認します
    if (part.trim() != '') {
      var summary = sendToChatGPT(part);
      summaries += summary + "\n";
    }
  }
```

## ユーザーインターフェースの作成
ツールを使いやすくするために、GASを使用して独自のユーザーインターフェース（UI）を作成しましょう。UIを作成するには、GASのHTMLサービスを利用します。UIにはテキストエリアやボタンを配置し、ユーザーが議事録を入力し、要約を取得できるようにします。

 ![](/uploads/Chat_GPT_GAS_Google_2_95a8cf7e97.png) 

上図のようにメニューバーに「議事録を要約」というメニューを出すためのスクリプトです。

```
// スプレッドシートが開かれたときにメニューボタンを作成します。
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('議事録を要約')
    .addItem('スクリプトを実行する', 'summarizeMinutes')
    .addToUi();
}
```

## 今回できたGASの共有

上記を全て盛り込んで試行錯誤の上完成したGASの全容は以下になります。
ご利用にあたって以下の項目は各自置き換えてください。

- YOUR_OPENAI_API_KEY→あなたのOpenAIのAPIキーを設定してください
- シート1→ご利用されるシート名に合わせてください。
- A2→元のテキストを置くセルに合わせてください。
- B2→要約後のテキストを置きたいセルに合わせてください。
- 'max_tokens': 100,  → おおよそ400文字程度に要約するために設定

このGASのご利用により何らかの損害が生じても当社は， 一切損害を賠償しません。自己責任の元、ご利用ください。

```
// まず最初に、OpenAIのAPIキーを設定します。
var openaiApiKey = 'YOUR_OPENAI_API_KEY; // あなたのOpenAIのAPIキーを設定してください

// スプレッドシートが開かれたときにメニューボタンを作成します。
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('議事録を要約')
    .addItem('スクリプトを実行する', 'summarizeMinutes')
    .addToUi();
}

function summarizeMinutes() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  var cellContent = sheet.getRange('A2').getValue();
  var summaries = '';

  // 1024トークンごとにテキストを分割します。
  var tokens = Math.ceil(cellContent.length / 1024);
  for (var i = 0; i < tokens; i++) {
    var part = cellContent.slice(i * 1024, (i + 1) * 1024);

    // partが空ではないことを確認します
    if (part.trim() != '') {
      var summary = sendToChatGPT(part);
      summaries += summary + "\n";
    }
  }

  // 結果をB2のセルに記載します。
  sheet.getRange('B2').setValue(summaries);
}

function sendToChatGPT(text) {
  var url = 'https://api.openai.com/v1/chat/completions';
  var payload = {
    'model': 'gpt-3.5-turbo',
    'messages': [{
      'role': 'system',
      'content': 'あなたはプロの編集者です。以下の制約条件に従って、入力する文章を要約してください。\n#制約条件\n・重要なキーワードを取りこぼさない。\n・文章の意味を変更しない。\n・架空の表現や言葉を使用しない。\n・文章中の数値には変更を加えない。'
    }, {
      'role': 'user',
      'content': text
    }],
    'max_tokens': 100, // おおよそ400文字程度に要約するために設定
    'temperature': 0.5
  };
  var options = {
    'method' : 'post',
    'headers': {
      'Authorization': 'Bearer ' + openaiApiKey,
      'Content-Type': 'application/json'
    },
    'payload' : JSON.stringify(payload)
  };
  var response = UrlFetchApp.fetch(url, options);
  var data = JSON.parse(response.getContentText());
  return data['choices'][0]['message']['content'].trim();
}
```

## テスト結果
青空文庫で著作権の切れた小説を探し、芥川龍之介の羅生門が6000字超だったので、試した結果が以下になります。
トークン数の壁を打ち破り、500文字超に要約ができています。
また、実際の1時間程度の会議を音声入力にて文字起こしした17,000文字程度も要約が動作しましたので実用的な範囲内はクリアしていると思われます。

最大、何文字まで出来るかの検証は行っておりませんが、一回の処理に6分間程度の制限があるようなので、それを超える処理となった場合はエラーとなるでしょう。
 ![](/uploads/Chat_GPT_GAS_Google_aa91777343.png) 

## 気になるAPI価格
前回の記事から期間が空いて、無料期間は過ぎていたため、課金しました。
試行錯誤中に20〜30回程度は、スクリプトを実行しましたが下記のような結果で、1ドルにも満たない金額でしたのでご参考ください。
  ![](/uploads/Usage_Open_AI_API_58407080e5.png) 
        

## 工夫ポイント
トークン数をギリギリ攻める設定をすると引っかかってしまうので、1024トークンごとに区切るようにした。これは上限2048トークンの半分になります。


##  まとめ
chatGPTとGASを組み合わせて議事録要約ツールを作成することは、簡単かつ効果的な方法です。chatGPTの強力な自然言語処理能力を活用しながら、GASを使用して長文にも対応することができます。これにより、議事録を手早く要約し、重要な情報を抽出することができます。ぜひ、この記事を参考にして、自分自身の議事録要約ツールを作成してみてください。  

スクリプトを全てchatGPTに書いてもらい、その内容もchatGPTのAPIに送って文章を要約してもらうというもので、ブログ記事の本文のベースもchatGPTに聞き、アイキャッチ画像も画像生成AIで作りました。つまり、この記事はほぼ生成AIで構成されています。



large__29bd01ef-edba-4198-a899-3ca63fb1f902.jpeg

medium__29bd01ef-edba-4198-a899-3ca63fb1f902.jpeg

small__29bd01ef-edba-4198-a899-3ca63fb1f902.jpeg

thumbnail__29bd01ef-edba-4198-a899-3ca63fb1f902.jpeg

_29bd01ef-edba-4198-a899-3ca63fb1f902.jpeg

chatGPTとGASで議事録要約ツールを作ってみた（長文対応）

<h2>はじめに</h2>
<p>これは非エンジニアがノーコードツールを使って、試行錯誤している様子をブログにしたものです。</p>
<p>ツッコミどころ満載かと思いますが、ご容赦ください。</p>
<h2>Chat GPTの可能性を模索</h2>
<p>鮮烈なデビューとともにその勢いは衰えることなく怒涛のリリースを行うChat GPT。業務効率改善に営業畑の人間が取り組むことにしました。</p>
<h2>参考にさせて頂いた情報</h2>
<p><a href="https://otona-life.com/2023/03/28/164745" target="_blank" rel="noopener">【革命的!】ChatGPT＋ノーコードで、Web会議後の議事録化が自動で作成＆通知可能に!?</a></p>
<p>まさにChatGPTに求めていたような使い方をされていて、かつノーコードで行えるということで自分も試してみることにしました。</p>
<h2>Make&amp;ChatGPT&amp;ちょこっとDeepL</h2>
<p><a href="/uploads-archive/2023/04/Make-Work-the-way-you-imagine.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18147" src="/uploads-archive/2023/04/Make-Work-the-way-you-imagine-1024x652.png" alt="" width="1024" height="652" srcset="/uploads-archive/2023/04/Make-Work-the-way-you-imagine-1024x652.png 1024w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-300x191.png 300w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-768x489.png 768w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-1536x978.png 1536w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-228x145.png 228w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine.png 1575w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>今回の肝がこの<a href="https://www.make.com/en/register?pc=mezack" target="_blank" rel="noopener">make</a>というサービスで私のような非エンジニアでもコードを書く必要がなく（ノーコード）APIを叩いたり、そのデータを別のサービスに連携させてたりといったことができるiPaaSサービスです。</p>
<p>iPaaSをChatGPTに聞いた答えも引用で貼っておきます。</p>
<blockquote><p>iPaaSは、Integration Platform as a Service（統合プラットフォーム・アズ・ア・サービス）の略称で、クラウド上で提供されるアプリケーション間の統合を支援するプラットフォームです。iPaaSは、データやアプリケーション、システムなどを簡単かつ効率的に統合するためのツールを提供し、APIやデータストレージ、メッセージング、アプリケーション接続、エンタープライズ・サービス・バス（ESB）などの機能を含みます。iPaaSは、企業がビジネスプロセスの自動化、データの統合、クラウドベースのアプリケーションの管理などを行うためのシームレスな方法を提供し、デジタルトランスフォーメーションを支援する重要な役割を果たしています。</p></blockquote>
<p>初めて使ったのですが、Make&#x2716;&#xfe0f;AI（chatGPTやDeep L）にとてつもない可能性を感じ、あれこれ試行錯誤してる瞬間がとても楽しかったです。</p>
<h2>テキストを要約してもらって通知</h2>
<p>実現させたのはテキストを要約してもらって通知という非常にシンプルなものです。</p>
<p>参考にさせて頂いた平岡さんは、</p>
<ol>
<li>Zoomをクラウドに録画</li>
<li>それを読みに行って文字起こし</li>
<li>そのテキストをChatGPTに要約</li>
<li>Googleドキュメント作成</li>
<li>Slackに通知</li>
</ol>
<p>というところまで行われています。</p>
<p>私は、普段使っているサービスにアレンジしつつ、シンプルにできるところまでやってみました。</p>
<ol>
<li>文字起こしまでをGoogleドキュメントの音声入力で会議中に文字起こし</li>
<li>そのテキストをChatGPTに要約</li>
<li>Chatworkに通知</li>
</ol>
<p>という3行程です。</p>
<p>makeでは、下記のようにサービスを並べます。</p>
<p><a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18150" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-1024x306.png" alt="" width="1024" height="306" srcset="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-1024x306.png 1024w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-300x90.png 300w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-768x230.png 768w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-1536x459.png 1536w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-2048x612.png 2048w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-228x68.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>APIキーの取得や詳細の使い方は割愛させていただきますが、Chatworkへの通知まで成功に至りました。</p>
<p><a href="/uploads-archive/2023/04/Chatwork-議事録.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-18148" src="/uploads-archive/2023/04/Chatwork-議事録.png" alt="" width="907" height="238" srcset="/uploads-archive/2023/04/Chatwork-議事録.png 907w, /uploads-archive/2023/04/Chatwork-議事録-300x79.png 300w, /uploads-archive/2023/04/Chatwork-議事録-768x202.png 768w, /uploads-archive/2023/04/Chatwork-議事録-228x60.png 228w" sizes="(max-width: 907px) 100vw, 907px" /></a></p>
<p>今回はツールの理解に時間を使い試作版ということで3行程レベルですが、様々なサービスの連携がイメージできました。</p>
<h2>工夫ポイント</h2>
<h3>DeepLを介してトークン数の削減</h3>
<p><a href="/uploads-archive/2023/04/テスト2-Google-ドキュメント.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-18145" src="/uploads-archive/2023/04/テスト2-Google-ドキュメント.png" alt="" width="306" height="414" srcset="/uploads-archive/2023/04/テスト2-Google-ドキュメント.png 306w, /uploads-archive/2023/04/テスト2-Google-ドキュメント-222x300.png 222w, /uploads-archive/2023/04/テスト2-Google-ドキュメント-228x308.png 228w" sizes="(max-width: 306px) 100vw, 306px" /></a></p>
<p>ちょうど4000文字強のとある会議の音声入力データで試していたところ、一度に送信できるトークン数が4097という制限があり、トークンのカウントは簡単にいうと単語の区切りと言われておりますが、日本語の場合、ほぼ文字数に近い数字がトークン数となり、上述のドキュメントでは以下の通り、4212トークンでエラーがでしまいました。<a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18144" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1024x652.png" alt="" width="1024" height="652" srcset="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1024x652.png 1024w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-300x191.png 300w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-768x489.png 768w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1536x978.png 1536w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-228x145.png 228w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make.png 1575w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>&nbsp;</p>
<p>そこで、英語に翻訳すると精度が上がり、トークン数も削減できるいうこと情報を覚えていたので、間にDeep Lを噛ませることにしました。</p>
<p><a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18146" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-1024x652.png" alt="" width="1024" height="652" srcset="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-1024x652.png 1024w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-300x191.png 300w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-768x489.png 768w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-1536x978.png 1536w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-228x145.png 228w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1.png 1575w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>そうすることで、4212トークンが、1567トークンまで圧縮され、理論上は、さらに倍の日本語文字数でも耐えられることが分かりました。</p>
<p>ただし、日本語の精度が落ちてしまっている感は否めず、現状だとそのままオフィシャルに議事録として扱うというよりは、自分のメモ書きの代わり程度に留めておくのが良さそうな具合だという結論になりました。</p>
<h2>処理時間</h2>
<p><div style="width: 1280px;" class="wp-video">
<video class="wp-video-shortcode" id="video-18142-1" width="1280" height="720" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-_-Make.mp4?_=1" /><a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-_-Make.mp4">/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-_-Make.mp4</a></video></div></p>
<h2>課題</h2>
<h3>1時間前後の会議に対応できるか</h3>
<p>現在APIの制約として、4097トークン上限があり、おおよそ時間にすると10〜15分程度の会議のテキスト量に相当しますので、少なくともこの5倍程度は受け入れられなければ実用に耐えられないと思います。</p>
<p>それを解消するために、一度Deep Lを介して、英語に翻訳しトークン数を下げるという試みをしましたが、日本語の精度が落ちてしまう点とそれでも上限トークン数の制約にはとても足りないので、テキストを分割するといった更なる工夫の必要。</p>
<h3>議事録のテキスト化の方法</h3>
<p>今回は、Googleドキュメントの音声入力をを利用して、そのドキュメントからテキストを抽出しましたが、ここもなるべく自動化したいですね。音声データから文字起こしですとここでもファイル容量の上限もあり、まだまだ、1時間レベルの会議に耐えるものではないので、試行錯誤いたします。</p>
<h2>まとめ</h2>
<p>議事録ツールを完成させる方向性もありますが、もっともっといろいろなことができるのではと、ワクワクしました。</p>

large_Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1024x652.png

medium_Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1024x652.png

small_Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1024x652.png

thumbnail_Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1024x652.png

Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1024x652.png

chatGPTとmakeで議事録要約ツール試作版を作ってみた


<p>話題のchatGPTを試してみました。</p>



<h2>ChatGPTとは</h2>



<blockquote class="wp-block-quote">
<p>ChatGPT（チャットジーピーティー、Generative Pre-trained Transformer)は、OpenAIが2022年11月に公開したしたチャットボット。OpenAIのGPT-3.5ファミリーの言語モデルを基に構築されており、教師あり学習と強化学習の両方の手法で転移学習されている。</p>
<cite>https://ja.wikipedia.org/wiki/ChatGPT</cite></blockquote>



<p>Wikipediaから引用しましたが、噛み砕くととてもとても自然な文章を生成してくれる汎用的なチャットボットです。他と一線を画すと言われている所以が、特定の領域に限らず、 GPTと言われる大規模言語モデルがあらゆる言葉に対して回答を返してくれて、それが正規表現やプラグラミング言語にまで及ぶという点です。</p>



<p>今なら、open AIのサイトでアカウント登録することで無料で試すことが出来ますので、未来の当たり前を体験すべく、試してみました。</p>



<p><a href="https://openai.com/blog/chatgpt/" target="_blank" rel="noreferrer noopener">ChatGPT: Optimizing Language Models for Dialogue &#8211; OpenAI</a></p>



<h2>ChatGPT応答速度</h2>



<p>グローバルなビジネスにおける一番あるある関税について聞いてみました。</p>



<p>ここでは、「シンガポールの関税教えて」と聞きました。</p>



<figure class="wp-block-video"><video controls src="/uploads-archive/2023/01/Singapore-Import-Tax-Details.mp4"></video></figure>



<p>約10秒ほどの沈黙の後、答えの応答に関しては、ズバスバと返ってきます。</p>



<h2>深掘りして聞く</h2>



<p>しかしながら、返答の2行ではなかなか要領を得ません。そこで「詳細を教えて」とだけ聞きます。</p>



<p>ここで感心をするのが、前回の質問に対しての文脈、コンテキストを理解した上で会話を継続できることです。</p>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="798" height="400" src="/uploads-archive/2023/01/Singapore-Customs-and-Tax.png" alt="" class="wp-image-18069" srcset="/uploads-archive/2023/01/Singapore-Customs-and-Tax.png 798w, /uploads-archive/2023/01/Singapore-Customs-and-Tax-300x150.png 300w, /uploads-archive/2023/01/Singapore-Customs-and-Tax-768x385.png 768w, /uploads-archive/2023/01/Singapore-Customs-and-Tax-228x114.png 228w" sizes="(max-width: 798px) 100vw, 798px" /></figure>



<p>関税自体はほとんどないが正解と知っているので、これ以上の回答はないと思いますが、所得税の説明を詳しく返してくれました。</p>



<h2>ソースは必ず聞くようにする。</h2>



<p>Chat GPTはあくまで正解を返してくれるチャットボットではなくて、自然な会話ができるチャットボットなので、結局は一次ソースを確認をする必要があります。</p>



<p>知識もなく、判断が出来ない領域においてChat GPTの返答内容をそのまま、鵜呑みにする、公開する行為は注意が必要です。</p>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="801" height="627" src="/uploads-archive/2023/01/Singapore-Customs-and-Tax-1.png" alt="" class="wp-image-18071" srcset="/uploads-archive/2023/01/Singapore-Customs-and-Tax-1.png 801w, /uploads-archive/2023/01/Singapore-Customs-and-Tax-1-300x235.png 300w, /uploads-archive/2023/01/Singapore-Customs-and-Tax-1-768x601.png 768w, /uploads-archive/2023/01/Singapore-Customs-and-Tax-1-228x178.png 228w" sizes="(max-width: 801px) 100vw, 801px" /></figure>



<p>「ソースは？」という質問だけでは、再び要領を得なかったのでURLで教えてもらうと、</p>



<ul>
<li>シンガポール税務局 (Inland Revenue Authority of Singapore) : <a href="https://www.iras.gov.sg/">https://www.iras.gov.sg/</a></li>



<li>シンガポール政府経済開発局 (Economic Development Board) : <a href="https://www.edb.gov.sg/">https://www.edb.gov.sg/</a></li>
</ul>



<p>の二つの情報を教えてもらうことが出来ました。</p>



<h2>検索エンジンでは？</h2>



<figure class="wp-block-image"><img decoding="async" loading="lazy" width="868" height="727" src="/uploads-archive/2023/01/シンガポールの関税-Google-検索.png" alt="" class="wp-image-18073" srcset="/uploads-archive/2023/01/シンガポールの関税-Google-検索.png 868w, /uploads-archive/2023/01/シンガポールの関税-Google-検索-300x251.png 300w, /uploads-archive/2023/01/シンガポールの関税-Google-検索-768x643.png 768w, /uploads-archive/2023/01/シンガポールの関税-Google-検索-228x191.png 228w" sizes="(max-width: 868px) 100vw, 868px" /></figure>



<p>ジェトロのページが最初に上がってきます。</p>



<p><a href="https://www.jetro.go.jp/world/asia/sg/trade_03.html">https://www.jetro.go.jp/world/asia/sg/trade_03.html</a></p>



<p>日本語での詳細が書かれており、参照先としては、</p>



<p>シンガポール税関（<a href="http://www.customs.gov.sg/" target="_blank" rel="noreferrer noopener">Singapore Customs</a>）</p>



<p>が紹介されおります。</p>



<p>関税を調べたい時は、税務局ではなく税関の方が正しいでしょう。</p>



<h2>まとめ</h2>



<p>ということで、今回はシンプルな内容で試してみたところ、まだ、検索エンジンに軍配が上がるとは思いました。</p>



<p>しかしながら、「正解を知りたい」というニーズに対しての用途で、ChatGPTの真価は大規模言語モデルを背景にした、「文章構成力」にあると思います。</p>



<p>コンテンツの「要約」や表現力を活かした「返信」などでは、用途を見出しており、研究論文の要旨に利用してしまうなど、既に警鐘が鳴らされている状況でもあります。</p>



<p><a href="https://gigazine.net/news/20230116-chatgpt-abstract/">https://gigazine.net/news/20230116-chatgpt-abstract/</a></p>



<p>それほどまでに可能性と未来を感じられるプロダクトであるということを示しているのではないでしょうか。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Chat

2025/05/22

2025/04/16

2025/03/21

2025/02/21

2025/02/06

2024/06/27

2024/06/06

2023/10/27

2023/09/21

2023/06/30

2023/04/28

2023/01/20