はじめに

Twitter の埋め込みツイート(Embed tweet)を Lazy load させる方法

TL;DR

  • ApoorvSaxena/lozad.js を CDN などから読み込み
  • カスタムハンドラ内で埋め込みツイート作成に必要な要素(blockquote, script)を 作成/追加
  • いきなりイベントが大量発火しないように min-height などを設定しておく
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 前置き: 埋め込みツイートについて
    2. 大量の埋め込みツイートを表示したい場合の問題点
    3. 本題: 埋め込みツイートを Lazy Load させる
    4. 簡単な解説
      1. カスタムイベントハンドラの設定
      2. 初期読み込み時の監視イベント発火タイミングの制御
    5. Tips: イベント発火タイミングの調整
    6. 注意点
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

  • lozad.js - v1.15.0 - 2020-05-23 (CDN 版)
  • Google Chrome バージョン: 83.0.4103.116（Official Build） （64 ビット）

詳細

前置き: 埋め込みツイートについて

埋め込みツイート自体は Twitter Publish を使うと作成できる。

↑のツイートは HTML コード的には以下のようになっている。

1
2
3
4
5
6
7
8
9
10
11
12
<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">
    tweet.js loader - 全ツイート履歴 表示er
    <a href="https://t.co/ad1O38z04A">https://t.co/ad1O38z04A</a>
    <br>
    Twitter データの tweet.js を読み込んで全ツイート履歴の表示や tweets.csv への書き出しが可能なサイト
    <a href="https://twitter.com/hashtag/%E5%85%A8%E3%83%84%E3%82%A4%E3%83%BC%E3%83%88%E5%B1%A5%E6%AD%B4?src=hash&amp;ref_src=twsrc%5Etfw">#全ツイート履歴</a>
    <a href="https://twitter.com/hashtag/tweetjs?src=hash&amp;ref_src=twsrc%5Etfw">#tweetjs</a>
  </p>&mdash; r17n (@r17num)
  <a href="https://twitter.com/r17num/status/1189564565970833414?ref_src=twsrc%5Etfw">October 30, 2019</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

細かい話は省くがこの記事に色々と書いている通り、以下のように情報を極限まで削っても埋め込みツイートの表示自体は動作する。

1
2
3
4
5
<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr"></p>
  <a href="https://twitter.com/i/status/1189564565970833414"></a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

大量の埋め込みツイートを表示したい場合の問題点

埋め込みツイートを複数表示したい場合、Twitter Publish で作った埋め込みコードなり、前述の手順で極限まで削った HTML タグなりを並べていけば表示できる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 1つめ -->
<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr"></p>
  <a href="https://twitter.com/i/status/1189564565970833414"></a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- 2つめ(一部省略) -->
<blockquote class="twitter-tweet">...</blockquote>
<script ...></script>

...

<!-- nつめ(一部省略) -->
<blockquote class="twitter-tweet">...</blockquote>
<script ...></script>

埋め込みツイート数が少ないうちは良いかもしれないが、大量のツイートを1ページに表示したいようなケースだと、大量のリクエストが一度に発行されブラウザが固まってしまう。

※もちろん「そもそもそんなページ構成にするな」という問題でもある。が、ここでは無視する。

本題: 埋め込みツイートを Lazy Load させる

というわけで ApoorvSaxena/lozad.js を使って、埋め込みツイートを Lazy Load させるようにしてみた。

See the Pen Embed tweet lazy load using lozad.js by 17num (@17num) on CodePen.

Embed tweet lazy load using lozad.js

コード的には以下のような感じ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CDN から lozad.js を読み込み -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
  <title>Twitter embed lazy load</title>
  <style>
    /* 適当に height を設定(未設定だと一気に lozad の監視(検出)イベントが発火するため) */
    .lozad {
      min-height: 500px;
    }
  </style>
</head>
<body>
  <!-- 対象ツイートを data-twitter-src で設定 -->
  <div class="lozad" data-twitter-src="https://twitter.com/i/status/1285474269690949633"></div>
  <div class="lozad" data-twitter-src="https://twitter.com/i/status/1285507640232009733"></div>
  <div class="lozad" data-twitter-src="https://twitter.com/i/status/1286466271085641729"></div>
  <div class="lozad" data-twitter-src="https://twitter.com/i/status/1285796171403849735"></div>
  <div class="lozad" data-twitter-src="https://twitter.com/i/status/1285469590504345600"></div>
  <div class="lozad" data-twitter-src="https://twitter.com/i/status/1285107828743499777"></div>
  <div class="lozad" data-twitter-src="https://twitter.com/i/status/1285099290583392257"></div>
  <div class="lozad" data-twitter-src="https://twitter.com/i/status/1283978337841377280"></div>
  <script>
    const observer = lozad('.lozad', {
      // イベント発火時の処理内容
      load: el => {
        // 最低限の要素(blockquote と script)を作成
        const blockquote = document.createElement('blockquote');
        blockquote.className = 'twitter-tweet';

        // blockquote の中身1
        const p = document.createElement('p');
        p.lang = 'ja';
        p.dir = 'ltr';
        blockquote.appendChild(p);

        // blockquote の中身2
        const twitterSrc = el.dataset.twitterSrc;
        const a = document.createElement('a');
        a.href = twitterSrc;
        blockquote.appendChild(a);

        // widgets.js
        const script = document.createElement('script');
        script.src = 'https://platform.twitter.com/widgets.js';
        script.charset = 'utf-8';
        script.async = true;

        // blockquote と script を追加
        el.insertAdjacentElement('beforeEnd', blockquote);
        el.insertAdjacentElement('beforeEnd', script);
      }
    });
    // 監視開始
    observer.observe();
  </script>
</body>
</html>

簡単な解説

前章のコメント読めばほとんど分かると思う、主なポイントは2つ。

カスタムイベントハンドラの設定

Usage の最後に記載されている通り、Observer 初期化時に load オプションを設定することで独自の処理を実行させることができる。

1
2
3
4
5
const observer = lozad('.lozad', {
  load: el => {
    // 略
  }
});

今回はここで blockquote と script を 作成/追加 するようにしている。

初期読み込み時の監視イベント発火タイミングの制御

class="lozad" の min-height: 500px; としているのは、高さを設定していないと一気に全ての要素を検知しイベントがまとめて発火するため。

1
2
3
.lozad {
  min-height: 500px;
}

高さは適当なので各自で調整。

Tips: イベント発火タイミングの調整

rootMargin, threshold の設定でイベント発火タイミングを調整可能。

1
2
3
4
const observer = lozad('.lozad', {
    rootMargin: '10px 0px',
    threshold: 0.1,
});

注意点

Browser Support に書かれている通り、IE 11 は未サポートなので Polyfill が必要になる。

まとめ

  • ApoorvSaxena/lozad.js を CDN などから読み込み
  • カスタムハンドラ内で埋め込みツイート作成に必要な要素(blockquote, script)を 作成/追加
  • いきなりイベントが大量発火しないように min-height などを設定しておく

その他・メモ

Lozad の使い方は Lozad.js で Lazy Load (非 jQuery) を参照

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list