aptpod Advent Calendar 2025 12月11日の記事です。
こんにちは、開発本部 Visual M2M グループでフロントエンドエンジニアをしている遠藤です。
昨今、AI の勢いは目覚ましく、弊社でも日々の開発プロセスや自社プロダクトにどのように取り入れていくか検討を重ねています。その中でも、個人的に注目しているのがブラウザ組み込みの AI です。
本記事では、Google Chrome が現在取り組んでいるブラウザ組み込み AI の動向に触れつつ、この記事の公開時点（2025年12月11日）で実際に利用できる機能を中心に紹介していきます。
Google Chrome の組み込み AI
Google Chrome の組み込み AI は、ブラウザに組み込まれた AI モデルを、ブラウザ API を通して利用できる仕組みです。モデルのデプロイや管理、セルフホスティングを開発者が行わずに、アプリケーションに AI を組み込むことができます。
クライアントサイド（ブラウザ）で処理が完結するため、オフライン利用や機密データのローカル処理などのメリットがあります。また、従来のサーバーサイド AI よりも実装が簡潔になる可能性があり、AI 機能を手軽に取り込める点も魅力の一つです。
提供されている API
本記事公開時点（2025年12月11日）で Google Chrome が公開している組み込み AI の API は以下の通りです。最新のステータスは公式ドキュメントを確認してください。
| API | 機能概要 | Web | 拡張機能 |
|---|---|---|---|
| Translator API | 言語翻訳 | Chrome 138 | Chrome 138 |
| Language Detector API | 言語自動判定 | Chrome 138 | Chrome 138 |
| Summarizer API | テキスト要約 | Chrome 138 | Chrome 138 |
| Prompt API | 汎用的なプロンプト | Origin Trial | Chrome 138 |
| Writer API | 特定のタスクに応じた文章生成 | Origin Trial | Origin Trial |
| Rewriter API | テキストのリライト | Origin Trial | Origin Trial |
| Proofreader API | テキストの校正 | Origin Trial | Origin Trial |
本記事では、このうち現時点で利用できる Translator / Language Detector / Summarizer の 3 つについて使い方を紹介します。
なお、本記事は Google Chrome での利用を前提にしていますが、Web Machine Learning Community Group にて標準化の取り組みが行われており、今後は他ブラウザでも利用可能になることが期待されています。
動作要件
Google Chrome の組み込み AI を利用するためには、モデルとハードウェアに関する要件があります。これらは今後更新される可能性があるため、最新の情報は公式ドキュメントを参照してください。
ブラウザ組み込み AI の API を試してみる
TypeScript 型定義
TypeScript を利用する場合は、次のパッケージを追加することで型補完とエラーチェックが有効になります。
npm install --save-dev @types/dom-chromium-ai
可用性の確認
各 API を利用する前に、非同期の availability() 関数を呼び出すことで、利用可能かどうかを確認できます。
// LanguageDetector API の可用性を確認する例 const availability = await LanguageDetector.availability(); console.log(availability);
availability() は以下の値を Promise で返します。
| 値 | 意味 |
|---|---|
available |
利用可能 |
downloadable |
モデルのダウンロードが必要 |
downloading |
モデルのダウンロードを進行中 |
unavailable |
利用不可（ブラウザがサポートしていない・動作要件を満たしていないなど） |
各 API の使い方
現時点で Google Chrome で利用可能な Translator / Language Detector / Summarizer の API について、それぞれ使い方を確認していきます。
Language Detector API
入力テキストの言語を自動判定する API です。入力されたテキストに対して、使用されている言語を確率順にランク付けして返します。多言語フォームにおける入力言語判定や、後述する Translator API と組み合わせた自動翻訳などに活用できます。
基本的な使い方
if (!("LanguageDetector" in self)) return; // LanguageDetector API の可用性確認 const availability = await LanguageDetector.availability(); if (availability === "unavailable") return; if (navigator.userActivation.isActive) { // アプトポッド公式サイト(https://www.aptpod.co.jp/)より紹介文を抜粋 const input = "アプトポッドは高速双方向なデータストリーミング技術をベースに、産業向けの高速IoTプラットフォームミドルウェア、及びクライアントアプリケーションからエッジハードウェアまでワンストップに開発・提供しています。自動車、ロボット、建機、農機など、様々なモビリティや産業機器をクラウドへ接続し、高精細な遠隔データ収集と分析、リアルタイム監視、遠隔制御、およびデジタルツインの実現など、革新的な産業DXに貢献します。"; // LanguageDetector インスタンスの作成 const detector = await LanguageDetector.create({ monitor(m) { // モデルのダウンロード進捗を監視 m.addEventListener("downloadprogress", (e) => { console.log(`Downloaded ${e.loaded * 100}%`); }); }, }); // 言語判定の実行 const results = await detector.detect(input); console.log(JSON.stringify(results, null, 2)); /* [ { "confidence": 0.9980313777923584, "detectedLanguage": "ja" }, { "confidence": 0.0000766943849157542, "detectedLanguage": "und" } ] */ }
detect() は、{ detectedLanguage, confidence } オブジェクトの配列を Promise で返します。confidence は 0.0（信頼度が最も低い）から 1.0（信頼度が最も高い）までの値で表されます。
上記の例では、期待通り ja（日本語）が最も高い信頼度で検出されているのがわかります。
Translator API
テキストを別の言語に翻訳する API です。アプリケーションの多言語化はもちろん、チャットやユーザー投稿コンテンツのオンデマンド翻訳などに活用できます。
基本的な使い方
if (!("Translator" in self)) return; // Translator API の可用性確認 const availability = await Translator.availability({ sourceLanguage: "ja", targetLanguage: "en", }); if (availability === "unavailable") return; if (navigator.userActivation.isActive) { // アプトポッド公式サイト(https://www.aptpod.co.jp/)より紹介文を抜粋 const input = "アプトポッドは高速双方向なデータストリーミング技術をベースに、産業向けの高速IoTプラットフォームミドルウェア、及びクライアントアプリケーションからエッジハードウェアまでワンストップに開発・提供しています。自動車、ロボット、建機、農機など、様々なモビリティや産業機器をクラウドへ接続し、高精細な遠隔データ収集と分析、リアルタイム監視、遠隔制御、およびデジタルツインの実現など、革新的な産業DXに貢献します。"; // Translator インスタンスの生成 const translator = await Translator.create({ sourceLanguage: "ja", // BCP-47 言語コード targetLanguage: "en", // BCP-47 言語コード monitor(m) { // モデルのダウンロード進捗を監視 m.addEventListener("downloadprogress", (e) => { console.log(`Downloaded ${e.loaded * 100}%`); }); }, }); // 翻訳の実行 const result = await translator.translate(input); console.log(result); /* Based on high-speed, bidirectional data streaming technology, Aptpod develops and provides one-stop development and delivery of high-speed IoT platform middleware for industrial use, as well as client applications to edge hardware. Connect a variety of mobility and industrial equipment, including automobiles, robots, construction machinery and agricultural machinery to the cloud, and contribute to innovative industrial DX, including high-definition remote data collection and analysis, real-time monitoring, remote control, and realizing digital twins. */ }
translate() は翻訳されたテキストを Promise で返します。
上記での例では、create() 関数の引数で sourceLanguage と targetLanguage で指定した日本語から英語への翻訳が実行されているのがわかります。
ストリーミング翻訳
より長いテキストを翻訳する場合、ReadableStream を返す translateStreaming() を利用することもできます。
// 翻訳の実行 const stream = translator.translateStreaming(input); for await (const chunk of stream) { console.log(chunk); }
Summarizer API
長いテキスト（記事、ドキュメント、チャット履歴など）を簡潔に要約する API です。長い記事の見出し表示や、会議議事録のサマリー作成などに活用できます。
基本的な使い方
if (!("Summarizer" in self)) return; // Summarizer API の可用性確認 const availability = await Summarizer.availability({ type: "key-points", // "tldr" / "teaser" / "key-points" / "headline" format: "markdown", // "markdown" / "plain-text" length: "short", // "short" / "medium" / "long" expectedInputLanguages: ["ja"], // BCP-47 言語コード expectedContextLanguages: ["ja"], // BCP-47 言語コード outputLanguage: "ja", // BCP-47 言語コード }); if (availability === "unavailable") return; if (navigator.userActivation.isActive) { // アプトポッド公式サイト - 代表挨拶(https://www.aptpod.co.jp/company/ceo/)より文章を抜粋 const input = `アプトポッドは「つなぐ」プロフェッショナルです 現在、自動車、建設、ロボティクスを中心とした様々な分野において、製造業の開発プロセスDX化やイノベーション創出といった数々のプロジェクトを、強みのIoT技術を駆使して、お客様とともに推進しています。当社の基幹製品である「intdash」は、あらゆる種類の産業データを超低遅延で伝送し、欠損なく時系列をそろえてサーバーに永続化するストリーミング技術を特徴としており、現在の多様なプロジェクトの中核を担っています。 数々のプロジェクトを進めるなかで多くのお客様に当社製品の実力を認めていただき、2018年の「intdash」リリース以来、大手製造業のお客様を中心として約50社100プロジェクトの実績を積み上げることができました。 「intdash」は、多種多様でマルチモーダルな産業データを、インターネットを介して、限りなくリアルタイムに、かつ、もとのデータに忠実に伝送するデータストリーミング技術の実現を目指しています。 当社のプリミティブなアプローチとしてはこれを実現するためにデータストリーミングのプロトコル開発から入り、製品の垂直水平統合を行っています。 インターネットが台頭して以降、現代社会を形成し、社会課題を解決していくには、データネットワークの活用が必要不可欠になってきています。 IoTの世界は、IT（人が情報を取得・発信する）だけで良かった時代から、OT（よりフィジカルなモノが通信する）の融合が必須となる時代に変貌しつつあります。今後さらに発展していくメタバース社会、つまりバーチャルワールドが現実世界に融合された社会においては、デジタルツインの社会実装も進行していきます。 そうしたある意味パラレルワールドを融合した社会を形成していくには、現実/仮想といった様々なレイヤやデータの種類を超えた、神経網や血管のようなマルチモーダルなデータネットワークが必要です。アプトポッドは産業シーンを主戦場として、未来志向のマルチモーダルデータネットワークを形成するための技術開発と、インフラプロダクト提供を目指しています。`; // Summarizer インスタンスの生成 const summarizer = await Summarizer.create({ type: "key-points", // "tldr" / "teaser" / "key-points" / "headline" format: "markdown", // "markdown" / "plain-text" length: "short", // "short" / "medium" / "long" expectedInputLanguages: ["ja"], // BCP-47 言語コード expectedContextLanguages: ["ja"], // BCP-47 言語コード outputLanguage: "ja", // BCP-47 言語コード sharedContext: "アプトポッドを知らない人に向けたわかりやすい説明", // 要約の共有コンテキスト monitor(m) { // モデルのダウンロード進捗を監視 m.addEventListener("downloadprogress", (e) => { console.log(`Downloaded ${e.loaded * 100}%`); }); }, }); // 要約の実行 const results = await summarizer.summarize(input); console.log(results); /* * アプトポッドは、自動車、建設、ロボティクスなど、様々な分野でIoT技術を活用し、製造業の開発プロセスDX化やイノベーション創出を支援しています。「intdash」という基幹製品は、産業データを低遅延でサーバーに永続化するデータストリーミング技術を特徴としています。 * 「intdash」は、インターネットを介して多様な産業データをリアルタイムに伝送するデータストリーミング技術を実現するために、データストリーミングプロトコルの開発から製品の垂直水平統合を行っています。これにより、大手製造業を中心とした約50社100プロジェクトの実績を積み上げてきました。 * 今後、メタバース社会やデジタルツインの社会実装が進む中で、アプトポッドは現実と仮想を超えたマルチモーダルなデータネットワークを形成するための技術開発とインフラプロダクト提供を目指しており、産業シーンを主戦場としています。 */ }
summarizer.summarize() は要約テキストを Promise で返します。
create() 関数の引数で要約の言語や種類、長さ、出力形式などを指定できます。
上記の例では、type に key-points、length に short を指定しているため、3 つの箇条書き形式の短い要約が生成されているのがわかります。
create() が引数として受け取れるパラメータには主に以下があります。
sharedContext: 要約に関する追加のコンテキストtype: 要約のタイプ（デフォルトはkey-points）tldr: 忙しい読者のために要約として作成された短く簡潔な概要teaser: 最も興味深い点や魅力的な点を要約key-points: 主要なポイントの箇条書きheadline: 要点をとらえた記事の見出し
format: 出力形式（デフォルトはmarkdown）markdown: マークダウン形式plain-text: プレーンテキスト形式
length: 要約の長さ（デフォルトはmedium）short: 短い要約medium: 中程度の要約long: 長い要約
ストリーミング要約
summarizeStreaming() を利用することで、ReadableStream を返すストリーミング要約も可能です。結果がリアルタイムで提供されるため、逐次的に要約を処理したい場合に便利です。
const stream = summarizer.summarizeStreaming(input); for await (const chunk of stream) { console.log(chunk); }
おわりに
ブラウザ組み込み AI によってクライアントサイドで処理が完結することは、プライバシー保護やオフラインでの利用、加えて実装面でも大きな魅力があると感じました。ユーザーの入力データを外部に送信せずに AI を利用できるため、従来のサーバーサイド AI とは異なる利点を得られます。
一方で、動作要件が通常よりもシビアであったり、ブラウザごとにサポート状況に違いが見られたりと、現時点では利用できる場面が限られます。また、Origin Trial 段階の API も多く、今後の仕様変更が発生する可能性もあります。
それでも、こうした機能が標準化され、より広く利用されるようになれば、フロントエンドの体験設計は大きく変わっていくと感じました。必ずしもクライアントサイド AI がサーバーサイド AI を置き換えるわけではなく、双方を併用するハイブリッドな構成を検討することで、より柔軟なアプリケーション設計が可能になるはずです。
intdash や Visual M2M Data Visualizer といったアプトポッドのプロダクトにおいても、活用できる余地は大きいと考えています。今後のアップデートを追いかけながら、具体的な活用方法を検討していきたいと思います。
