• home>
  • ブログ>
  • 「MTブロックエディタ」のカスタムブロックで、カスタムスクリプトを使ってみる

blogブログ

「MTブロックエディタ」のカスタムブロックで、カスタムスクリプトを使ってみる

MTブロックエディタとは?

WordPressを始めとしたCMSでは、近年ブロックエディタが導入されています。
今までのリッチテキストエディタは、自由度が高い反面、意図しない挙動が発生してしまったりと、使いこなすのが難しいところがありました。
ブロックエディタは、見出し、テキスト、画像などのブロックをパーツのように入力していくので、誤動作がなく、HTMLなどに不慣れな企業の担当者でも容易に入力していくことができます。
UIデザインもブロックエディタの方が今風で、使いやすくなっています。

MovableTypeでも、MovableType7からブロックエディタが導入されました。
標準のブロックエディタは残念ながら使い勝手が今ひとつだったのですが、その後、MovableTypeのクラウド版「MovableType.net」で利用されている「MTブロックエディタ」がプラグインとしてMovableType7でも使えるようになりました。
「MTブロックエディタ」は使い勝手もよく、今までWordpressに比べ劣っていたMovableTypeのエディタが、かなり改善された印象です。

MTブロックエディタの操作画面

カスタムブロック機能

「MTブロックエディタ」では、元々用意されている「テキストブロック」「画像」などのブロックの他、独自のブロックを「カスタムブロック」として作成できます。
決まったパターンのレイアウトセットをカスタムブロックとして登録しておけば、それを本文エリアの中に入力できるのです。(例えば、囲みや会話形式のレイアウトなど)
このようなレイアウトは、リッチテキストエディタでは本文欄にHTMLを書くことで実現できましたが、「カスタムブロック」があればHTMLがわからない人でも入力が可能になります。

例として、記事内に人物のプロフィールを表示するカスタムブロックを作成してみます。
本文中の好きな場所に人物のプロフィールを挿入することができるようになります。
今回は、「名前」「肩書」「説明文」という3つのブロックから構成される「プロフィール」というカスタムブロックをつくってみました。

カスタムブロックの編集画面。「肩書」を編集中

カスタムブロックは出力時に、テキストであればpやh1などのブロック要素、またはクラスを設定できたりします。
このカスタムブロックの出力は、以下のようなhtmlコードになります。

<div class='profile'>
<p class="profile_name">山田太郎</p>
<p class="profile_title">YY株式会社 常務取締役</p>
<p class="profile_desc"><span>2000年にT大学経済学部を卒業後、TT株式会社に入社。2010年から同社執行役員を務めたのち、2015年にYY株式会社に入社、その後常務取締役に就任。</span></p>
</div>

ただ、レイアウト的に、もっと違ったhtmlにしたいこともあります。
html出力をカスタマイズしたい場合は、以下の2つの方法があります。

1)「記事」テンプレート内で、検索置換処理によってタグを変換する

例えば「肩書」をpタグではなく、spanタグで囲みたい場合は、正規表現(regex_replace)を用いて、再構築時に置換処理するようにします。
以下は「記事」テンプレート内のコードの一部ですが、reg_replace1変数に検索条件を定義して、EntryBodyにregex_replaceモディファイアをつけて置換処理をしています。

<mt:Var name="reg_replace1" value="/<p class="profile_title">(.*?)</p>/g","<span class="profile_title">$1</span> ">
<mt:EntryBody regex_replace="$reg_replace1">

2)「カスタムスクリプト」を利用する

カスタムブロックの作成画面にある「カスタムスクリプト」欄で、Javascriptを使って出力されるhtmlを変更することができます。
ここでは例として、pタグではなく、dl dt ddタグで構成したhtmlで出力するようにしています。

<script>
document.addEventListener("DOMContentLoaded", () => {
    if (document.body.dataset.hasCompiledHtml){ return; }
    
    // 各ブロックの入力値を取得
    const profile_name = document.querySelector('.profile_name').textContent;
    const profile_title = document.querySelector('.profile_title').textContent;
    const profile_desc = document.querySelector('.profile_desc').textContent;

    // テンプレート
    const output = `<dl class="profile">
    <dt class="profile_name">${profile_name}</dt>
    <dd class="profile_title">${profile_title}</dd>
    <dd class="profile_desc">${profile_desc}</dd>
    </dl>`;

    // 再レンダリング
    MTBlockEditorSetCompiledHtml(output, true);
});
</script>

カスタムスクリプトの使用例は、ネットで探してもあまりなく(MovableTypeの情報自体、Wordpressに比べるとかなり少ないのですが)、以下のサイトを参考にさせていただきました。
MovableType7ブロック・エディタの【カスタムスクリプト】が、なんでもできそうでスゴかった | memorandum

ただ、カスタムスクリプト内で条件分岐をしようとしたらうまくできず、かなり悩みました。
「肩書」が入力されてなかったらddタグごと出力しないようにしたかったのですが、結局、以下のような書き方にしたら、うまく条件分岐ができました。

<script>
document.addEventListener("DOMContentLoaded", () => {
    //空で定義しておく
    let profile_name = "";
    let profile_title = "";
    let profile_desc = "";
    //要素の存在をチェックして変数に格納
    if ( document.querySelector('.profile_name').textContent ) { 
        profile_name = document.querySelector('.profile_name').textContent;
    }
    if ( document.querySelector('.profile_title').textContent ) {
        profile_title = document.querySelector('.profile_title').textContent;
    }
    if ( document.querySelector('.profile_desc') ) { //存在チェック
        profile_desc = document.querySelector('.profile_desc').innerHTML; 
    }
​
    // テンプレート
    let output = ""; //空で定義しておく
    if(profile_title != "") {
        output = `<dl class="profile">
        <dt class="profile_name">${profile_name}</dt>
        <dd class="profile_title">${profile_title}</dd>
        <dd class="profile_desc">${profile_desc}</dd>
        </dl>`;
    } else {
        output = `<dl class="profile">
        <dt class="profile_name">${profile_name}</dt>
        <dd class="profile_desc">${profile_desc}</dd>
    </dl>`;
    }
   // 再レンダリング
   MTBlockEditorSetCompiledHtml(output, true);
});
</script>

ちなみにカスタムスクリプトでは、JQueryは使えません。

あと、カスタムスクリプト欄にCSSを書いておくと、入力画面の見た目も変更できるので良いです。出力ページのレイアウトに近づけておくと、入力時もイメージがつかみやすいですね。

このような便利なカスタムスクリプトなのですが、実は弱点があり、それは後から仕様を変更しても過去の入力分には反映されないこと。
これはCMSの利点がひとつなくなることでもあり、入力後に絶対仕様が変わらないものでしか使えなさそうです。

利点の多い「MTブロックエディタ」ですが、リファレンスもほとんどなく、ネットでの情報も少なく、複雑な仕様で使いこなすには、少し難易度が高いかもしれません。
MovableTypeは、依然多くの企業で使われているので、もう少しネット上での情報が増えないかな〜、と思っています。
(という想いでこの記事をアップしてみました)