

利用想定


IE11 などで表示された際、Edgeで開き直しをユーザーに促したい



方法

microsoft-edgeというURIスキームを利用する。




指定方法




URI スキーム
結果




microsoft-edge:https://example.com/
Microsoft Edge ブラウザーでリンクを開く





html
&lt;a href="microsoft-edge:https://zozo.jp"&gt;Microsoft Edge で開く&lt;/a&gt;




利用想定


IE11 などで表示された際、Edgeで開き直しをユーザーに促したい



方法

microsoft-edgeというURIスキームを利用する。




指定方法




URI スキーム
結果




microsoft-edge:https://example.com/
Microsoft Edge ブラウザーでリンクを開く





html
<a href="microsoft-edge:https://zozo.jp">Microsoft Edge で開く</a>

Microsoft Edgeで開かせるリンクを作る方法



概要

パンくずの正確な書き方とはなんだろうか考えてみる。

単純に見た目だけパンくずにしようとすると下記のようにリストで階層構造を表して、見た目を「パンくず」っぽくする実装になる。

&lt;ol class="breadcrumb"&gt;
  &lt;li&gt;&lt;a href="https://example.jp/"&gt;トップページ&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="https://example.jp/list/"&gt;記事一覧&lt;/a&gt;&lt;/li&gt;
  &lt;li class="current"&gt;&lt;a href="https://example.jp/detail/"&gt;詳細&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;


見た目だけはこれで良いのだが、この HTML 構造だとスクリーンリーダーやボットなどが「パンくず」を辿るこどはできない。


仕様

「正解の仕様」を定めるために、下記の技術仕様を軸に実装する。



リッチリザルト
検索結果に情報を増やすという意味で（SEO 対策としても有）

WAI-ARIA
アクセシビリティの向上として



リッチリザルト

検索エンジンなどの Bot にパンくずリストを認識させたいのであれば、UI は要らない。JSON-LD の構造化データを用意するだけで良い。


JSON-LD
&lt;script type="application/ld+json"&gt;
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "name": "パンくずリスト",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": { "@id": "https://example.jp/", "name": "トップページ" }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": { "@id": "https://example.jp/list/", "name": "記事一覧" }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "https://example.jp/detail",
        "name": "詳細"
      }
    }
  ]
}
&lt;/script&gt;



参考：


Google の検索結果にパンくずリストのリッチリザルト表示をするには構造化データだけ用意すれば良い


ライブラリなどでこの JSON-LD とパンくずリストの UI が簡単に出力されるのであれば管理や実装の手間はない。ただそうでない場合、UI との二重管理になってしまう（また、ドキュメントのサイズも大きくなる）。今回は UI があるので、構造化データも組み合わせておきたい。

microdata でマークアップした場合は下記のようになる。


microdata
&lt;ol itemscope itemtype="https://schema.org/BreadcrumbList"&gt;
  &lt;li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"&gt;
    &lt;a itemprop="item" href="https://example.jp/"&gt;&lt;span itemprop="name"&gt;トップページ&lt;/span&gt;&lt;/a&gt;
    &lt;meta itemprop="position" content="1" /&gt;
  &lt;/li&gt;
  &lt;li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"&gt;
    &lt;a
      itemscope
      itemtype="https://schema.org/WebPage"
      itemprop="item"
      itemid="https://example.com/books/sciencefiction"
      href="https://example.jp/list/"
    &gt;
      &lt;span itemprop="name"&gt;記事一覧&lt;/span&gt;&lt;/a
    &gt;
    &lt;meta itemprop="position" content="2" /&gt;
  &lt;/li&gt;
  &lt;li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"&gt;
    &lt;a
      itemscope
      itemtype="https://schema.org/WebPage"
      itemprop="item"
      itemid="https://example.com/books/sciencefiction"
      href="https://example.jp/deail/"
    &gt;
      &lt;span itemprop="name"&gt;詳細&lt;/span&gt;
    &lt;/a&gt;
    &lt;meta itemprop="position" content="3" /&gt;
  &lt;/li&gt;
&lt;/ol&gt;



このパンくずはリッチリザルトのテストを通っているので Google 検索結果にもパンくずリストのリッチスニペットとして表示されるだろう。

参考：


Google - リッチリザルト テスト
Google - 単一のパンくずリスト



WAI-ARIA

W3C の WAI-ARIA のページに「パンくずリストの例」が記載されていた。

使用するプロパティは下記。




属性
要素
使用法




aria-label="パンくずリスト"
nav
nav 要素で提供されるナビゲーションのタイプを説明するラベル


aria-current="page"
a
最後のリンクに適用され、現在のページを表していることを示す




それを踏まえた実装サンプルは下記の通り。


WAI-ARIA
&lt;nav aria-label="パンくずリスト" class="breadcrumb"&gt;
  &lt;ol&gt;
    &lt;li&gt;
      &lt;a href="https://example.jp/"&gt;トップページ&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="https://example.jp/list/"&gt;記事一覧&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="https://example.jp/detail/" aria-current="page"&gt;詳細&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
&lt;/nav&gt;



ちなみにパンくずの構造間の区切り（セパレーター）は、スクリーンリーダーで読み上げられるのを防ぐために HTML には記述せず、CSS で記述する方が良いとのこと（当該ページのサンプルでは li::before で実装されていた）。


合体


microdata+WAI-ARIA
&lt;nav aria-label="Breadcrumb"&gt;
  &lt;ol itemscope itemtype="https://schema.org/BreadcrumbList"&gt;
    &lt;li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"&gt;
      &lt;a itemprop="item" href="https://example.jp/"&gt;&lt;span itemprop="name"&gt;トップページ&lt;/span&gt;&lt;/a&gt;
      &lt;meta itemprop="position" content="1" /&gt;
    &lt;/li&gt;
    &lt;li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"&gt;
      &lt;a
        itemscope
        itemtype="https://schema.org/WebPage"
        itemprop="item"
        itemid="https://example.com/books/sciencefiction"
        href="https://example.jp/list/"
      &gt;
        &lt;span itemprop="name"&gt;記事一覧&lt;/span&gt;&lt;/a
      &gt;
      &lt;meta itemprop="position" content="2" /&gt;
    &lt;/li&gt;
    &lt;li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"&gt;
      &lt;a
        itemscope
        itemtype="https://schema.org/WebPage"
        itemprop="item"
        itemid="https://example.com/books/sciencefiction"
        aria-current="page"
        href="https://example.jp/deail/"
      &gt;
        &lt;span itemprop="name"&gt;詳細&lt;/span&gt;
      &lt;/a&gt;
      &lt;meta itemprop="position" content="3" /&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
