はじめに
みなさんは、Chrome が “ブラウザ内で動く組み込みAI” を標準搭載しはじめていることをご存じでしょうか?
2025年12月1日現在、Chrome では以下のような AI API が利用できます。
-
Translator API (Chrome 138以上)
- AIが入力テキストを翻訳してくれるAPI
-
Language Detector API (Chrome 138以上)
- AIが入力テキストの言語を特定してくれるAPI
-
Summarizer API (Chrome 138以上)
- AIが入力テキストをようやくしてくれるAPI
-
Writer API(Chrome 137~148でトライアル中)
- 指定されたライティングタスクに準拠した新しいコンテンツを作成してくれるAPI
-
Rewriter API(origin trial)
- テキストを修正&再構成してくれるAPI
-
Proofreader API(origin trial)
- 文法、スペル、句読点の誤りを見つけて修正するしてくれるAPI
-
Prompt API(origin trial)
- ブラウザで Gemini Nano に自然言語リクエストを送信できるAPI
ローカルで AI を動かせる環境が、いよいよ Web 標準として整ってきました。
今回はその中でも、テキスト要約を行う「Summarizer API」 を実際に触ってみたので、その使い方や挙動を紹介します。
Summarizer API
Summarizer API は、ブラウザの内部 AIモデルを使用して、指定されたテキスト本文を要約してくれる機能です。
Summarizer API を使用すると、文、段落、箇条書きリストなど、さまざまな長さと形式のさまざまな種類の要約を生成できます。
以下のようなコードを書くことで、要約されたテキストを取得することができます。
// Summarizerインスタンスの生成
const summarizer = await Summarizer.create({
type: 'key-points', // 要約の仕方
format: 'markdown', // 出力形式
length: 'short' // 要約の長さ
});
// テキストを要約
const summaryResult = await summarizer.summarize('要約元の文章');
Summarizer APIを使用するには、Summarizer.create(options) を使って、Summarizerインスタンスを作成します。
optionには以下の項目を指定することができます。
-
'sharedContext':要約するとき追加するコンテキスト -
'type':要約の種類('tldr'・'teaser'・'key-points'・'headline') -
format:要約の形式('markdown'・'plain-text') -
length:要約の長さ('short'・'medium'・'long')
lengthは、'type'の種類によって、以下のように出力されるようやくの長さが変わります。
| タイプ | 意味 | 長さ |
|---|---|---|
| "tldr" | 短く、要点を押さえたもので、 忙しい読者向けに概要を簡単にする |
short: 1文 |
| medium: 3文 | ||
| long: 5文 | ||
| "teaser" | 入力の最も興味深い部分や魅力的な部分に焦点を当て、 読者がもっと読みたいと思うようにする |
short: 1文 |
| medium: 3文 | ||
| long: 5文 | ||
| "key-points" | 入力から最も重要なポイントを抽出し、 箇条書きのリストにする |
short: 箇条書き 3つ |
| medium: 箇条書き 5つ | ||
| long: 箇条書き 7つ | ||
| "headline" | 記事の見出しの形式で、 入力の要点を1つの文にする |
short: 12ワード |
| medium: 箇条書き 17ワード | ||
| long: 箇条書き 22ワード |
Summarizer APIを使えるようにする
Summarizer API を使うには、以下の条件を満たしている必要があります。
-
対応OS
- Windows 10/11
- macOS 13以降(Ventura+)
- Linux
- ChromeOS(プラットフォームバージョン16389.0.0以降の【83†Chromebook Plus】デバイス)
- ※Android版ChromeやiOS版Chrome、Chromebook Plus以外のChromeOS端末では現在サポートされていません
-
ストレージ空き容量
- Chromeプロファイルを含むドライブに最低22GBの空き領域が必要です
-
ハードウェア要件:組み込みモデルはGPUまたはCPUで実行できます
- GPUの場合: 4GB以上のVRAM
- CPUの場合: 16GB以上のRAMと4個以上のCPUコア
-
ネットワーク
- 無制限のデータ通信または従量制でない接続
① フラグを有効にする
-
chrome://flags/#optimization-guide-on-device-modelにアクセスする-
Enables optimization guide on deviceをEnabledにする
-
-
chrome://flags/#prompt-api-for-gemini-nanoにアクセスする-
Summarization API for Gemini NanoをEnabledにする - 多言語対応したい場合は、
Enabled Multilingualにしてください
-
-
chrome://flags/#summarization-api-for-gemini-nanoにアクセスする-
Summarization API for Gemini NanoをEnabledにする - 多言語対応したい場合は、
Enabled Multilingualにしてください
-
- その後、Chromeを再起動する
② AIモデルの利用可否を確認
DevToolを開き、以下のコードをコンソールに貼り付け、実行してください。
await LanguageModel.availability();
上記を実行すると、以下のようにAIモデルの利用状況が表示されます。
-
'unavailable': 環境要件未満 -
'Mdownloadable': ダウンロード可能(未取得) -
'downloading': ダウンロード中 -
'available': ダウンロード済み、利用可能
③ AIモデルをダウンロードする
②のステップで、'Mdownloadable'が表示されていたら、AIモデルをダウンロードしましょう。
ダウンロードするには、開発環境にボタンを用意し、以下のコードを実行できるようにしてください。
const ClickHandler = async () => {
if (navigator.userActivation.isActive) {
const session = await LanguageModel.create();
}
}
④ AIモデルの利用可否を確認
DevToolを開き、以下のコードをコンソールに貼り付け、実行してください。
await LanguageModel.availability();
上記を実行すると、以下のようにAIモデルの利用状況が表示されます。
-
'unavailable': 環境要件未満 -
'Mdownloadable': ダウンロード可能(未取得)- → ③ができているか確認してください
-
'downloading': ダウンロード中- → しばらくお待ちください
-
'available': ダウンロード済み- → 利用可能です
'available' が表示されていれば、AIモデルがダウンロードされ、利用可能な状態です。
Summarizer APIを実装する
試しに、こんな感じに書いてみました。
const initializeSummarizer = async () => {
const options = {
sharedContext: 'This is a scientific article',
type: 'key-points',
format: 'markdown',
length: 'medium',
expectedInputLanguages: ['ja'],
outputLanguage: 'ja',
expectedContextLanguages: ['en'],
monitor(m: any) {
m.addEventListener('downloadprogress', (e: any) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
}
};
const longText = `
本日のプロジェクト定例では、まず先週までの進捗状況について各担当者から報告が行われた。
フロントエンドチームからは、新規機能のUI実装が概ね完了したものの、一部のブラウザ互換性で想定外の挙動が見つかり、追加の検証が必要になったとの説明があった。
バックエンド側では、APIのレスポンス最適化が予定より早く進んでいる一方で、外部サービスとの連携部分について仕様確認が不足しており、改めて先方との調整が必要であることが共有された。
デザインチームからは、今後予定している改善施策に関して、ユーザーインタビューの結果をもとに情報設計を見直す案が提案された。
この提案に対して、プロダクトマネージャーからは、リリーススケジュールへの影響度を精査した上で次回の会議で改めて判断したいとの意見が出た。
また、QAチームからは、現行ビルドで発見されている軽微な不具合について、優先度の調整を行いながら対応を進める方針が説明された。
最後に、来月のリリース候補日について議論が行われ、現状の進捗を踏まえると、当初予定していた日程でのリリースは可能だが、バックエンド連携部分で遅延が発生した場合のリスクを考慮し、予備日を設けるべきではないかという意見もあった。
最終決定は次回の定例で行うことになり、各担当チームはそれまでに必要な追加調査および対応案の整理を進めることで合意した。
`
if ('Summarizer' in self) {
const availability = await Summarizer.availability();
if (availability === 'unavailable') { return; }
const summarizer = await Summarizer.create(options);
const result = await summarizer.summarize(longText);
console.log(result)
//↓ 出力された文章
// * 先週までのプロジェクトの進捗状況が各チームから報告された。フロントエンドチームはUI実装完了したが、ブラウザ互換性の問題で追加検証が必要。
// * バックエンド側ではAPIレスポンス最適化が予定より早く進捗しているが、外部サービスとの連携部分の仕様確認が不足しており、調整が必要。
// * デザインチームはユーザーインタビュー結果に基づき、情報設計の見直し案を提案した。プロダクトマネージャーはリリーススケジュールへの影響を考慮し、次回の会議で判断する予定。
// * QAチームは現行ビルドの軽微な不具合に対応する方針を説明した。
// * 来月のリリース候補日について議論され、当初予定の日程でのリリースは可能だが、バックエンド連携の遅延リスクを考慮して予備日を設けるべきか意見が出た。
}
};
まとめ
今回は Chrome の組み込み AI 機能のひとつである Summarizer API を実際に触ってみました。
要約のタイプや長さ、形式を柔軟に指定できるうえ、AIモデルがローカルで動作するため、深く考えずとも、AI機能が実装できるのがとても快適でした。
ぜひ、この記事を参考に Summarizer API をさわってみてください
最後まで読んでくださってありがとうございます!
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。