0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@uni928

APIなしでAIを組み込む仕組みの紹介

0
Last updated at Posted at 2026-05-26

AIを使ったWebアプリを作ろうとすると、最初に考えがちなのがAPI連携です。

たとえば、ChatGPT APIやGemini APIを使って、アプリ内から直接AIに問い合わせる形です。

もちろんそれは便利ですが、次のようなハードルもあります。

  • APIキーの管理が必要
  • 利用料金が発生する可能性がある
  • サーバーやCloudflare Workersなどの中継処理が必要になる場合がある
  • 公開物にAPIキーを含めないようにする必要がある
  • 個人開発では少し大げさになることがある

そこで今回は、APIを使わずにAI機能を組み込む方法として、

「プロンプトをコピーする」
「ChatGPTやGeminiのサイトを開く」
「ユーザーがAIに貼り付けて実行する」
「生成結果をアプリ側に貼り戻す」
「アプリ側で結果を反映する」

という方式を提案する。というのがこの記事の趣旨です。

Chrome 拡張なので多少面倒ですが、作ったものはこちらです。

簡単に使えるものとしては、下記が分かりやすいかもしれません。

作ったもの

Gmailのメール一覧に「怪しさ%」を表示するChrome拡張です。

メールの内容をAIに判定させ、その結果を拡張側に貼り付けることで、次回以降のGmail画面で怪しさの目安が表示されるようになります。

主な機能は以下です。

  • Gmailのメール一覧に「怪しさ%」を表示
  • 怪しさの段階によって表示を強調
  • 拡張パネルからChatGPTまたはGeminiを開ける
  • AI判定用プロンプトを自動生成してコピー
  • ChatGPTの場合、短いプロンプトならURLパラメータで直接渡す
  • AIの生成結果を貼り付けて「反映」できる
  • 判定結果を圧縮して保存し、次回以降の怪しさ表示に使う
  • メール本文そのものは保存しない

目的

今回の目的は、単にGmailの怪しいメールを判定することだけではありません。

むしろ一番伝えたいのは、

「APIを使わなくても、自分の作成物にAIを取り込める」

という点です。

AIをアプリに組み込むというと、API連携やサーバー実装が必要だと思いがちです。

しかし、個人用ツールや小さなWebアプリであれば、

  1. アプリ側でプロンプトを作る
  2. ユーザーにAIサイトで実行してもらう
  3. 結果をアプリ側に貼り戻してもらう
  4. アプリ側で結果を保存・反映する

という流れでも、かなり実用的なAI機能になります。

この方式なら、APIキーを配布する必要がありません。
利用者は、自分が普段使っているChatGPTやGeminiをそのまま使えます。

先ほど紹介した AI を効率的に活用する事に特化したエディタは、その典型だと思います。

使い方

Chrome拡張として読み込みます。

  1. GitHubからファイルを取得します
  2. Chromeで chrome://extensions/ を開きます
  3. 右上の「デベロッパーモード」をオンにします
  4. 「パッケージ化されていない拡張機能を読み込む」を押します
  5. gmail-suspicion-extension フォルダを選択します
  6. Gmailを開きます
  7. 拡張機能アイコンを押すとパネルが表示されます

パネルには、ChatGPTまたはGeminiを開くボタンがあります。

ボタンを押すと、判定用プロンプトがクリップボードにコピーされ、AIサイトへ移動します。

その後、ユーザーがAIサイトでプロンプトを実行し、生成されたJSON結果を拡張パネルに貼り付けます。

最後に「反映」を押すと、拡張側に判定結果が保存され、Gmail一覧に怪しさ%が表示されます。

ChatGPTへの遷移仕様

ChatGPTは以下のURLで開きます。

https://chatgpt.com/?temporary-chat=true

また、プロンプトが3000文字以内の場合は、URLパラメータにプロンプトを含めて遷移します。

https://chatgpt.com/?temporary-chat=true&prompt=XXX

XXX にはURLセーフに変換したプロンプトが入ります。

これにより、対応環境ではChatGPTを開いた時点でプロンプトが入力された状態に近づけられます。

ただし、長すぎるプロンプトをURLに含めると扱いづらくなるため、3000文字を超える場合は通常の一時チャットURLだけを開きます。

どちらの場合でも、プロンプト自体はクリップボードにコピーします。

なぜ一時チャットを使うのか

ChatGPTでは、一時チャットを使うことで、通常の会話履歴とは分けて使いやすくなります。

今回のように、メールの怪しさを一時的に判定したい場合は、通常のチャット履歴に混ざらない方が自然です。

