フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて,メルカリ・メルペイのフロントエンドチーム有志で「超速!Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で,「推測するな,計測せよ」という言葉が紹介されていますが,今回の記事は,輪読会で学んだことのまとめとして,Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお,現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため,ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法,環境 計測はGoogle Chrome 71.
Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日(忘れもしない2018年3月30日!)iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら(インストールなど煩わしい手続きなしで)すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの
米Googleは4月2日(現地時間)、Webブラウザ「Chrome」向けの拡張機能ストア「Chromeウェブストア」で、暗号通貨マイニングのための拡張機能を禁止すると発表した。 Chromeウェブストアではこれまで、単目的でマイニング機能があることをユーザーに通知するという規約を守ればマイニング拡張機能の公開を許可してきたが、「残念ながらストアに登録しようとするマイニング関連スクリプトを含む拡張機能の約90%はこの規約に準拠していない」ため、この決定に踏み切ったとしている。 そうした拡張機能は、表向きは便利な機能を提供するが、ユーザーに通知することなくバックグラウンドでユーザーのCPUパワーをマイニングに使っているという。このような拡張機能を使うと下図のようにアイドル状態でもCPUが稼働し続ける。
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
アンインストールできなくする機能を搭載!Webブラウザー「Chrome」と「Firefox」を対象にした拡張機能タイプのアドウェアが見つかる――対象方法も含めて紹介 2018年01月26日19:25 posted by yukito_kato カテゴリアプリ・サービスニュース・解説・コラム list アンインストールを妨げる機能が搭載されたWebブラウザー拡張機能タイプのアドウェアが見つかる! セキュリティベンダーのMalwarebyteは18日(現地時間)、一度インストールすると普通の方法ではアンインストールできなくなるWebブラウザー「Chrome」と「Firefox」を対象とした機能拡張(エクステンション)型のアドウェアを発見したとお知らせしています。 このアドウェアはWindowsやMac OS Xなどの各OSにおけるChromeやFirefoxでインストールしてしまうと、勝手に動
TL;DR WordPress の functions.php に書いておくと捗ることをまとめておきます。 固定ページ判別。body に固定ページのスラッグ名を追加 body に固定ページのスラッグ名を追加。トップページは home のクラス名がつく。固定ページなどは guide about などのスラッグ名を取得しクラス名が付与される。 function pagename_class($classes = ''){ if (is_page()) { $page = get_post();//get_page()は廃止されたので使わない $classes[] = $page->post_name;//スラッグ名取得 } return $classes; } add_filter('body_class', 'pagename_class');
[レベル: 中級] 非 HTTPS (HTTP) のページでテキストをフォーム送信する要素を持つサイトを対象に、Google は先週末いっせいに警告メールを送信しました。 Chrome 62 から実装予定のセキュリティ警告 次のメールが Search Console 経由で届きます。 Chrome のセキュリティ警告を http://example.com に表示します http://example.com の所有者様 2017 年 10 月より、ユーザーが Chrome(バージョン 62)で HTTP ページのフォームにテキストを入力すると、「保護されていません」という警告が表示されるようになります。また、シークレット モードを使用している場合は、HTTP ページにアクセスするだけで「保護されていません」と表示されます。 貴サイトでは、たとえば以下に示す URL に、Chrome の新し
これ以上は長くなるため後述. ##Chromeは既に,Safariもようやく 上記の通り,Service WorkersがPWAでも最重要な機能の一つである.Chromeでは既に対応済み. しかしSafariが対応しておらず,世間的にはモチベーションの上がらない状況であった(やちまもその一人である). Safariにおいて,Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである. 20ヶ月という永遠とも呼べる時を経て,2017/08/032にようやく In Development となったわけであった. ##だから何なのか SafariにService Workersの実装がなされると,一気にウェブアプリへの移行が進む可能性が大きい. ブラウザの制約が弱まり,ウェブアプ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
Google、3DCGのための新たな圧縮ライブラリ「Draco」をGitHubで公開。ZIP形式よりも効率的。VR/ARにおいても帯域を大幅に削減し素早くレンダリング 2017-01-17 Googleは、Chrome Mediaチームが開発した3DCGのためのオープンソースデータ圧縮ライブラリ「Draco」を発表および公開しました。 「Draco」は、Chrome Mediaチームが開発した圧縮ライブラリで、ZIP形式よりも効率良くデータ圧縮を実行できるオープンソースです。Meshファイルの圧縮において、100MB以上のファイルをZIPで30MBに対して、Dracoでは10MB以下になると今までの圧縮より効果があることを報告します。 Dracoは、メッシュと点群データを圧縮するために使用できるほか、圧縮ポイント、接続情報、テクスチャ座標、色情報、法線、およびジオメトリに関連する属性もサポ
ブラウザのテキストボックスに文字を入力すると、登録されている情報をナビゲートしたり自動入力したりできる「Autofill(オートフィル)」機能は、煩わしい入力作業を大幅に省略できるので非常に便利です。しかし、オートフィル機能をONにしておくと、極めて単純な手法を使って簡単に住所や電話番号などの個人情報をぶっこ抜くフィッシング詐欺の餌食になってしまう危険性が指摘されています。 GitHub - anttiviljami/browser-autofill-phishing: A simple demo of phishing by abusing the browser autofill feature https://github.com/anttiviljami/browser-autofill-phishing オートフィル機能の危険性を指摘するViljami Kuosmanen氏は、G
Chrome 55 uses ~30% less memory than Chrome 54 We use headless Chrome to drive our service so we were very interested in the alleged memory improvements of Chrome 55 reported 2 months ago. Weather.com was the first site to crash our service due to a 300MB memory cap we had on a Docker container. Weather.comChrome 54Chrome 55Memory reduction Chrome task manager
疑惑どころか 99.99% くらい黒な話。 (後記:セッション盗まれたと思ってたけど、よくよく考え直してみると生パスワードごと盗まれてる可能性もあるしやばい) 追記:続報 11月3日 今回指摘した HTTP Headers 以外にも、「Tab Manager」「Give Me CRX」「Live HTTP Headers」等で同様(?)の問題が報告されています。第三者が元の作者からソフトウェア権利を買い取って悪用する、というケースが割とある模様(?)。皆さま情報ありがとうございます。 11月4日 Zaif については、「不正な Chrome 拡張」と「スクリプトから保護されていなかったクッキー」のコンボによりセッションが盗まれていた可能性あり。 Zaif のセッション情報が盗まれた原因のひとつについて。JavaScript からクッキー値を取得させない方法。 - clock-up-blog
クラウド上にあるWindows 7相当の環境をリモート接続して利用できる、いわゆる仮想デスクトップサービスの「Amazon WorkSpaces」が、Webブラウザから利用可能になったと発表されました。 対応するWebブラウザは最新のChromeもしくはFirefoxで、Windows、Mac OS X、Linuxから利用可能です。 これまでAmazon WorkSpacesを利用するには、PC上の専用クライアントソフトもしくはシンクライアント用のデバイス、iPadやAndroidタブレット、Kindleなどではクライアント用アプリなどを利用する必要がありました。 Webブラウザへの対応でこうした専用ソフトウェアやデバイスが不要になり、またアクセス後のデバイス上には消去しなければならないキャッシュデータなどを残さないため、安全に利用できると説明されています。 Amazon WorkSpac
Webブラウザを自動的に操作することでWebアプリケーションの動作テストを自動化してくれるツール「Selenium」の、5年ぶりのメジャーバージョンアップとなる「Selenium 3.0」が正式にリリースされました。 Selenium 3.0では、Seleniumの原型でありブラウザ操作をするための旧来の機能であった「Selenium Core」がなくなり、WebDriverに置き換えられました。 WebDriverはブラウザを外部から操作する方法としてSelenium 2から取り入れられており、現在W3Cによって標準化も進められています。また、モバイルアプリケーションのテスト自動化ツールであるAppiumでも採用されています。 すでにChromeとMicrosoft EdgeにはWebDriver機能が組み込んであるため、Selenium 2でWebDeriverを利用していたのであれば
先日こういうエントリーを書きましたら・・・ Amazonで一番まずいのは溢れる二重価格の表示だと思う 二重価格改善して欲しいですが自己防衛としてChromeの拡張機能「Keepa – Amazon Price Tracker」を使用してます。 価格の履歴が見れ安いのか高いのかすぐ確認取れます。https://t.co/NR7v8Q2QS2 https://t.co/vLTNmwipIG — なお (@naoh__i) 2016年10月16日 というアドバイスを頂きました。 さっそくChromeブラウザにインストールして使ったところ・・・ Amazonの買い物はこれなしではあり得ない!! という結論に達しましたので、ここでご紹介します。マジで使えます!!! 教えてくれてどうもありがとうございます。 使い方は簡単・・・ これをモバイルで見ている方は、PCを開いてください。 GoogleのChr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く