ほんの少しHTMLを変更して検証したい時 – TravelBook Tech Blog
本番のサイトを眺めていて、「あーここのHTMLこうしたら、もっと速くなるのになー」って思う時ありますよね。 僕はあります。でも、検証するだけのために、プロダクトのコードを直接いじるのは大げさ。 そんな時に、wgetとmirrorというコマンドを使ってページをダウンロードして「ほんの少し」HTMLを変更しています。 紹介します（追記にLocal Overridesという「そのものズバリな」Chromeの機能も紹介してます）。 最近あった話です。特にCore Web Vitalsとか速度改善について。 トラベルブックのとあるページのスコアが落ちていて、Chrome DevToolsで観察してみると、どうもYouTubeの埋め込が足を引っ張っている。 表示領域外にも関わらずiframeの中身がロードされています。 これは直したい（本来なら本番へ上げる前に気づく仕組みを作りたいのですが、一旦置いて
ECにも関係するSameSite属性！カートに入れたはずの商品がない？ ログインが何回も求められる？ 対策方法は？
ホームECニュースEC事業者にも関係するSameSite属性！カートに入れたはずの商品がない？ ログインが何回も求められる？ Chrome 80の仕様変更とその影響・対策（2020年2月3日追記） EC事業者にも関係するSameSite属性！カートに入れたはずの商品がない？ ログインが何回も求められる？ Chrome 80の仕様変更とその影響・対策（2020年2月3日追記） 2020.01.242024.01.30 ECニュース 2020年2月4日、Googleはバージョンアップした「Google Chrome 80」をリリース予定です。 それに伴い、プライバシー保護やセキュリティ強化を目的に、Cookieの動作が一部変更されます。 そこで登場するのが、SameSite（セイムサイト）属性。 この記事では、
【現在は対応不要】Chrome80以降でALBの認証を使っているとcookieが4096バイトを超えて認証できないことがあり、社内サービスではcookie名を縮めて対応した - hitode909の日記
2020/2/18追記 サポートに問い合わせたところ、ALBの不具合はロールバック済みで、cookie名を縮める対応は不要、とのことでした。試してみたところ、たしかにcookie名の指定をやめても問題なく認証できました。 AWSのApplication Load Balancerの認証機能を使って、スタッフからのアクセスのみ許可する社内向けウェブサービスを運用しているのだけど、昨日くらいからGoogle Chromeで認証が通らなないという声を聞くようになった。 現象としてはリダイレクトループが発生していて、コンソールを見るとSet-Cookie headerが長すぎるというエラーが出ていた。 Set-Cookie header is ignored in response from url: https://****/oauth2/idpresponse?code=e51b4cf0-8b
ChromeがSameSite=None Secure設定がないサードパーティクッキーをブロックするように
Chromeブラウザは2020年2月に展開予定のChrome 80より、セキュリティ向上のためにサードパーティー（クロスサイト）Cookieをデフォルトでブロックするようになります。 2020年6月追記： Googleはクロスサイトクッキーのブロックを進めていましたが、4月3日にCOVID-19の感染拡大を受けて、ブロックをロールバックし、適用を延期することを発表しました。 再適用は2020年7月リリース予定のChrome 84から行われるとのことです。 詳しくは以下のGoogle開発者ブログをご覧ください。 SameSite Cookie の変更の一時的なロールバック https://developers-jp.googleblog.com/2020/04/samesite-cookie.html SameSite Cookie規制の再適用 https://blog.chromium.o
hterm - Chromeアプリとして動作するターミナルエミュレータ MOONGIFT
開発者であればターミナルを使う機会が多いですが、そうでない場合は時々しか使わないでしょう。そのためにソフトウェアをインストールしても使い方を忘れてしまったり、そもそもインストールしたことを忘れてしまうかも知れません。 そんな方に使ってみて欲しいのがhtermです。Google Chromeアプリとしてｔインストールするのでとても手軽に使えるターミナルです。 htermの使い方 インストールします。 インストールしました。Chromeアプリとして並びます。 接続設定をします。公開鍵認証も使えます。 接続してしまえば普通のターミナルエミュレータです。ただしCtrlキーを使ったショートカットキーが使えない場合もあるようです。 htermはGoogle Chromeさえあれば使えるのでとても手軽です。ローカルのターミナルとしては使えないので（ローカルにSSH接続すれば大丈夫でしょうが）ご注意くださ
Goodbye geocities.jp - 消失したGeocitiesのデータをWeb Archiveから発掘 MOONGIFT
懐かしのホームページホスティングサービス、Geocitiesが終了しました。無料スペースのサービスは99〜00年当時数多く存在しており、その中でも最大級だったのがGeocitiesです。その膨大な数のサイトは移転したり、そのままネットの渦に飲み込まれて消えてしまいました。 そんな消えてしまったホームページを掘り起こしてくれるのがGoodbye geocities.jpです。インストールしておくだけで幸せになれそうな機能拡張です。 Goodbye geocities.jpの使い方 利用しているところです。Web検索の結果からGeocitiesへ行くと、Web Archiveへジャンプしてくれます。 移転先がある場合は、そちらへ遷移してくれます。移転先が指定されていない場合、Web Archiveに飛んでくれます。もちろんWeb Archiveにもデータがない可能性はありますが、それでも自分で
「Google Chrome 74」安定版リリース、JavaScriptのクラス構文にプライベートフィールドが登場
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン74.0.3729.108がリリースされました。Google Chrome 74ではJavaScriptのプライベートクラスフィールドが実装されたほか、ユーザーがアニメーションを消す設定にしている時の挙動を決められるCSSメディアクエリーなどが実装されています。 New in Chrome 74 | Web | Google Developers https://developers.google.com/web/updates/2019/04/nic74 New in Chrome 74: Private Class Fields, Prefers Reduced Motion, CSS Transition Events, & more! - YouTube ・プライベートクラスフィールド かつてのJavaScri
Videostream経由でChromecastで任意の動画を再生する方法 - ガジェット考察
公開日：2018/01/14 今回はChromecastで任意の動画を見る方法ついてご紹介します。この方法ではPC上のローカル動画だけでなく、NAS上のネットワーク動画も再生可能ですので、あらゆる動画をChromecast経由で大画面でTVで視聴可能です。 Chromecastを用いて任意の動画を再生する 必要なソフトのインストール Videostream まずは必要なものをインストールます。今回はVideostreamというGoogle Chromeの拡張機能を使用します。 Google Chromeをインストールする ChromeウェブストアでVideostreamを検索し、インストール Google Chromeをインストールされていない方は必要ですのでインストールしてください。次にGoogle Chromeで上記のリンクからChromeウェブストアにアクセスしてVideostrea
PWAでここまでできる
スライド内の関連リンク * DiverseのPodcast https://podcast.diverse-inc.com/ * 採用ページ https://diverse-inc.co.jp/recruit/positions * 今回のサンプルGithub https://github.com/SAMUKEI/droidkaigi2019-sample-pwa * 今回のサンプル動画 https://youtu.be/ehW6397JceI * はじめてのプログレッシブ ウェブアプリ https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja * PWA Builder https://www.pwabuilder.com/ * How to Package Android https:
【拡張不要】Chromeでスクロールするページ全体のスクリーンショットを撮る方法！ | iSchool合同会社
このサイトでは、SEO・Googleビジネスプロフィール・ローカル検索など、Web集客に関する最新情報を配信しています。 拡張機能を使わずに、Chromeでスクロールするページ全体のスクリーンショットを撮る方法を紹介します。 例えばプレゼン資料を作っているときに、PCサイトでページ全体のスクリーンショットが必要なことがあります。 また、モバイルサイトでページ全体のキャプチャが必要なこともありますよね。 そんな時には、Chromeに標準で搭載されている機能を使えば、拡張機能を使わずに、ページ全体のスクリーンショットを撮ることが可能です。 PCサイトでページ全体のスクリーンショットを撮る方法PCサイトでページ全体のスクリーンショットを撮る方法についてです。 次の手順で行ってください。 デベロッパーツールを立ち上げる詳細機能を呼び出す「capture」もしくは「full」と入力し、「Captur
Raspberry pi3上でChromeのheadlessモードによる小型低電力＆自動化環境への第一歩 - Qiita
動機 Raspberry piの小型低電力の特性を生かした活用方法の一つとして、headlessブラウザを使った自動化環境にチャレンジして見たいと思います。 一昔前だと、VXFD仮想ディスプレイ＋pyvirtualdisplayの環境で、ブラウザにiceweasel（現:Firefox）を使って実現していたようで、その辺りの記事はよく見かけます。 今回、Chromeに実装されたheadlessモードを使ってやってみました。 とはいえ、情報が少なく試行錯誤の連続でしたが、しばらくやってから冷静に考えると結構簡単に解決したので手順も含めて共有します。 試行錯誤履歴 Firefox + VXFD + pyvirtualdisplay環境 VXFDはブラウザ標準のheadlessではないので、やり方だけググって見送り Firefoxでのheadless apt-getで取得できるFirefoxバー
もう実機は不要!? Chromeのモバイルエミュレーターがとんでもなく進化していた
Chromeデベロッパーツール、使いこなしていますか？ モバイルブラウザーエミュレーターの機能が拡張され、通信帯域やセンサーのシミュレーション、PWAの検証など、どんどん進化しています。これは便利です！ Webサイトのテストはますます複雑になっています。ほんの数種類のブラウザーで機能の互換性を確認していた時代は遠い昔の話。ピカピカの傑作サイトも、OS、画面解像度、マシン性能が異なる幅広いデバイス（モバイル、タブレット、デスクトップ）での動作確認が求められます。極端な話、開発そのものと同じくらい時間がかかってしまうことさえあります。 Webサイトのテストはタッチスクリーンと高解像度画面の登場でさらに複雑になりました。通常のPCにマウスとキーボードをつないで開発していたら、せっかくのWebサイトがどう動くか確認するのは困難です。たとえば、マウスポインタを乗せたときの動作などは必ずしも機能せず、
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar | DevelopersIO
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード（GUIがないモード）。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOMを出力したりすることができます。自動化の可能性に満ち溢れた機能です。 ヘッドレスChromeの導入については、次の公式ドキュメントが詳しいです。 ヘッドレス Chrome ことはじめ | Web | Google Developers ドキュメントを読んでいただくと分かると思いますが、様々なことが可能なため指示の記述が少し冗長な面があります。 そこでヘッドレスChromeを用いた自動化処理
モバイル開発に役立つJSデバッグ術 | メルカリエンジニアリング
Mercari Advent Calendar 2017 13日目は フロントエンドチームの @sottar が web アプリの開発（特にモバイル開発）で役立つ Chrome DevTools の便利な機能を紹介します。 はじめに メルカリでは PC からのアクセスよりもモバイルからのアクセスが多いため、web アプリもモバイルからのアクセスを意識したコードを書く必要があります。 しかしモバイル向けのコードを書く際に、毎回実機を接続して確認するのは面倒です。そこで最近のブラウザに付属している開発者ツールにはモバイル向けのコンテンツの開発に役立つ機能が搭載されているため、その機能を使いこなすことでモバイル向けの開発をしつつ、開発のスピードを上げる事が可能です。 そこで本日は Chrome DevTools 内にある、特にモバイルデバイス向けのコンテンツ開発に役立つ機能を紹介します。 Dev
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
Headless Chrome をさわってみた | CYOKODOG
Headless Chromeのリリースをうけて、PhantomJS のメンテナーが開発の終了を宣言したりとか、ちょっと話題になった Headless Chrome について試してたことをメモっておく。 試したやつのリポジトリ：https://github.com/cyokodog/headless-chrome 概要 ヘッドレス（GUIを表示しない状態）で実行できる Chrome の機能 Chromium と Blink が提供する機能をコマンドラインで利用できる Chrome 59 から利用可（2017/06/08時点ではMAC、Linuxのみ） 活用例 ウェブページのテスト 表示・動作テスト、画像やPDFによる画面のスクリーンショット スクレイピング 認証が必要なサイトでも対応 ヘッドレスで起動する --headless フラグと --disable-gpu フラグ（そのうち指定不要
Getting Started with Headless Chrome | Blog | Chrome for Developers
TL;DR Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Why is that useful? A headless browser is a great tool for automated testing and server environments where you don't need a visi
2017-05-03のJS: Headless Chrome/FirefoxとPhantomJS/SlimerJS、ES modules
JSer.info #329 - Chrome 59βがリリースされました。 Chromium Blog: Chrome 59 Beta: Headless Chromium, native notifications on macOS, and service worker navigation preload Service Workerのnavigation preloadsのサポート、MediaError.messageのサポート、Image Capture APIの試験的サポートなどが行われています。 また、Headless Chromiumが追加されています。 詳しくは次の記事で解説されていますが、PhantomJSのようにXvfbなどが不要なChromeを動かすことができるモードです。 Getting Started with Headless Chrome | Web
ChromeのヘッドレスモードをMacOSXで試してみた - Qiita
マストドンで盛り上がる最中、 こっそり一部で盛り上がってたChromeのヘッドレスモード MacOSXで少し試してみたいと思います。 開発中の機能ということで、仕様の変更もあると思いますが、2017/4/16段階ではちゃんと以下のやり方で動作してます:) 準備 Google Chrome Canaryをインストール 開発段階にある機能がのってるchromeです。ささっと入れちゃいます。 nodejsインストール(v6.3以上) ちなみに今回試したのはv7.9.0 シェルにCanaryバイナリへのエイリアスを作成します(僕は.zshrcに追加しました/bashの人は.bash_profileかな) alias chrome-c='/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary'
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.d-3.site/entry/2017/04/29/090000