そのため、ChatGPTへの遷移URLには temporary-chat=true を付けています。

APIなしAI連携の流れ

今回の拡張で使っている考え方は、かなり汎用的です。

流れとしては以下です。

アプリ
  ↓
判定用プロンプトを生成
  ↓
クリップボードにコピー
  ↓
ChatGPT / Gemini を開く
  ↓
ユーザーが貼り付けて実行
  ↓
AIがJSONを返す
  ↓
ユーザーがアプリに貼り戻す
  ↓
アプリがJSONを読み取って反映

これはAPI連携ではありません。

しかし、ユーザーがAIサイトを手動で経由することで、実質的にAIをアプリの一部として利用できます。

この方式のメリット

APIキーが不要

一番大きなメリットは、APIキーが不要なことです。

APIキーをアプリに埋め込む必要がなく、サーバー側で管理する必要もありません。

GitHub Pagesや静的HTML、Chrome拡張のような構成でも使いやすいです。

無料でも使いやすい

ChatGPTやGeminiのWeb画面を使うため、ユーザーが普段使っている範囲でAIを利用できます。

もちろん、ユーザー側の契約状況や利用制限には依存しますが、開発者側がAPI料金を負担する形ではありません。

実装が単純

AIとの通信処理、認証、APIエラー処理、レート制限対応などをアプリ側で持たなくて済みます。

アプリ側は、

  • プロンプトを作る
  • コピーする
  • 結果を受け取る
  • JSONを解析する
  • 結果を反映する

という処理に集中できます。

この方式のデメリット

もちろん、APIなしの手動連携なので弱点もあります。

完全自動ではない

ユーザーがAIサイトを開き、結果を貼り戻す必要があります。

API連携のように、ボタン一つで裏側ですべて完了するわけではありません。

AIの出力形式が崩れることがある

AIにはJSONで返すように指示しますが、必ず完全なJSONだけが返るとは限りません。

そのため、アプリ側ではある程度のパース失敗を想定する必要があります。

セキュリティ判定として過信できない

今回の「怪しさ%」は、あくまで補助表示です。

本格的なセキュリティ製品の代替ではありません。

メールの真偽確認や添付ファイルの安全性確認は、別途慎重に行う必要があります。

Gmail上での表示

Gmailの一覧画面に対して、拡張がバッジを表示します。

怪しさが低いメールは控えめに表示し、怪しさが高いメールは目立つようにします。

たとえば、次のようなイメージです。

怪 12%   通常メールっぽい
怪 46%   少し注意
怪 73%   かなり怪しい
怪 91%   強く警戒

表示はあくまで補助です。

ユーザーがメールを開く前に、一覧上で「少し注意して見よう」と思えるようにするのが目的です。

保存する情報を少なくする

この拡張では、AIの判定結果をそのまま大量に保存するのではなく、次回以降の判定に使いやすい形に圧縮します。

たとえば、以下のような情報です。

{
  "domains": {
    "example.com": 80
  },
  "senders": {
    "notice@example.com": 75
  },
  "keywords": [
    {
      "word": "至急",
      "score": 65
    }
  ]
}

実際の保存形式は実装に依存しますが、考え方としては、

「本文を保存する」のではなく、
「怪しさ判断に使える小さな特徴だけを保存する」

という方針です。

これにより、競合が少なく、情報量も少ない記憶になります。

AIに返してほしい形式

AIには、判定結果をJSONで返すように指示します。

たとえば、以下のような形式です。

{
  "items": [
    {
      "subject": "【重要】アカウント確認のお願い",
      "from": "support@example.com",
      "suspicion": 86,
      "reasons": [
        "緊急性を強く出している",
        "送信者ドメインが公式に見えない",
        "リンク誘導がある"
      ],
      "memoryHints": {
        "domains": [
          {
            "key": "example.com",
            "score": 80
          }
        ],
        "keywords": [
          {
            "key": "至急",
            "score": 70
          }
        ]
      }
    }
  ]
}

アプリ側ではこのJSONを読み取り、メール一覧の表示と記憶データに反映します。

プロンプト設計のポイント

今回のような手動AI連携では、プロンプト設計がかなり重要です。

ポイントは以下です。

  • 返してほしい形式を明確にする
  • JSONだけを返すように指示する
  • 保存してよい情報と保存してはいけない情報を分ける
  • メール本文をそのまま記憶しないように指示する
  • 怪しさの理由を短く出させる
  • 次回判定用の特徴を短いルールとして出させる

