サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
やろう！確定申告
developer.chrome.com
ウェブページがデータを（または「ビーコン」を）サーバーに送り返す必要があるのはよくあることです。たとえば、ユーザーの現在のセッションのアナリティクス データなどです。デベロッパーは、ビーコンを送信する前にタブが閉じられた場合やユーザーが別のページに移動した場合にデータを失うリスクを負うことなく、絶え間なく繰り返されるリクエスト（冗長なリクエストを含む）を減らすというバランスを取る必要があります。 従来、デベロッパーは pagehide イベントと visibilitychange イベントを使用してページのアンロードをキャッチし、navigator.sendBeacon() または fetch() と keepalive を使用してデータをビーコンしていました。ただし、どちらのイベントにも、ユーザーのブラウザによって異なる難しいコーナーケースがあり、特にモバイルではイベントがまったく届かな
次の説明をお読みください。 CSS の高度な attr() 関数では、<string> 以外の型を指定でき、すべての CSS プロパティで使用できます。 CSS スクロール状態コンテナクエリを使用すると、コンテナクエリを使用して、スクロール状態に基づいてコンテナの子孫にスタイルを設定できます。 CSS text-box、text-box-trim、text-box-edge により、テキストの垂直方向の配置をより細かく制御できる 他にも多数の機能があります。 CSS の高度な attr() 関数 この機能では、既存の attr() 関数に CSS レベル 5 で指定された機能が追加されます。これにより、<string> 以外のタイプが許可され、すべての CSS プロパティで使用できるようになります（疑似要素のコンテンツの既存のサポートに加えて）。 次の例では、div の color プロパ
安定版リリース日: 2025 年 2 月 4 日 特に明記しない限り、以下の変更は Android、ChromeOS、Linux、macOS、Windows 版 Chrome 133 Stable チャンネル リリースに適用されます。 HTML と DOM ポップオーバー属性のヒント値 Popover API は、ポップオーバー属性の 2 つの値（auto と manual）の動作を指定します。この特徴は、3 つ目の値 popover=hint を記述します。ヒントは、多くの場合「ツールチップ」タイプの動作に関連付けられますが、動作は若干異なります。主な違いは、ネストされたポップオーバーのスタックを開くときに、ヒントが自動よりも優先される点です。そのため、既存の自動ポップオーバーのスタックが開いたまま、無関係なヒント ポップオーバーを開くことができます。 典型的な例は、<select> 選
公開日: 2025 年 2 月 5 日 Chrome 120 以降では、ユーザーが現在のタブからフォーカスを切り替えると、ビデオ会議ウェブアプリでピクチャー イン ピクチャー ウィンドウが自動的に開くようになりました。これは、ドキュメントのプレゼンテーション中に、他のタブやウィンドウを使用しながら参加者をリアルタイムで確認してやり取りしたいプレゼンターに便利です。詳しくは、ビデオ会議ウェブアプリの自動ピクチャー イン ピクチャーをご覧ください。 Chrome 134 以降では、音声や動画を再生するウェブアプリがピクチャー イン ピクチャー モードに自動的に移行できるようになりました。つまり、ウェブ上の音楽プレーヤーと動画プレーヤーは、ユーザーがタブを切り替えたときにミニプレーヤー ウィンドウにシームレスに切り替わるようになり、手動で有効にする必要がなくなります。 Spotify ユーザーが
JavaScript の実行に時間がかかると、いくつかの点でページのパフォーマンスが低下します。 ネットワーク費用 バイト数が多ければダウンロード時間が長くなります。 解析とコンパイルの費用 JavaScript が解析されて、メインスレッドでコンパイルされます。 メインスレッドがビジー状態の場合、ページはユーザー入力に応答できません。 実行費用 JavaScript もメインスレッドで実行されます。実際に必要になる前にページで大量のコードが実行されると、操作可能になるまでの時間も長くなります。これは、ユーザーがページ速度をどう感じているかに関連する重要な指標のひとつです。 メモリ費用 JavaScript が多数の参照を保持している場合、メモリを大量に消費する可能性があります。ページのメモリを大量に消費すると、表示がジャンクしたり動作が遅くなったりします。 メモリリークによりページが完全
永続的な AI チャット履歴 [AI アシスタント] パネルで、セッション間でチャット履歴がローカルに保持されるようになりました。これにより、DevTools や Chrome を再読み込みした後でも、Gemini との以前の会話を表示できます。 [パフォーマンス] パネルの改善 このバージョンでは、[パフォーマンス] パネルが大幅に改善されています。 画像配信のインサイト [パフォーマンス] > [分析情報] タブで、ファイルサイズを最適化できる画像をハイライト表示できるようになりました。分析情報で画像をクリックすると、[ネットワーク] トラックでハイライト表示されます。 画像配信の最適化方法については、画像を効率的にエンコードするをご覧ください。 従来のキーボード ナビゲーションとモダンなキーボード ナビゲーション [パフォーマンス] パネルで、好みのキーボード ナビゲーション スタイ
公開日: 2025 年 1 月 27 日 Prompt API は、Chrome チームが検討している組み込み AI API の 1 つです。早期プレビュー プログラムに参加してアプリでローカルにテストできます。また、Chrome 拡張機能の Prompt API オリジン トライアルに登録して、Chrome 拡張機能で本番環境でテストすることもできます。Prompt API の主な機能の 1 つはセッションです。これにより、AI モデルと 1 つ以上の会話を継続できます。会話の内容が失われることはありません。このガイドでは、言語モデルを使用したセッション管理のベスト プラクティスについて説明します。 1 つ以上の並列セッションのセッション管理のユースケースには、1 人のユーザーが AI とやり取りする従来の chatbot や、1 人のサポート エージェントが複数の顧客を同時に対応し、A
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
公開日: 2025 年 1 月 15 日 再設計された attr() 関数 CSS attr() を使用すると、CSS で HTML 属性の値を使用できます。これまで、attr() は疑似要素の content プロパティ内でのみ機能し、値を CSS <string> に解析することしかできませんでした。 再設計された attr() 関数（Chrome 133 以降で利用可能）により、より多くの機能を利用できるようになります。attr() をカスタム プロパティを含む任意の CSS プロパティで使用できるようになりました。また、値を <string> 以外のデータ型に解析できるようになりました。 例 次の例では、div の color プロパティの値に data-color 属性の値を使用しています。この属性値は、attr() と type() を使用して <color> に解析されます。
公開日: 2024 年 1 月 15 日 特に明記しない限り、以下の変更は Android、ChromeOS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャネル リリースに適用されます。ここに記載されている機能の詳細については、記載されているリンクまたは ChromeStatus.com のリストをご覧ください。Chrome 133 は 2024 年 1 月 15 日時点でベータ版です。最新バージョンは、パソコンの Google.com または Android の Google Play ストアからダウンロードできます。 CSS と UI このリリースでは、CSS と UI に 7 つの新機能を追加しました。 CSS の高度な attr() 関数 CSS レベル 5 で指定されている attr() の拡張を実装します。これにより、<string> 以外の型
このインタラクティブなチュートリアルでは、Chrome DevTools コンソールでメッセージを記録し、フィルタする方法を説明します。 このチュートリアルは順番どおりに完了することを目的としています。また、JavaScript を使用してページにインタラクティビティを追加するなど、ウェブ開発の基礎を理解していることを前提としています。 デモと DevTools を設定する このチュートリアルは、ユーザーがデモを開いてすべてのワークフローをご自身で試すことができるように設計されています。実際にやってみると、後でワークフローを思い出せる可能性が高くなります。 デモを開きます。 省略可: デモを別のウィンドウに移動します。この例では、左側がチュートリアル、右側がデモです。 デモをフォーカスし、Ctrl+Shift+J キーまたは command+option+J（Mac）を押して DevToo
サンドボックス化された固有の送信元で配信される拡張機能ページのコレクションを定義します。「 拡張機能のサンドボックス化されたページで使用されるコンテンツ セキュリティ ポリシーは、 "content_security_policy" キー サンドボックスの利用には、次の 2 つの影響があります。 サンドボックス化されたページでは、拡張機能 API にアクセスしたり、 サンドボックス化されていないページ（postMessage() を使用して通信する場合があります）。 サンドボックス化されたページは、他のページで使用されているコンテンツ セキュリティ ポリシー（CSP）の対象にはなりません （独自の CSP 値があります）。たとえば、 インライン スクリプトと eval() を使用します。 たとえば、2 つの拡張機能ページをサンドボックスで 2 つの拡張機能として カスタム CSP: { .
Manifest V3 のセキュリティ強化 これは、拡張機能の Service Worker に含まれないコードに必要な変更について説明する 3 つのセクションの最後です。拡張機能のセキュリティを強化するために必要な変更について説明します。他の 2 つのセクションでは、Manifest V3 へのアップグレードに必要なコードの更新と、ブロック中のウェブリクエストの置き換えについて説明します。 任意の文字列の実行を削除 executeScript()、eval()、new Function() を使用して外部ロジックを実行できなくなります。 すべての外部コード（JS、Wasm、CSS）を拡張機能バンドルに移動します。 スクリプトとスタイルの参照を更新して、拡張機能バンドルからリソースを読み込む。 chrome.runtime.getURL() を使用して、ランタイムでリソース URL をビル
<select> 要素などのフォーム コントロールのスタイル設定は、長年にわたりデベロッパーの最大の問題として報告されており、Google は解決策の開発に取り組んできました。この作業は複雑で、適切に行うまでに長い時間がかかりましたが、この機能のリリースは間近に迫っています。カスタマイズ可能なバージョンの select 要素は、WHATWG で正式にステージ 2 に移行しており、クロスブラウザでの関心が高く、Chrome Canary 130 からプロトタイプをテストできます。 ぜひお試しになり、フィードバックをお寄せください Chrome Canary のインストールがバージョン 130 に更新され、試験運用版のウェブ プラットフォームの機能フラグがオンになっていることを確認します。このフラグを有効にするには、アドレスバーで chrome://flags に移動し、#experiment
安定版リリース日: 2025 年 1 月 14 日 特に明記しない限り、以下の変更は Android、ChromeOS、Linux、macOS、Windows 版 Chrome 132 Stable チャンネル リリースに適用されます。 HTML と DOM アクティブでないドキュメントのポップオーバーとダイアログに対して例外をスロー 以前は、非アクティブなドキュメント内にあるポップオーバーまたはダイアログで showPopover() または showModal() を呼び出すと、無音で失敗していました。例外はスローされませんが、ドキュメントがアクティブでないため、ポップオーバーやダイアログは表示されません。Chrome 132 以降では、このような状況で InvalidStateError がスローされるようになりました。 トラッキング バグ #373684393 | ChromeSt
パフォーマンス モニターを使用すると、サイトの負荷と実行時のパフォーマンスをすばやく把握できます。 概要 [パフォーマンス モニター] パネルには、パフォーマンス指標をリアルタイムでグラフ化するタイムラインが表示されます。指標をクリックすると、表示と非表示が切り替わります。次に、アプリを操作したときにグラフがどのように変化するかを確認します。 パフォーマンス モニターは、次の指標を追跡します。 CPU 使用率。 JavaScript のヒープサイズ。 ページ上の DOM ノード、JavaScript イベント リスナー、ドキュメント、フレームの合計数。 1 秒あたりのレイアウトとスタイルの再計算。 パフォーマンス モニター パネルを開く [パフォーマンス モニター] パネルを開くには: DevTools を開きます。 次のコマンドを実行して、コマンド メニューを開きます。 macOS: C
公開日: 2025 年 1 月 16 日 パスキーは、パスワードに代わるより安全でユーザー フレンドリーな方法です。パスキーを使用すると、ユーザーは生体認証センサー（指紋認証や顔認証など）、PIN、パターンを使用してデバイスの画面のロックを解除し、アプリやウェブサイトにログインできます。パスキーを使用すると、ユーザーはパスワードを覚えたり管理したりする必要がなくなり、フィッシングの心配も不要になります。iOS と iPadOS で Google パスワード マネージャー（GPM）のパスキーを利用できるため、Chrome はすべてのオペレーティング システムでパスキーを同期します。 Google パスワード マネージャーのパスキーが iOS 17 以降で利用可能に iOS 17 以降（および iPadOS 17 以降）の Chrome ユーザーは、Google パスワード マネージャーでパス
公開日: 2025 年 1 月 13 日 今月リリースされた Chrome 132 で、Web Vitals 拡張機能が DevTools の [パフォーマンス] パネルと正式に統合されました。9 月のお知らせで説明したとおり、残りの機能をリリースしたため、Core Web Vitals 拡張機能のサポートを終了する準備が整いました。 すでに DevTools のライブ指標ビューを使用して、ローカルの Core Web Vitals エクスペリエンスを測定、デバッグしている場合は、その方法で問題ありません。改善点などございましたら、ぜひフィードバックをお寄せください。 まだ Web Vitals 拡張機能を使用している場合は、今すぐ DevTools に移行する必要があります。拡張機能に、サポート終了に関する警告が表示され、移行を促すメッセージが表示されます。また、近い将来に CrUX A
Published: January 16, 2025 Passkeys are a safer and more user-friendly alternative to passwords. They enable users to sign in to apps and websites by unlocking their device screen–with a biometric sensor (such as a fingerprint or facial recognition), PIN, or a pattern. With passkeys, users no longer need to remember or manage passwords, and worry about phishing. With passkeys on Google Password M
公開日: 2025 年 1 月 15 日 Chrome 133 では、コンテナクエリを拡張して、スクロール状態のコンテナクエリを導入しています。固定位置、スクロール スナップポイント、スクロール可能な要素のブラウザ管理状態を CSS からクエリして適応できるようになりました。 概要 スクロール状態のクエリが導入される前は、JavaScript を使用して要素が固定されているか、スナップされているか、スクロール可能かを把握する必要がありました。標準トラックで、この情報を把握して適切に適応する、よりパフォーマンスの高い方法が提案されています。また、アニメーションをトリガーする新しい方法も追加され、CSS からスクロール トリガー アニメーションを解放できるようになりました。 Chrome 133 以降で利用できる状態クエリの概要は次のとおりです。 停止状態: 要素が端に固定されたときにスタイル
Published: Jan 15, 2025 Chrome 133 builds upon container queries by introducing scroll state container queries. The browser managed state for sticky positioning, scroll snap points, and scrollable elements can now be queried and adapted to from CSS. Overview Before scroll state queries, you’d need to use JavaScript to understand if an element was stuck, snapped, or scrollable. Now there's a more p
text-box: trim-both cap alphabetic; このプロパティを使用すると、テキストの上下のスペースを制御できます（<h1>、<button>、<p> など）。フォントによって、このブロックの方向性のあるスペースの量が異なり、要素のサイズに影響します。この混沌とした空間の貢献は簡単に測定できず、これまでは制御不可能でした。 フォントが認識した、CSS も認識した https://codepen.io/web-dot-dev/pen/xbKjRxL フォント上とフォント下のスペースは、ウェブでのテキストのレイアウト方法（「ハーフ リーディング」）によるものです。この点については、Matthias Ott による「The Thing With Leading In CSS」という投稿で詳しく説明されています。基本的に、手作業で文字組を行っていた時代は、金属製の鉛片を使用
Chrome でビルドする Chrome の仕組み、オリジン トライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。
必知事項は次のとおりです。 CloseWatcher API を使用すると、クローズ リクエストを処理する際に一貫したエクスペリエンスを実現できます。 <details> 要素を使用して、アコーディオン パターンを簡単に実装できます。 権限ポリシー違反レポートが利用可能になりました。 他にも多数の機能があります。 Adriana Jara と申します。Chrome 120 のデベロッパー向けの新機能について詳しく見てみましょう。 CloseWatcher API。 モーダル コンポーネントやポップアップ コンポーネントの重要な機能は、閉じやすく、閉じる方法が統一されていることです。これらのメカニズムは閉じるリクエストと呼ばれ、通常は、デスクトップ プラットフォームでは ESC キー、Android では「戻る」ジェスチャーまたはボタンです。 ウェブ デベロッパーは、独自のコンポーネントの閉
Windows、Mac、または Linux コンピュータから Android 端末上のライブ コンテンツのリモート デバッグを行います。このチュートリアルでは、次の方法について説明します。 Android 端末をリモート デバッグ用に設定し、開発マシンから検出します。 開発マシンから Android 端末上のライブ コンテンツを調査し、デバッグします。 Android 端末のコンテンツを開発マシン上の DevTools インスタンスにスクリーンキャストします。 ステップ 1: Android デバイスを検出する 以下のワークフローは、ほとんどのユーザーが使用できます。詳しくは、トラブルシューティング: DevTools が Android 端末を検出しないをご覧ください。 Android で [開発者向けオプション] 画面を開きます。デバイスの開発者向けオプションを設定するをご覧ください。
ユーザーのほとんどがブラウザで時間を過ごすようになり、インタラクティブなウェブサイト、ゲーム、リモート デスクトップ ストリーミング、アプリケーション ストリーミングは、没入感のある全画面エクスペリエンスを提供するようになっています。そのためには、サイトが全画面表示モードのときに特別なキーやキーボード ショートカットにアクセスして、ナビゲーション、メニュー、ゲームに使用できるようにする必要があります。必要なキーの例としては、Esc、Alt+Tab、Cmd+`、Ctrl+N などがあります。 デフォルトでは、これらのキーはブラウザまたは基盤となるオペレーティング システムによってキャプチャされるため、ウェブ アプリケーションでは使用できません。Keyboard Lock API を使用すると、ウェブサイトはホスト OS で許可されているすべてのキーを使用できます（ブラウザの互換性を参照）。
ローカル オーバーライドを使用すると、バックエンド、サードパーティ、API が変更や修正をサポートするのを待たずに、変更や修正のプロトタイプを作成してテストすることで、ワークフローのブロックを解除できます。 ローカル オーバーライドを使用して、リモート リソースにアクセスできない場合でも、リモート リソースをモックします。リクエストやさまざまなファイル（HTTP レスポンス ヘッダー、ウェブ コンテンツ、XHR リクエストやフェッチ リクエストなど）のレスポンスをモックできます。 たとえば、ローカル オーバーライドは次のようなユースケースで役立ちます。 実際に本番環境に移行する前に、API のモックと API の修正をテストします。 バックエンドで使用するデータ構造がすでにわかっている場合は、新しい UI デザインのプロトタイプを作成します。 CLS の除去など、パフォーマンスの修正をテス
次のページ
このページを最初にブックマークしてみませんか？
『Chrome for Developers』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
