公開日: 2025 年 4 月 28 日、最終更新日: 2025 年 5 月 21 日
AI の急速な進化により、ウェブ アプリケーションの新たな可能性が広がっています。特に、デバイス上の機能の登場は大きな変化をもたらしています。日本の大手インターネット企業である CyberAgent が、Chrome の 組み込み AI と Prompt API を使用して、同社のプラットフォームである Ameba ブログのブログ作成 エクスペリエンスをどのように強化しているかをご紹介します。
この記事では、CyberAgent の目標、組み込み AI を使用するメリット、直面した課題、組み込み AI を使用する他のデベロッパーにとって有益な分析情報について説明します。
Prompt API とは
| 商品の解説 | ウェブ | 拡張機能 | Chrome のステータス | インテント |
|---|---|---|---|---|
| GitHub |  Chrome 148 |
Chrome 138 |
表示 | 試験運用版のインテント |
| GitHub |  サンプリング パラメータのオリジン トライアル |
Chrome 148 |
表示 | 試験運用版のインテント |
Prompt API を使用すると、デベロッパーは大規模 言語モデルを使用して、AI 機能をアプリに直接追加できます。カスタム プロンプトを定義することで、アプリはデータ抽出、コンテンツ生成、パーソナライズされたレスポンスなどのタスクを実行できます。Chrome では、Prompt API は Gemini Nano を使用してクライアントサイド推論を実行します 。使用するモデルに関係なく、このローカル処理により、データのプライバシーとレスポンスの速度が向上します。使用するモデルに関係なく、クライアントのレスポンス速度が向上します。
Ameba ブログの作成者向けの AI アシスタンス
CyberAgent は、作成者にとって共通の課題として、魅力的なコンテンツ、特にタイトルを作成するのに時間がかかることが多いことを認識していました。ブログ作成インターフェースに AI 搭載機能を統合することで、コンテンツ作成の品質と効率を大幅に改善できるのではないかと考えました。その目標は、インスピレーションを提供し、ブロガーが魅力的なコンテンツを作成するのに役立つツールを提供することでした。
CyberAgent は、Prompt API を使用して Chrome 拡張機能を開発しました。この拡張機能は、Ameba ブログの作成者がタイトルと見出し、後続の段落、一般的なコピーの改善を生成するのに役立つように設計された、AI 搭載機能のスイートを提供します。
CyberAgent は機能の柔軟性を求めており、それが Prompt API につながりました。1 つの API で無限の可能性を実現できるため、CyberAgent は Ameba の作成者にとって最適な方法と最も役立つ方法を正確に判断できました。
CyberAgent は、一部のブロガーを対象に拡張機能をテストし、提供される機能の実現可能性について貴重な分析情報を得ました。このフィードバックは、AI アシスタンスのより良いアプリケーションを特定し、拡張機能のデザインを改善するのに役立ちました。肯定的な結果とフィードバックに基づいて、CyberAgent は今後この機能をリリースし、クライアントサイド AI の力をブログ コミュニティに直接提供することを目指しています。
これらの機能について詳しく見ていきましょう。
より良いタイトルと見出しを作成する
この拡張機能は、ブログのコンテンツ全体に基づいて複数のタイトルの候補を生成します。ブログの作成者は、[再生成]、[より丁寧に]、[よりカジュアルに]、[類似のタイトルを生成] などのオプションを使用して、これらの候補をさらに絞り込むことができます。
CyberAgent は、ユーザーがプロンプトを作成する必要がないように、UI を特別に設計しました。これにより、プロンプト エンジニアリングに慣れていないユーザーでも、AI の力を活用できます。
この拡張機能では、ブログの個々のセクションの魅力的な見出しを生成することもできます。作成者は、見出しに関連するテキストを選択することで、見出しをリクエストできます。
Prompt API を使用してタイトルを生成するコードには、初期プロンプトとユーザー プロンプトが含まれています。初期プロンプトは、特定のタイプの出力を取得するためのコンテキストと手順を提供します。一方、ユーザー プロンプトは、ユーザーが記述した内容をモデルに処理するよう求めます。コードの詳細については、 AI アシスタンスをデプロイするをご覧ください。
後続の段落を生成する
この拡張機能は、選択したテキストに基づいて後続の段落を生成することで、ブロガーがライターズ ブロック（スランプ）を克服するのに役立ちます。前の段落のコンテキストを使用して、AI が段落の続きを作成するため、作成者はクリエイティブな流れを維持できます。
テキストを改善して編集する
Gemini Nano は、選択したテキストを分析し、改善点を提案できます。ユーザーは、トーンや言語の選択に関する追加のメモを使用して改善点を再生成し、コピーを「かわいく」したり「シンプル」にしたりできます。
AI アシスタンスをデプロイする
CyberAgent は、拡張機能のコードをセッションの作成、トリガー、モデルのプロンプトの 3 つのステップに分割しました。
まず、組み込み AI が利用可能でサポートされていることをブラウザで確認します。 利用可能な場合は、デフォルトのパラメータでセッションを作成します。
if (!LanguageModel) {
// Detect the feature and display "Not Supported" message as needed
return;
}
// Define default values for topK and temperature within the application
const DEFAULT_TOP_K = 3;
const DEFAULT_TEMPERATURE = 1;
let session = null;
async function createAISession({ initialPrompts, topK, temperature } = {}) {
const { available, defaultTopK, maxTopK, defaultTemperature } =
await LanguageModel.availability();
// "readily", "after-download", or "no"
if (available === "no") {
return Promise.reject(new Error('AI not available'));
}
const params = {
monitor(monitor) {
monitor.addEventListener('downloadprogress', event => {
console.log(`Downloaded: ${event.loaded} of ${event.total} bytes.`);
});
},
initialPrompts: initialPrompts || '',
topK: topK || defaultTopK,
temperature: temperature || defaultTemperature,
};
session = await LanguageModel.create(params);
return session;
}
各機能には、ユーザーによってトリガーされるヘルパー関数があります。トリガーされると、ユーザーが関連するボタンをクリックしたときに、セッションが更新されます。
async function updateSession({ initialPrompts, topK, temperature } = {
topK: DEFAULT_TOP_K,
temperature: DEFAULT_TEMPERATURE,
}) {
if (session) {
session.destroy();
session = null;
}
session = await createAISession({
initialPrompts,
topK,
temperature,
});
}
セッションが更新されたら、関数に従ってモデルにプロンプトを表示します。 たとえば、タイトルを生成し、よりフォーマルなトーンでタイトルを再生成するコードは次のようになります。
async function generateTitle() {
// Initialize the model session
await updateSession({
initialPrompts: [
{ role: 'system',
content: `Create 3 titles suitable for the blog post's content,
within 128 characters, and respond in JSON array format.`,
}
]
});
const prompt = `Create a title for the following
blog post.${textareaEl.textContent}`;
const result = await session.prompt(prompt);
try {
const fixedJson = fixJSON(result);
// display result
displayResult(fixedJSON);
} catch (error) {
// display error
displayError();
}
}
async function generateMoreFormalTitle() {
// Do not execute updateSession to reuse the session during regeneration
const prompt = 'Create a more formal title.';
const result = await session.prompt(prompt);
...
}
組み込み AI のメリット
組み込み AI はクライアントサイド AI の一種であり、 推論はユーザーのデバイスで行われます。CyberAgent は、アプリケーション デベロッパーとユーザーの両方に魅力的なメリットをもたらすため、Gemini Nano を使用して組み込み AI API を選択しました。
CyberAgent が重視した主なメリットは次のとおりです。
- セキュリティとプライバシー
- 費用
- レスポンスと信頼性
- 開発の容易さ
セキュリティとプライバシー
データを外部サーバーに送信せずに、ユーザーのデバイスで AI モデルを直接実行できることが最も重要です。ブログの下書きは一般公開されるものではないため、CyberAgent はこれらの下書きをサードパーティ サーバーに送信したくありません。
組み込み AI は Gemini Nano をユーザーのデバイスにダウンロードするため、サーバーとの間でデータを送受信する必要がありません。下書きには機密情報や意図しない表現が含まれる可能性があるため、これは特に書き込み時に便利です。組み込み AI は、元のコンテンツと生成されたコンテンツをサーバーに送信するのではなく、ローカルに保存するため、セキュリティを強化し、コンテンツのプライバシーを保護できます。
コストの節約
組み込み AI を使用する主なメリットの 1 つは、ブラウザに Gemini Nano が含まれており、API を無料で使用できることです。追加料金や隠れた費用はかかりません。
組み込み AI はサーバー費用を大幅に削減し、AI 推論に関連する費用を完全に削減できます。このソリューションは大規模なユーザーベースに迅速にスケーリングでき、ユーザーは追加料金を発生させることなく連続してプロンプトを送信して出力を絞り込むことができます。
レスポンスと信頼性
組み込み AI は、ネットワークの状態に関係なく、一貫して迅速なレスポンスを提供します。これにより、ユーザーはコンテンツを何度も生成できるため、新しいアイデアを試して満足のいく結果をすばやく作成することがはるかに簡単になります。
開発の容易さ
Chrome の組み込み AI は、すぐに利用できる API を提供することで、開発プロセスを簡素化します。デベロッパーは、アプリケーションの AI 搭載機能を簡単に作成できるというメリットがあります。
Gemini Nano と組み込み AI API は Chrome にインストールされているため、追加の設定やモデル管理は必要ありません。API は他のブラウザ API と同様に JavaScript を使用し、機械学習の専門知識は必要ありません。
課題を克服してより良い結果を得る
CyberAgent は、Prompt API を使用して、クライアントサイド LLM の操作のニュアンスについて貴重な教訓を得ました。
- レスポンスの一貫性がない: 他の LLM と同様に、Gemini Nano は同じプロンプトに対して同じ出力が保証されるわけではありません。CyberAgent は、予期しない形式（Markdown や無効な JSON など）のレスポンスを受け取りました。手順を指定しても、結果が大きく異なる可能性があります。組み込み AI を使用してアプリケーションまたは Chrome 拡張機能を実装する場合は、出力が常に正しい形式になるように回避策を追加するとよいでしょう。
- トークン上限: トークンの使用状況を管理することが重要です。CyberAgent は、
contextUsage、contextWindow、measureContextUsage()などのプロパティとメソッドを使用して、セッションの管理、コンテキストの維持、トークン消費量の削減を行いました。これは、タイトルを絞り込む際に特に重要でした。 - モデルサイズの制約: モデルはダウンロードされてユーザーのデバイスに保存されるため、サーバーベースのモデルよりも大幅に小さくなります。つまり、特に要約の場合は、満足のいく結果を得るために、プロンプト内で十分なコンテキストを提供することが重要です。LLM のサイズの詳細をご覧ください。
CyberAgent は、クライアントサイド モデルはまだすべてのブラウザとデバイスで普遍的に利用できるわけではなく、小さいモデルには制限があるものの、特定のタスクでは優れたパフォーマンスを発揮できると強調しています。サーバーサイドの費用をかけずに迅速に反復して試すことができるため、貴重なツールとなります。
サーバーサイドとクライアントサイドのどちらの AI でも、完璧なレスポンスを実現することは難しいことを認識し、バランスを見つけることを推奨しています。最後に、サーバーサイドとクライアントサイドの AI の強みを組み合わせたハイブリッド アプローチが、さらなる可能性を切り開くと考えています。
今後の対応
CyberAgent は、組み込み AI を活用して、シームレスな AI 統合によりユーザー エクスペリエンスを向上させるというエキサイティングな可能性を示しています。Ameba ブログと連携するように構築された拡張機能は、これらのテクノロジーを現実世界の問題解決にどのように応用できるかを示しており、ウェブ開発コミュニティ全体にとって貴重な教訓となります。
テクノロジーが成熟し、ブラウザとデバイスのサポートが拡大するにつれて、組み込み AI やその他の形式のクライアントサイド AI の革新的なアプリケーションがさらに登場することが予想されます。
リソース
- Prompt API の詳細
- Chrome で組み込み API の使用を開始する
- CyberAgent のウェブ AI に関する事例紹介 （同じトピックを扱っています）
- CyberAgent のクライアントサイド AI に関する事例紹介「The future of AI is now」を 見る
謝辞
フィードバックを提供し、拡張機能の改善にご協力いただいた Ameba のブロガー、ao, Nodoka, Erin, Chiaki, and socchiに感謝いたします。このブログ投稿の執筆と レビューにご協力いただいた Thomas Steiner、 Alexandra Klepper、and Sebastian Benz に感謝いたします。