&lt;/nav&gt;




所管

パンくずは、PC と SP のデバイスサイズの差から配置の場所が異なりデザインや役割が大きくことなることも多い。

アクセシビリティを重視する意図があれば、WAI-ARIA に沿ったマークアップを施しデバイス依存しないデザインをするべきだ。アクセシビリティよりも SEO としてパンくずリストが必要なのであればリッチリザルトに載るように JSON-LD で構造化だけ読み込んでおくのも手だ。

これら両方を重視したいとなった場合、最後に記述したような膨大なコードを今現在は記述する必要がありそうだ。


概要

パンくずの正確な書き方とはなんだろうか考えてみる。

単純に見た目だけパンくずにしようとすると下記のようにリストで階層構造を表して、見た目を「パンくず」っぽくする実装になる。

<ol class="breadcrumb">
  <li><a href="https://example.jp/">トップページ</a></li>
  <li><a href="https://example.jp/list/">記事一覧</a></li>
  <li class="current"><a href="https://example.jp/detail/">詳細</a></li>
</ol>


見た目だけはこれで良いのだが、この HTML 構造だとスクリーンリーダーやボットなどが「パンくず」を辿るこどはできない。


仕様

「正解の仕様」を定めるために、下記の技術仕様を軸に実装する。



リッチリザルト
検索結果に情報を増やすという意味で（SEO 対策としても有）

WAI-ARIA
アクセシビリティの向上として



リッチリザルト

検索エンジンなどの Bot にパンくずリストを認識させたいのであれば、UI は要らない。JSON-LD の構造化データを用意するだけで良い。


JSON-LD
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "name": "パンくずリスト",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": { "@id": "https://example.jp/", "name": "トップページ" }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": { "@id": "https://example.jp/list/", "name": "記事一覧" }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "https://example.jp/detail",
        "name": "詳細"
      }
    }
  ]
}
</script>



参考：


Google の検索結果にパンくずリストのリッチリザルト表示をするには構造化データだけ用意すれば良い


ライブラリなどでこの JSON-LD とパンくずリストの UI が簡単に出力されるのであれば管理や実装の手間はない。ただそうでない場合、UI との二重管理になってしまう（また、ドキュメントのサイズも大きくなる）。今回は UI があるので、構造化データも組み合わせておきたい。

microdata でマークアップした場合は下記のようになる。


microdata
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.jp/"><span itemprop="name">トップページ</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a
      itemscope
      itemtype="https://schema.org/WebPage"
      itemprop="item"
      itemid="https://example.com/books/sciencefiction"
      href="https://example.jp/list/"
    >
      <span itemprop="name">記事一覧</span></a
    >
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a
      itemscope
      itemtype="https://schema.org/WebPage"
      itemprop="item"
      itemid="https://example.com/books/sciencefiction"
      href="https://example.jp/deail/"
    >
      <span itemprop="name">詳細</span>
    </a>
    <meta itemprop="position" content="3" />
  </li>
</ol>



このパンくずはリッチリザルトのテストを通っているので Google 検索結果にもパンくずリストのリッチスニペットとして表示されるだろう。

参考：


Google - リッチリザルト テスト
Google - 単一のパンくずリスト



WAI-ARIA

W3C の WAI-ARIA のページに「パンくずリストの例」が記載されていた。

使用するプロパティは下記。




属性
要素
使用法




aria-label="パンくずリスト"
nav
nav 要素で提供されるナビゲーションのタイプを説明するラベル


aria-current="page"
a
最後のリンクに適用され、現在のページを表していることを示す




それを踏まえた実装サンプルは下記の通り。


WAI-ARIA
<nav aria-label="パンくずリスト" class="breadcrumb">
  <ol>
    <li>
      <a href="https://example.jp/">トップページ</a>
    </li>
    <li>
      <a href="https://example.jp/list/">記事一覧</a>
    </li>
    <li>
      <a href="https://example.jp/detail/" aria-current="page">詳細</a>
    </li>
  </ol>
</nav>



ちなみにパンくずの構造間の区切り（セパレーター）は、スクリーンリーダーで読み上げられるのを防ぐために HTML には記述せず、CSS で記述する方が良いとのこと（当該ページのサンプルでは li::before で実装されていた）。


合体


microdata+WAI-ARIA
<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.jp/"><span itemprop="name">トップページ</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a
        itemscope
        itemtype="https://schema.org/WebPage"
        itemprop="item"
        itemid="https://example.com/books/sciencefiction"
        href="https://example.jp/list/"
      >
        <span itemprop="name">記事一覧</span></a
      >
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a
        itemscope
        itemtype="https://schema.org/WebPage"
        itemprop="item"
        itemid="https://example.com/books/sciencefiction"
        aria-current="page"
        href="https://example.jp/deail/"
      >
        <span itemprop="name">詳細</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>




所管

パンくずは、PC と SP のデバイスサイズの差から配置の場所が異なりデザインや役割が大きくことなることも多い。

アクセシビリティを重視する意図があれば、WAI-ARIA に沿ったマークアップを施しデバイス依存しないデザインをするべきだ。アクセシビリティよりも SEO としてパンくずリストが必要なのであればリッチリザルトに載るように JSON-LD で構造化だけ読み込んでおくのも手だ。

これら両方を重視したいとなった場合、最後に記述したような膨大なコードを今現在は記述する必要がありそうだ。

SEOとアクセシビリティを意識した「パンくずリスト」のマークアップの方法



はじめに

IE のサポートが完全に切れるのは 2025 年。しかしながら、当の Microsoft 社が IE を技術的負債をもたらすものとまで表現している。ユーザーのために IE 対応を行うことはユーザーのためにならないだろう。

昨今、世のサービスも IE のサポート終了を表明するようになってきている。モダンブラウザの進化に付いていけない IE 対応のコストなども無視できない問題になってきているのは大きい。各種サービスの表明を自社サービスの IE サポート終了へのエビデンスとすることが出来るかもしれないと思いまとめてみた。


サポート終了日




OS
終了日




Windows 10
2025 年 10 月


Windows 8.1
2023 年 01 月





IE のシェア率