特に重要なのは、AIに「結果」だけでなく「次回以降に使うための圧縮特徴」も出させることです。

この発想を使うと、AIの判断を一回限りで終わらせず、アプリ側のローカルな学習データのように扱えます。

実装ファイル

構成はシンプルです。

gmail-suspicion-extension/
  manifest.json
  background.js
  content.js
  content.css
  README.md

Chrome拡張としてはManifest V3で作っています。

content.js がGmail画面に入り、一覧のメール行を見つけて怪しさ表示を追加します。

background.js は拡張アイコンを押した時の処理などを担当します。

content.css はパネルやバッジの見た目を担当します。

manifest.jsonのイメージ

Chrome拡張なので、Gmailに対してcontent scriptを読み込む設定をします。

イメージとしては以下のような構成です。

{
  "manifest_version": 3,
  "name": "Gmail Suspicion Meter",
  "version": "1.0.0",
  "permissions": [
    "storage",
    "activeTab",
    "scripting",
    "clipboardWrite"
  ],
  "host_permissions": [
    "https://mail.google.com/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://mail.google.com/*"
      ],
      "js": [
        "content.js"
      ],
      "css": [
        "content.css"
      ]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

今回の実装で気をつけたこと

メール本文を保存しない

怪しさ判定にメール本文は必要ですが、保存する必要はありません。

保存するのは、次回以降に役立つ小さな特徴だけにしています。

AIの結果を過信しない

AIの判定は便利ですが、絶対ではありません。

そのため、表示は「怪しさ%」という補助情報にしています。

GmailのDOM変更に備える

Gmailの画面構造は変わる可能性があります。

Chrome拡張でGmail画面を直接読む場合、DOM構造に依存するため、将来的に調整が必要になる可能性があります。

これはGmail拡張を作る上で避けにくい部分です。

APIなしAI連携は他にも使える

今回の方式は、Gmailの怪しさ判定以外にも使えます。

たとえば、以下のようなものに応用できます。

  • 文章校正ツール
  • 返信文生成ツール
  • 商品レビュー分析ツール
  • CSVデータの要約ツール
  • ローカルメモの分類ツール
  • タスクの優先度判定ツール
  • 学習ノートのクイズ生成ツール
  • ブラウザ上の文章の要約ツール

どれも、最初からAPI連携にする必要はありません。

まずは、

「プロンプトを作る」
「AIサイトで実行する」
「結果を貼り戻す」
「反映する」

という形にすれば、かなり気軽にAI機能を追加できます。

個人開発ではかなり相性が良い

個人開発では、以下のような悩みがよくあります。

  • API料金を負担したくない
  • サーバーを用意したくない
  • APIキー管理をしたくない
  • とりあえず動くものを作りたい
  • 自分用ツールとして使いたい
  • GitHubで気軽に公開したい

今回の方式は、そういう用途と相性が良いです。

もちろん、商用サービスや大規模利用ではAPI連携の方が適している場面も多いです。

しかし、個人用ツールやプロトタイプでは、手動AI連携の方が早く、安全で、公開しやすい場合があります。

AIを「外部エンジン」として使う

今回の考え方を一言でいうと、

「AIを外部エンジンとして使う」

ということです。

アプリ本体は、AIを直接呼び出しません。

代わりに、AIに渡すためのプロンプトを作ります。

ユーザーがAIサイトで実行し、その結果をアプリに戻します。

アプリはその結果を読み取り、自分の機能に反映します。

つまり、AIの推論部分だけを外部に任せ、UIや保存、反映処理は自分のアプリ側で担当します。

この分担にすると、静的サイトやChrome拡張でもAI活用の幅が広がります。

まとめ

今回は、Gmailのメール一覧に怪しさ%を表示するChrome拡張を作りました。

ポイントは、ChatGPT APIやGemini APIを使わずに、AIサイトを手動で経由する方式にしたことです。

この方式では、

  • APIキーが不要
  • サーバーが不要
  • 無料でも試しやすい
  • GitHubで公開しやすい
  • 個人開発に向いている
  • AIの出力をアプリ側に反映できる

というメリットがあります。

AIをアプリに組み込む方法は、API連携だけではありません。

プロンプトをコピーし、AIサイトで実行し、結果を貼り戻すだけでも、十分にAIを活用したツールを作れます。

小さなツールや個人用アプリなら、この方式はかなり実用的だと思います。

「APIを使うほどではないけれど、AIの力を自分の作成物に取り入れたい」

という場合は、このような手動AI連携も選択肢に入れてみると面白いです。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?