osyoyu.com/blog

HatenaStar.jsはdeferにできる（がasyncにはできない）

2024/1/6

はてなスターをブログに設置するにはを読むとこういうスニペットが掲載されていて、これを貼り付けるとはてなスターボタンを自分のサイトにつけられて楽しいです。

<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.section': {
      uri: 'h3 a',
      title: 'h3',
      container: 'h3'
    }
  }
};
</script>

ところで、このスニペットをそのまま <head> 内に貼ると HatenaStar.js のダウンロードと評価の影響でFCPが数百ms悪化します（<body> の末尾に貼ればこれは回避できる）。async か defer かを設定したいものですが、HatenaStar.js を読むと DOMContentLoaded を待ち受けているので async にはできません。残念。

defer なら大丈夫なんですが、ただdeferすると window.Hatena が未定義で壊れるので、2つ目のscriptを以下のようにしてあげる必要があります。これがこの記事の本題。

<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena = {
  Star: {
    SiteConfig: {
      entryNodes: {
        'div.section': {
          uri: 'h3 a',
          title: 'h3',
          container: 'h3'
      }
    }
  }
};
</script>

現在の HatenaStar.js では window.Hatena がただのObjectだからこれで大丈夫だけど、将来的に変わったら壊れるかも。

別件: スターをつけた人のアイコンを並べる表示（variant: profile-icon）は使えるのか？

はてなブログに表示されるはてなスターはスターをつけた人のアイコンがずらっと並んでもっとにぎやかな感じなんですが、HatenaStar.js を使っている場合はそっちの見た目にする方法はない…… 気がしています。その実装は HatenaStar.js 内に含まれていそうではあるが。

はてなブログ限定機能？ minifyされたJSを気合いで読んでいるので自信なし。