国内シェア: 7.83%
世界シェア: 2%


Webブラウザシェアランキング(2020年12月)


IE から Edge へ転送


「Internet Explorer」（IE）に大きな変更が加えられる。2020年11月以降、ユーザーがIEを使って特定のウェブサイトを開こうとすると、URLの読み込みが拒否され、自動的に「Microsoft Edge」で開かれるようになる。
「IE」で一部のサイトを開くと「Edge」に転送--脱IEの一環で


現在、大企業から個人サイトまで幅広くでこの IE から Edge への自動転送の設定（申請）をすることができるようだ。これを利用することで IE ユーザーがサービスを利用できない状態を作らずに、スムーズに IE 脱却を図ることができるだろう。

参考:
- IEからEdgeへの強制転送設定を個人サイトに適応してもらった話
- IEからEdgeへの転送を開始 | Web品質Blog | ミツエーリンクス




サービス

これまでプログレッシブ・エンハンスメントとして様々なサービスでIEとの互換を保ってきたが、Twitter や YouTube といった大手のサービスでは、既に IE で閲覧することはできなくなっている。


Twitter

“twitter.com”の「IE 11」と旧UIのサポートが終了 ～「GoodTwitter」拡張機能などに影響


今日（6月2日）の朝より、一部の環境で以下のようなエラーメッセージが表示され、“Twitter”が表示できなくなっています。
（注釈）2020年6月2日



サントリー

サントリーウェブサイト IE サポート終了のお知らせ


2020 年 12 月 31 日をもって IE11 でのご利用を非推奨とさせていただきます。





Dropbox

Dropbox における Internet Explorer 11 サポート終了のお知らせ


2020 年 10 月より Dropbox において Internet Explorer 11 のサポートが終了となります。



BASE

Internet Explorer のサポート終了とその後の BASE の進化


2020 年 11 月 15 日をもって BASE は Internet Explorer 11 (以下 IE11) のサポートを終了しました。





はてなブックマーク

Internet Explorer 11 サポート終了ならびに Microsoft Edge 更新についてのお知らせ


2020 年 8 月 13 日を持ちまして、Internet Explorer 11（以下 IE11）のサポートを終了しました。





ABEMA

「ABEMA」Internet Explorer 11 サポート終了のお知らせ


■ サポート終了日
2021 年 4 月 21 日（水）





Amazon

Internet Explorer support ended by Amazon


Amazon は、お客様のエクスペリエンスを向上させるために、ブラウザサポートポリシーの更新を計画しています。2021 年 1 月 31 日以降、InternetExplorer はサポートされなくなります。（翻訳）



SmartHR

Internet Explorer への対応終了のお知らせ


対応終了予定日
2021 年 8 月 17 日





さくらインターネット

さくらインターネット 全サービスにおける Internet Explorer サポート終了のお知らせ | さくらインターネット


2021年4月1日をもって会員メニューと全サービスのコントロールパネルでのご利用を「非推奨」とさせていただきます。





minne

Internet Explorerサポート終了のお知らせ


2021年02月12日
・IE を推奨環境から削除しました。





Backlog

Backlog IE11 サポート終了のお知らせ


現在、Backlog では Internet Explorer 11 (以下 IE11) は動作環境に含まれておりますが、2020年12月31日をもって IE11 のサポートを終了させていただきます。





Microsoft 365

Microsoft 365 アプリの Internet Explorer 11 のサポート終了と Windows 10 での Microsoft Edge レガシー版のサービス終了


2020 年 11 月 30 日 をもって、Microsoft Teams Web アプリにおける IE 11 のサポートを終了します。
2021 年 8 月 17 日 をもって、Microsoft Teams以外の Microsoft 365 アプリおよびサービスにおける IE 11 のサポートを終了します。



Google Workspace（G Suite）

Ending support for IE11 for all Google Workspace apps


Google Workspace will officially stop supporting IE 11 on March 15, 2021.



クラウドワークス


Internet Explorerを推奨ブラウザから除外します
Internet Explorer 11を推奨利用環境の対象外といたします



2021年3月15日（月）をもって、Microsoft Internet Explorer 11（以下IE11）を推奨利用環境の対象外とさせていただきます。





マネーフォワード クラウド


サポート終了日
2021年8月31日（火）





STUDIO

STUDIOサイトがInternet Explorerで閲覧できなくなります


STUDIOは、2021年5月6日以降、全STUDIOサイトのInternet Explorerへの表示を、一律の「非対応ブラウザ表示」に切り替えることを決定しました。






今後、表明があれば追記していく。


ここ近年、IEをサポート外にしたサービス一覧



背景


シンプルなローディングで良い
メンテナビリティーを確保したい
ローディング要素が負荷にならないようにしたい


→ CSS だけでローディングを作成する


ローディング要素の要件


円状の要素が回転しているもの
画像や JavaScript は使用しない



完成イメージ




実装

完成イメージのようなローディングであれば CSS だけで実装するのは容易である。

大まかに重要な定義は以下の通り。


見た目を定義する
回転させる



見た目を定義する

まずは、適当な要素を用意し、上部のみアクシブなカラーになるような border のスタイルを当てていく。



&lt;div class="loading"&gt;&lt;/div&gt;


.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}



丸くする

先述のままだと単なる四角い要素で一般的なローディング要素とは掛け離れている。

これにboder-radius: 50%を指定して丸くする。



.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}



回転させる

回転させたら完成。丸くなった要素を回転させるローディング要素にしか見えなくなる。

spinnerアニメーションを定義して.loadingに追加する。ローディング要素は延々と回転し続けて欲しいので、infiniteの指定を入れる。

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}


↓

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
  animation: spinner 1.5s linear infinite;
}



完成デモ

上記をブラッシュアップした完成でもを置いておく。


  See the Pen 
  Pure CSS Loading Image by hiro (@hiro0218)
  on CodePen.




ローディング要素が表示されているときに「アクションすることが出来ない」ことを伝えられるようなあしらいは必要だと思う。（例: cursor: progress;など）


まとめ

CSSですべて実装しているのでサイズや色の変更が容易である。アニメーションGIFやSVGなどを使って実装してきたが、これならデザイナーとのやりとり（修正と書き出し依頼）を省けるので局所的だが工数も下がるだろう。

