hostsファイルを変更してもブラウザで反映されず、再起動してみたり、シークレットウインドウを開いてみたりと検証作業などで手間取ることがあったので調査。 検証環境 Windows 10 pro Google Chrome 75.0.3770.142 Opera 62.0.3331.99 Firefox 68.0.1 Internet Explorer 11.1387.15063.0 Edge 40.15063.674.0 Safari 5.1.7 Google Chrome / Opera hostsファイルを変更 下記ページにアクセスして「Clear host cache」ボタンを押してホストキャッシュをクリア chrome://net-internals/#dns 下記ページにアクセスして「Flush socket pools」ボタンを押してソケットプールの消去 chrome://ne
ブラウザ操作を自動化して，E2E (End to End) テストやスクレイピングをするときに使えるライブラリ Playwright を試す．Playwright の特徴としてまず「クロスブラウザ」があり，Chromium / Firefox / WebKit をサポートしている．また「複数言語」という特徴もあり，Node.js / Python / Java / .NET をサポートしている．今回は Playwright for Python を前提にする． playwright.dev Playwright の前に 過去の経験を思い出すと，Capybara + PhantomJS で E2E テストを実装していた（2015-2016年頃でなつかしい！）．また最近だと Puppeteer や Amazon CloudWatch Synthetics を使う機会も増えている．しかし，個人的
ブラウザバックは Web アプリの鬼門 Vue に限らずですが、Web アプリにおいてブラウザでバックボタンやフォワードボタンの実行に対応するのはなかなかに難しい問題です。そのため、POST Back 型のフレームワークではブラウザバックの使用自体を禁止することも多かったと思います。 SPA全盛の今、この問題は解決されたのでしょうか。 いえ、状況はむしろ悪化しています。テンプレートエンジンを使った HTML 生成型の Web サイトであれば、ブラウザバックを行うことで、フォームの値とスクロール位置は復元されますが、JavaScript ベースで構築された画面ではフォームの値は保存されませんし、スクロール位置が復元できるかも条件次第です。 一般的な解決策 では、Twitter に代表されるSPAアプリではこの問題にどうやって対応しているのでしょうか。答えは「対応しない（あるいはスクロール位置
勤怠処理の自動化は、以下の仕組みによって実現しています。 在宅勤務と出社では勤怠処理が異なるため、基本的にフルリモート前提で在宅勤務の場合に処理を行うよう設定しています。 cronによってシェルスクリプトを起動 シェルスクリプトで在宅勤務の判定を行う 在宅勤務の場合、Pythonのプログラムを起動 Seleniumで勤怠入力 実装 Pythonのプログラムは、仮想環境を作成して実行しています。 仮想環境の作成及びSeleniumの導入 Pythonの仮想環境はvenvを使用して作成します。 仮想環境を作成するためには、以下のコマンドを実行します。 ＜Dir＞には任意のディレクトリ名を指定します。 $ python3 -m venv ＜Dir＞ $ source ＜Dir＞/bin/activate 仮想環境構築後、seleniumをインストールします。 仮想環境が有効な場合はプロンプトの表
js実行環境であるnodeはV8を使っている jsエンジンはソースコードをどうやって実行しているのか ここからが本題です。jsエンジンの裏側をのぞいてみましょう👀 全体像 下記が基本的な流れ V8って書いてあるけど、下記の基本的な流れはエンジンによらずほとんど同じはず もちろんそれぞれのフェーズで実装の違いは在る。“Optimize & Compile it”の具体的な実装などはエンジンにより異なる Benedikt Meurer; “An Introduction to Speculative Optimization in V8”; jsの面白いところは、ASTから直接コンパイルして実行されるわけでもなく、単純なインタプリタのようにコンパイルを挟まずに実行しているわけでもないところ。それに、なんだか見慣れない”Get feedback”というフェーズさえある……！ここがJIT com
Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に、微妙に本で紹介した内容では少し足りなかったので、改めて整理のためにブログ記事にしてみました。次回、本が改訂されることがあればこのブログエントリーの内容も入れて加筆したいと思います。 Real World HTTPだとGoを使っていましたが、フロントとサーバーを同時にいじるので、本エントリーではNext.jsをサンプルに使います。Next.jsでプロジェクトを作って（npx create-next-app@latest –ts)、適当なプロジェクト名を入れてアプリケーションの雛形を作っておいてください。 Next.jsでは、1つのスクリプトファイルを作成すると、それがサーバーAPI(/pages/api以下)と、フロントの画面(/pages/以下のapi以外)になります。Next.j
wasm-packを使うことで、ビルドしてwasm-bindgen-cliでさらに変換処理を行い、npmで配布可能なパッケージにするという多段階必要なビルド手順をまとめることが可能です。 またnewコマンドのようなテンプレートから生成する機能などもあり、より手軽にWasmの実行を行えます。 後述のTrunkとの違いは、wasm-packはwebpackなどのJavaScript側で使われるバンドラーなどと合わせて使うことが想定されていることです。 webpackと合わせて使わない場合には今回のテーマであり後述するTrunkを利用したほうがより簡単にWasmの実行を行えます。 wasm-opt GitHub binaryenというリポジトリでwasm-optというツール含むいくつかのツールが作られています。 wasm-optはその名の通りWasmの最適化をしてくれるツールです。 与えるオプシ
✨無料公開中✨ 業務ができる中級者になるためのJavaScript入門の第2弾となります。何度学んでも今一つ理解できないDOMに関して、できるだけわかりやすく説明しています。 業務ができる中級者になるためのJavaScript入門（文法編） https://zenn.dev/books/568dd4d86562a1/edit ✨開発環境に役立ててください✨ 👾 やっぱりwebpackがわからない（エピソード1） https://zenn.dev/antez/articles/58307946cf4f3e 👾 やっぱりwebpackがわからない（エピソード2） https://zenn.dev/antez/articles/638382faa06bd7 👾 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2 ✨Wo
Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！ iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。 Windows, macOS, Linux対応のアプリで、しかもオープンソースです！ Responsivize Responsivize -GitHub Responsivizeの特徴 Responsivizeのダウンロード Responsivizeの使い方 Responsivizeの特徴 Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです！ 当方の日本語環境（M1 Mac, Windows10）で問題なく動作しました。 Responsivize レスポンシブWebサイトの確認が簡単にで
Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ
Chrome Extension を作った際にいくつかハマったことがあったのでメモします。 ページ上での JavaScript 実行結果を取得する scripting.executeScript を使うのですが、関数を指定する形式のみしか値が返ってきません。ファイルを指定する形式と同じページに書かれており、制限が明確に書かれていないため紛らわしいので注意が必要です。 NG 次は実行結果が null として返ってきます。 function getTitle() { return document.title; } // returns null getTitle(); // same result // (() => getTitle())(); async function walkDocumentTitle() { const tabId = getTabId(); const inje
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
TL;DR PDF を画面に埋め込む方法は、iframe, object, embed, Viewer（3rd party library の利用）がある。 ブラウザネイティブの PDF 表示機能はブラウザ差異が大きいため、PDF を canvas や svg に変換して表示するライブラリやビューアーを利用した方が安定する。 しかし 3rd party library / service の利用はバンドルサイズやランタイムでの変換にコストがかかるため、なるべくブラウザネイティブなやり方で PDF を開きつつ、一部ブラウザ向けに対してのみ 3rd party library/service 経由で表示するように分岐させたい。 どのブラウザならブラウザネイティブの機能が使えるかを調べるために、サポート範囲の全端末・全ブラウザで PDF の描画結果を比較・調査した。 はじめに 業務委託エンジニア
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 上記で「127.0.0.1 localhost」とあるように、[IPアドレス] [ホスト名]というフォーマットで書かれます。 HOSTS.TXTが使われていた当時 ( 1970年代 ) では、わずか数百台のホストしかなかったので、ネット上の全てのホスト情報の記載が可能でした。 しかし、インターネットが普及していくにつれてHOSTS.TXTは肥大化していき、1983年には、ホスト数はおよそ数万台になりました。もはやHOSTS.TXTによる名前解決は不可能となったので、現在のようなDNS
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
