Movable Typeで動画の挿入をサポートするプラグインです。
ウェブサーバーに動画変換機能を入れることなく、ブラウザ上で動画をH.264のMP4に変換してMovable Typeへアップロードし、簡単にvideo要素で挿入できるようにします。
VIDEO
少し長い説明
一般的な公開サイトだと動画を挿入するときにはYouTubeを利用することが多いですが、非公開のサイトであったり、ごく短い動画であったりする場合には動画もMovable Typeで管理できると便利なことがあると思います。
2020年も終わりになるこのタイミングだと今更ではありますが、H.264のMP4の動画をvideo要素で埋め込めばほぼ全てのウェブブラウザで表示できるので、（転送量や帯域が問題にならないという条件がそろっていれば）ウェブサイトで動画を表示することは難しいことではありません。
また例えば、「ウェブマニュアルで動作を説明したい」というような場合にはGIFアニメーションが利用されることがありますが、その場合ある程度以上の解像度でスムーズに動くような内容にするとファイルが大きくなりすぎたり、コントロールの表示もできないので伝わりづらいという問題もありますが、短いMP4の動画にすることで解決できる場合もあります。
ただこれまで、ウェブサイトで動画を公開するのは以下の2点の難しさがあったと思います。
H.264のMP4の動画を簡単に用意するのが難しい
サーバー上で変換させるのは準備が...
ユーザー側でアプリで変換してもらうような運用はちょっと...
video要素で埋め込むのが難しい
このプラグインを使うと、これらの問題を解消して簡単に動画をアップロードして埋め込むことができるようになります。
制限事項
転送量や帯域の問題は解決しません
ビットレートの最適化や、ネットワーク環境に応じた動画をダウンロードさせるような賢いことはやらないので、大きなファイルサイズの動画は大きいままです。転送量や帯域の制限のある環境では特に、問題のないことを確認して利用する必要があります。
長い動画での利用には向いていません
このプラグインではウェブブラウザで同期的に、アップロード前に変換します。前述の通りそもそも大きなサイズの動画には向かないのですが、変換の実行にも時間がかかるため、長い動画の変換には向いていません。
使い方
インストール
リリース一覧 からダウロードして、通常のMTのプラグインと同じようにインストールします。
埋め込みHTMLのカスタマイズ
埋め込みHTMLをMTMLでカスタマイズできます。
初期値のMTMLは以下の通りです。
利用するサイト、親のサイト、あるいはシステムレベルのテンプレートモジュールで、「VideoUploader::as_html」という名前のテンプレートを作成するとその内容が使われます。
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宣言」の変わりに利用できる（という邪悪なコンセプト）
具体例
「!important宣言」を使ったCSS
クラス名の繰り返しで置き換えたCSS
実用性
これは邪悪なコンセプトではあるのですが、以下のようなケースでは意外と実用性もあるかもしれません。
「!important宣言」よりもファイルサイズを小さくできるケース
例えば以下のような規約でCSSを書いているとして、（BEMを採用しているような想定です）
セレクタにIDは利用しない
「!important宣言」は利用しない
詳細度は深くしない
その中でユーティリティ的なクラス名を用意する場合、詳細度はクラス名を2回指定すれば標準の指定よりも高くなるので、「!important宣言」を使うよりも短い表記にすることができます。
「!important宣言」を使ったCSS
クラス名の繰り返しで置き換えたCSS
AMP対応で「!important宣言」を置き換えるケース
既存のサイトをコストを掛けずにAMP対応したい
CSSは小さいので style[amp-custom] に入れてしまうことができそう
「!important宣言」が使われている
という場合、AMPでは「!important宣言」の利用は禁止なので何かしらの対応が必要になりますが、クラス名の繰り返しに置き換えることで問題を解決できるかもしれません。
複数の優先度に分けたいケース
「!important宣言」では宣言ありとなしの2つの分け方しかありませんでしたが、クラス名の繰り返しを利用した場合には以下のような分け方もできます。
普通 : 1回指定
やや優先 : 2回指定
最優先 : 3回指定
新しい複雑さを呼び込むだけな気もしますが、うまいことルールを作ることができるのであれば、これが活きることもあるかもしれません。
SASSによる実装
sass-mixin-important というモジュールを作りました。これを使うと以下のようにシンプルな記述でこの記事の方法を実現できます。
入力
出力
tl; dr
Cpanel::JSON::XSをロードするとJSON::PP::Booleanに「""」のoverloadが追加される。
通常の文字列化では、素のJSON::PP::Booleanと同様に0または1になるということで影響はないが「overload::Method($obj, q{""})」のようなチェックを行っていた場合に動作が変わることがある。
サンプルコード
https://github.com/usualoma/trick-json-pp-boolean にサンプルコードがあります。
問題と原因
以下のようなテストがあった時に、
通常は成功するのですが、モジュールの依存関係でどこかでCpanel::JSON::XSがロードされていると失敗するという状況が発生しました。
原因はTest::More::is_deeplyが内部で「overload::Method($obj, q{""})」を使って文字列化可能か判断している部分があり、そこで挙動が変わっているというものでした。
以下のように書けば（expectedであるJSON::PP::true側も同じ挙動で変換されるため）どちらでも大丈夫です。
