URL共有に革命？「ChatGPT」× Chrome拡張「cocopy」は実用性・楽しさ無限大

ココピーは任意のJavaScriptコードを実行できる

　ココピーは現在見ているページのURL・ページタイトル・コンテンツをJavaScriptコードでいい感じに整形してからクリップボードに突っ込めるツールだ。JavaScriptコードはユーザーが好き勝手に書くことができる。「fetch()」を使って外部APIを叩くこともできる。

　というわけで ChatGPT (OpenAI API) を呼んでみようと思う。

基本：「cocopy」からOpenAI APIを呼ぶ

　OpenAI APIはエンドポイント（https://api.openai.com/v1/chat/completions）にPOSTリクエストを投げるだけで動いてくれる。なので、APIキーを取得して、以下のように雑に「fetch()」を呼べば動く。

({ content }) => {
  const endpoint = 'https://api.openai.com/v1/chat/completions';
  const apiKey = '{YOUR_OPENAI_API_KEY}';
  const payload = {
    model: 'gpt-4o',
    messages: [
      { role: 'system', content: '100字で要約してください' },
      { role: 'user', content },
    ],
  };

  return fetch(endpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify(payload)
  }).then(response => response.text());
}

　ChatGPTにページを要約させた結果がクリップボードに入る。

前処理と後処理

　ただし、実際には前処理と後処理をちゃんとやったほうがいい。たとえば、HTML文章（閲覧ページのHTML）をそのまま「cocopy」と「OpenAI API」に渡すと、HTMLタグやインデントの空白文字でトークンがかさんでクレジットを消費しまくってしまう。

前処理をしないと、エラーを吐いたり、クレジットを大量に浪費してしまう可能性がある

　HTMLから本文テキストを抽出するためのライブラリとしては「Readability.js」などがある。本来であれば、こうしたものを使って丁寧に本文抽出を行うのがいいのだが、Readability.js をココピーのスクリプトに埋め込むのは難しい。

　簡易的な方法ではあるが、これは「p」タグだけを取り出して空白を削除するだけでも大きく改善される。前処理として挟んであげるとよいだろう（簡易的ながらそれなりに動く）。

const parser = new DOMParser().parseFromString(content, 'text/html');
const paragraphs = parser.querySelectorAll('body p');
const article = Array.from(paragraphs)
  .map(p => p.textContent.trim().replace(/\s+/g, ' '))
  .filter(text => text.length > 0)
  .join("\n").slice(0, 10000);

　次は後処理。APIからはJSON形式で結果が返ってくるので、それをパースしてから結果の部分だけ取り出す。

return fetch(endpoint, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}`
  },
  body: JSON.stringify(payload)
})
  .then(response => response.json())
  .then(data => data.choices[0].message.content);

　ヨシッ！（雑すぎる）。あとは「ChatGPT」への命令部分をカスタマイズすれば、さまざまなバリエーションを作成できる。

　今回使ったスクリプトの全文は「GitHub」に置いておこうと思う。

　なお、これらのスクリプトを「cocopy」で実行するには、事前にOpenAIのAPIキーを取得し、クレジットチャージ（課金）を済ませておく必要がある。スクリプトの中の「{YOUR_OPENAI_API_KEY}」のところを各自で発行したAPIキーで（{}も含めて）置き換えてください。

［原著はここまで、一部内容を編集部 編］

原著「ココピーからChatGPTを呼んで文章生成させる」はこちらから

作例1：俳句

ページ内容を要約した俳句を詠ませてみる

　まずはページ内容を要約した俳句を詠ませてみます。窓の杜のトップページで試してみました。その日に掲載される記事によって、詠む内容も変わるでしょう。

猫デスク　窓の杜が教う　癒しの日々

作例2：3行まとめ

　ページをシェアするとき、3行まとめがあると便利かも。

https://ja.wikipedia.org/wiki/%E7%B9%94%E7%94%B0%E4%BF%A1%E9%95%B7

【3行まとめ】
・織田信長、戦国時代の大名
・桶狭間で今川義元を討ち取る
・明智光秀の謀反で本能寺で自害

作例3：はてブをAIに任せる

　タグとコメントを生成させれば、まったく脳みそを使わずにはてなブックマークをつけることができます。

はてブをAIに任せる

　たとえば「VMware Workstation」を高速化する方法を紹介した記事で利用した場合、以下のようなテキストがクリップボードへコピーされます。

[技術][VMware][パフォーマンス][PC]
VMwareの動作が遅い原因を探る記事。最新CPUでも設定次第で改善可能とのこと。