リッチなアニメーションをしたい場合は当然 Lottie などのライブラリを利用して視覚的に楽しめるUIが良いだろう。ブランディング的な文脈はあるかもしれないが、ローディング要素はできるだけ人の目にふらさせる時間は短くしたいので簡素な見た目の要素でも良いのではないかと思う。


背景


シンプルなローディングで良い
メンテナビリティーを確保したい
ローディング要素が負荷にならないようにしたい


→ CSS だけでローディングを作成する


ローディング要素の要件


円状の要素が回転しているもの
画像や JavaScript は使用しない



完成イメージ




実装

完成イメージのようなローディングであれば CSS だけで実装するのは容易である。

大まかに重要な定義は以下の通り。


見た目を定義する
回転させる



見た目を定義する

まずは、適当な要素を用意し、上部のみアクシブなカラーになるような border のスタイルを当てていく。



<div class="loading"></div>


.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}



丸くする

先述のままだと単なる四角い要素で一般的なローディング要素とは掛け離れている。

これにboder-radius: 50%を指定して丸くする。



.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}



回転させる

回転させたら完成。丸くなった要素を回転させるローディング要素にしか見えなくなる。

spinnerアニメーションを定義して.loadingに追加する。ローディング要素は延々と回転し続けて欲しいので、infiniteの指定を入れる。

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}


↓

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
  animation: spinner 1.5s linear infinite;
}



完成デモ

上記をブラッシュアップした完成でもを置いておく。


  See the Pen 
  Pure CSS Loading Image by hiro (@hiro0218)
  on CodePen.




ローディング要素が表示されているときに「アクションすることが出来ない」ことを伝えられるようなあしらいは必要だと思う。（例: cursor: progress;など）


まとめ

CSSですべて実装しているのでサイズや色の変更が容易である。アニメーションGIFやSVGなどを使って実装してきたが、これならデザイナーとのやりとり（修正と書き出し依頼）を省けるので局所的だが工数も下がるだろう。

リッチなアニメーションをしたい場合は当然 Lottie などのライブラリを利用して視覚的に楽しめるUIが良いだろう。ブランディング的な文脈はあるかもしれないが、ローディング要素はできるだけ人の目にふらさせる時間は短くしたいので簡素な見た目の要素でも良いのではないかと思う。

1つのdivとCSSだけでローディングを作る方法



TL;DR


パフォーマンスの重要性をおさらい
Scroll Jank とは
60fpsとリフレッシュレート
スクロールイベントを最適化する



パフォーマンスの重要性をおさらい








検索エンジンと広告収益事例

GoogleとMicrosoftの検索エンジンチームによって2009年に発表された調査

レスポンスの遅延が招く収益への影響:


0.5秒遅延 → -1.2％
1.0秒遅延 → -2.8%
2.0秒遅延 → -4.3%





スクロールイベントは負荷が高い

フロントエンドの実装をしたことのある方は、スクロールイベントを使った実装をしたことも多いはず。

スクロールイベントは発生頻度が高いため、負荷が高くなりがちです。スクロールイベントのリスナーは適切に実装しないとScroll Jankの発生・UXの低下を招いてしまいます。



パフォーマンスを出来るだけ下げないような実装事例を紹介していきます。


Scroll Jank とは

ページのスクロールをした際に、スクロールが詰まったような遅延を
「Scroll Jank」と呼びます。


Scroll Jankが起きるパティーン

下記の2点をピックアップします。


スクロールイベント内でpreventDefault()が実行されている可能性がある
スクロールイベント内で要素のサイズや位置を取得する処理がある（Forced Synchronous Layout が発生する可能性がある）



スクロールイベント内でpreventDefault()が実行されている可能性がある

可能性がある…?🤔

例えば、スクロールイベント内でpreventDefault()が実行されたら、スクロール処理は中止されます。しかしながら、ブラウザ側はイベント内でpreventDefault()が実行されるかどうかを事前に判定できません。（そのイベントが実行が終了するまで判定ができない）
そのため、イベント内の処理が終了するのを待つ（＝遅延が発生する）ことになります。

いわゆるScroll Jank 発生原因のほとんどはコレです。


スクロールイベント内で要素のサイズや位置を取得する処理がある（Forced Synchronous Layout が発生する可能性がある）

Forced Synchronous Layoutはレイアウト計算処理で発生します。（「レイアウト処理」が実行されないと期待する値が分からない系の処理）
ただ、近年、こういった処理を実施しなければならない処理は、Intersection Observer や position: sticky を使うことでスマートかつ良いパフォーマンスで実装できるため、減りつつある（はず）。


60fpsとリフレッシュレート

一般的な端末は画面を1秒間に60回リフレッシュする
→ 間隔は、1000ミリ秒 / 60 = およそ16.66ミリ秒 

この間隔からズレるとフレームレートが低下して、画面上の描画がブレる（ジャンクが発生）



https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=ja



スクロールイベントを最適化する


スクロールイベント内でpreventDefault()がされてない事をブラウザに教える


Event Listener Options  passive


この指定で「処理がpreventDefault()を実行していない」という事が明示できるようになった
→ イベント内の処理が終了を待たず判定が可能になった


指定方法

addEventListenerの第三引数に{passive: true}を指定するだけ

document.addEventListener(‘scroll’, function() {
  // SUGOI SHORI
}, {passive: true});



互換性の問題

Internet Explorer「こんにちは」

https://caniuse.com/#feat=passive-event-listener

非対応ブラウザで同処理を実行すると、元々のuseCaptureがtrueになってしまう
一応、このpassiveが使えるかどうかの検出は可能

/* "passive" が使えるかどうかを検出 */
var passiveSupported = false;

try {
  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveSupported = true; } }));
} catch(err) {}

/* リスナーを登録 */
var elem = document.getElementById('elem');

elem.addEventListener('touchmove', function listener() {
  /* do something */
}, passiveSupported ? { passive: true } : false);


未対応ブラウザにOpera miniがあるが、IEのみ回避すれば良いのであれば、単純に下記のように書くことができる。

var elem = document.getElementById('elem');

elem.addEventListener('touchmove', function listener() {
  /* do something */
}, !document.documentMode ? { passive: true } : false);


※document.documentModeでIEかどうかを判定


jQueryでpassiveを使う方法は…？

ない


スクロールイベントの処理を間引く


setTimeout

間引き処理として、setTimeoutが広く利用されてきた。
次回の処理をスケジューリングし処理を頻繁に実行させないようにする事ができる。


