公開日: 2025 年 1 月 16 日 パスキーは、パスワードに代わるより安全でユーザー フレンドリーな方法です。パスキーを使用すると、ユーザーは生体認証センサー（指紋認証や顔認証など）、PIN、パターンを使用してデバイスの画面のロックを解除し、アプリやウェブサイトにログインできます。パスキーを使用すると、ユーザーはパスワードを覚えたり管理したりする必要がなくなり、フィッシングの心配も不要になります。iOS と iPadOS で Google パスワード マネージャー（GPM）のパスキーを利用できるため、Chrome はすべてのオペレーティング システムでパスキーを同期します。 Google パスワード マネージャーのパスキーが iOS 17 以降で利用可能に iOS 17 以降（および iPadOS 17 以降）の Chrome ユーザーは、Google パスワード マネージャーでパス
Chrome の拡張機能を開発する手順について説明します。まずは、拡張機能が実行されたらポップアップを表示するだけのものを作成してみます。下記のフォルダとファイルを作成します。 my-extension manifest.json popup.html { "name": "My Extension", "description": "My Extension", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html" } } <!DOCTYPE html> <html> <body> <h1>Hello world!</h1> </body> </html> Chrome で chrome://extensions を開き、[パッケージ化されていない拡張機能を読み込む] から上記
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
[レベル: 上級] JavaScript のライブラリを実装することなく、ブラウザにもともと備わっている機能として lazy load を実行する仕組みを Chrome Canary 75 がサポートするようになります。 lazy load 専用の属性を HTML コードに追加するだけで、 <img> と <iframe> で指定するコンテンツを簡単に遅延読み込みできます。 通称、”Native（ネイティブ） lazy load” は、昨年の 8 月に構想ができあがりました。 ついに本格的に試験運用が始まります。 ネイティブ lazy load を制御する loading 属性 ネイティブ lazy load を制御するには、 <img> タグまたは <iframe> タグに loading 属性を追加します。 3種類の値を設定できます。 loading="lazy": lazy は la
ブラウザで閲覧したサイトをSNSなどで誰かに伝えようとサイトのタイトルとURLを取得しようと思ったときに、長いページタイトルを手動でタイピングするのは大変です。「Simple URL Copy」は1クリックするだけでページタイトルとURLをクリップボードできる、シンプルな見た目のGoogle Chrome拡張機能です。 【Chrome Extension】簡単にURLとタイトルをコピーできる「simple-url-copy」作りました - フリーランチ食べたい https://blog.ikedaosushi.com/entry/2019/02/25/012319 Simple URL Copy - Chrome ウェブストア https://chrome.google.com/webstore/detail/simple-url-copy/cefkgjbbpagcilodnhboolbp
DOMノードの強調表示 Consoleタブを選択。 DOMノードに評価される式を入力。 入力する式 以下の便利な式を使用できます。 「document.activeElement」で、現在フォーカスのあるノードを強調表示。 「document.querySelector(s)」で、任意のノードを強調表示。sはCSSセレクタで、DOMツリー内のノード上をホバリングするのと同じ。 「$0」で、DOMツリーで現在選択されているノードを強調表示。 「$0.parentElement」で、現在選択されているノードの親を強調表示。 パフォーマンスパネルの最適化 今までのパフォーマンスパネルは大きなページをプロファイリングする際にはデータの処理とビジュアル化に時間がかかりました。Chrome 70ではこの処理とビジュアル化が高速になりました。 パフォーマンスパネルの最適化 信頼性の高いデバッグ Chro
25日の昨日にリリースされたChrome 68で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 ブラウザの方は、以前から伝えられていた通り、http通信の際に「保護されていない通信」と表示されるようになりましたね。 What's New In DevTools (Chrome 68) コンソールの補助機能 より素早く、信頼性が高いUIとAudits BigIntのサポート Add property path to watch Show timestampsの移動 コンソールの補助機能 Chrome 68では、オートコンプリートやプレビューに関連する新しいコンソール機能が加わりました。 式の結果をプレビュー コンソールに式を入力すると、その式の結果をカーソルの下にプレビューできるようになりました。 sort()の結果をプレビュー Consoleをクリックして、コン
Googleは2018年7月からモバイル検索のランキング要素としてページの読み込み速度を使用すると発表しています。このように、ページの読み込み速度はだんだんと重要性を増してきていますが、Chromeの拡張機能「Lighthouse」を使えば、自分のサイトの読み込み速度だけでなくPWAへの対応状況やSEO対策状況などを簡単に計測してスコアで表示できます。 Lighthouse によるウェブアプリの監査 | Tools for Web Developers | Google Developers https://developers.google.com/web/tools/lighthouse/ LighthouseにはChromeの拡張機能版とコマンドライン版がありますが、今回はChromeの拡張機能版を使用していきます。 Lighthouse - Chrome ウェブストア https:
オンラインストアを閲覧した後、どのサイトに行ってもそのストアの広告にしつこくつきまとわれた経験はないだろうか。 Googleが、広告表示で提携するアプリやサイトに表示されるリマインダー広告を「ミュート」できる機能をユーザーに提供すると、米国時間1月25日付けのブログ記事で説明している。2012年から提供されている「Mute This Ad」というプログラムの一環で、表示されるさまざまな広告をユーザーがより細かく制御できるようにする。 この機能は、特定の商品やブランドのショッピングに関心がなくなり、そのストアの広告を見たくない場合に便利だ。Googleは数カ月中に、この機能を「YouTube」「Gmail」、検索ページにも拡大する計画だ。また、2月から「Chrome」ブラウザでの広告ブロックも開始する。
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
[レベル: 上級] Google は、シークレットモードでアクセスするすべての 非 HTTPS（通常のHTTP） ページに対して警告を表示する計画です。 今年の10月にリリースする Chrome 62 からの実装を予定しています。 この仕様が開発版 Chrome の Canary に一足早く実装されました。 「シークレットモードで HTTP に警告」のオプション シークレットモードで HTTP に警告を発する機能は、（まだ）デフォルトでは無効です。 chrome://flags/#mark-non-secure-as で有効にできます。 有効化するには、“Warn on HTTP while in incognito mode” を選択します。 有効にした状態で、HTTP ページにシークレットモードでアクセスすると「保護されていない通信」のラベルがアドレスバーの先頭に表示されます。 10月
Chromeに広告を非表示するアドブロックが標準機能として搭載される噂を耳にしていましたが、それが具体的にどのような広告が対象になるかは不明でした。 GoogleのSearch Consoleに新コンテンツが追加され、デスクトップとスマホでどのような広告が非表示にされてしまうか詳しく解説されています。 「Better Ads Standards」にはユーザーが特に不快に感じる広告の種類を掲載されており、それらに当てはまる場合は修正してね、というものです。 2018年から適用予定で、デスクトップやスマホでけっこう見かける広告が掲載されているので、注意が必要です。 非表示にされてしまうデスクトップの広告 ポップアップ広告 ページのメインとなるコンテンツの一部・全体を隠すようにポップアップして表示される広告。このタイプの広告は、ユーザーをイライラさせるだけです。 サウンド付き、自動再生されるビデ
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
