サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
developer.chrome.com
公開日: 2024 年 11 月 21 日 WebGPU 仕様は常に進化しており、Google、Mozilla、Apple、Intel、Microsoft などの大手企業が毎週会合を開いて開発について話し合っています。最新の GPU for the Web ワーキング グループ ミーティングでは、WebGPU の次のイテレーションで予定されている主な目的と機能について概要が説明されました。このブログ投稿では、このミーティングで得られた主な知見について説明します。 候補者の推奨ステータスに到達する この会議では、マイルストーン 0 の進捗状況について議論し、W3C の候補推奨ステータスに到達する前に対処する必要がある問題を確定することを主眼としました。これは標準化プロセスの次のステップであり、安定性と知的財産権の保護が強化されます。 会議の参加者全員が、これらの問題はブロックするものではなく
安定版リリース日: 2024 年 11 月 12 日 特に記載のない限り、以下の変更は Android、ChromeOS、Linux、macOS、Windows 向けの Chrome 131 Stable チャンネル リリースに適用されます。 CSS CSS Anchor Positioning: anchor-scope anchor-scope プロパティを使用すると、アンカー名の可視性を特定のサブツリーに制限できます。 バグのトラッキング #40281992 | ChromeStatus.com のエントリ | 仕様 CSS font-variant-emoji font-variant-emoji CSS プロパティを使用すると、カラー（絵文字 スタイル）とモノクロ（テキスト スタイル）の絵文字グリフを切り替えることができます。これは、各絵文字コードポイントの後に絵文字のバリエーシ
スクロール可能な要素を見つけにくいのはなぜですか？ スクロールに関する問題のデバッグは困難です。スクロール可能な要素を明確に示すツールがないと、特にスクロールバーがない複雑なページでは、迷子になりやすくなります。 スクロールしている要素を手動で見つけるのは、試行錯誤の面倒なプロセスになる可能性があります。 要素を選択してスタイルを変更します。 スクロールバーは消えましたか？解決しない場合は、このプロセスを繰り返します。 スクロール バッジの導入 Chrome 130 では、[要素] パネルの新しいスクロールバッジを使用して、スクロール可能な要素を見つけることができます。 たとえば、次の例では、新しいスクロール バッジを使用してスクロールバーが表示される原因となっている要素を探してみてください。 新しいスクロール バッジの技術的な実装 実装は次の 2 つの部分に分かれています。 スクロール可
公開日: 2024 年 11 月 6 日 Chrome 131 以降では、<details> 要素と <summary> 要素の構造にスタイルを適用するオプションが追加されました。これらの要素は、開示ウィジェットやアコーディオン ウィジェットを作成する際に使用できます。 特に、Chrome 131 で導入された変更により、これらの要素で display プロパティを使用できるようになり、::details-content 疑似要素が追加され、展開と閉じを切り替える部分にスタイルを適用できるようになりました。
必知事項は次のとおりです。 CSS ハイライトの継承が変更されます。 <details> 要素のその他の CSS スタイル。 ページの余白ボックスで印刷レイアウトを簡単に設定できるようになりました。 他にも多数の機能があります。 担当させていただきます、マリク コサカと申します。Chrome 131 のデベロッパー向けの新機能について詳しく見てみましょう。 CSS ハイライトの継承 ::selection 疑似クラスと ::target-text 疑似クラスの CSS ハイライトの継承が変更されます。これにより、スタイルの継承がより直感的なモデルになり、最近追加された ::highlight、::spelling-error、::grammar-error 疑似クラスと整合するようになります。 太字のテキストを含む次のコード スニペットについて考えてみましょう。 <p class="blu
公開日: 2024 年 10 月 8 日 Chrome 131 より、::selection 疑似クラスと ::target-text 疑似クラスの CSS ハイライトの継承が変更されます。これは、継承のためのより直感的なモデルを作成し、最近追加された ::highlight、::spelling-error、::grammar-error 疑似クラスに合わせるためです。この投稿では、ほとんどのサイトに目に見える影響を与えない変更について説明します。 選択範囲のスタイル設定 選択したテキストの外観をスタイル設定することで、選択したコンテンツの目的や、テキストをまったく選択できないことなどの意味をユーザーに伝えることができます。たとえば、GitHub では、選択したコードの色が選択したディレクトリ構造とは異なります。 CSS は、ハイライト疑似要素と呼ばれる一連の疑似要素の 1 つである :
シングルページ アプリケーション（SPA）は、ユーザーがサイトを操作するたびにコンテンツを動的に書き換えるというコア機能によって定義されます。これは、サーバーから完全に新しいページを読み込むというデフォルトの方法とは異なります。 SPA では、History API を介して（または限定的なケースでは、サイトの #hash 部分を調整することで）この機能を実現できましたが、これは SPA が標準になるずっと前に開発された扱いにくい APIであり、ウェブはまったく新しいアプローチを必要としています。Navigation API は、History API の粗い部分を単にパッチするのではなく、この領域を完全にオーバーホールする API として提案されています。（たとえば、スクロールの復元では、History API を再作成するのではなく、パッチを適用しています）。 この投稿では、Navig
ソースの [AI アシスタント] パネルを使用して、ウェブサイトで読み込まれて使用されているファイルを把握します。 [AI アシスタンス] パネルを開く ドロワーに [AI アシスタント] パネルが開きます。 [ソース] パネルから [ソースパネル] からAI アシスタントを開くには、ファイルを右クリックして [AI に質問] オプションを選択します。 このように AI アシスタントを開くと、選択したファイルが会話のコンテキストとして事前選択されます。 または、ファイルにカーソルを合わせたときにフローティング ボタンをクリックします。 コマンド メニューから コマンド メニューから AI アシスタントを開くには、AI と入力し、Show AI assistance コマンドを実行します。このコマンドの横には Drawer バッジが表示されます。 [その他のツール] メニューから または、右
Secure Payment Confirmation（SPC）は、顧客がクレジット カード発行会社、銀行、その他の決済サービス プロバイダに対して認証をプラットフォーム認証システムで行えるようにするウェブ標準案です。 macOS デバイスの Touch ID などのロック解除機能 Windows デバイスの Windows Hello SPC を使用すると、販売者は顧客が購入を迅速かつシームレスに認証し、カード発行会社が顧客を不正行為から保護できます。 SPC には、登録と認証の 2 つのステージがあります。 登録: 支払い者はデバイスを信頼できる当事者（RP）にリンクします。証明書利用者は、クレジット カード発行会社、銀行、またはその他の支払いサービス プロバイダです。 認証: 支払い者は、登録済みデバイスを使用して、販売者のプラットフォームから直接 RP の身元を確認してから、支払い
[Performance] パネルの右上に赤い三角形が表示され、[Summary] タブに警告が表示されます。これは、実行に時間がかかり、パフォーマンスが遅いメインスレッドでの処理を示しています。 パフォーマンスの録画では、長時間実行タスクの一部が Recalculate Style イベントになることがあります。スタイルの再計算イベントは、ブラウザが次の処理を行うのにかかる時間をトラッキングします。 ページ上の DOM 要素を反復処理し、特定の要素に一致する CSS スタイルルールをすべて見つけます。 一致する CSS スタイルルールに基づいて、各要素の実際のスタイルを計算します。 次のような場合に CSS ルールの適用範囲が変更された場合は、必ず CSS スタイルを再計算する必要があります。 DOM への要素の追加または削除。 クラスの値や ID 属性の値など、要素の属性が変更された。
公開日: 2024 年 9 月 19 日 パスキーは、パスワードに代わるより安全でユーザー フレンドリーな方法です。。 ユーザーがデバイスをロック解除してアプリやウェブサイトにログインできるようにする 生体認証センサー（指紋や顔認識など）を使用した画面 PIN、パターンを入力します。パスキーを使用すると、ユーザーはパスワードを覚えて管理する必要がなくなります。パスキーは、多くのオペレーティング システムで Chrome ですでにサポートされています。 パソコン版 Chrome ユーザーは、間もなく Google パスワード マネージャー（GPM）でパスキーを作成して、これらのプラットフォーム間で同期できるようになります。 macOS 版 Chrome に表示されるユーザー確認ダイアログ 以前は、macOS 版 Chrome で作成されたパスキーはデフォルトで iCloud キーチェーンに保
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
コンセプトと使用方法 Side Panel API を使用すると、拡張機能でサイドパネルに独自の UI を表示できるようになり、ユーザーのブラウジング ジャーニーを補完する永続的なエクスペリエンスを実現できます。 <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder"></ph> Chrome ブラウザのサイドパネル UI。 次のような機能があります。 タブ間を移動しても、サイドパネルは開いたままになります（開いている場合）。 特定のウェブサイトでのみ使用できます。 拡張機能ページの場合、サイドパネルからすべての Chrome API にアクセスできます。 Chrome の設定で、パネルを表示する側を指定できます。 ユースケース 以下のセクションでは、Side Panel API の一般的なユー
モバイル デバイスまたはデスクトップ デバイスでは、[共有] ボタンをクリックするのと同じくらい簡単に共有できます。 共有する相手を選ぶこともできます。たとえば 興味深い記事を友人にメールで送信したり、 できます。 これまでは、オペレーティング システムに登録できるのはプラットフォーム固有のアプリのみ 他のインストール済みアプリからの共有の受信一方 Web Share Target API では インストール済みウェブアプリを基盤となるオペレーティング システムに登録できる 共有コンテンツを受信できます。 <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder"></ph> オプションとしてインストールされている PWA を備えたシステムレベルの共有ターゲット選択ツール。 ウェブ共有ターゲットの実
このページは、2020 年にサポートが終了した Chrome アプリ プラットフォームに関するドキュメントの一部です。Enterprise および Education のお客様については、少なくとも 2025 年 1 月までは ChromeOS で引き続きサポートされます。詳しくは、アプリの移行をご覧ください。 移行オプション Chrome アプリから移行するには、主にウェブ アプリケーションと Chrome 拡張機能の 2 つの方法があります。 ほとんどの場合、ウェブ アプリケーションを使用することをおすすめします。Chrome 拡張機能は、ユーザー インターフェースのないバックグラウンドでの実行など、ウェブでサポートされていないユースケースで使用できます。 ウェブ アプリケーション Chrome アプリから移行する場合は、代わりにウェブ アプリケーションを構築することをおすすめします。
タブ、ウィンドウ、画面の共有は、Screen Capture API を使用することですでにウェブ プラットフォームで可能です。つまり、getDisplayMedia() を使用すると、ユーザーは画面または画面の一部（ウィンドウなど）を選択して、メディア ストリームとしてキャプチャできます。このストリームは録画したり、ネットワークを介して他のユーザーと共有したりできます。この記事では、プライバシー保護を強化し、個人情報の意図しない共有を防ぐための API の最近の変更を紹介します。 プライバシーを保護しながら画面共有するために使用できる設定は次のとおりです。 displaySurface オプションを使用すると、ウェブアプリで特定のディスプレイ サーフェス タイプ（タブ、ウィンドウ、スクリーン）が優先的に提供されることを示します。 monitorTypeSurfaces オプションを使用す
Published: October 16, 2024 Unless otherwise noted, the following changes apply to the newest Chrome beta channel release for Android, ChromeOS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 131 is beta as of October 16, 2024. You can download the latest on Google.com for desktop or on Google Play Store
今年、Chrome 112 で Chrome の新しいヘッドレス モード（--headless=new）が利用可能になったことをお知らせしました。このモードでは、デベロッパーは UI が表示されない無人環境で Chrome を実行できます。テストや自動化のユースケースに役立ちます。 この発表の中で、Chrome バイナリから古いヘッドレス モードを削除する予定であることをお知らせしました。古いヘッドレスは技術的には独立したブラウザであり、現在 2 つのブラウザ バイナリを一体化してリリースしているため、この削除は理にかなっています。同時に、新旧のヘッドレス モードには次のような異なるユースケースがあることも認識しています。 古いヘッドレス モードは、Chromium の //content モジュールの軽量ラッパーであるため、依存関係が大幅に少なくなります。具体的には、X11/Waylan
ほとんどの拡張機能は、1 つ以上の Chrome Extensions API にアクセスできる必要があります。この API リファレンスでは、拡張機能で使用できる API とユースケースの例について説明します。 Extensions API の一般的な機能 Extensions API は、拡張機能の処理を行うメソッドとプロパティを含む名前空間で構成されています。通常は manifest.json ファイルのマニフェスト フィールドが含まれますが、必ずしもそうとは限りません。たとえば、chrome.action 名前空間には、マニフェストに "action" オブジェクトが必要です。多くの API では、マニフェストでの権限も必要です。 拡張機能 API のメソッドは、特に明記されていない限り非同期です。非同期メソッドは、呼び出し元のオペレーションの完了を待たずに、直ちに返されます。これ
Use the AI assistance panel to learn more about how your website works with the help of AI. Overview The AI assistance panel lets you chat with Gemini directly in DevTools. Conversations you start from this panel automatically have context about technical details of the page you are inspecting. When using the AI assistance panel you can either use provided example prompts or your own questions as
Here's what you need to know: Document picture in picture gives you more control over picture-in-picture windows. CSS Nested declarations fix some tricky edge cases. You can specify the behavior of decorations on elements that split across multiple lines. And there's plenty more. I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 130. Document Picture-in-Picture The picture
ネットワーク パネルの改善 このバージョンでは、[ネットワーク] パネルにいくつかの改善が行われています。 ネットワーク フィルタの見直し [ネットワーク] パネルには、フィードバックに基づいて刷新された新しいフィルタが用意されています。タイプ固有のフィルタは変わりません。すっきりとした複数選択バーにバッジのセットが表示されます。 UI の整理を図るため、非表示、ブロック、サードパーティ関連のチェックボックスはプルダウン リストの下に移動されます。リストのプルダウンの下に、チェックされているフィルタの数が表示されます。 古いフィルタのデザインに戻すには、設定 [設定] > [試験運用版] > check_box_outline_blank [[ネットワーク] パネルのフィルタバーのデザイン変更] をオフにします。 デザインの変更について、ご意見をお聞かせください。 Chromium の問題
ユースケース カスタム動画プレーヤー ウェブサイトは既存の <video> 用 Picture-in-Picture API を使用して、ピクチャー イン ピクチャーでの動画エクスペリエンスを提供できますが、制限は非常に限定的です。既存のピクチャー イン ピクチャー ウィンドウは入力が少なく、スタイル設定機能に制限があります。完全なドキュメント イン ピクチャーで、ウェブサイトでカスタム コントロールと入力機能（字幕、再生リスト、タイムスクラバー、動画に高評価や低評価を付けるなど）を提供して、ユーザーのピクチャー イン ピクチャー動画のエクスペリエンスを向上させることができます。 ビデオ会議 ビデオ会議セッション中に、通話を表示したいユーザーは別のタブを表示する、マルチタスクを行っているなど、ユーザーがブラウザタブを離れることが多いため、これはピクチャー イン ピクチャーの主要なユースケー
Document Picture-in-Picture API が登場する前は、ピクチャー イン ピクチャー ウィンドウに配置できるのは HTML の <video> 要素のみでした。この新しい API を使用すると、任意の HTML コンテンツを表示する「常に表示状態のウィンドウ」を開くことができます。この機能は、パソコン版 Chrome 111 以降、オリジン トライアルとしてご利用いただけます。 <ph type="x-smartling-placeholder"></ph> Document Picture-in-Picture API で作成されたピクチャー イン ピクチャーのウィンドウ（デモ）。 新しい API は、既存の <video> 用 Picture-in-Picture API よりもはるかに多くの機能を提供します。たとえば、字幕、再生リスト、時間スクラブ、動画に高評
ウェブ Bluetooth は Chrome 56 以降でサポートされており、デベロッパーはユーザーのユーザーと直接通信するウェブアプリを記述できます。Bluetooth デバイス互換性のある Bluetooth デバイスにコードをアップロードする Espruino ウェブエディタはその一例です。これらのアプリケーションを Puppeteer でテストできるようになりました。 このブログ投稿では、Puppeteer を使用して Bluetooth 対応ウェブアプリを操作、テストする方法について説明します。その重要な部分は、Chrome の Bluetooth デバイス選択ツールを操作できる Puppeteer の機能です。 Chrome でのウェブ Bluetooth の使い方に慣れていない方のために、次の動画では、Espruino ウェブエディタでの Bluetooth のプロンプトにつ
ブレークポイントを使用して、JavaScript コードを一時停止します。このガイドでは、Terraform で宣言される各タイプの それぞれのタイプを使用するタイミングと設定方法を説明します。デバッグ プロセスのインタラクティブなチュートリアルについては、Chrome DevTools で JavaScript のデバッグを開始するをご覧ください。 各ブレークポイント タイプを使用する場合の概要 最も有名なブレークポイントのタイプはコード行です。ただし、コード行のブレークポイントは 特に、どこを見ればよいかわからない場合や、 構築できます。もう 1 つの API をいつどのように使えばよいのかを知ることで、デバッグの時間を節約できます。 あります。 ブレークポイントのタイプ状況
BigQuery での CrUX データの構造について学習します。 はじめに Chrome UX レポート（CrUX）の背後にある元データは、Google Cloud でホストされているデータベースである BigQuery で入手できます。 BigQuery 上の CrUX では、トレンドの分析、ウェブ テクノロジーの比較、ベンチマーク ドメインの比較など、2017 年以降のデータセット全体を直接クエリできます。 データは、月次リリースごとに構造化されています。また、データをクエリするための簡単なアクセスを提供する多くのサマリー テーブルも用意されています。 BigQuery データは CrUX ダッシュボードの基礎であり、SQL クエリを記述しなくてもこのデータを可視化できます。 データセットへのアクセス BigQuery を使用するには、Google Cloud アカウントと SQL
公開日: 2024 年 8 月 27 日 ローカル テストで言語検出 API を早期に利用できるようになりました。 プレビュープログラム（EPP）の参加者にこの API を使用すると、ウェブページで使用されている言語を特定できます。 言語検出 API の説明 今後の開発に関する提案として Exploratory API など、 Translation API を含む。 言語の検出は、翻訳の最初のステップです。多くの場合、ブラウザには言語検出機能がすでに搭載されています。この API を使用すると、ウェブ デベロッパーは JavaScript API を使用してこの技術にアクセスできます。 他の API と同様に、Google はデベロッパーとユーザーのニーズを満たすよう、ご意見を参考に言語検出の仕組みを更新していきます。要約の検出品質、API 設計に関するフィードバック、Chrome Ca
公開日: 2024 年 9 月 19 日 CSS ワーキング グループでは、2 つの CSS 組積造の提案を 1 つのドラフト仕様。 攻撃グループは、 簡単に比較して、最終決定を下すことができます。Chrome 独立したメーソンリー構文を使用する方が、 して続行します。パフォーマンスに関する最大の問題については、 POST が解決されても、構文に関する懸念事項が残っている場合、 グリッドと組み合わされたバージョンでの学習の容易さなどについても学びました。 仮説を検証するために、いくつかの例を用いて、 どちらでもよいでしょうこの投稿の例をご覧ください。 今後の参考にさせていただきますので、ぜひフィードバックをお寄せください 説明します。 この投稿では考え得るすべてのユースケースを網羅しているわけではありませんが、 グリッドレイアウトから組積造を分離しても 説明します。実際、その逆が当てはまる
次のページ
このページを最初にブックマークしてみませんか？
『Chrome for Developers』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