ブラウザ側の準備に関わらず必ず実行される
タブが非アクティブ時でも実行される


var timer = null;
var FPS = 1000 / 60;

function func() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      // YABAI SHORI
    }, FPS);
}

document.addEventListener('scroll', func, {passive: true});


※delayに渡す値を  1000 / 60 (16.66ms) にしている（60fps相当）


throttle

lodash や Underscore.js に throttle 関数がある

先述のsetTimeoutでの実装と目的は同じ

import { throttle } from 'lodash';
const FPS = 1000 / 60;

document.addEventListener('scroll', throttle(func, FPS), {passive: true});



requestAnimationFrame

処理を待つように時間指定するのではなく、次のフレームのレンダリングが準備が整った時に呼び出される。
ほかの処理に割り込まれてフレームのレンダリングが遅延することなく適切なタイミングで呼び出される。


ブラウザの画面リフレッシュと同じタイミングで呼び出される
画面が非アクティブ時には実行されない
なにげにIE11でも使える


var ticking = false;

function func() {
  if (!ticking) {
    requestAnimationFrame(function() {
      ticking = false;
      // GREAT SHORI
    });
    ticking = true;
  }
}

document.addEventListener('scroll', func, {passive: true});



デモ

See the Pen requestAnimationFrame vs throttle vs setTimeout by kikuchi hiroyuki (@kikuchi-hiroyuki) on CodePen.



setTimeoutだけ異常にもたつく




猫でもわかるスクロールイベントパフォーマンス改善ポイント2018

Qiitaで記事にCodePenが埋め込めるようになりました との事なので、CodePenを埋め込んでみる。


仕様


プレビュー時


現在のところ、エディタのプレビューには貼り付けたCodePenは表示されない仕様となっております。ご了承ください。


確かにプレビュー時は以下のような表示になっている。






alert()を表示させるサンプル

See the Pen Qiita embed test by kikuchi hiroyuki (@kikuchi-hiroyuki) on CodePen.



今日現在(2018/01/18 9:27)、記事を表示するとCodePen内のalertが表示されて鬱陶しい。


感想

動作サンプルを見せる時めっちゃ便利なんだけれど、その目的外で遊ばれないか心配。


QiitaにCodePenを埋め込んで遊んでみる




背景

今期は、担当案件にてパフォーマンスを意識する機会が多くありました。

色々と行った取り組みの中に、ファーストビュー表示の高速化のため「ビューポート内に存在しないコンテンツを非同期で読み込みする」というものがありました。これは、ページスクロールの過程で対象の要素が画面に表示された際に対応したコンテンツに必要な情報をAjaxで取得してコンテンツを非同期的に構築していくというものです。

コンテンツの非同期的な読込例としては、オートページャーやTwitterのタイムラインなどを想像して頂けると理解しやすいかと思います。その他、画像の遅延読み込みなどでこういった手法がよく使われています。

一部、今回の取り組みも交えて、要素監視について手法を紹介したいと思います。


よくある事例

以下のような要素検知処理はよく見かけるかと思います。


事例1
$(window).on('scroll.target-show', function () {
  var targetTop = $('#target').offset().top;
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();

  if (scrollTop &gt; (targetTop - windowHeight)) {
    // 処理
    // ...

    // イベント解除
    $(window).off('scroll.target-show');
  }
});



※jQueryオブジェクトのキャッシュなどは割愛します

パフォーマンスを意識した場合、上記のコードはどうでしょうか。上記の例では、要素が検知できた際にイベント解除しているとはいえ、それでもスクロールイベント毎に処理が必要以上に走ってしまっており、パフォーマンスはよくありません。

宗教上の理由でどうしてもスクロールイベントを使って実装せざるを得ない場合は、負荷を下げるために後述のように間引き処理を行いながら使うと良いです。


スクロール処理を間引く

色々と手法はありますが、もし既にプロダクトで lodashを使用しているのであれば、以下のような使用方法で簡単にスクロール処理を間引くことが出来ます。


lodash.throttle
_.throttle(func, [wait=0], [options={}])




事例2
import { throttle } from 'lodash';

$(window).on('scroll.target-show', throttle(function () {
  var targetTop = $('#target').offset().top;
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();

  if (scrollTop &gt; (targetTop - windowHeight)) {
    // 処理
    // ...

    // イベント解除
    $(window).off('scroll.target-show');
  }
}, 250));



スクロールイベントはスクロール時に大量にイベントを発火させますが、上記のように実装するだけで250ミリ秒に1回だけしか当該処理が呼び出されなくなるため、多少はパフォーマンスの低下を抑制できます。
また、lodashのような外部スクリプトを使わずにsetTimeoutやrequestAnimationFrameを使って自前で処理を間引くことも可能です。


ベストプラクティス

スクロールイベントは実行回数が非常に多いです。多用すると以下のような問題点があります。


