Chrome 151で追加された6つの新機能まとめ——Web制作者が知っておきたいポイント

📖 推定読了時間：約7分

カメラやマイクを使うWebサイトを作るとき、「getUserMedia APIを呼び出して、許可を求めて、ストリームを受け取って……」と、意外と手間のかかるJavaScriptを書いた経験がある人も多いのではないでしょうか。実はこの面倒さが、これから少しずつ解消されていくかもしれません。2026年7月30日にリリースされたChrome 151で、HTMLだけでカメラ・マイクへのアクセスを扱える新しい要素が登場しました。この記事では、その内容と、あわせて追加された注目機能を紹介します。

Chrome 151、何がアップデートされたのか

7月30日にリリースされたChrome 151では、Android・ChromeOS・Linux・macOS・Windowsの各環境向けに、HTML/CSSとUIに関する6個の新機能が追加されました。中でも特にWeb制作者から注目を集めているのが、usermedia要素と呼ばれる新しいHTML要素です。

JavaScript不要でカメラ・マイクを扱える「usermedia要素」

これまでWebサイトでカメラやマイクを使う場合、JavaScriptでgetUserMediaというAPIを呼び出し、権限の確認からストリームの取得、エラーハンドリングまでを自前で実装する必要がありました。仕組みとして間違ってはいないものの、正直なところ、ちょっとしたカメラ機能を付けたいだけなのに書くコード量が多い、と感じていた人も少なくないはずです。

Chrome 151で使えるようになったusermedia要素は、この権限管理からデバイス制御までを、HTMLの要素レベルで扱えるようにする新しい仕組みです。以前は「device要素」という名前で構想されていたものが、今回この形で実装されました。実際のコードイメージは、次のようにとてもシンプルです。

<usermedia id="media-ctrl">
  <button>カメラとマイクを有効にする</button>
</usermedia>

ボタンをこの要素で囲むだけで、カメラ・マイクへのアクセス許可を求める一連の流れを、ブラウザ側の処理に任せられるようになる、というのが基本的な考え方です。マークアップの中でハードウェア機能の複雑さを吸収できる点は、ちょっとしたカメラ機能を素早く実装したい場面で、地味に嬉しいポイントと言えそうです。

なお、usermedia要素は今後段階的に機能が拡張されていく予定の、比較的新しい仕組みです。今後のロードマップでは、camera要素やmicrophone要素といった、より細かい制御ができる関連要素の追加も予定されているとされており、現時点ではまだ発展途上の機能である点は理解しておく必要があります。実際にプロダクションで使う際は、対応ブラウザの状況を必ず確認するようにしましょう。

あわせて追加された、その他の注目機能

Chrome 151では、usermedia要素以外にも、Web制作の細部に関わるいくつかの機能アップデートがおこなわれています。

• ✅CSSのruby-overhangプロパティが追加され、ルビ(ふりがな)のはみ出し方をauto・spaces・noneの3種類で制御できるようになった
• ✅position-anchorの初期値がnoneからnormalへ変更され、他ブラウザの実装や仕様書との整合性が取られた
• ✅ホイールイベントにmomentum属性が追加され、フリック操作による慣性スクロールと、トラックパッドでの通常操作を区別できるようになった

ルビ表示の細かな制御ができるようになったruby-overhangは、縦書きや日本語コンテンツを扱うサイトにとっては特に嬉しいアップデートです。今まで思い通りにいかなかったルビまわりのレイアウト崩れが、これで解消できるケースも出てきそうです。

実務で取り入れる前に、確認しておきたいこと

新機能はどれも魅力的ですが、実際のサイトに取り入れる前には、いくつか確認しておきたいポイントがあります。

特に3つ目の動作確認は、実機での挙動を自分の目で確かめておくことが大切です。手元に検証用のWebカメラやUSBマイクを用意しておくと、内蔵デバイスとは異なる接続パターンでの挙動もあわせて確認でき、思わぬ実装ミスに気づきやすくなります。

こうした新しいHTML/CSS仕様は、公式ドキュメントを読むだけでは全体像がつかみにくいこともあります。日々のアップデートを体系的に追いかけたい人は、最新仕様に対応したHTML/CSS解説書籍で基礎から整理し直しておくと、今後似たような新機能が出てきたときにも理解がスムーズになります。また、複数のコードやドキュメントを見比べながら検証作業を進める人は、コーディング作業向けの外付けモニターで作業スペースを広げておくと、効率よく確認作業を進められます。

まとめ

Chrome 151で追加されたusermedia要素は、これまでJavaScriptで書く必要があったカメラ・マイクへのアクセス処理を、HTMLの要素レベルでシンプルに扱えるようにする、地味ながらも実務への影響が大きいアップデートです。ルビ表示の制御強化など、日本語コンテンツを扱うサイトにとって嬉しい変更もあわせて追加されています。

いずれの機能もまだ登場したばかりで、今後仕様が変わる可能性もゼロではありません。まずは検証用の環境で実際に触ってみて、対応ブラウザの状況を見極めながら、少しずつ自分のサイトへの導入を検討してみてはいかがでしょうか。

※本記事の内容は執筆時点(2026年8月)のChrome 151の情報に基づいています。仕様や対応ブラウザの状況は変化する可能性があるため、最新情報はChrome Developersの公式ブログをご確認ください。