UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

amp-twitter | AMPにTwitterの埋め込みを挿入する

f:id:mochizuki_p:20170107174707p:plain AMPでTwitterの埋め込みを表示するための専用タグです。

AMPでJavaScriptやiframeが禁止されているために特別に用意されています。

特徴

  • 専用のJavaScriptを読み込む必要がある
  • サイズを指定する必要がある。
  • ツィートの固有IDを入れる必要がある

専用のJavaScript

以下をhead内に追記してください。

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

HTMLでTwitterの埋め込みを利用する場合、以下のようにJavaScriptを利用します。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">( *゚▽゚*  っ)З まつや!<br><br>朝定食!を食べてきました!<a href="https://twitter.com/hashtag/matsuyawas?src=hash">#matsuyawas</a> <a href="https://t.co/Ch5SRZCiDA">pic.twitter.com/Ch5SRZCiDA</a></p>&mdash; ちょまど@MS入社して9ヶ月 (@chomado) <a href="https://twitter.com/chomado/status/800494112839331840">November 21, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

一方でAMPの場合は以下のような形式になります。

<amp-twitter width=486 height=657
    data-tweetid="800494112839331840">
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">( *゚▽゚*  っ)З まつや!<br><br>朝定食!を食べてきました!<a href="https://twitter.com/hashtag/matsuyawas?src=hash">#matsuyawas</a> <a href="https://t.co/Ch5SRZCiDA">pic.twitter.com/Ch5SRZCiDA</a></p>&mdash; ちょまど@MS入社して9ヶ月 (@chomado) <a href="https://twitter.com/chomado/status/800494112839331840">November 21, 2016</a></blockquote>
</amp-twitter>

つまり、通常の埋め込みコードから

の部分を抜粋して、amp-twitterでレイアウトを指定した上で中に挟めばよいわけです。

この場合は必須となる要素は、

要素名 説明
width ツィートの埋め込み枠の幅 486
height ツィートの埋め込み枠の高さ 657
data-tweetid 各ツィートの固有ID 800494112839331840

width, height

レンダリングの計算コストを削減するために事前にサイズを指定しておきます。

data-tweetid

各ツィートの固有ID

つまり、ツィートの埋め込みコードのリンクの部分

その中のstatus/のあとの数字が羅列された部分をここに記します。

<a href="https://twitter.com/chomado/status/800494112839331840">November 21, 2016</a>

これからhrefの値である

https://twitter.com/chomado/status/800494112839331840

から

太字で示された数字の部分がIDになります。