Hugo(AMP対応)にTwitterのツイートを埋め込む時のメモ

2019年01月11日 金曜日 09時00分

このブログはRobustを使わせて頂いております。

AMPに対応してますし素敵なThemeで、すごく気に入っています！

開発者の @dim0627 さん、本当にありがとうございます！

ということで、タイトルの通りAMPに対応しているThemeにおいて、Twitterのツイートを埋め込むときのメモです。

今回は、shortcodeにて実装しました。簡単なので、ぜひともチャレンジして貰えればと思います。

ドキュメントを確認する

まずはドキュメントを確認する。

amp-twitter – AMP

以下のスクリプトを追加して。

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

以下のHTMLで表示できます。

<amp-twitter width="375"
             height="472"
             layout="responsive"
             data-tweetid="885634330868850689">
</amp-twitter>

Placeholders & fallbacksについて

一応、英語を翻訳してみました。

An element marked with a placeholder attribute displays while the content for the Tweet or Moment is loading or initializing. Placeholders are hidden once the AMP component's content displays. An element marked with a fallback attribute displays if amp-twitter isn't supported by the browser or if the Tweet or Moment doesn't exist or has been deleted.

こんな感じになりました。

TweetまたはMomentのコンテンツの読み込み中または初期化中に、プレースホルダ属性でマークされた要素が表示されます。 AMPコンポーネントのコンテンツが表示されると、プレースホルダは非表示になります。 amp-twitterがブラウザでサポートさ れていない場合、またはTweetまたはMomentが存在しないか削除されている場合は、fallback属性でマークされた要素が表示されます。

こんな感じで指定できるようです。

今回作成するshortcodeでは、Placeholdersを考慮してません…

Source

<amp-twitter width="375"
height="472"
layout="responsive"
data-tweetid="638793490521001985">
<blockquote placeholder>
<p>I only needed to change some CSS.
<a href="http://t.co/LvjLbjgY9F">pic.twitter.com/LvjLbjgY9F</a>
</p>— Malte Ubl (@cramforce)
<a href="https://twitter.com/cramforce/status/638793490521001985">September 1, 2015</a>
</blockquote>
</amp-twitter>

Previw

amp
amp

Source

<amp-twitter width="390"
             height="330"
             layout="responsive"
             data-tweetid="855178606556856320">
  <blockquote placeholder>
    <p>What are 5 common misconceptions people often have about AMP? Find out on today&#39;s installment of Amplify:
      <a href="https://t.co/kaSvV8SQtI">https://t.co/kaSvV8SQtI</a>
      <a href="https://t.co/Cu9VYOmiKV">pic.twitter.com/Cu9VYOmiKV</a>
    </p>— AMP Project (@AMPhtml)
    <a href="https://twitter.com/AMPhtml/status/855178606556856320">April 20, 2017</a>
  </blockquote>
  <div fallback>
    An error occurred while retrieving the Tweet. It might have been deleted.
  </div>
</amp-twitter>

Previw

amp
amp

scriptを追加する

早速、scriptを追加します。

まずは私の環境を…

(ins) ~/go/src/github.com/hoge/trhrkmk.github.io [master *%=] $ pwd
/home/teruhiro/go/src/github.com/hoge/trhrkmk.github.io

(cmd) ~/go/src/github.com/hoge/trhrkmk.github.io [master *%=] $ tree  ./layouts/
./layouts/
├── _default
│   ├── baseof.amp.html
│   ├── baseof.html
│   ├── summary.amp.html
│   └── summary.html
├── partials
│   ├── addthis.html
│   ├── addthis-script.html
│   ├── adsense.amp.html
│   ├── adsense.body.amp.html
│   ├── adsense.html
│   ├── ads.html
│   ├── drift.html
│   ├── favicon.html
│   ├── sidebar.html
│   └── styles.css
└── shortcodes
    ├── img.amp.html
    ├── img.html
    └── twitter.amp.html

3 directories, 17 files

./layouts/_default/baseof.amp.htmlに追加する。

vimで編集する。

(ins) ~/go/src/github.com/hoge/trhrkmk.github.io [master *%=] $ vim ./layouts/_default/baseof.amp.html

先程のscriptを追加します。

<!DOCTYPE html>
<html>
  <head>
    {{ partial "meta.html" . }}

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

    {{ with .Site.Params.googlefonts }}
    <link href="{{ . }}" rel="stylesheet">
    {{ else }}
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">
    {{ end }}
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <title>{{ block "title" . }}{{ end }}{{ .Site.Title }}</title>
    {{ block "meta" . }}{{ end }}
    <style amp-custom>
      {{ replaceRE " +" " " (replaceRE "\n" "" (partial "styles.css" .)) | safeCSS }}
      {{ replaceRE " +" " " (replaceRE "\n" "" (partial "custom.css" .)) | safeCSS }}
      {{ with .Site.Params.fontfamily }} body { font-family: {{ . | safeCSS }}; } {{ end }}
      {{ with .Site.Params.logofontfamily }} .h-logo { font-family: {{ . | safeCSS }}; } {{ end }}
      .l-container { max-width: 40rem; margin: 0 auto; }
    </style>
    {{ partial "adsense.amp.html" . }}
  </head>
  .
  .
  .

shortcodeを作る

shortcodeを作る。

(ins) ~/go/src/github.com/hoge/trhrkmk.github.io [master *%=] $ vim ./layouts/shortcodes/twitter.amp.html
twitter.amp.html

{{ $id := .Get 0 }}

<amp-twitter
  data-tweetid="{{$id}}"
  width="800"
  height="600"
  layout="responsive">
</amp-twitter>

markdownに書く

これで設定は終わりなので、markdownにて書いてみます。

実際の記事の感じです。

### 更新(2019-01-09)

Twitterで「`ftp.debian.org`ではなく`ftp.jp.debian.org`がいいですよ。」と教えて頂いたので、修正しました。

{{%/* twitter 1082100466261979138 */%}}

表示を確認する

実際の表示はこんな感じです。

amp
amp

あとがき

どこかのタイミングで、Hugoについても、もっと勉強したいなー