SIS Lab
>
Blog
>
はてなスターをAMPページで利用する

はてなスターをAMPページで利用する

更新日:2022.06.12 作成日:2022.01.15

2022年1月11日に突如「はてなスター」がリニューアルされました。

かつて「はてなダイアリー」や「はてなブログ」を利用していたときには、気軽にフィードバックできる仕組みとして「はてなスター」は重宝していました。しかし、独自ドメインへの移行とともに「はてなスター」設置をやめてしまいました。「はてなスター」の仕様上は「はてなブログ」でなくともScriptを読み込むことで利用できることは知っていたのですが、AMPページでの実装方法がわからなかったためです。

今回の「はてなスター」リニューアルを機に、「はてなスター」の「はてなブログ」以外での設置方法を再確認し、さらにAMPページでの設置方法を調査しました。

はてなスターをAMPページで利用する方法

結論から言うと、自前で用意した「はてなスター」表示用サイトをamp-iframeで読み込むことにより、AMPページでも「はてなスター」を設置できました。

https://meganii.github.io/amp-hatenastar/ は、GitHub Page上に用意した「はてなスター」用JavaScriptを読み込むペライチサイトです。 URLパラメータtitleとurlを渡すことで、「はてなスター」でスターを付けるページを認識させています。

わたしのブログはHugoを利用しているため、{{ .Title }}でページタイトル、{{ .Permalink }}でページURLが展開されます。

はてなスター設置場所のamp-iframe

<amp-iframe height=50
  layout="fixed-height"
  sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
  resizable
  src="https://meganii.github.io/amp-hatenastar/?title={{ .Title }}&url={{ .Permalink }}">
<div overflow tabindex=0 role=button aria-label="">Read more...</div>
</amp-iframe>

はてなスター展開イメージ

次の図のようにAMPページであっても「はてなスター」が展開されます。

「はてなスター」表示用サイト

「はてなスター」表示用サイトは、次のGitHubリポジトリに置いてあります。

「はてなスター」表示用サイト作成する上でのポイントを残しておきます。

「はてなスター」を「はてなブログ」以外に設置する方法

「はてなスター」を「はてなブログ」以外に設置する方法は、次のページに記載があるとおり、はてなスター用のスクリプトを読み込み、サイトのごとにはてなスターの設定をするだけです。

はてなスターをブログに設置するには - Hatena Developer Center

次のスクリプトを<head>タグの中や<body>タグの最後で読み込みます。

<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>

はてなスターをブログに設置するには - Hatena Developer Center のサンプルは、httpになっていますが、httpsでも読み込めましたので、ここではhttpsとしています。

サイトごとのはてなスター設定

サイトによっては、「はてなスター」用スクリプトの読み込みだけで「はてなスター」を表示できる場合もあります。そのままでは表示できない「はてなスター」非対応のページの場合は、スターを設定するためには次の要件を満たす必要があります。

はてなスター非対応のページでスターを設置するには、ページの HTML に以下の4種類の要素がある必要があります。
エントリに対応する HTML 要素 (entryNode)
エントリのタイトルに対応する要素 (entryNode.title)
エントリの permalink に対応する要素 (entryNode.uri)
“Add Star " ボタンが入る要素 (entryNode.container)

「はてなスター」を付けるためのエントリタイトル、エントリURL、そしてスター設置場所をHTML要素と紐づけます。

たとえば、<div id="container">のようなHTMLがあった場合のentryNodes、title、uri、container設定例を示します。

entryNodesは、エントリ全体のdiv要素であるdiv#container
titleは、entryNodesの中の最初のh3要素
uriは、entryNodesの中の最初のa要素
はてなスター設置場所は、div#hatena-star-container

<body>
  <div id="container">
    <div>
      <a id="h-uri" href="https://sandbox-amp-hatenastar.vercel.app/">
        <h3 id="h-title">はてなスター</h3>
      </a>
    </div>
    <div id="hatena-star-container" style="padding-top: 40px;"></div>
  </div>
  
  <script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>
  <script>
    Hatena.Star.SiteConfig = {
        entryNodes: {
            'div#container': {
                uri: 'a',
                title: 'h3',
                container: 'div#hatena-star-container'
            }
        }
    };
</script>
</body>

通常のHTMLサイトであれば、上記設定により「はてなスター」を設定可能です。しかしながら、AMPは任意のJavaScriptが利用できないため、そもそもHatenaStar.jsを読み込めません。 JavaScriptで実装されている「はてなスター」をAMPページに設置するためには、工夫が必要です。

はてなスターをAMP対応させる

AMPページにJavaScriptを利用した「はてなスター」を表示するためには、次の2つの対応が必要です。

「はてなスター表示用のHTMLサイト」を用意する
「はてなスター」を設置するページで、amp-iframeを用いて「はてなスター表示用のHTMLサイト」読み込む

はてなスター表示用のHTMLサイトを用意する

amp-frameの制約上、同一オリジンからのページ読み込みができません。そのため、別の環境にHTMLを1つ配置します。

用意するHTMLは以下のようなものです。
https://github.com/meganii/amp-hatenastar/blob/4cba1e88eb67da79a5a72374313d1f13e675cff3/index.html

「はてなスター」を設置するページで、`amp-iframe`を用いて「はてなスター表示用のHTMLサイト」読み込む

用意した「はてなスター表示用のHTMLサイト」をamp-iframeで読み込みます。 sandboxの設定は理解が曖昧で要確認ですが、まずはこの設定値で動作しました。

<amp-iframe class="ml-0" height=80
  layout="fixed-height"
  sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
  resizable
  src="https://meganii.github.io/amp-hatenastar/?title={{ .Title }}&url={{ .Permalink }}">
<div overflow tabindex=0 role=button aria-label="">Read more...</div>
</amp-iframe>

課題

amp-iframeのsandboxに対する理解が不足しており、適切な設定が行えていない可能性がある
スターをクリックした場合、通常であれば、付けた人のはてなプロフィールに遷移するが、iframeの中で描画されてしまう
- 暫定対応として、別ウィンドウで開くようにJavaScriptで制御している
「はてなスター」が2段以上になった場合、レイアウト崩れの可能性がある（そんなに付けられることはないので一旦保留）
ShadowDOMの操作というか、ShadowDOMそのものの理解不足