Scroll Jank を引き起こす可能性がある (preventDefault()が呼ばれている場合等）
サイズや位置を取得する場合 Forced Synchronous Layout が発生する可能性がある
参考 - What forces layout / reflow



これまで紹介したスクロールイベントを使った要素検知ではoffset()やscrollTop()などを実行していました。これらの処理は、対象DOMの位置を取得するため同期的にLayout計算が発生します。大量のイベントが発火してしまうスクロールイベント内で、これらの処理を行うとスクロールを阻害してしまいますし、その都度計算処理を行わせるためパフォーマンスも良くありません。


Intersection Observer を使う

Intersection ObserverというAPIを使えば、スクロールイベントを使用せず指定要素を監視する事ができます。

ここ最近は利用可能なブラウザも増え、Intersection Observerの利用も多くなってきていると思います。（IE/Safariは少し忘れておいてください…）




引用: https://caniuse.com/#feat=intersectionobserver



実装例

これまでの実例をIntersection Observerを使って実装すると、ざっくり以下のような形で実装が可能です。

var clientHeight = document.documentElement.clientHeight;

var observer = new IntersectionObserver(function(changes) {
  for (let change of changes) {
    var rect = change.target.getBoundingClientRect();
    var isShow = (0 &lt; rect.top &amp;&amp; rect.top &lt; clientHeight) || (0 &lt; rect.bottom &amp;&amp; rect.bottom &lt; clientHeight) || (0 &gt; rect.top &amp;&amp; rect.bottom &gt; clientHeight);

    if (isShow) {
      // 処理
      // ...

      // イベント解除
      observer.unobserve(change.target);
    }
  }
});

// 対象の要素を監視対象にする（NodeListの場合はループで都度渡す）
var target = document.querySelector('#target');
observer.observe(target);


これで指定要素がビューポートに現れたときに処理を実行することができます。
さらにオプションでthreshold,rootMarginなど監視条件を細かく設定できますが割愛です。


サンプル


https://codepen.io/callahad/full/YxXpyN/



Internet Explorer と Safari の対応は？

そろそろ IE と Safari を思い出してください。

現状、これらのブラウザでIntersection Observerはサポートされていません。これらのブラウザでIntersection Observerを利用する場合は、Polyfillが必要となります。

例えば intersection-observer-polyfill を利用した場合は、下記の記述でモダンブラウザと同様にIntersection Observerを利用することができます。


es6
import IntersectionObserver from 'intersection-observer-polyfill';




global
&lt;script src="intersection-observer-polyfill/dist/IntersectionObserver.js"&gt;&lt;/script&gt;
&lt;script&gt;
    (function () {
        var observer = new IntersectionObserver(function () {});
    })();
&lt;/script&gt;



レガシーブラウザでも同じ動きを同じ記述でさせたい場合はPolyfillを使うと便利です。


担当案件の導入事例

結論から述べると、今回担当案件では、Intersection Observerの導入はできませんでした。

理由としては、以下の通りです。


プロダクトの Internet Explorer/Safari 利用シェアが全体の7割を占めている (スマホ含む)
影響範囲の少ないようにしたい


案件のシェア率を鑑みるとPolyfillへ流す割合の方が大きくなってしまいます。また、Internet Explorer と Safari の場合、確認する環境が Windows/macOS/iOS と複数環境にまたがってしまうため、テスト工数が通常よりも多くなります。今回のスケジュールはタイトであり、出来るだけ影響範囲を少なくしたかったので、Polyfill (Intersection Observer)の導入は今回は断念しました。


どうしたのか

Intersection Observerが使えないため、代替ライブラリを導入することにしました。

「サイズが小さく、依存関係が少なくて、幅広いブラウザに対応している」ことを条件として、色々と試した結果、in-view.jsというライブラリを導入することにしました。コンテンツの非同期読み込みの足がかりとして、まずは in-view.js を利用することにしました。

この in-view.js は内部的にはIntersection Observerは使わず、Mutation Observerを使って要素監視をしているようです。先述で紹介したのと同じようにthrottleで処理を間引きながら、windowのload/resize/scrollイベントで100ミリ秒に1回の頻度で監視しているようでした。

下記のようにシンプルに要素監視のイベントを記述する事ができます。


in-view.jsを利用した場合
inView('#target').once('enter', doSomething);



Intersection Observerに比べてパフォーマンス面で少々不安は残りましたが、リリース後も大きな問題などは発生していません。今後、パフォーマンスの定期的な監視とブラウザのシェア状況などを考慮してIntersection Observerの利用を改めて考えていきたいと思っています。


おわり

スクロールイベントは慎重に使っていきましょう。もしこれから新規案件などで要素監視を行うのであれば、Intersection Observerを使うのがベストプラクティスだと思います。

レガシーなプロダクトでも少しずつモダンな実装を取り込み、プロダクトの新陳代謝を良くする事は重要です。パフォーマンス改善はもちろんですが、保守開発をしやすくする開発環境を構築していきましょう


参考サイト


in-view
intersection-observer-polyfill
What forces layout / reflow

Intersection Observerを触ってみた 
https://caniuse.com/#feat=intersectionobserver
MDN Web Docs - Intersection Observer
Intersection Observer comes to Firefox





背景

今期は、担当案件にてパフォーマンスを意識する機会が多くありました。

色々と行った取り組みの中に、ファーストビュー表示の高速化のため「ビューポート内に存在しないコンテンツを非同期で読み込みする」というものがありました。これは、ページスクロールの過程で対象の要素が画面に表示された際に対応したコンテンツに必要な情報をAjaxで取得してコンテンツを非同期的に構築していくというものです。

コンテンツの非同期的な読込例としては、オートページャーやTwitterのタイムラインなどを想像して頂けると理解しやすいかと思います。その他、画像の遅延読み込みなどでこういった手法がよく使われています。

一部、今回の取り組みも交えて、要素監視について手法を紹介したいと思います。


よくある事例

以下のような要素検知処理はよく見かけるかと思います。


事例1
$(window).on('scroll.target-show', function () {
  var targetTop = $('#target').offset().top;
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();

  if (scrollTop > (targetTop - windowHeight)) {
    // 処理
    // ...

    // イベント解除
    $(window).off('scroll.target-show');
  }
});



※jQueryオブジェクトのキャッシュなどは割愛します

パフォーマンスを意識した場合、上記のコードはどうでしょうか。上記の例では、要素が検知できた際にイベント解除しているとはいえ、それでもスクロールイベント毎に処理が必要以上に走ってしまっており、パフォーマンスはよくありません。

宗教上の理由でどうしてもスクロールイベントを使って実装せざるを得ない場合は、負荷を下げるために後述のように間引き処理を行いながら使うと良いです。


スクロール処理を間引く

色々と手法はありますが、もし既にプロダクトで lodashを使用しているのであれば、以下のような使用方法で簡単にスクロール処理を間引くことが出来ます。


lodash.throttle
_.throttle(func, [wait=0], [options={}])




事例2
import { throttle } from 'lodash';

$(window).on('scroll.target-show', throttle(function () {
  var targetTop = $('#target').offset().top;
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();

  if (scrollTop > (targetTop - windowHeight)) {
    // 処理
    // ...

    // イベント解除
    $(window).off('scroll.target-show');
  }
}, 250));



スクロールイベントはスクロール時に大量にイベントを発火させますが、上記のように実装するだけで250ミリ秒に1回だけしか当該処理が呼び出されなくなるため、多少はパフォーマンスの低下を抑制できます。
また、lodashのような外部スクリプトを使わずにsetTimeoutやrequestAnimationFrameを使って自前で処理を間引くことも可能です。


ベストプラクティス

スクロールイベントは実行回数が非常に多いです。多用すると以下のような問題点があります。


Scroll Jank を引き起こす可能性がある (preventDefault()が呼ばれている場合等）
サイズや位置を取得する場合 Forced Synchronous Layout が発生する可能性がある
参考 - What forces layout / reflow



これまで紹介したスクロールイベントを使った要素検知ではoffset()やscrollTop()などを実行していました。これらの処理は、対象DOMの位置を取得するため同期的にLayout計算が発生します。大量のイベントが発火してしまうスクロールイベント内で、これらの処理を行うとスクロールを阻害してしまいますし、その都度計算処理を行わせるためパフォーマンスも良くありません。


Intersection Observer を使う

Intersection ObserverというAPIを使えば、スクロールイベントを使用せず指定要素を監視する事ができます。

ここ最近は利用可能なブラウザも増え、Intersection Observerの利用も多くなってきていると思います。（IE/Safariは少し忘れておいてください…）




引用: https://caniuse.com/#feat=intersectionobserver



実装例

これまでの実例をIntersection Observerを使って実装すると、ざっくり以下のような形で実装が可能です。

var clientHeight = document.documentElement.clientHeight;

var observer = new IntersectionObserver(function(changes) {
  for (let change of changes) {
    var rect = change.target.getBoundingClientRect();
    var isShow = (0 < rect.top && rect.top < clientHeight) || (0 < rect.bottom && rect.bottom < clientHeight) || (0 > rect.top && rect.bottom > clientHeight);

    if (isShow) {
      // 処理
      // ...

      // イベント解除
      observer.unobserve(change.target);
    }
  }
});

// 対象の要素を監視対象にする（NodeListの場合はループで都度渡す）
var target = document.querySelector('#target');
observer.observe(target);


これで指定要素がビューポートに現れたときに処理を実行することができます。
さらにオプションでthreshold,rootMarginなど監視条件を細かく設定できますが割愛です。


サンプル


https://codepen.io/callahad/full/YxXpyN/



Internet Explorer と Safari の対応は？

そろそろ IE と Safari を思い出してください。

現状、これらのブラウザでIntersection Observerはサポートされていません。これらのブラウザでIntersection Observerを利用する場合は、Polyfillが必要となります。

例えば intersection-observer-polyfill を利用した場合は、下記の記述でモダンブラウザと同様にIntersection Observerを利用することができます。


es6
import IntersectionObserver from 'intersection-observer-polyfill';




global
<script src="intersection-observer-polyfill/dist/IntersectionObserver.js"></script>
<script>
    (function () {
        var observer = new IntersectionObserver(function () {});
    })();
</script>



レガシーブラウザでも同じ動きを同じ記述でさせたい場合はPolyfillを使うと便利です。


担当案件の導入事例

結論から述べると、今回担当案件では、Intersection Observerの導入はできませんでした。

理由としては、以下の通りです。


プロダクトの Internet Explorer/Safari 利用シェアが全体の7割を占めている (スマホ含む)
影響範囲の少ないようにしたい


案件のシェア率を鑑みるとPolyfillへ流す割合の方が大きくなってしまいます。また、Internet Explorer と Safari の場合、確認する環境が Windows/macOS/iOS と複数環境にまたがってしまうため、テスト工数が通常よりも多くなります。今回のスケジュールはタイトであり、出来るだけ影響範囲を少なくしたかったので、Polyfill (Intersection Observer)の導入は今回は断念しました。


どうしたのか

Intersection Observerが使えないため、代替ライブラリを導入することにしました。

「サイズが小さく、依存関係が少なくて、幅広いブラウザに対応している」ことを条件として、色々と試した結果、in-view.jsというライブラリを導入することにしました。コンテンツの非同期読み込みの足がかりとして、まずは in-view.js を利用することにしました。

この in-view.js は内部的にはIntersection Observerは使わず、Mutation Observerを使って要素監視をしているようです。先述で紹介したのと同じようにthrottleで処理を間引きながら、windowのload/resize/scrollイベントで100ミリ秒に1回の頻度で監視しているようでした。

下記のようにシンプルに要素監視のイベントを記述する事ができます。


in-view.jsを利用した場合
inView('#target').once('enter', doSomething);



Intersection Observerに比べてパフォーマンス面で少々不安は残りましたが、リリース後も大きな問題などは発生していません。今後、パフォーマンスの定期的な監視とブラウザのシェア状況などを考慮してIntersection Observerの利用を改めて考えていきたいと思っています。


おわり

スクロールイベントは慎重に使っていきましょう。もしこれから新規案件などで要素監視を行うのであれば、Intersection Observerを使うのがベストプラクティスだと思います。

レガシーなプロダクトでも少しずつモダンな実装を取り込み、プロダクトの新陳代謝を良くする事は重要です。パフォーマンス改善はもちろんですが、保守開発をしやすくする開発環境を構築していきましょう


参考サイト


in-view
intersection-observer-polyfill
What forces layout / reflow

Intersection Observerを触ってみた 
https://caniuse.com/#feat=intersectionobserver
MDN Web Docs - Intersection Observer
Intersection Observer comes to Firefox

パフォーマンスを意識した要素監視について

死ぬほど長いクエリパラメータがあるページの調査で使用しました。

GETパラメータに対して処理するロジックでも使用できると思います。


コード


code
function getQueryParams() {
  var params = {};
  var url = window.location.href;

  url.replace(/([^(?|#)=&amp;]+)(=([^&amp;]*))?/g, function($0,$1, $2, $3) {
    if (typeof $3 === 'undefined') return;
    params[$1] = $3;
  });

  return params;
}

// 取得
var params = getQueryParams();




結果
{
   type: "",
   tag_id: "",
   tag_off: "",
   dcolor: "1",
   dstore: "1",
   p_isize: "2",
}




死ぬほど長いクエリパラメータがあるページの調査で使用しました。

GETパラメータに対して処理するロジックでも使用できると思います。


コード


code
function getQueryParams() {
  var params = {};
  var url = window.location.href;

  url.replace(/([^(?|#)=&]+)(=([^&]*))?/g, function($0,$1, $2, $3) {
    if (typeof $3 === 'undefined') return;
    params[$1] = $3;
  });

  return params;
}

// 取得
var params = getQueryParams();




結果
{
   type: "",
   tag_id: "",
   tag_off: "",
   dcolor: "1",
   dstore: "1",
   p_isize: "2",
}

表示ページのGETパラメータをObjectで取得する方法



条件


アドオンの利用はなし
再起動後は、開いているタブなど維持した状態



方法

下記をアドレスバーに打ち込めばOK

chrome://restart



Google Chromeをアドオンなしで再起動する方法

husky v4 から v6 へ移行する手順の覚書

[Next.js] Qiita と Zenn の 記事一覧（フィード）を取得する方法

[Next.js] Google Adsenseを表示させる方法

[HTML] meta keywords の記述は SEO として不要

竈門炭治郎をCSSだけで再現する

<b>と<strong>の違い

[macOS] iPhoneシミュレーターをインストールする方法

[CSS] :not()セレクタを複数指定する方法

[CSS] 究極のIE対策

[JavaScript] IEでconsole.logでエラーが発生する問題の対策


 概要
&lt;&gt;&lt;/&gt;ってなんだっけ…となった。

      
        
        class Hoge extends React.Component {
  render() {
    return (
      &lt;&gt;
        &lt;span&gt;Hello&lt;/span&gt;
      &lt;/&gt;
    );
  }
}


      
      親要素が不要なケースで使用するFragmentとしての認識はあったが、これをどういう使い分けをするのか知らなかった。（グーグラビリティが悪すぎて検索で...

概要
<></>ってなんだっけ…となった。

      
        
        class Hoge extends React.Component {
  render() {
    return (
      <>
        <span>Hello</span>
      </>
    );
  }
}


      
      親要素が不要なケースで使用するFragmentとしての認識はあったが、これをどういう使い分けをするのか知らなかった。（グーグラビリティが悪すぎて検索で...

[React] `<></>`とは何のことか


 環境

Nuxt.js: 2.14.7
@vue/composition-api: 0.6.7


 方法
Nuxtのcontextがsetup内で直接取れないので、rootからさかのぼって参照する。

      
        
        import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  setup(_, { root }) {
    console.log(root.context.app);
  }
});


      
      

@vue/composition-api + TSX で Nuxt.js の context.app にアクセスする


 背景
stylelint --fixを実行したりエディタの拡張で各々がフォーマットをかける運用（Recommend）にすると実行されなかったコードが別の修正の時にフォーマットされてノイズになってしまう。レビュー時に無駄な差分も出てしまうと見落としなどでバグも発生しかねない。
これらの理由からコミット時に強制フォーマットをかける。

 必要なパッケージ

      
        
        npm i -D stylelint husky lint-staged


      
      
stylelint
husky
lint-staged

stylelintの定...

stylelintをpre-commitで実行する


 環境


ejs-easy-loader: "^0.1.4",

html-webpack-plugin: "^4.5.0",

webpack: "^4.44.2",


 注入方法

 ファイル個別

      
        
        // src/config.js
module.exports = {
  hoge: 'ほげ',
};


      
      
      
        
        // webpack.config.js
const config = require('./src/config');

new HtmlWebpa...

EJSにデータを注入する


 できたもの
https://github.com/hiro0218/LP-Boilerplate

 作った背景
静的なLPを簡単に作る開発環境が欲しい。
環境構築が面倒でペライチLPでも Nuxt.js などの整った環境でnuxt generateすることがしばしばあった。
既存アプリに組み込む形で、静的でライブラリなどが含まれないようなLP作成が必要になったので環境を作った。

 利用技術
特に凝った構成ではない。2020年感もない。

EJS
ESLint
PostCSS
Prettier
stylelint
TypeScript

webpack

webpack-dev-s...

LPをサクッと作れるboilerplate作りました


 結論
パンくずリストを模した UI を作り込む必要はなく、表示されない構造化データをマークアップだけで評価される。

デザイン上、パンくずリストの UI をサイト上に作りたくない場合でも構造化データを用意するだけで良いのは助かる。

 記述例
JSON-LDで記述したい場合は以下のような記述をする。

      
        
        &lt;script type="application/ld+json"&gt;
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    ...

結論
パンくずリストを模した UI を作り込む必要はなく、表示されない構造化データをマークアップだけで評価される。

デザイン上、パンくずリストの UI をサイト上に作りたくない場合でも構造化データを用意するだけで良いのは助かる。

 記述例
JSON-LDで記述したい場合は以下のような記述をする。

      
        
        <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    ...

Home

Recent Articles

husky v4 から v6 へ移行する手順の覚書

[Next.js] Qiita と Zenn の記事一覧（フィード）を取得する方法

[Next.js] Google Adsenseを表示させる方法

[HTML] meta keywords の記述は SEO として不要

竈門炭治郎をCSSだけで再現する

Updated Articles

<b>と<strong>の違い

[macOS] iPhoneシミュレーターをインストールする方法

[CSS] :not()セレクタを複数指定する方法

[CSS] 究極のIE対策

[JavaScript] IEでconsole.logでエラーが発生する問題の対策

Qiita: Recent Articles

Microsoft Edgeで開かせるリンクを作る方法

SEOとアクセシビリティを意識した「パンくずリスト」のマークアップの方法

ここ近年、IEをサポート外にしたサービス一覧

1つのdivとCSSだけでローディングを作る方法

猫でもわかるスクロールイベントパフォーマンス改善ポイント2018

Zenn: Recent Articles

[React] `<></>`とは何のことか

@vue/composition-api + TSX で Nuxt.js の context.app にアクセスする

stylelintをpre-commitで実行する

EJSにデータを注入する

LPをサクッと作れるboilerplate作りました

husky v4 から v6 へ移行する手順の覚書

[Next.js] Qiita と Zenn の 記事一覧（フィード）を取得する方法

[Next.js] Google Adsenseを表示させる方法

[HTML] meta keywords の記述は SEO として不要

竈門炭治郎をCSSだけで再現する

<b>と<strong>の違い

[macOS] iPhoneシミュレーターをインストールする方法

[CSS] :not()セレクタを複数指定する方法

[CSS] 究極のIE対策

[JavaScript] IEでconsole.logでエラーが発生する問題の対策

Microsoft Edgeで開かせるリンクを作る方法

SEOとアクセシビリティを意識した「パンくずリスト」のマークアップの方法

ここ近年、IEをサポート外にしたサービス一覧

1つのdivとCSSだけでローディングを作る方法

猫でもわかるスクロールイベントパフォーマンス改善ポイント2018

[React] `<></>`とは何のことか

@vue/composition-api + TSX で Nuxt.js の context.app にアクセスする

stylelintをpre-commitで実行する

EJSにデータを注入する

LPをサクッと作れるboilerplate作りました

[Next.js] Qiita と Zenn の記事一覧（フィード）を取得する方法