全部、embed.lyで埋め込んでみる

この日記をHugoに移してから、TwitterやYouTubeの埋め込みをどうするかが問題だった。例えば、以下のようにTwitterクライントで表示されるツイートを埋め込むとする。

まず、各サービスで吐き出されたHTMLコードを貼って、原稿のMarkdown内に無理やり埋め込む方法がある。

{{< rawhtml >}}
<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">朝イチで劇場版SHIROBAKO観てきたー。色紙、ずかちゃんだったー。 
    <a href="https://t.co/CtVixpMoCr">pic.twitter.com/CtVixpMoCr</a>
  </p>&mdash; ゆーすけべー (@yusukebe) 
  <a href="https://twitter.com/yusukebe/status/1236882637777563651?ref_src=twsrc%5Etfw">March 9, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
{{</ rawhtml >}}

これはちょっとひどい。で、Hugoではショートコードというのがある。ドキュメントの概要を訳すとこんな感じ。

HugoはシンプルなフォーマットのMarkdownを愛しているぜ！だけど時に、短く書けない時がある… しばしば、著者はビデオのiframeタグなど、生のHTMLを追加しようとしちゃう。これらは、Markdownの美しいシンタックスをぶっこわしてしまうと私たちは思う。

そこで、Hugoはそれらを打開するために、ショートコードというのを作ったぜ！

そのショートコードを使った場合のTwitterの埋め込みはこうだ。

{{< tweet 1236882637777563651 >}}

おお、確かに美しい。で、他にYouTubeの場合はこう。

{{< youtube t3O8C2hlW2o >}}

で、まぁこれでいいし、Hugoが推しているやり方なので、のっとった方がいいのだけど、あれもこれも埋め込みたい場合に、Hugoがデフォルトで対応していないとめんどい。例えば、Amazon.co.jpへの画像付き商品リンクを貼りたかったんだけど、これをショートコードで実現するには結構たいへん（頑張ってる人は外部にJSON返すWeb APIを立てて、HugoのDynamic Contentという仕組みで実現させている）。

そこで、embed.lyの登場。ずいぶん前からお世話になっているサービスですが、ようはワンサービスであらゆる埋め込みをいい感じにしてくれるサービス。その中のCardsという機能を使う。

まず、テンプレートをいじって、JavaScriptを読み込む以下のHTMLタグを挿入する。

<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

これで、embedly-card属性値をもったAタグのURLが埋め込まれる。例えば、こういうリンクをいい感じの「カード」に置き換えてくれる。

<a href="https://yusukebe.com/" class="embedly-card">ゆーすけべー日記</a>

これを簡便にMarkdownの記事内で書けるようにしたい。そう、ショートコードを自作する。

{{- $href := .Get "href" -}}
<a href="{{ $href }}" data-card-via="{{ $href }}"
 class="embedly-card" data-card-controls="0"
 data-card-align="left" data-card-width="100%">
 loading...
</a>

これで、ひとつのショートコードでありとあらゆるものを埋め込むことができる。 embedlyタグのhref属性値に埋め込みたいコンテンツのURLを指定すればよい。 Markdownでの記述と実際の表示を見ていこう。

まずTwitter。

{{< embedly href="https://twitter.com/yusukebe/status/1236882637777563651?s=21" >}}

loading...

次にYouTube。

{{< embedly href="https://www.youtube.com/watch?v=t3O8C2hlW2o" >}}

loading...

Gist。

{{< embedly href="https://gist.github.com/yusukebe/699e3f5435e9a6ebed4331a9190c2c8e" >}}

loading...

そして、アフィリエイトタグ付きのAmazon商品リンク。

{{< embedly href="https://www.amazon.co.jp/dp/4774154075/" >}}

loading...

あれ？？見えてる？？

たまーにAmazonの商品リンクの展開がうまくいかない時があって、時間を置いてリロードするとうまくいったりする…のが非常に気持ち悪い。アフィリエイトタグがあるとダメとかそういうのじゃなさそう。なんでだー。だけど、Amazon以外はいい感じなので、しばらくembedlyショートコードだけでいってみようと思う。