ご無沙汰しております。ウェブボウズを立ち上げて 1 年が経ちました。皆さま如何お過ごしでしょうか。私は、この 1 年間ひとつもブログポストできていません。さらには私の坊主頭（スキンヘッド）にちなんでウェブボウズという名前をつけた個人ブログでありましたが、5 年間共にしたこの Hair-less style から心機一転して 2019 年は髪を育んでいく方針を固めましたので、もはやボウズでもなくなってます。変わり続けることだけが普遍であると胸に刻んで今年も強く生きていきたいと考えております。 さて、最近 Signed HTTP Exchanges やら Performance Budget やらさまざまな面白いことに関わらせていただいて忙殺と幸せを噛み締めている中でも、Chrome Dev Summit 2019 でも大きくフィーチャーされました Portals という新しい HTML 要素

正規表現を使うことで、通常の検索では実現できない高度な検索が可能になります。 たとえば、「Ruby」か「Python」か「Perl」のどれかに一致してほしいときや、「JavaScript」ではなく「Java」に一致してほしいときや、円周率の小数点以下100万桁から同じ数字が6つ以上続いているところを検索したい、などの用途に使えます。この他にも様々なことが正規表現で可能です。 ということで、Webページ内を検索するときに使う正規表現を紹介していきます。 正規表現を使う際の注意点 正規表現を使った検索を行う際に留意すべき点があります。正規表現には、特別な意味を持つ文字がいくつかあります。具体的には^!$()=|+*{}[]<>.?\です。これらはメタ文字と呼ばれ、正規表現の中に含めたときに特別な意味を持ちます。そのため、たとえば検索したい文字列の中にこれらの文字が含まれている場合、修正する必要

Products & ServicesSecurity OperationsThreat ResearchAI ResearchNaked SecuritySophos Life

