サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
developer.chrome.com
Screen Wake Lock API の使用 wake lock のタイプ 現在、Screen Wake Lock API が提供できる wake lock のタイプは screen のみです。 screen の wake lock screen wake lock は、デバイスの画面がオフにならないようにし、ユーザーは画面に表示される情報を確認できます。 画面の wake lock を取得する 画面の wake lock をリクエストするには、WakeLockSentinel オブジェクトを返す navigator.wakeLock.request() メソッドを呼び出す必要があります。このメソッドには目的のウェイクロック タイプをパラメータとして渡します。現在は 'screen' のみに制限されているため、省略可能です。ブラウザはさまざまな理由(バッテリーの充電レベルが低すぎるなど
WebOTP API とは 最近では、世界中のほとんどの人がモバイル デバイスを所有しており、デベロッパーはサービス ユーザーの識別子として電話番号を使用するのが一般的です。 電話番号の確認にはさまざまな方法がありますが、SMS によってランダムに生成されるワンタイム パスワード(OTP)が最も一般的な方法の 1 つです。このコードをデベロッパーのサーバーに送信すると、電話番号を制御することができます。 この考え方はすでに多くのシナリオで採用されており、 ユーザーの ID としての電話番号。ウェブサイトによっては、新しいサービスに登録する際に、メールアドレスではなく電話番号を尋ねて、アカウント ID として使用することがあります。 2 段階認証プロセス。ウェブサイトはログイン時に、セキュリティを強化するため、パスワードなどの知識要素に加えて、SMS でワンタイム コードを SMS で送信す
The Chrome team is keen to see an implementation of masonry type layouts on the web. However, we feel that implementing it as part of the CSS Grid specification as proposed in the recent WebKit post would be a mistake. We also feel that the WebKit post argued against a version of masonry that no one was proposing. Therefore, this post aims to explain why we at Chrome have concerns about implementi
Chrome フラグは、デフォルトでは利用できないブラウザの機能を有効にするための手段です。 たとえば、Chrome ではピクチャー イン ピクチャーの動画機能をすべてのユーザーに公開する前に、ユーザーが試せるようにしたいと考えていました。 この機能は、誰でも試してフィードバックを提供できるように、報告によってリリースされました。フィードバックに基づいてテストおよび改良されたコードやデザインにより、Chrome でピクチャー イン ピクチャーをデフォルトで使用できるようになりました。これは非常に正常に機能します。 リスクを理解する ほとんどの Chrome ユーザーは Chrome フラグを使用する必要はありません。 Chrome フラグを設定する場合は注意が必要です。機能を有効または無効にすると、データが失われたり、セキュリティとプライバシーが侵害されたりする可能性があります。また、フラ
オリジン トライアルでは、新機能や試験運用版の機能にアクセスして、一般公開前の期間限定でユーザーが試すことができる機能を構築できます。 Chrome で機能のオリジン トライアルが提供されている場合は、トライアルに登録することで、オリジンのすべてのユーザーに対してその機能を有効にできます。ユーザーはフラグを切り替えたり、Chrome の代替ビルドに切り替えたりする必要はありません(アップグレードが必要になる場合があります)。オリジン トライアルでは、デベロッパーは新機能を使用してデモやプロトタイプを作成できます。また、Chrome エンジニアは新機能の使用方法や、他のウェブ技術との連携方法を理解するのにも役立ちます。 オリジン トライアルは一般公開されており、すべてのデベロッパーが利用できます。期間と使用量には制限があります。参加はセルフマネージド プロセスであり、ドキュメントとサポートが
Chrome 124 の主な機能は次のとおりです。 JavaScript から宣言型 Shadow DOM を使用できるようにする新しい API が 2 つあります。 Web Sockets のストリームを使用できます。 ビュー遷移が改良されました。 他にもたくさんあります。 詳細を知りたいですか?Chrome 124 リリースノートを確認する。 JavaScript で宣言型 Shadow DOM を使用する JavaScript から宣言型 Shadow DOM を使用できるようにする新しい API が 2 つあります。 setHTMLUnsafe() は innerHTML と同様に、要素の内部 HTML を指定された文字列に設定できます。これは、次のような宣言型 Shadow DOM を含む HTML を使用する場合に便利です。 <my-custom-element> <templ
背景 WebSocket API WebSocket API は、WebSocket プロトコルへの JavaScript インターフェースを提供し、ユーザーのブラウザとサーバーの間で双方向のインタラクティブな通信セッションを開始できるようにします。この API を使用すると、サーバーに返信をポーリングすることなく、サーバーにメッセージを送信し、イベント ドリブン レスポンスを受信できます。 Streams API Streams API を使用すると、JavaScript はネットワーク経由で受信したデータチャンクのストリームにプログラムでアクセスし、必要に応じて処理できます。ストリームのコンテキストで重要なコンセプトは、バックプレッシャーです。これは、単一のストリームまたはパイプチェーンが読み取りまたは書き込みの速度を調整するプロセスです。ストリーム自体またはパイプライン チェーンの後
特に記載のない限り、Android、ChromeOS、Linux、macOS、Windows の Chrome 124 Stable チャンネル リリースに次の変更が適用されます。ここに記載されている機能について詳しくは、所定のリンクまたは ChromeStatus.com のリストをご覧ください。Chrome 124 は 2024 年 4 月 16 日現在、安定版です。最新版は、パソコンの場合は Google.com、Android の場合は Google Play ストアからダウンロードできます。 ハイライトのみご覧になりたい場合は、Chrome 124 の新機能をご覧ください。 ブラウザの変更とデベロッパー ツール ユニバーサル インストール 現在の PWA インストールの基準を満たしていなくても、すべてのページがインストール可能になるようにします。 キーボードでフォーカス可能なスク
View Transition API を使用すると、1 つのステップで DOM を簡単に変更でき、2 つの状態間の遷移をアニメーションで作成できます。この機能は Chrome 111 以降で利用できます。 View Transition API で作成された遷移。デモサイトを試す - Chrome 111 以降が必要です。 この機能が必要な理由 ページ遷移は見栄えが良いだけでなく、フローの方向を伝え、ページ間の関連性が高い要素を明確にします。データの取得中にも発生する可能性があり、パフォーマンスの認知が速くなります。 しかし、CSS トランジション、CSS アニメーション、Web Animation API などのアニメーション ツールはすでにウェブ上で公開されています。では、何かを移動するために新しいツールが必要なのはなぜですか? 実際、状態遷移は、既存のツールであっても難しいものです
Chrome 119 では、CSS Color Level 5 の非常に強力なカラー機能があります。相対色の構文を使用すると、CSS 内で色をスムーズに操作でき、作成者やデザイナーは以下のことができるようになります。 明るく 暗くする 彩度 彩度を下げる クロマブースト 不透明度を調整 反転 補完する 変換 コントラスト カラーパレット モノクロ 類似 トライアディック テトラディック 単色(色相回転あり) 相対カラー構文の前は、色の不透明度を変更するには、色のチャネル(通常は HSL)のカスタム プロパティを作成し、最終的な色と最終的なバリアント カラーに組み立てる必要があります。これは、多数の色要素を管理することを意味し、すぐに煩雑になる可能性があります。 :root { --brand-hue: 300deg; --brand-saturation: 75%; --brand-lig
イースター エッグを見つける 今年のエイプリル フールを祝うため、DevTools チームは DevTools のどこかにイースター エッグを非表示にしました。 見つけるには、カラフルな 💫? 絵文字を探してください。 [要素] パネルの更新 このバージョンでは、[Elements] パネルに複数の更新を加えています。 [要素] > [スタイル] でフォーカスされているページをエミュレートする [要素] > [スタイル] タブの [要素の状態を切り替える](:hov)ボタンの下に、check_box [フォーカスしたページをエミュレート] オプションが追加されました。これまでは、このオプションは [Rendering] パネルにしか表示されませんでした。 ページから DevTools にフォーカスを切り替えると、一部のオーバーレイ要素はフォーカスによってトリガーされると自動的に非表示にな
概要表示 まず、[Summary] ビューでヒープ スナップショットが開き、列に [Constructors] が表示されます。コンストラクタを展開すると、インスタンス化されたオブジェクトが表示されます。 無関係なコンストラクタを除外するには、[Summary] ビューの上部にある [Class filter] に検査する名前を入力します。 コンストラクタ名の横の数字は、そのコンストラクタによって作成されるオブジェクトの総数を示します。[概要] ビューには次の列も表示されます。 距離は、ノードの最短の単純なパスを使用して、ルートまでの距離を示します。 浅いサイズは、特定のコンストラクタによって作成されたすべてのオブジェクトの浅いサイズの合計を示します。シャローサイズは、オブジェクト自体が保持するメモリのサイズです。一般に、配列と文字列はシャロー サイズが大きくなります。オブジェクト サイズ
必知事項は次のとおりです。 新しい light-dark() 関数でカラーパターンを調整します。 Long Animation Frames API を使用してサイトの応答性を診断します。 Service Worker Static Routing API を使用すると、Service Worker の起動時のパフォーマンスの低下を回避できます。 他にもたくさんあります。 Adriana Jara です。Chrome 123 のデベロッパー向けの新機能を詳しく見ていきましょう。 light-dark() CSS 関数。 CSS の light-dark() 関数を使用すると、ライトモードまたはダークモードのユーザー設定に合わせてカラーパターンを調整できます。light-dark() 関数を使用して、1 つの CSS プロパティ内で 2 種類の色の値を指定します。 ブラウザでは、要素について
Here's what you need to know: Adapt your color-scheme with the new light-dark() function. Diagnose responsiveness on your site with the Long Animation Frames API. Avoid service worker start-up performance penalties with the Service Worker Static Routing API. And there's plenty more. I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 123. light-dark() CSS function. The ligh
Chrome のヘッドレス モードがさらに便利になりました。この記事では、デベロッパーにとって Headless をより便利なものにするために、Headless を Chrome の通常の「headful」モードに近づけるための最近のエンジニアリングの取り組みの概要を説明します。 背景 2017 年の Chrome 59 では、いわゆるヘッドレス モードが導入されました。このモードでは、UI が表示されない無人環境でブラウザを実行できます。基本的には、Chrome なしで Chrome を実行することです。 ヘッドレス モードは、Puppeteer や ChromeDriver などのプロジェクトによるブラウザの自動化に広く使用されています。ヘッドレス モードを使用して指定された URL の PDF ファイルを作成する最小限のコマンドライン例を次に示します。 chrome --headle
この記事では、2023 年の WebDriver BiDi の新機能の概要を説明します。 WebDriver BiDi とは WebDriver はブラウザ自動化プロトコルで、W3C 標準として定義され、ChromeDriver、GeckoDriver、WebKitDriver に実装されています。 Chromium には、Chrome DevTools プロトコル(CDP)という独自のブラウザ自動化プロトコルもあります。 この 2 つのプロトコルには根本的な違いがいくつかあります。WebDriver は相互運用可能な標準ですが、このプロトコルは効率が悪く、CDP のような機能がありません。対照的に、CDP はより効率的で強力ですが、相互運用性は劣ります。 そのため、2020 年、W3C Browser Testing and Tools Working Group は、WebDriver
Chrome 124 以降、キーボードにフォーカス可能な子がない場合、スクローラーはデフォルトでキーボードをフォーカスできます。 背景 スクローラーは至るところに存在しています。[利用規約] ボックス内に利用規約が表示される場合がありますが、一番下までスクロールして [送信] ボタンをクリックする必要があります。垂直のメニューバーに多数のアイコンが表示され、そこから選択することもできます。 このようなケースでは、多くのウェブユーザーがマウスやタッチパッドを上下に動かして、要素をスクロールします。ただし、ユーザーがページを移動するには、ポインティング デバイス、トラックパッド、タッチスクリーンが最適な方法とは限りません。一部のユーザーは、キーボードのみを使用して HTML ページ間を移動し、フォーカス可能なすべての要素にアクセスすることがよくあります。これにはさまざまな理由が考えられます。振
本日は、ウェブアプリのテストと自動化のユースケースに特化した新しい Chrome フレーバー、Chrome for Testing についてお知らせいたします。この記事では、Chrome チームがこの機能が必要と判断した理由を説明し、Chrome for Testing がデベロッパーにとってメリットとなり得る具体例を紹介します。 背景 ブラウザのテストは、高品質のウェブ エクスペリエンスを構築するために不可欠な要素です。手動と自動のどちらで行われるかは関係ありません。その一方で、適切なブラウザ テスト環境の構築が難しいことは周知の事実であり、ウェブ開発者が抱える最大の課題として一貫して 報告されています。本日は、こうした問題を軽減する変更についてお知らせします。 自動更新: ユーザーにとっては便利、デベロッパーにとっては手間がかかる Chrome の最大の特長の 1 つは、自動更新です。
この 15 年ほどにわたり、Chrome DevTools の [パフォーマンス] パネルは、さまざまな形でランタイム パフォーマンスを測定、最適化するデベロッパーの皆様をサポートしてきました。[タイムライン] パネルから始まり、現在の [パフォーマンス] パネルに進化しました。 それまでの期間、Chrome はその他の強力なパフォーマンス プロダクトや機能をリリースしました。特に、2016 年にリリースされた Lighthouse では、最適化の機会をより簡単に特定できます。2022 年にリリースされた試験運用版の [パフォーマンス分析情報] パネルは、パフォーマンス分析情報を表示する新しい方法をテストする目的でリリースされました。 [パフォーマンス] パネルには、デベロッパーがページ読み込みやランタイムのパフォーマンスの問題を詳しく調べるのに役立つデータや機能が詰め込まれています。しか
Chrome でビルドする Chrome の仕組み、オリジン トライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。
割り当てプロファイラ ツールを使用して、適切にガベージ コレクションが行われていないオブジェクトを見つけてメモリを保持します。 ツールの仕組み 割り当てプロファイラは、ヒープ プロファイラの詳細なスナップショット情報と、タイムライン パネルの増分更新およびトラッキングを組み合わせたものです。これらのツールと同様に、オブジェクトのヒープ割り当てをトラッキングするには、記録の開始、一連のアクションの実行、分析のための記録の停止が含まれます。 このツールは、記録中にヒープのスナップショットを定期的(50 ミリ秒ごと)に取得し、記録の最後に最後のスナップショットを取得します。 割り当てプロファイラを有効にする 割り当てプロファイラの使用を開始するには: 最新の Chrome Canary を使用していることを確認します。 デベロッパー ツールを開き、右下の歯車アイコンをクリックします。 [Prof
Chrome チームは、ユーザーがアクセスする可能性の高い今後のページを完全に事前レンダリングするオプションの開発に取り組んできました。 事前レンダリングの略歴 以前は、Chrome は <link rel="prerender" href="/next-page"> リソースヒントをサポートしていましたが、Chrome を超えて広くサポートされていたわけではありません。また、表現力の高い API でもありませんでした。 リンク rel=prerender ヒントを使用した従来の事前レンダリングは非推奨となりました。代わりに NoState Prefetch に置き換えられました。NoState Prefetch は今後のページで必要となるリソースを取得していましたが、ページの事前レンダリングも完全には行われず、JavaScript も実行されませんでした。NoState のプリフェッチを
データ圧縮は、実績のあるパフォーマンス最適化手法で、対象となるページリソースのサイズを削減します。これまでは、主にウェブサーバーで gzip を使用して、HTML、CSS、JavaScript ファイルなどの一般的なテキストベースのページリソースを圧縮し、クライアントに送信して解凍できるようにしていました。その結果、ページの意図する動作に影響を与えることなく、リソースの読み込み時間が短縮されます。 gzip 自体は非常に効果的ですが、近年では、ウェブでの圧縮がさらに進化しています。2016 年、Brotli アルゴリズムは Chrome に搭載され、対象となるリソースの全体として圧縮率が向上しました。2017 年末までには、最新のブラウザはすべて Brotli をサポートしており、サーバーのサポートはさらに普及し始めました。最近では、Chrome に ZStandard 圧縮が導入されまし
多くのサイトやアプリには、実行するスクリプトが多数含まれています。JavaScript は、多くの場合、できるだけ早く実行する必要がありますが、同時にユーザーの邪魔にならないようにする必要があります。ユーザーがページをスクロールしているときに分析データを送信したり、ユーザーがたまたまボタンをタップしているときに要素を DOM に追加したりすると、ウェブアプリが応答しなくなり、ユーザー エクスペリエンスが低下する可能性があります。 そこで役立つのが requestIdleCallback API です。requestAnimationFrame を採用することで、アニメーションを適切にスケジュールし、60 fps に達する可能性を最大限に高めることができます。同様に、requestIdleCallback は、フレームの最後に空き時間があるときやユーザーがアクティブでないときに処理をスケジュ
WebTransport と他のテクノロジーの関係 WebTransport は WebSocket に代わるものですか? 可能であるとは言いきれません。ユースケースによっては、WebSockets または WebTransport が有効な通信プロトコルである場合もあります。 WebSocket の通信は、信頼性の高い、順序付けされた単一のメッセージ ストリームをモデルにしているため、通信のニーズによってはこれで十分です。これらの特性が必要な場合は、WebTransport のストリーム API でも使用できます。これに対して、WebTransport の Datagram API は低レイテンシで配信し、信頼性や順序は保証されないため、WebSocket の直接的な代替ではありません。 Datagram API、または複数の同時 Streams API インスタンスを介して WebTr
Console Utilities API には、DOM 要素の選択と検査、オブジェクトのクエリ、読み取り可能な形式でのデータの表示、プロファイラの停止と開始、DOM イベントと関数呼び出しのモニタリングなど、一般的なタスクを実行するための一連の便利な関数が含まれています。 console.log()、console.error()、その他の console.* 関数をお探しですか?Console API リファレンスをご覧ください。 $_ $_ は最後に評価された式の値を返します。 次の例では、単純な式(2 + 2)が評価されます。同じ値を含む $_ プロパティが評価されます。 次の例では、評価された式に最初に名前の配列が含まれています。$_.length を評価して配列の長さを求めると、$_ に格納されている値は最新の評価式(4)に変更されます。 $0 ~$4 $0、$1、$2、$3、
最新のブラウザでは、システム リソースに制約があると、ページを一時停止したり、完全に破棄したりすることがあります。将来的には、ブラウザは電力やメモリの消費を抑えるために、これをプロアクティブに行うことが求められます。Page Lifecycle API にはライフサイクル フックが用意されているため、ユーザー エクスペリエンスに影響を与えることなくページでこのようなブラウザの介入を安全に処理できます。API を参照して、これらの機能をアプリに実装する必要があるかどうかを確認してください。 背景 アプリケーションのライフサイクルは、最新のオペレーティング システムがリソースを管理する重要な方法です。Android、iOS、および最近の Windows バージョンでは、OS がいつでもアプリの起動と停止を行うことができます。これにより、これらのプラットフォームはユーザーに最もメリットのあるリソ
次のページ
このページを最初にブックマークしてみませんか?
『Chrome for Developers』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く