はてなブックマーク

Playwright を使用Windows でも Safari のブラウザテストができます。正確には、WebKit ブラウザでサイトを開けます。 使用するのは、Microsoft が開発している Playwright です。 Playwright は、主に E2E テストの自動化などで使用します。ただ、OS に関係なく Chromium、Firefox、WebKit のブラウザでサイトを開くこともできます。 この記事は Test Your Site In Every Browser を参考にし、試したことを書いています。詳しい説明は、元記事をご覧ください。YouTube での解説もあります。 やり方Windows で Safari のブラウザテストを開始するまで、全部で 6 ステップあります。早ければ 2 ~ 3 分で終わります。 2 回目以降は、6 ステップ目だけでテストができます。 ス

メリットとデメリットGoogle Fonts をサーバーに設置し、<link rel="preload"> で読み込む方法の紹介です。 この方法には、以下のメリットがあります。 Google Fonts の CDN から読み込む場合は、その CDN との接続が必要。フォントファイルをサーバーに設置すれば接続が不要になるため、理論上はパフォーマンスに優れている。<link rel="preload"> により、レンダリングがブロックされにくくなる。<link rel="preload"> により、テキストのちらつきを抑制できる。Web フォントが読み込まれるまで代替フォントが表示される FOUT、Web フォントが読み込まれるまでテキストが表示されない FOIT の抑制は、CLS の抑制にもつながる。ただし、デメリットもあります。 サイトを CDN で配信していない場合は、フォントファイルを

はじめに多くのサイトでよく目にするのが、画面内に入った要素が動くアニメーション。 下にスクロールしていくと「画像などがふんわりと表示」「左や右から出てくる」「小さかったものが大きくなる」など、サイトを彩るアニメーションを見かけます。 このようなアニメーションは、以前は下記のようなスクロールイベントで実現していました。 // jQuery の場合 $(window).scroll(function () { 処理を書く; }); ただ、スクロールイベントは、ブラウザに負荷をかけてしまいます。というのも、スクロールをする度に、処理がなされてしまうためです。何も対策をしなければ、重いサイトになる弊害がありました。また、その対策には限度がありました。 そこで最近使われているのが、Intersection observer 。ブラウザに負荷をかけずに、スクロールで画面内に入った要素にアニメーションを

// 3 番目の function 以降をコピーする場合は関数名を throttle にします function throttle(delay, callback, options) { // あとは変更する必要はありません } そして、JavaScript を書きます。今回は throttle-debounce/throttle.js の function 以降をコピーしたと仮定します。 // コピーしたthrottle-debounce/throttle.js function throttle(delay, callback, options) { // コピーした内容 } const { body } = document; const className = 'scroll-down'; let previousScrollY = 0; const removeBodyClass

Super Progressive Web Apps とは？Google が推進しているのが PWA 。PWA とは、Web サイトをアプリにする仕組みです。 この PWA を簡単に WordPress に実装するできるのが、プラグインの Super Progressive Web Apps 。WordPress に PWA を実装するための優れたプラグインです。 PWA のホーム画面への追加機能・キャッシュ機能・オフライン機能と、欲しい機能に対応。また、プラグインの OneSignal – Free Web Push Notifications と連携すれば、PWA の Push 通知まで可能です。 さらに、設定が極めて簡単なことも特徴です。今日 WordPress を始めた方も、迷わず設定できるはずです。その上、PWA への対応が不完全な iOS 向けに、自動的に対策をしてくれます。

.img-wrap { overflow: hidden; position: relative; } .img-wrap::before { animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; } @keyframes img-wrap { 100% { transform: translateX(100%); } } 上記 CSS の translateX(100%) を translateX(-100%) と値をマイナスにすると、右から表示するアニメーションに。

この Google 検索に似た無限スクロールを WordPress に実装する方法をご紹介します。 まずは、実際の動作をご覧ください。Google 検索と同じように、「もっと見る」ボタンのクリック・タップで次のページが読み込まれます。 �說Infinite Scroll を使用無限スクロールを導入する際は、下記の 2 つを考慮しないといけません。 クローラーに配慮するユーザーの使い勝手に配慮するクローラーは無限スクロールが苦手です。そのため、検索エンジンとの相性を考慮した無限スクロールのベストプラクティスに沿う必要があります。 また、自動的に無限スクロールが始まると、サイトの使い勝手が悪くなる恐れがあります。「フッターを見たいのに、見られない！」と私は何度も思ったことがあります。 この 2 つとも考慮できるのが、JavaScript ライブラリの Infinite Scroll です。設

何もせずにスタイルシートを <link> で読み込む場合は、レンダリングをブロックしてしまいます。 また、rel="preload" を使えばレンダリングブロックは防げますが、他のリソースの読み込みからブラウザのリソースを奪うという代償が伴います。 そのため、可能な限り CSS のサイズを小さくし、<style> を使いインラインで CSS を読み込むのが一般的です。 ただ、どうしても CSS のサイズが大きくなる場合は、重要ではない CSS を非同期で読み込むといいかもしれません。<link> に 2 つの属性を付けるだけでスタイルシートを非同期で読み込めます。 <link rel="stylesheet" href="スタイルシートのパス" media="print" onload="this.media='all'" /> <link> に media="print" と onloa

メリット多くのサイトやサービスが導入しているのが PWA 。 Google が推進する PWA は、ウェブサイトとアプリのメリットを併せ持つウェブアプリの仕組みです。 Twitter や Instagram 、日経電子版などが導入し、訪問数やページビューを高めています。 成功例として真っ先に挙げられるのが Twitter 。Twitter Lite として提供されている PWA 版 Twitter は、閲覧ページ数やツイートの投稿数が高まっています。 また、通常のアプリのサイズは約 72MB に対し、Twitter Lite は 約 0.16MB しかありません。それでいて使い勝手は通常のアプリとほぼ変わりません。 参考：PWA 対応した Twitter は毎日 100 万のユーザーがホーム画面アイコン経由 #IO17JP 日本のサイトでは、楽天レシピが成功例として 2017 年の Goo