きっかけ

全部、embed.lyで埋め込んでみる - ゆーすけべー日記を読んでよいなと思いましたので、これを参考に、自分のBlogでもこれにならって対応してみようと思いました。

やったこと

上記のリンクを参考に、以下の対応をしました。

1. emebedlyのJavascriptを埋め込み
2. embedlyのshortcodesを作成
3. embedly形式のmarkdownを簡単に書く方式の確立

やったこと詳細

1.emebedlyのJavascriptを埋め込み

私が利用しているテーマは、Hugo Theme Pureというテーマです。テーマのlayouts直下のファイルをざっと眺めて考えた結果、今回はこのテーマのthemes/hugo-theme-pure/layouts/patials/script.htmlの4行目にembedlyのJavascriptを埋め込むことにしました。埋め込む記述は以下¹です。

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

2.embedlyのshortcodesを作成

次に、embedlyの記述に対応するshortcodesを書きます。 今回私は以下のようなmarkdownの書き方でshortcodesが展開されるようにすることにしました。

{{ < embedly href="https://blog.xtatsux.dev/" title="A rolling stone gathers no moss." > }}

で、layouts/shortcodes/embedly.htmlを以下のようにしました。

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

元の参照記事と変えているのは、titleを取得して、展開されるようにしています。 これはemebedlyのサービスが仮になくなっても、タイトル表示しておけば、意味のある記述として残せると思ったためです。

で、ここまでやって表示テストをローカルでやっていたのですが、どうもうまく表示されない。 embedlyで展開されたリンクの上半分しか表示されないみたいな状態になってしまいました。 Chromeのデベロッパーツールとにらめっこした結果、Hugo Theme PureのCSSでiframeのheightの記述がembedlyが展開したiframeのCSS記述を打ち消していたことが問題だったので、一旦、コメントアウトすることにしました。

img,
canvas,
iframe,
video,
svg {
  max-width: 100%;
  /*height: auto;*/
}

3.embedly形式のmarkdownを簡単に書く方式の確立

ここまでの対応で、markdownさえ想定通りに書けば、リンクがうまく展開されるようにできました。 あとは、如何に楽してこの形式で書くようにするか、です。

専用のブックマークレットを書くことも考えましたが、大体この手のものは偉大な先人がツールを作っていたりするので、検索したところ以下のChrome拡張を見つけました。

これのFormatsに以下記述を追加して、embedly埋め込み形式markdownを簡単に取得できるようにしました。

{{ < embedly href="%url%" title="%title%" > }}

まとめ

ということで、embedlyを利用して、Hugoを利用したBlogでリンクカードを表示できるようになりました。