リンクをブログカードで挿入するブロックタイプを追加するMovable Typeのプラグイン

こんな感じで動くMovable Typeのプラグインです。

先日、MovableType.netのブロックエディタをソフトウェア版のMovable Typeでも利用できるようになるプラグインのα版が公開されました。

このプラグインでは、「指定されたURLからOpen Graph Protocolを中心としたメタ情報を取得して、ブログカードと呼ばれるような見た目のリンクを生成する」というブロックタイプをブロックエディタに追加します。

エディタで生成されたブログカードをそのまま使うこともできますが、さらにカスタマイズして、メタ情報を使ってMTMLで任意のHTMLを書き出すこともできます。

筆者はこの記事を書いている時点で、Movable Typeとブロックエディタの開発メンバーです。

このウェブサイト（blog.taaas.jp）の記事は個人の意見であり公開しているのは個人的なプロジェクトで、この記事のプラグインについても個人的なものではありますが、今回のプラグインはα版が未公開の時期から準備されてはいて製品との関連も強いため、念のため明示しておきます。

インストールするとMTブロックエディタに「OGPEmbed」のボタンが追加されるので、そこからブロックを追加して、URLを指定するとブログカードが挿入されます。

公開側では、単純にmt:ContentFieldValueで書き出した場合にはHTMLのみが書き出されます。書き出されるデータにはCSSは含まれないので、サイト毎に指定する必要があります。標準のCSSは以下のようなものです。

単純にmt:ContentFieldValueで書き出す他に、MTMLで書き出すこともできます。標準の出力と同じブロクカードは以下のMTMLで得ることができます。

mt:Varでは以下の情報を利用することができます。

meta{icon} : link[rel="icon"]またはlink[rel="shortcut"]
meta{ogType} : meta[property="og:type"]
meta{ogTitle} : meta[property="og:title"]またはtitle
meta{ogDescription} : meta[property="og:description"]またはmeta[name="description"]
meta[ogImage} : meta[property="og:image"]（複数ある場合には最初の要素）
meta{ogImageWidth} : meta[property="og:image:width"]
meta{ogImageHeight} : meta[property="og:image:height"]
meta{ogUrl} : meta[property="og:url"]またはlink[rel="canonical"]
meta{ogSiteName} : meta[property="og:site_name"]

この記事は Movable Type Advent Calendar 2020 の25日目の記事です。皆様お疲れさまでした。それでは良いお年を！