AIプロンプトを「プログラミング」するように管理できるChrome拡張を作ってみた話

Last updated at 2025-08-06Posted at 2025-07-28

👋 こんにちは！韓国の개발자です。

2010年頃に東京で約1年間Objective-CでiPhoneゲーム開発をしていた経験があり、それ以降毎年必ず日本を旅行で訪れ、日本の開発者コミュニティの動向を追い続けています。

🤔 なぜこのツールを作ったのか

最近、AIを使った要約作業が日常になりましたが、こんな問題に直面していませんか？

YouTube動画要約の場合：

Google LMのYouTube要約は事実確認しかできない
要約後の継続的な対話や深掘り分析ができない
分析の視点を変えたり、追加質問ができない

既存ツールの限界：

韓国にはLilysAIという優秀な有料サービスがありますが、プロンプトのカスタマイズに制限
特定のAIサービスに縛られるため、用途に応じたAI選択ができない
一度の要約で終わり、継続的な分析や比較検討が困難

つまり、AIとの対話そのものを設計する自由度が足りなかったのです。

💡 プロンプトが全ての鍵を握る時代

LLM時代の核心はプロンプトエンジニアリングです。

同じYouTube動画でも：
❌ 「この動画を要約して」
⭕ 「この技術動画を初心者向けに段階別学習ガイドとして整理し、
   各段階で必要な前提知識と実習課題も含めて構成してください」

結果の質は天と地の差になります。

以前はトークン数制約で長いプロンプトが使いにくかったのですが、この1-2年でその制約はほぼ解消されました。今こそ、プロンプト設計に本格的に投資する時代です。

🎯 「プロンプトプログラミング」という発想

そこで思いついたのが、プロンプトをコード管理するように体系化することでした。

実装した基本テンプレート

const promptTemplates = {
  'system_pro': {
    purpose: '専門家級総合分析',
    features: ['タイムスタンプ付き要約', '戦略的インサイト', '実践的応用方案']
  },
  'system_tutorial': {
    purpose: '学習者向け段階別ガイド',
    features: ['前提知識説明', '段階別進行', '実習課題提案']
  },
  'system_factcheck': {
    purpose: '事実検証中心分析',
    features: ['出典確認', '論理的矛盾検出', '信頼性評価']
  }
  // + ユーザー定義カスタムテンプレート
};

これにより：

同じコンテンツを異なる視点で分析
プロンプトの再利用とバージョン管理
チーム内でのベストプラクティス共有

が可能になりました。

🔧 技術的実装の挑戦

1) 6つのAI統合の複雑性

// ChatGPT, Claude, Gemini, DeepSeek, Perplexity, Grokを統合
const aiProviders = {
  gpt4: {
    insertStrategy: 'execCommand',
    selectors: ['div[contenteditable="true"][data-testid="composer-text-input"]']
  },
  claude: {
    insertStrategy: 'execCommand', 
    selectors: ['div[contenteditable="true"][role="textbox"]']
  }
  // 各サービスの異なるDOM構造に対応
};

各AIの強みを使い分けられるのが最大のメリットです：

ChatGPT: 汎用性と安定性
Claude: 長文分析と論理的思考
Gemini: 多言語と画像理解
DeepSeek: コード分析特化

2) YouTube字幕抽出の安定化

// 多段階フォールバック機構
async function extractTranscript(videoId) {
  try {
    // 1. DOM直接抽出
    const result = await extractFromDOM();
    if (result.success) return result;
    
    // 2. フォールバック方式
    return await fallbackExtraction();
  } catch (error) {
    // 3. 最終フォールバック
    return await manualPrompting();
  }
}

3) ストレージ制約の解決

// 内容サイズに応じた自動分散
const optimizeStorage = async (content) => {
  const size = new Blob([content]).size;
  
  if (size > 4096) {
    // Local storageに保存（同期なし）
    await chrome.storage.local.set({[key]: content});
    return 'local';
  } else {
    // Sync storageに保存（デバイス間同期）
    await chrome.storage.sync.set({[key]: content});
    return 'sync';
  }
};

📊 実使用データと効果

現在の利用状況：

ダウンロード数：約5,000
日次アクティブユーザー：約2,000人
平均利用頻度：1日3-5回

主な用途分析：

1位：技術記事・論文の要約分析 (35%)
2位：YouTube学習コンテンツの整理 (28%)  
3位：会議資料・企画書の要点抽出 (22%)
4位：競合分析・市場調査 (15%)

ユーザーフィードバックの例：

「同じ動画でも、学習用・企画用・共有用で全く違う要約が作れて驚きました」
「プロンプトテンプレートのおかげで、チーム内の分析品質が統一されました」

🎨 実際の活用例

ケース1：技術記事分析

📌 Vue.js最新機能解説記事の場合

【Tutorial Template】→ 学習者向け段階別ガイド
【Fact-Check Template】→ 技術的正確性検証
【Trend Template】→ 業界トレンドとの関連性分析

同じ記事から3つの異なる価値を抽出

ケース2：YouTube技術セミナー

📌 1時間のAI開発セミナーの場合

【Pro Template】→ 
・核心技術要約 [2:15](link&t=135)
・実装時の注意点 [15:42](link&t=942)  
・Q&A重要ポイント [45:20](link&t=2720)

【Creative Template】→ 
・新しいビジネス機会の発見
・既存サービスとの差別化ポイント
・未来予測と戦略的示唆