あまり知られてないのにめちゃくちゃ優秀。Chromeローカルで動くGemini nano
はじめに
Google Chromeに、Gemini Nanoを搭載したAI機能が組み込まれたことをご存知でしょうか？
これまでサーバーサイドで実行するのが当たり前だったAI処理を、ユーザーのデバイス上で直接実行できる「クライアントサイドAI」の時代が到来しました。
これにより、Webアプリケーション開発の可能性が大きく広がります。
この記事では、一般ユーザーから開発者まで、Chromeの組み込みAIの全体像を掴めるように、以下の内容を網羅的に解説します。
Chrome組み込みAIの基本概念とメリット
利用可能なAI機能の種類とそれぞれの用途
開発環境のセットアップから実装までの導入手順
すぐに試せる実践的なサンプルコード
最速でこの機能を試してみたい方
最後の6章に記載のあるGoogle公式の提供するChrome拡張機能をダウンロードすることですぐに使えるようになります。ぜひこちらを試してみてください。
Chrome拡張機能は一般公開されていないため、GitHub経由でソースコードをダウンロードし、デベロッパーモードをオンにした状態で自分のソースコードを拡張機能に読み込む方式になります。
1. Chrome組み込みAIとは？
Chrome組み込みAIとは、Googleの高性能かつ軽量なAIモデル「Gemini Nano」をChromeブラウザに直接統合し、WebアプリケーションがOSの機能のようにAIを呼び出せるようにする技術です。
最大の特徴は、AIの推論処理がクライアントサイド（ユーザーのデバイス上）で完結する点です。
これにより、開発者は自前でAIサーバーを構築・管理することなく、高度なAI機能をアプリケーションに組み込めます。
サーバーいらずのAIがもたらす4つのメリット
クライアントサイドでAIを動かすことには、大きな利点があります。
強力なプライバシー保護
ユーザーのデータを外部サーバーに送信する必要がないため、機密性の高い情報もデバイス内で安全に処理できます。高速なレスポンス
サーバーとの通信が不要なため、ネットワーク遅延の影響を受けず、ほぼリアルタイムの応答が可能です。オフライン利用
インターネット接続がない環境でもAI機能が動作するため、アプリケーションの利便性が向上します。コスト削減
サーバーの運用コストやAPI利用料を気にすることなく、AI機能をユーザーに提供できます。
2. 何ができる？Chrome組み込みAIの機能一覧
Chrome組み込みAIは、特定のタスクに特化した「Task API」と、より自由度の高い「Prompt API」の2種類に大別されます。
利用可能なAPI（2025年12月時点）
Writer API (Origin Trial): 指示に基づき新しい文章を生成
Rewriter API (Origin Trial): 既存の文章を言い換え・校正
Summarizer API (Chrome Stable): 長文を要約
Translator API (Chrome Stable): テキストを翻訳
Language Detector API (Chrome Stable): テキストの言語を検出
Prompt API (Origin Trial): 汎用的なAIタスク（マルチモーダル対応）
タスク特化型API (Task APIs)
特定のユースケースに最適化されており、少ないコードで簡単に利用できます。
Writer API:
「カジュアルなトーンでブログ記事を書いて」といった指示で、文章をゼロから生成します。Rewriter API:
「このメールをもっと丁寧な表現に」のように、既存のテキストのトーンや長さを変更します。Summarizer API:
ニュース記事や長いチャットログから、要点や箇条書きのサマリーを生成します。Translator API:
デバイス上で高速にテキストを翻訳します。多言語対応のアプリケーションに最適です。Language Detector API:
Translator APIと組み合わせることで、入力された言語を自動で判別し、翻訳を実行できます。
汎用API (Prompt API)
Prompt APIは、基盤となるGemini Nanoモデルを直接操作できる、非常に強力で柔軟なAPIです。Task APIでは実現できない、独自のAI機能を実装できます。
マルチモーダル入力:
テキストだけでなく、画像や音声を入力として与えることができます。構造化出力:
JSON Schemaを定義することで、AIの応答を構造化されたJSON形式で受け取ることができ、アプリケーションでの後続処理が容易になります。
3. 導入手順：3ステップでAI機能を有効化
Chrome組み込みAIを使い始めるのは非常に簡単です。まずは、開発環境を整えましょう。
共通の前提条件
まず、ユーザーと開発者の環境が以下の要件を満たしているか確認してください。
OS: Windows 10/11, macOS 13+, Linux, またはChromeOS (Chromebook Plus)
ストレージ: 22GB以上の空き容量
ハードウェア: 4GB以上のVRAMを持つGPU、または16GB以上のRAMと4コア以上のCPU
ブラウザ: 最新版のGoogle Chrome
ステップ1: Chrome Flagsで機能を有効化 (ローカル開発用)
localhostでテストを行うには、Chromeの実験的機能を有効にするフラグを設定します。
Chromeのアドレスバーに chrome://flags と入力します。
以下のフラグを検索し、Enabled に設定します。
optimization-guide-on-device-model
prompt-api-for-gemini-nano (Prompt APIなどGemini Nanoを利用するAPIの場合)
API固有のフラグ（例: writer-api-for-gemini-nano）
Chromeを再起動します。
ステップ2: Origin Trialへの登録 (本番環境用)
Stable版でないAPI（Writer APIなど）を本番のWebサイトで利用するには、Origin Trialへの登録が必要です。
Google Origin Trialsのページにアクセスします。
利用したいAPIのOrigin Trialを探し、Registerボタンから自身のWebサイトのオリジンを登録します。
発行されたトークンを、Webページのheadタグ内、またはHTTPヘッダーに設定します。
ステップ3: API利用の基本パターン
どのAPIを利用する場合でも、基本的な実装の流れは共通です。
// 1. 機能検出
if (!('Writer' in self)) {
console.log('Writer APIはサポートされていません');
return;
}
// 2. 可用性確認 (モデルのダウンロード状態をチェック)
const availability = await Writer.availability();
if (availability === 'unavailable') {
console.log('このデバイスではWriter APIは使用できません');
return;
}
// 3. ユーザー操作の確認 (初回利用時)
if (!navigator.userActivation.isActive) {
console.log('ユーザーの操作が必要です');
return; // ボタンクリックなどを待つ
}
// 4. セッション作成
const writer = await Writer.create();
// 5. API実行
const result = await writer.write('AIについてのブログ記事を書いてください');
console.log(result);
4. ハンズオン
それでは、具体的なコードを見ていきましょう。
ここでは、主要なAPIの使い方を紹介します。
Summarizer API：テキストを要約する
Stable版で最も試しやすいAPIの一つです。長い文章を瞬時に要約できます。
async function summarizeText(longText) {
if (!('Summarizer' in self)) return 'Summarizer API is not supported.';
try {
const summarizer = await Summarizer.create();
const summary = await summarizer.summarize(longText, {
type: 'key-points', // 要点を箇条書きに
format: 'markdown'
});
return summary;
} catch (error) {
return `Error: ${error.message}`;
}
}
const article = `(ここに長い記事のテキスト)...`;
const result = await summarizeText(article);
console.log(result);
Translator & Language Detector API：自動翻訳機を作る
2つのAPIを組み合わせることで、入力言語を自動で検出し、指定した言語に翻訳する機能が簡単に実装できます。
async function translateText(text, targetLang = 'ja') {
if (!('LanguageDetector' in self) || !('Translator' in self)) {
return 'API not supported.';
}
try {
// 言語を検出
const detector = await LanguageDetector.create();
const detectionResults = await detector.detect(text);
const sourceLang = detectionResults[0].detectedLanguage;
// 翻訳
const translator = await Translator.create({
sourceLanguage: sourceLang,
targetLanguage: targetLang
});
const translatedText = await translator.translate(text);
return translatedText;
} catch (error) {
return `Error: ${error.message}`;
}
}
const spanishText = 'Hola, ¿cómo estás?';
const translated = await translateText(spanishText);
console.log(translated); // "こんにちは、お元気ですか？"
Prompt API：構造化データを抽出する
Prompt APIの強力な機能である構造化出力を試してみましょう。自然文からJSONデータを抽出します。
async function extractEventDetails(text) {
if (!('LanguageModel' in self)) return 'Prompt API not supported.';
try {
const session = await LanguageModel.create();
// 抽出したいデータの形式をJSON Schemaで定義
const schema = {
type: 'object',
properties: {
title: { type: 'string', description: 'イベントのタイトル' },
date: { type: 'string', description: '日付 (YYYY-MM-DD形式)' },
location: { type: 'string', description: '場所' }
},
required: ['title', 'date', 'location']
};
const prompt = `以下のテキストからイベント情報を抽出してください。\\n\\nテキスト: "${text}"`;
const structuredResponse = await session.prompt(prompt, {
responseConstraint: schema
});
return JSON.parse(structuredResponse);
} catch (error) {
return `Error: ${error.message}`;
}
}
const eventText = '来週の12月25日に東京タワーで技術カンファレンスがあります。';
const eventData = await extractEventDetails(eventText);
console.log(eventData);
// { title: "技術カンファレンス", date: "2025-12-25", location: "東京タワー" }
5. 実用的なユースケースとベストプラクティス
エラーハンドリング
availability() の結果が unavailable の場合や、ユーザーがオフラインの場合に備え、サーバーサイドのAPIにフォールバックするハイブリッド構成を検討しましょう。UI/UX
初回利用時にはモデルのダウンロードが発生するため、プログレスバーを表示するなど、ユーザーに状態をフィードバックするUIが重要です。組み合わせ
各APIを組み合わせることで、より高度な機能を実現できます。
例えば
音声入力（Prompt API）
→文字起こし
→翻訳（Translator API）
→要約（Summarizer API）
といった連鎖が可能です。
6. 【最速で試したい方】Google公式のChrome拡張機能でテストしてみる
実は上記のGitHubからChrome拡張機能のためのソースコードを入手できます。
これらのファイルをダウンロードして以下のようなコマンドを実行することでいつでも自分のChromeからローカルGemini Nanoを起動できます。
npm installnpm build「dist」というフォルダが生成される。
chrome://extensions/にアクセスし、 デベロッパーモードをオンにする。
「パッケージ化されていない拡張機能を読み込む。」 というボタンを押してdistフォルダを選択する。
以下のようにサイドパネルからChrome Prompt AI Demoという拡張機能が利用可能になります。
まとめ
Chrome組み込みAIは、Webアプリケーション開発に新たなパラダイムをもたらす画期的な技術です。
プライバシー、速度、コストの問題をクリアし、これまで実現が難しかった多くのアイデアを形にする力を秘めています。
現在はまだ発展途上の技術ですが、W3Cでの標準化も進んでおり、将来的にはすべてのブラウザで利用可能になることが期待されます。
ぜひ今のうちからこの未来の技術に触れ、新しいWeb体験の創造に挑戦してみてください。
参考資料
Built-in AI | AI on Chrome - Chrome for Developers: https://developer.chrome.com/docs/ai/built-in
Get started with built-in AI | AI on Chrome: https://developer.chrome.com/docs/ai/get-started
Writer API | AI on Chrome - Chrome for Developers: https://developer.chrome.com/docs/ai/writer-api
Rewriter API | AI on Chrome - Chrome for Developers: https://developer.chrome.com/docs/ai/rewriter-api
Summarize with built-in AI | AI on Chrome - Chrome for Developers: https://developer.chrome.com/docs/ai/summarizer-api
Translation with built-in AI | AI on Chrome - Chrome for Developers: https://developer.chrome.com/docs/ai/translator-api
Language detection with built-in AI | AI on Chrome: https://developer.chrome.com/docs/ai/language-detection
The Prompt API | AI on Chrome - Chrome for Developers: https://developer.chrome.com/docs/ai/prompt-api
コメント