blog.taaas.jp

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

プラグインについて

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

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

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

mt-plugin-mtbe-OGPEmbed

筆者について

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

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

簡単な使い方

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

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

MTMLによるブログカードの生成

単純に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日目の記事です。皆様お疲れさまでした。それでは良いお年を！

Movable Typeで動画の挿入をサポートするプラグインです。

ウェブサーバーに動画変換機能を入れることなく、ブラウザ上で動画をH.264のMP4に変換してMovable Typeへアップロードし、簡単にvideo要素で挿入できるようにします。

少し長い説明

一般的な公開サイトだと動画を挿入するときにはYouTubeを利用することが多いですが、非公開のサイトであったり、ごく短い動画であったりする場合には動画もMovable Typeで管理できると便利なことがあると思います。

2020年も終わりになるこのタイミングだと今更ではありますが、H.264のMP4の動画をvideo要素で埋め込めばほぼ全てのウェブブラウザで表示できるので、（転送量や帯域が問題にならないという条件がそろっていれば）ウェブサイトで動画を表示することは難しいことではありません。

また例えば、「ウェブマニュアルで動作を説明したい」というような場合にはGIFアニメーションが利用されることがありますが、その場合ある程度以上の解像度でスムーズに動くような内容にするとファイルが大きくなりすぎたり、コントロールの表示もできないので伝わりづらいという問題もありますが、短いMP4の動画にすることで解決できる場合もあります。

ただこれまで、ウェブサイトで動画を公開するのは以下の2点の難しさがあったと思います。

• H.264のMP4の動画を簡単に用意するのが難しい
  • サーバー上で変換させるのは準備が...
  • ユーザー側でアプリで変換してもらうような運用はちょっと...
• video要素で埋め込むのが難しい

このプラグインを使うと、これらの問題を解消して簡単に動画をアップロードして埋め込むことができるようになります。

制限事項

転送量や帯域の問題は解決しません

ビットレートの最適化や、ネットワーク環境に応じた動画をダウンロードさせるような賢いことはやらないので、大きなファイルサイズの動画は大きいままです。転送量や帯域の制限のある環境では特に、問題のないことを確認して利用する必要があります。

長い動画での利用には向いていません

このプラグインではウェブブラウザで同期的に、アップロード前に変換します。前述の通りそもそも大きなサイズの動画には向かないのですが、変換の実行にも時間がかかるため、長い動画の変換には向いていません。

使い方

インストール

リリース一覧からダウロードして、通常のMTのプラグインと同じようにインストールします。

埋め込みHTMLのカスタマイズ

埋め込みHTMLをMTMLでカスタマイズできます。

初期値のMTMLは以下の通りです。

利用するサイト、親のサイト、あるいはシステムレベルのテンプレートモジュールで、「VideoUploader::as_html」という名前のテンプレートを作成するとその内容が使われます。
例えば、動画の幅を640に固定したい場合には以下のように書くことができます。

Movable Type 7のr.4607以降では「改行を変換」の改善が行われ（r.4607ではそれに伴いpre要素で問題がありましたが、r.4608で修正されています）、r.4608ではUseTraditionalTransformerという環境変数が追加されるという形で「改行を変換」に関する選択肢が増えています。

今回作成したCheckHtmlTextTransformプラグインを使うと事前に変化を確認することができ、UseTraditionalTransformerを利用するべきかどうかを確認したり、アップデートに伴い修正が必要なデータを特定したりすることができます。

mt-plugin-CheckHtmlTextTransform/releases

Movable Typeのブロックエディタでブロックの並べ替えを行うときに、デフォルトだとブロックのタイプしか表示されておらず同じタイプのブロックの区別ができないので、概要を表示することのできるプラグインを作成しました。

https://github.com/usualoma/mt-plugin-ShowExcerptForSortBlock

• テキスト系のブロックでは先頭の20文字
• 画像系の場合は幅100pxにリサイズされた画像

という内容で、以下のように表示されるはずです。

tl;dr;

• CSSでは同じセレクタを繰り返し指定でき、繰り返した分だけ詳細度が上がるので、「!important宣言」の変わりに利用できる（という邪悪なコンセプト）
  • https://www.w3.org/TR/selectors-3/#specificityにも繰り返し指定してOKと書いてある

具体例

実用性

これは邪悪なコンセプトではあるのですが、以下のようなケースでは意外と実用性もあるかもしれません。

「!important宣言」よりもファイルサイズを小さくできるケース

例えば以下のような規約でCSSを書いているとして、（BEMを採用しているような想定です）

• セレクタにIDは利用しない
• 「!important宣言」は利用しない
• 詳細度は深くしない

その中でユーティリティ的なクラス名を用意する場合、詳細度はクラス名を2回指定すれば標準の指定よりも高くなるので、「!important宣言」を使うよりも短い表記にすることができます。

AMP対応で「!important宣言」を置き換えるケース

• 既存のサイトをコストを掛けずにAMP対応したい
• CSSは小さいので style[amp-custom] に入れてしまうことができそう
• 「!important宣言」が使われている

という場合、AMPでは「!important宣言」の利用は禁止なので何かしらの対応が必要になりますが、クラス名の繰り返しに置き換えることで問題を解決できるかもしれません。

複数の優先度に分けたいケース

「!important宣言」では宣言ありとなしの2つの分け方しかありませんでしたが、クラス名の繰り返しを利用した場合には以下のような分け方もできます。

• 普通 : 1回指定
• やや優先 : 2回指定
• 最優先 : 3回指定

新しい複雑さを呼び込むだけな気もしますが、うまいことルールを作ることができるのであれば、これが活きることもあるかもしれません。

SASSによる実装

sass-mixin-importantというモジュールを作りました。これを使うと以下のようにシンプルな記述でこの記事の方法を実現できます。