
操り人形師
Puppeteer は、Chrome DevTools プロトコルと WebDriver BiDi を介して Chrome と Firefox の両方を自動化する高レベルの API を提供する JavaScript ライブラリです。
スクリーンショットの撮影や PDF の生成から、複雑な UI の操作やテスト、パフォーマンスの分析まで、ブラウザ内のあらゆる作業を自動化できます。
コンセプト
ページのインタラクション
ネットワークの傍受
スクリーンショットを撮る
実行モード
ブログ投稿
Spotify が Picture-in-Picture API を使用して Spotify ミニプレーヤーを開発した方法
Spotify ミニプレーヤーが、キャンバスをハックする機能から Document Picture-in-Picture API によって実現される洗練されたエクスペリエンスへと進化した方法をご紹介します。
移行の事例紹介を見る
redBus、Policybazaar、Tokopedia のいずれも View Transition API を使用しており、パフォーマンスと滑らかな UI の恩恵を受けています。
コンテナクエリに関する事例紹介
redBus と Tokopedia のコンテナクエリのメリットについて説明します。
スクロールドリブン アニメーションの事例紹介
Policybazaar、redBus、Tokopedia のスクロールドリブン アニメーションのメリットをご確認ください。
:has() の事例紹介
Policybazaar と Tokopedia が :has() を使用することでどのようなメリットが得られるかをご覧ください。
ポップオーバーの事例紹介
Tokopedia は、Popover API を使用してアプリケーションのコード量を削減しています。
メモリに収まるサイズの大きいファイルを Photoshop でどのように解決したか
Adobe が、象徴的な Photoshop アプリのウェブ バージョンで、最大のファイルでも編集できるようにした方法を学びます。 (この記事は動画でもご覧いただけます)。 2021 年、Adobe は Chrome エンジニアリングと共同で、 Photoshop のバージョンをウェブに導入 しました。このソフトウェアは、 SIMD 、 オリジンの非公開ファイル システム 内の高パフォーマンス ストレージ、キャンバスの P3 カラー空間 、 Lit を使用したウェブ
ベクター画像編集アプリ Boxy SVG が、Local Font Access API を使用してユーザーがお気に入りのローカル フォントを選択できるようにする方法
Local Font Access API は、ユーザーがローカルにインストールしたフォントデータにアクセスするためのメカニズムを提供します。名前、スタイル、ファミリーなどの上位レベルの詳細情報や、基盤となるフォント ファイルの未加工バイトなどです。SVG 編集アプリ Boxy SVG がこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Boxy SVG はベクター グラフィック エディタです。主な用途は、SVG
ゲームエディタ Construct 3 が File System Access API を使用してゲームを保存できるようにする仕組み
File System Access API を使用すると、読み取り、書き込み、ファイル管理機能を利用できます。Construct 3 でこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Construct 3 は、 Thomas と Ashley Gullen 兄弟によって開発されたゲーム エディタです。ゲーム エディタの現在の第 3 版では、以前に Windows と NW.js 向けにビルドした後、2 つを完全に 「ブラウザが新しいオペレーティング
LEGO® Education における Web Bluetooth と Web Serial API の活用
レゴ エデュケーションはウェブの機能を活用し、できるだけ簡単に LEGO モデルとパソコンを接続します。
画像編集アプリ Photopea が、File Handling API を使用して、ユーザーがファイル エクスプローラーからファイルを開く仕組み
File Handling API を使用すると、ウェブアプリは、アプリケーションがサポートできるファイル形式のファイル ハンドラとして自身を登録できます。画像編集アプリケーション Photopea がこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Photopea は、 Ivan Kutskir が開発した無料のオンライン画像エディタです。Ivan は 2012 年にアプリの開発を開始し、Photopea に追加した主な機能を共有する ブログ
事例紹介: DevTools による改善された Angular デバッグ
Chrome DevTools チームと Angular チームが協力して Angular をテスト試験運用し、デバッグ エクスペリエンスを向上させました。他のフレームワークでも同様の変更が可能です。
How NRK uses scroll-driven animations to bring stories to life
Learn how scroll-driven and scroll-triggered animations enhance storytelling articles
How Google Search uses speculation rules
Learn about how Google Search used the Speculation Rules API to anonymously prefetch search results to improve user experience