編集

Chrome 138 リリース、AI API 搭載と CSS 新機能を提供

#Chrome #CSS #ECMAScript #GitHub Actions #Playwright #Prettier #ESLint #Vite

Chrome 138 が正式リリース。組み込み AI API、新しい CSS 関数、フォルダブルデバイス対応機能などが追加。

出展：

#組み込み AI、Translator API、Language Detector API、Summarizer API

Translator API、Language Detector API、Summarizer API が提供開始。これらの API は Gemini Nano を活用し、ローカルで AI 処理を実行できるため、プライバシーを保護しながら高速な処理が可能。

#Translator API

ユーザーの母国語でのコンテンツ投稿を可能にする翻訳機能。サポートチャットなどで、ユーザーの投稿をサポート担当者の言語に翻訳してからデバイスを離れるようにすることで、スムーズで包括的なエクスペリエンスを提供できる。

javascript
// 翻訳機能の利用可能性を確認
const translatorCapabilities = await Translator.availability({
  sourceLanguage: "ja",
  targetLanguage: "en",
});

if (translatorCapabilities === "available") {
  // 翻訳ツールを作成
  const translator = await Translator.create({
    sourceLanguage: "ja",
    targetLanguage: "en",
  });

  // テキストを翻訳
  const result = await translator.translate("次のバス停はどこですか？");
  console.log(result); // "Where is the next bus stop?"
}

参考：Translator API

#Language Detector API

デバイス上で言語検出を実行し、クラウドサーバーへのアップロードが不要なためプライバシーを保護。Translator API と組み合わせて使用することで、自動的に適切な翻訳を提供できる。

javascript
// 言語検出機能の利用可能性を確認
const detectorCapabilities = await LanguageDetector.availability();

if (detectorCapabilities === "available") {
  // 言語検出ツールを作成
  const detector = await LanguageDetector.create();

  // テキストの言語を検出
  const results = await detector.detect("Bonjour tout le monde");
  console.log(results[0].detectedLanguage); // "fr"
  console.log(results[0].confidence); // 0.99
}

参考：Language Detector API、

#Summarizer API

記事要約、タイトル提案、長文の簡潔な要約生成などに活用。文章、段落、箇条書きなど様々な長さと形式での要約が可能。

javascript
// 要約機能の利用可能性を確認
const summarizerCapabilities = await Summarizer.availability();

if (summarizerCapabilities === "available") {
  // 要約ツールを作成
  const summarizer = await Summarizer.create({
    type: "tl;dr",
    format: "plain-text",
    length: "short",
  });

  // 長文を要約
  const article =
    "Chrome 138が正式リリースされ、多くの新機能が追加されました...";
  const summary = await summarizer.summarize(article);
  console.log(summary); // "Chrome 138が正式リリースされ、AI API、CSS関数、フォルダブルデバイス対応が追加。"
}

参考：Summarizer API

#CSS 関数 abs()、sign()、progress()、sibling-index()、sibling-count()など

符号関連のabs()とsign()関数、進行状況を表すprogress()関数、兄弟要素の位置と数を取得するsibling-index()とsibling-count()関数が追加。また、要素がコンテナブロックの利用可能スペースを正確に埋めるstretchキーワードがサイズ指定プロパティで利用可能になった。

#Viewport Segments API

フォルダブルデバイス（折り畳み可能な端末）対応として、Viewport Segments API が提供開始。JavaScript または CSS でビューポートの論理的に分離された領域の位置とサイズにアクセスできる。

ビューポートセグメントは、ビューポートが 1 つ以上のハードウェア機能（折り目や個別のディスプレイ間のヒンジ）によって分割された際に作成される。これにより、デュアルペインのユーザーエクスペリエンス作成や、折り目を超えたコンテンツレイアウトの回避が可能になる。

参考：Viewport Segments API で折りたたみ式デバイスをサポートする

#HTML 属性値内の<と>のエスケープ

HTML 仕様の変更により、属性値内の<と>がシリアライゼーション時に自動的にエスケープされるようになった。この変更は mutation XSS（mXSS）脆弱性を防ぐためのセキュリティ向上が目的。

html
<!-- 従来の動作 -->
<div data-content="<u>hello</u>"></div>

<!-- Chrome 138以降 -->
<div data-content="&lt;u&gt;hello&lt;/u&gt;"></div>

変更はinnerHTMLやouterHTMLプロパティのアクセス時、getHTML()メソッドの呼び出し時など、DOM を文字列表現に変換するシリアライゼーション処理にのみ影響する。HTML の解析（パース）処理は変更されず、getAttribute()やdatasetなどの DOM API で取得する属性値も従来通り。

javascript
const div = document.querySelector(
  'div[data-content="&lt;u&gt;hello&lt;/u&gt;"]'
);

// これらのAPIは従来通りデコードされた値を返す
console.log(div.getAttribute("data-content")); // "<u>hello</u>"
console.log(div.dataset.content); // "<u>hello</u>"

// シリアライゼーション時はエスケープされる
console.log(div.outerHTML); // '<div data-content="&lt;u&gt;hello&lt;/u&gt;"></div>'

参考：HTML spec change: escaping < and > in attributes

編集