www.ni4.jp

【MovableType.net】テーブルのレスポンシブ対応を選択できるカスタムブロックを作ってみた

ども、どもども。
MovableType.net大好き、西山です。

相変わらずMovableType.netのブロックエディタを研究している日々。
今回は「テーブル(表)のレスポンシブ対応」を考えてみました。

ブロックエディタに限らず、いわゆるWYSIWYGエディタを使用すると、テーブルのレスポンシブ対応って面倒ですよね。
すべて同じ対応・表示方法なら困らないですが、いくつかパターンを用意しようと思うと、WYSIWYGエディタだけでは実現できないことも多いです。(htmlソースに手を加えなきゃならない)
HTMLに明るい方であればそれでも良いのですが、そのような知識がない方でも同じように使えると便利です。

MovableType.netで実現するそれ以外の方法として思いつくのは、それぞれのパターン別にカスタムブロックを用意する方法ですね。
ブロックエディタを使用する前提で考えると、そのパターンは多くて2〜3種類かと思うので、私も最初はそれで考えていました。
MovableType.netのカスタムブロックは、任意のブロック(ex. div.hoge)でそのブロックを囲むことができたり、カスタムブロックそのものに任意のclassを設定できたりするので十分に対応できます。

ただそんな中、シックス・アパートさんの記事「ソースコードを表示するブロックの作り方」を見ていて、これと同じようにどのパターンでテーブルをレスポンシブ対応するか、パターンを選択できるメニューを表示して、テーブルのカスタムブロックを1つにまとめることができたら解決できるなと考えました。

というわけで、今回は私がやってみたカスタムブロックを紹介しようと思います。

カスタムブロックを新規作成

ダッシュボードの左メニュー「カスタムブロック」から「新規」を選択してカスタムブロックを作成します。
なお、今回作成したカスタムブロックは、以下のjsonファイルを読み込んでいただければ、そのまま利用できます。

ブロックの設定

名前・アイコン・識別子は任意のものを入れてください。

テーブルブロックなので、アイコンも「テーブル」にしました(笑)

「ブロック」には、テーブルブロックとドロップダウンブロックを入れます。
テーブルブロックの「ラベル・説明・クラス名」は入れても入れなくてもいいです。

ドロップダウンのブロックは以下のようにしました。

  • クラス名: table-type
  • ブロック要素: PRE
  • オプション: default, vertical, scroll

カスタムスクリプトには以下を入れます。

<script>
document.addEventListener("DOMContentLoaded", () => {
if (document.body.dataset.hasCompiledHtml) {
return;
}

const table = document.querySelector("table").innerHTML;
const type = document.querySelector(".table-type").textContent;
MTBlockEditorSetCompiledHtml('<div class="' + type + '"><table>' + table + '</table></div>');
});
</script>

このJavaScriptのコードなんですが…、シックス・アパートさんの記事にあるコードを参考にしてなんとか作ったものでして(汗)
JavaScriptについてはあまり詳しくないので、もっと良い書き方などあればぜひ教えてください!

カスタムブロック機能を利用して高機能な Markdown を利用する
ソースコードを表示するブロックの作り方

ここまで終わったら保存します。
「コンテナ要素で包む」と「ブロックの追加と削除」はともにチェックを入れなくてOKです。

ブロックエディタの見ため

今回作ったカスタムブロックを実際に使用すると、ブロックエディタ内で以下のようになります。

例えばverticalを選択した場合、ソースコードは以下のようになります。

<div class="vertical">
<table>
<!-- 省略 -->
</table>
</div>

実際に出力したサンプル

このカスタムブロックを使用すると、テーブル部分を「表示形式」で選択したclassがついたdivで囲むことができます。
それにあわせてCSSを調整することで、複数パターンのレスポンシブ対応を1つのカスタムブロックで対応することができました。

defaultの場合

defaultは特にスタイルを設定せず、スマートフォンなどの閲覧時にはデバイスの横幅を上限にそこまで広がるテーブルにしています。

