🖊️

Chrome 141 ベータ版に追加された文章校正機能（Proofreader API）が良さそう

に公開
AI
Chrome
Gemini
tech

Chrome 141 ベータ版に追加されたChromeに内蔵されたAIを使用した文章校正機能（Proofreader API）が良さそうだったので試してみました。

Proofreader APIとは

Proofreader APIは、ユーザーが入力した文章を校正する機能です。具体的には文法や綴りの間違いを検出し、検出された箇所とその修正内容や修正された文章を出力することができる機能です。これはGoogle I/O 2025で紹介されたGemini NanoというChromeに内蔵されたAI API機能の一つで、 Android、ChromeOS、Linux、macOS、WindowsのChromeで利用できます。
Chromeに内蔵されてるので、もちろんオフラインでも使用できます。

試してみる

ざっと検証用ファイルを作成して試してみました。
まずは英語の文章

完璧に修正されていますね。

次は日本語の文章

若干書きたかった文章とは違いますが、問題なく伝わる文章に修正されました。

これが外部サービスを使用することなくWebサイトやアプリに組み込めるのはかなり良さそうです。

Chromeでしか使えませんが。

Proofreader APIの試し方

Chrome ベータ版

試すにはまずChrome ベータ版が必要になります。
ベータ版を入れたくない場合は、来月のChrome 141へのアップデートで入ると思います。
以下のリンクからChromeのベータ版をダウンロードしてください。
ベータ版は通常のChromeとは別にインストールされるので、上書きの心配もなく使い分けることができます。

https://www.google.com/intl/ja/chrome/beta/

Chromeの設定変更

次にChromeの設定を変更します。
アドレスバーにchrome://flags/を入力して設定を開き、Proofreader APIを検索します。

するとProofreader API for Gemini Nanoという項目が表示されるのでEnabledに変更します。

サンプルコード

以下のようなコードで使用することができます。

const proofreader = await Proofreader.create({
  includeCorrectionTypes: true,
  includeCorrectionExplanations: true,
});

const corrections = await proofreader.proofread("ここに校正したい文章を入れると修正内容のリストを返します");

検証用HTML

Githubにあるサンプルを参考にサクッと試せる検証用HTMLを作成しました。
以下のコードをコピーしてindex.htmlとして保存してください。
あとは保存したHTMLファイルをChrome 141 ベータ版にドラッグして開いてください。

テキストエリアに校正したい文章を入れて校正するボタンを押すと試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Proofreader API デモ</title>
<style>
body {
  max-width: 800px;
  margin: auto;
}
textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 1em;
  padding: 0.5em;
}
#result-container {
  border: 1px solid #ccc;
  padding: 1em;
  background-color: #f9f9f9;
  height: 50px;
}
.correction {
  text-decoration: line-through;
  background-color: #ffe8e8;
}
.suggestion {
  color: #008000;
  font-weight: bold;
}
.not-supported {
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>
<h1>Web Proofreader API デモ</h1>
<textarea id="text-input"></textarea>
<button onclick="runProofread()">校正する</button>

<h2>校正結果</h2>
<div id="result-container"></div>

<script>
const runProofread = async () => {
  const text = document.getElementById('text-input').value;
  const resultContainer = document.getElementById('result-container');
  const warning = document.getElementById('warning');

  resultContainer.innerHTML = '';
  try {

    const proofreader = await Proofreader.create({
      includeCorrectionTypes: true,
      includeCorrectionExplanations: true,
    });

    // 2. 校正セッションをリクエスト
    resultContainer.innerHTML = '校正中...';

    // 3. 校正を実行
    const result = await proofreader.proofread(text);

    // 4. 結果を表示
    displayResult(text, result);

  } catch (error) {
    console.error('Proofreader API Error:', error);
    resultContainer.innerHTML = `<p class="not-supported">エラーが発生しました: ${error.message}</p>`;
  }
};

const displayResult = (originalText, result) => {
  const resultContainer = document.getElementById('result-container');
  let html = '<h3>修正後のテキスト:</h3>';
  html += `<p>${result.correctedInput}</p>`;
  html += '<h3>修正の詳細:</h3>';

  if (result.corrections.length === 0) {
    html += '<p>修正箇所はありませんでした。</p>';
  } else {
    let annotatedText = '';
    let lastIndex = 0;

    result.corrections.forEach(correction => {
      // 修正されていない部分を追加
      annotatedText += originalText.substring(lastIndex, correction.startIndex);
      // 修正された原文を<del>タグで囲む
      annotatedText += `<span class="correction">${originalText.substring(correction.startIndex, correction.endIndex)}</span>`;
      // 修正案を<ins>タグで囲む
      annotatedText += `<span class="suggestion">(${correction.correction})</span>`;
      lastIndex = correction.endIndex;
    });

    // 残りのテキストを追加
    annotatedText += originalText.substring(lastIndex);
    html += `<p>${annotatedText}</p>`;
  }

  resultContainer.innerHTML = html;
};
</script>
</body>
</html>

参考文献

https://github.com/webmachinelearning/proofreader-api
https://developer.chrome.com/blog/chrome-141-beta?hl=ja
https://developer.chrome.com/blog/web-at-io25?hl=ja

Discussion