ChatGPT等のAIに記事要約する共有ウィジェットの実装方法：javascript
シェア
ツイート
自社サイトやブログの記事ページに「この記事をAIで要約する」導線を設置したいと考える方は増えています。近年はChatGPTやGemini、Claude、Perplexityなどを使って、読者自身が記事内容を整理したり、要点だけを短時間で把握したりするケースが一般的になってきました。
そこで今回は、記事URLをもとにAIへ要約依頼しやすくする「AI要約ウィジェット」の実装方法を紹介します。見た目はシンプルですが、読者の利便性を高めやすく、記事回遊や滞在体験の向上にもつながる実用的な機能です。
この記事では、実際に使えるHTML・JavaScriptコードの考え方、実装の流れ、注意点、改善ポイントまでまとめて解説します。後半では、そのまま使いやすい完成コードも掲載しています。
AI要約ウィジェットとは何か
AI要約ウィジェットとは、記事ページ上に設置する小さなボタン群のことです。読者がボタンを押すと、対象記事のURLを含んだプロンプトをAIサービスへ渡しやすくなり、記事内容の要約を依頼できる仕組みです。
↑こうゆうやつです。
今回の実装では、次のような流れになります。
- 現在開いている記事URLを取得する
- 「この記事を日本語で要約してください：記事URL」というプロンプトを生成する
- 対応しやすいAIにはURLパラメータで渡す
- 直接渡しにくいAIには、プロンプトをクリップボードへコピーしてからAIサービスを開く
- ユーザーにはトースト表示で案内を出す
今回の実装でできること
今回のコードを使うと、記事ページ上に「AIで要約する」ウィジェットを表示し、各AIサービスのボタンを自動生成できます。
具体的には、次のようなことが可能です。
- 現在のページURLを自動取得する
- 共通の要約プロンプトを自動生成する
- 複数AIサービスのボタンを一覧表示する
- 必要に応じてクリップボードへ自動コピーする
- トーストメッセージで操作案内を表示する
つまり、読者は記事URLを自分でコピーしてAIへ貼り付ける手間を大きく減らせます。
※ 外部AIサービス側の仕様変更により、将来的にURL連携や画面遷移の挙動が変わる場合があります。公開後も定期的に動作確認を行ってください。
HTML
<div class="ai-share-widget">
<div class="ai-share-widget__header">
<div class="ai-share-widget__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</div>
<span class="ai-share-widget__title">AIで要約する</span>
</div>
<p class="ai-share-widget__label">この記事をAIに読み込んで要約できます</p>
<div class="ai-share-widget__buttons" id="ai-buttons"></div>
</div>
<div class="ai-share-toast" id="ai-share-toast"></div>
javascript
<script>
(function () {
var pageUrl = window.location.href;
var promptText = 'この記事を要約してください：' + pageUrl;
/* クリップボードコピー＋URL遷移（GeminiやCopilot用） */
function copyAndOpen(url, label) {
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(promptText).then(function () {
showToast('📋 プロンプトをコピーしました。' + label + 'に貼り付けてください');
}).catch(function () {
showToast(label + 'を開きます（プロンプトを貼り付けてください）');
});
} else {
/* フォールバック */
try {
var ta = document.createElement('textarea');
ta.value = promptText;
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.focus();
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
showToast('📋 プロンプトをコピーしました。' + label + 'に貼り付けてください');
} catch (e) {
showToast(label + 'を開きます（プロンプトを貼り付けてください）');
}
}
setTimeout(function () { window.open(url, '_blank', 'noopener,noreferrer'); }, 300);
}
/* トースト表示 */
function showToast(msg) {
var el = document.getElementById('ai-share-toast');
if (!el) return;
el.textContent = msg;
el.style.display = 'block';
clearTimeout(el._timer);
el._timer = setTimeout(function () { el.style.display = 'none'; }, 3500);
}
var encoded = encodeURIComponent(promptText);
var buttons = [
{
label: 'ChatGPT',
cls: 'ai-share-btn--chatgpt',
/* ChatGPT: URLパラメータ対応 */
action: function () { window.open('https://chatgpt.com/?q=' + encoded, '_blank', 'noopener,noreferrer'); },
icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.28 9.28a5.76 5.76 0 0 0-.49-4.73 5.82 5.82 0 0 0-6.27-2.79A5.76 5.76 0 0 0 11.17 0a5.82 5.82 0 0 0-5.55 4.04 5.76 5.76 0 0 0-3.84 2.79 5.82 5.82 0 0 0 .72 6.82 5.76 5.76 0 0 0 .49 4.73 5.82 5.82 0 0 0 6.27 2.79A5.76 5.76 0 0 0 12.84 24a5.82 5.82 0 0 0 5.55-4.04 5.76 5.76 0 0 0 3.84-2.79 5.82 5.82 0 0 0-.72-6.82zM12.84 22.5a4.32 4.32 0 0 1-2.77-1l.13-.07 4.6-2.65a.75.75 0 0 0 .38-.65v-6.48l1.95 1.12a.07.07 0 0 1 .04.05v5.36a4.33 4.33 0 0 1-4.33 4.32zm-9.3-3.98a4.3 4.3 0 0 1-.52-2.9l.13.08 4.6 2.65a.75.75 0 0 0 .75 0l5.62-3.24v2.24a.07.07 0 0 1-.03.06L9.44 20.1a4.33 4.33 0 0 1-5.9-1.58zm-1.2-10.01A4.3 4.3 0 0 1 4.6 6.6v5.44a.75.75 0 0 0 .38.65l5.6 3.24-1.94 1.12a.07.07 0 0 1-.07 0L4.1 14.4a4.33 4.33 0 0 1-1.77-5.89zm15.98 3.72-5.62-3.25 1.95-1.12a.07.07 0 0 1 .07 0l4.47 2.58a4.33 4.33 0 0 1-.67 7.8v-5.44a.75.75 0 0 0-.37-.65zm-1.98-4.5-.13-.08-4.6-2.65a.75.75 0 0 0-.75 0L8.3 9.01V6.77a.07.07 0 0 1 .03-.06l4.47-2.58a4.33 4.33 0 0 1 6.44 4.48zm-12.2 4-1.95-1.12a.07.07 0 0 1-.04-.06V5.96a4.33 4.33 0 0 1 7.1-3.32l-.13.07-4.6 2.65a.75.75 0 0 0-.38.65zm1.06-2.28 2.5-1.44 2.5 1.44v2.88l-2.5 1.44-2.5-1.44z"/></svg>'
},
{
label: 'Gemini',
cls: 'ai-share-btn--gemini',
/* Gemini: URLパラメータ非対応 → クリップボードコピー */
action: function () { copyAndOpen('https://gemini.google.com/app', 'Gemini'); },
icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z"/></svg>'
},
{
label: 'Claude',
cls: 'ai-share-btn--claude',
/* Claude: URLパラメータ対応 */
action: function () { window.open('https://claude.ai/new?q=' + encoded, '_blank', 'noopener,noreferrer'); },
icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/></svg>'
},
{
label: 'Grok',
cls: 'ai-share-btn--grok',
/* Grok: URLパラメータ対応 */
action: function () { window.open('https://x.com/i/grok?text=' + encoded, '_blank', 'noopener,noreferrer'); },
icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>'
},
{
label: 'Perplexity',
cls: 'ai-share-btn--perplexity',
/* Perplexity: URLパラメータ対応 */
action: function () { window.open('https://www.perplexity.ai/?q=' + encoded, '_blank', 'noopener,noreferrer'); },
icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0 5.52-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2s10 4.48 10 10zm-2 0c0-4.42-3.58-8-8-8s-8 3.58-8 8 3.58 8 8 8 8-3.58 8-8zm-8 1-4-2.5V8l4 2.5L16 8v2.5z"/></svg>'
},
{
label: 'Copilot',
cls: 'ai-share-btn--copilot',
/* Copilot: URLパラメータ非対応 → クリップボードコピー */
action: function () { copyAndOpen('https://copilot.microsoft.com/', 'Copilot'); },
icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>'
}
];
var container = document.getElementById('ai-buttons');
if (!container) return;
buttons.forEach(function (btn) {
var b = document.createElement('button');
b.type = 'button';
b.className = 'ai-share-btn ' + btn.cls;
b.setAttribute('aria-label', btn.label + 'で要約する');
b.innerHTML = btn.icon + '<span>' + btn.label + '</span>';
b.addEventListener('click', btn.action);
container.appendChild(b);
});
})();
</script>
この中で
var promptText = 'この記事を要約してください：' + pageUrl;
この部分が送信するプロンプトのテキストになりますので、命令文は環境に合わせて変更してください。
CSS
.ai-share-widget {
font-family: 'Noto Sans JP', sans-serif;
background: #f8f8f6;
border: 1.5px solid #e5e5e0;
border-radius: 16px;
padding: 24px 28px;
margin: 40px 0;
width:100%;
}
.ai-share-widget__header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.ai-share-widget__icon {
width: 22px;
height: 22px;
background: #1a1a1a;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ai-share-widget__icon svg {
width: 13px;
height: 13px;
}
.ai-share-widget__title {
font-size: 13px;
font-weight: 700;
color: #1a1a1a;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ai-share-widget__label {
font-size: 14px;
color: #555;
margin-bottom: 14px;
line-height: 1.6;
font-weight: 400;
}
.ai-share-widget__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ai-share-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
text-decoration: none;
cursor: pointer;
border: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
white-space: nowrap;
letter-spacing: 0.01em;
}
.ai-share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
opacity: 0.92;
}
.ai-share-btn:active {
transform: translateY(0px);
box-shadow: none;
}
.ai-share-btn svg, .ai-share-btn img {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Brand colors */
.ai-share-btn--chatgpt { background: #10a37f; color: #fff; }
.ai-share-btn--perplexity{ background: #20b2aa; color: #fff; }
.ai-share-btn--gemini { background: #4285f4; color: #fff; }
.ai-share-btn--grok { background: #1a1a1a; color: #fff; }
.ai-share-btn--copilot { background: #0078d4; color: #fff; }
.ai-share-btn--claude { background: #cc785c; color: #fff; }
.ai-share-widget__label{padding-bottom:0 !important;}
#ai-buttons a{color:#fff !important;text-decoration:none !important;font-weight:bold !important;}
#ai-buttons a span{font-weight:bold;}
/* トースト通知 */
.ai-share-toast {
display: none;
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
background: #1a1a1a;
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
font-weight: 500;
padding: 12px 22px;
border-radius: 100px;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
z-index: 9999;
white-space: nowrap;
animation: toast-in 0.2s ease;
}
@keyframes toast-in {
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
JavaScriptのおすすめ参考書
ポチップ
ポチップ