Movable Typeシリーズ別「サーバーの準備・インストール作業」
MovableType.net 不要
Movable Type ソフトウェア版
Movable Type クラウド版 不要
Movable Type for AWS 不要(Amazon EC2 を利用)

verticalの場合

verticalを選択すると、スマートフォンなどではヘッダーセルと通常のセルが上下にかさなるようにしました。(ブラウザの幅を狭めるか、実際にスマートフォンで見てください)

Movable Typeシリーズ別「サーバーの準備・インストール作業」
MovableType.net 不要
Movable Type ソフトウェア版
Movable Type クラウド版 不要
Movable Type for AWS 不要(Amazon EC2 を利用)

scrollの場合

横スクロールのレスポンシブ対応には、アップルップルさんのScrollHint.jsを利用させてもらいました。
このライブラリは非常に便利で、実際の案件でもたくさん使わせてもらっています。利用方法などは配布サイト等をご覧ください。

MovableType.net Movable Type ソフトウェア版 Movable Type クラウド版 Movable Type for AWS
標準テーマのカスタマイズだけで見映えのよいレスポンシブ対応サイトを構築できる
動的生成のみ対応で再構築不要
GitHub連携やメール投稿、記事差し替えなどの独自の機能を搭載
サーバー監視、セキュリティ対策もおまかせ
標準機能で常時SSL(HTTPS)化が可能
カスタムフィールド作成数制限あり
静的生成・動的生成いずれも可能
対応しているプラグイン、ソリューションが豊富で、より高度なカスタマイズが可能
自社で自由にサーバーの設定や管理が可能
カスタムフィールド作成数制限なし
エンタープライズに最適な上位版 Movable Type Advanced がある
静的生成・動的生成いずれも可能
環境が Movable Type に最適化されているため、管理画面の動作や再構築が高速
ソフトウェア版では上位版にのみ搭載のサーバー配信機能を搭載
カスタムフィールド作成数制限なし
サーバー監視、セキュリティ対策もおまかせ
静的生成・動的生成いずれも可能
AWS Marketplace から、Amazon EC2 のクラウド環境に簡単に構築可能
マイクロインスタンスに限り、無料で利用可能
Movable Type のアップデートをyumコマンドで実施可能
カスタムフィールド作成数制限なし
ライセンス・価格体系(税抜)
2,500円〜/月 25,000円/年
※ウェブサイト毎に14日間無料トライアルあり
Movable Type
90,000円
(初年度メンテナンス含む・次年度以降30,000円)
※30日間の無料トライアルあり

Movable Type Advanced
1,200,000円
(初年度メンテナンス含む・次年度以降240,000円)
月額5,000円〜
※トライアルなし
0.07ドル/時間 499ドル/年
※7日間無料トライアルあり。マイクロインスタンスは無料

今後やりたいことなど

今回もカスタムスクリプトを使用してブロックエディタをまた少し使いやすくできたと思います。
ただ…先ほども書きましたが、カスタムスクリプト部分は見様見真似で作成したので、そこがちょっと不安でもあります(汗)
MTBlockEditorSetCompiledHtmlってのが整形したコードを埋め込むというのは想像できるのですが、これについては情報もなく…この辺りもマニュアルに載っていると嬉しいなとか。

あと、TinyMCE(WYSIWYGエディタ)で作るテーブルなんですが、セルの幅や高さをドラッグ操作で設定できてしまう部分もどうにかしたいですね。
WordPressではそれを無効化するためにfunction.phpに追記できたりするようですが、MovableType.netの場合はそれができないので、TinyMCE周りのオプション操作もどこかでできると嬉しいなと思いました。
今回も「テーブルセルのドラッグを許可しない」とか「width属性を削除する」とかやろうと思ったのですが、私の知識ではできませんでした(汗)

もうちょっとJavaScriptに強くなれば、もっとカスタムブロックを活用できそうです(笑)

にしやま やすふみ

ウェブインテグレーション/コンサルティングの株式会社ジャクスタポジションで、代表とディレクターやってます。
Movable Typeとラーメン、ザンギ、酒が好き。
プロフィール詳細はこちら

アクセスの多い記事