(2019/2/18追記）方針が変わったようで、この記事の内容は古くなりました。広告ブロック機能への影響はこの記事で書いているほどにはひどいことにはならないようです。ただ最終決定ではありませんので、どうなるかは流動的です。 After outrage over Chrome ad-block block plan, Google backs away from crippling web advert, content filters • The Register Chromeの機能拡張の仕様が変更となり広告ブロッカーが使えなくなるかもしれないとの話について。調べた範囲でまとめます。簡単にはURLブロッキングは使えるが、要素非表示は使えなくなるような気がします。 ニュース：Googleがウェブ上の広告を非表示にする広告ブロック機能をChromeなどで無効化するための施策を進める – GIG

フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.

This domain may be for sale!

20180713追記 Intervention reports について追記しました ブラウザのバージョンアップは定期的に行われており、その度に廃止される機能もあります。 廃止されることは公式にアナウンスされますが、そもそも自分が使っているかどうかすべてを把握することは難しいでしょう。JavaScriptのAPIであったり、HTTPヘッダだったりとその範囲は非常に広く、ライブラリの特定のバージョン以下だと問題になるといったケースも有るかと思います。 このような場合に役に立つ、廃止される機能が使用されていることをWebデベロッパー側で検知する仕組みが「Deprecation Reports」です。 Blink開発者メーリングリストでも議論されていますが、すでにChrome Canaryで動作するので、簡単に動作確認してみます。 Reporting API 表示してるページのエラーなどを指定し

Chromeデベロッパーツールはいろいろ便利ですが、お手軽にローカルサーバーも構築することもできるんですね。簡易的なサーバーですが、HTML, CSS, JavaScriptのWebページであれば充分な機能を備えています。 Chromeデベロッパーツールを使用して、ローカルのWebサーバーを構築する方法を紹介します。もちろん、WindowsでもmacOSでもどちらでも簡単にできます。 1分もかからずに用意することができ、切り替えは1クリックでOKです。 What's New In DevTools (Chrome 65) デベロッパーツールのバージョン Step 1: ファイルを用意 Step 2: デベロッパーツールの設定 Step 3: ローカルのWebサーバーにアクセス デベロッパーツールのバージョン ローカルのWebサーバーを構築するには、デベロッパーツールの「Local Over

Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追

不正なGoogle Chromeの拡張機能によりページが書き換えられ、総額500万円分の仮想通貨が盗み取られる Google ChromeやFirefoxなどのウェブブラウザは、ブラウザの機能を向上させるために第三者が開発した自作のソフトウェアをブラウザ内で動作させる「拡張機能」「アドオン」などの仕組みを備えています。 今月3日、Chromeの拡張機能マーケットプレイス「Chromeウェブストア」において、「ドテンくる」という名前で配信されていた拡張機能が、利用者の仮想通貨を窃取する不正なコードを埋め込んでいたことがユーザーの報告で明らかになりました。 ドテンくる これは詐欺です bitflyer bitmexの全サイトの自分のデータの読み取りと変更 と、いう内容が含まれており 送金のアドレスが書き換わってる事例が何件か発生。 入れてる人は即座にアンインストール推奨&確認お願いします rt

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Injects to any Script into a Website. It can be autorun as well.

JavaScriptはイベント購読型の処理が多いです。DOMをクリックした際のイベントであったり、変数の変化をウォッチして処理が行えます。しかし、そういったコードが散在していると、どこでイベントを購読しているのかが分からなくなります。 そこで使ってみたいのがJavaScript Trackerです。JavaScriptのイベント処理を一覧し、ハンドリングできるGoogle Chrome機能拡張です。 JavaScript Trackerの使い方 DOMを選択すると、そこに紐付いているイベントが要素、振る舞いなどを一覧してくれます。 そこから実際のコードを辿ることもできます。 動作デモです。 JavaScript TrackerはjQueryにも対応し、DOMイベントの収集ができます。スタイルを変更するイベントも分かります。そしてそこからコードを辿ってデバッグが可能です。これはフロントエンド

Web制作をしていると、ちょっとした英語の文章を日本語に訳したい、または日本語の文章を英語にしたいということがあります。 そういったとき、［Google翻訳のページを開く＞文章をペーストして翻訳ボタンを押す］よりも、ChromeのアドレスバーからGoogle翻訳できると少し便利です。 以下の方法は、Chrome for Mac/Windowsで使用できます。Android/iOSでは使用できないようです。 設定方法 Chromeの環境設定を開き、右上の検索ボックスに［検索］と入力します。 ［検索エンジンの管理…］をクリックします。 ［その他の検索エンジン］の1番下の箇所に以下のように入力します。 ［検索エンジンを追加］に［Google翻訳］ ［キーワード］に［tr］ ［URL］に［http://translate.google.co.jp/?source=osdd#auto|auto|%s

ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ

Google signs / jonrussell 先日、台湾に行くにあたり観光地やグルメなどを調べていたときのこと。 「台湾　おすすめ」などありきたりな検索ワードで検索すると、出てくるわ出てくるわコピペ系メディアばかり。 どこかのサイトから持ってきたコピペ写真に、「あなた現地行ったことないでしょ？」と一目見てわかるような薄っぺらい内容。 台湾だと大手なら「台北ナビ」、他にも台湾好きや現地在住の方のブログなどもあるのですが、それらの現地で得た生の情報がコピペで雑に作られた悪貨により見えにくくなっているという事態が発生していました。 『Google頑張ってよ。。。』と言いたいところではありますが、検索アルゴリズムの改善を待っていても始まりません。 というわけで導入したのが、Google Chromeの機能拡張「Personal Blocklist」。 ドメイン単位で不要な検索結果を非表示にし

Works Offline Lives completely in your browser. There is no network involved, so it opens and shows previews instantly.

閲覧しているウェブサイトの選択された範囲のスクリーンショットを撮ってSVG形式でダウンロードできるChrome拡張機能をつくりました．SVGで出力しているため，普通のPNGやJPGと比べると，以下のような少しだけ高度なことができます． スクリーンショットを撮ったページのURLを<svg>のdata属性として保持できる スクリーンショットの範囲内のリンクをそのまま残すことができる． ページ中の<a>の位置に，外部ページヘのリンクを持つ<rect>を挿入しています．クリックするとリンク先のページが開きます． ブラウザで通常リンクと同じように扱われるため，rectをホバーするとChromeの左下にジャンプしようとしているURLが表示されるので，移動先もしっかり確認できます． まだかなり荒いベータ版ですが，GitHubで公開しています．クローンして，そのままChromeの拡張機能管理ページから読み

Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目の変更 赤枠で囲んだ部分を右クリックすると こんな感じでメニューが出てくるので表示したい項目をクリックする 項目の一例 Name：リソースの名前 Method：HTTPメソッドの種類 Status：レスポンスのステータスコードとテキスト Type：リソースの