Chrome の組み込み AI を使用して新機能を構築する

Thomas Steiner

公開: 2026 年 5 月 26 日

この記事は、Google I/O 2026 で Thomas Steiner が行った講演の書き起こしです。

ブログ投稿エディタがテキストを保存するだけでなく、執筆を積極的にサポートする旅行ブログの構築を想像してみてください。trAIlblazers の作成者である Maya と Ashok をご紹介します。2 人は Chrome に組み込まれた AI を 使用しています。モデルをユーザーのデバイスで直接実行することで、デベロッパーはセンシティブ データをローカルに保持しながら、高額なクラウド費用とレイテンシを回避できます。

Build Awesome（旧 Eleventy）と協力して、講演で説明したすべての AI 機能を含むブログ テンプレート をリリースしました。

組み込み AI を使用する理由

  • 費用対効果が高い: クラウド推論の費用はかかりません。すべての計算はユーザーのサポート対象デバイスで行われます。
  • プライバシー優先: センシティブ データがブラウザから外部に送信されることはありません。
  • オフライン機能: モデルをダウンロードすると、インターネットに接続していなくても AI 機能を使用できます。
  • パフォーマンス: ハードウェア アクセラレーションにより、デバイス上のモデルはクラウドの速度に匹敵する（場合によっては上回る）ことができます。
  • ハイブリッド推論: ポリフィルや Firebase AI Logic などのツールを使用すると、デスクトップではネイティブのまま、サポートされていないデバイス（モバイルなど）ではクラウドにフォールバックできます。

最新のウェブアプリ向けの AI 機能

Summarizer API

trAIlblazers エディタは Summarizer API を使用して、 見出しと SEO に適したメタディスクリプションを自動的に生成します。

例: 見出しを生成する

const blogPost = document.querySelector('.article-body').innerText;
const summarizer = await Summarizer.create({
  type: 'headline',
  sharedContext: 'Write headlines that make people want to read the blog post',
});

for await (const chunk of summarizer.summarizeStreaming(blogPost)) {
  headline.append(chunk);
}

Prompt API（構造化出力付き）

特定のデータが必要ですか？Prompt API で JSON スキーマ を使用すると、AI が 予測可能な形式でデータを返すようにできます。trAIlblazers チームは、これを次の目的で使用しています。

  • タグの生成: 事前定義されたリストから「アドベンチャー」や「ビーチ」などのカテゴリを提案します。
  • コメントの管理: コメントが公開される前に、「安全」または「有害」として分類します。

メディアのアクセシビリティ

エディタは Markdown の「難しい部分」を自動化します。画像をドロップすると、 Prompt API（マルチモーダル 入力付き） がピクセルを分析して、アクセス可能な代替テキストと有益なキャプションを生成します。

執筆と書き換え

Writer と Rewriter API を使用すると、ユーザーは箇条書きを完全な 段落に展開したり、段落のトーンをワンクリックで「カジュアル」または「短く」 変更したりできます。

シームレスな翻訳

Translator API を使用すると、作成者は英語で コンテンツを作成し、スペイン語または日本語の読者向けに即座に翻訳できます。 ネイティブ スピーカーは、これをさらに改善できます。

Translator API の動作例。
Translator API を使用して英語でコンテンツを作成し、 スペイン語と日本語に即座に翻訳します。

実際の成功事例

多くのパートナーがすでにこれらの API を本番環境で提供しています。主な例は次のとおりです。

  • Drupal: CKEditor 内の SEO タグの生成に Summarizer API を使用しています。
  • Yahoo! Japan: コミュニティ コメントの管理に Prompt API を使用しています。
  • Trip.com: AI の概要により、複雑なフライト予約オプションを簡単に選択できます。

講演のリソース

独自の「trAIlblazers」エクスペリエンスを構築する準備はできましたか？以下のリソースをご確認ください。