MovableType.net『かんたんデザイン編集』を理解する①：<mt:Var>タグ
記事の概要
国産CMSの中でも官公庁・教育機関での高いシェア率を誇るMovableTypeですが、そのSaaS版MovableType.netが2024年6月に発表した新機能『かんたんデザイン編集』の理解を深めるための備忘録を兼ねた記事となります。
（現在進行形でキャッチアップ中のため、疑問点なども記載していますが、解決次第で随時更新予定です。）
MovableType.net自体の基礎知識はあることを前提とした上で執筆しています。
この記事の前記事にあたる『MovableType.net入門』①、②ではサイトのセットアップ・GitHub連携、テンプレートの種類について触れましたが、ここからはMovableType独自のタグ「MTタグ」について扱います。
タグは全てを扱うには多すぎるため、『かんたんデザイン編集を理解する』①〜④ではかんたんデザイン編集を扱う上で必須のタグと、組み合わせて使うと効果的ないくつかのタグにのみ触れています。
タグについて網羅的に学ぶには、公式のMTタグリスト・MTタグ逆引き辞典がおすすめです。
本題
本来の<mt:Var>とは?
MTタグは<mt:Var name="">のように、mt:***という形式のタグ名と、name=""のような属性値から構成されます。
そして、MTタグを使用したファイルは.htmlファイルではなく、.mtmlファイルとして扱います。
かんたんデザイン編集に必須の <mt:Var> タグ
名前の通り、変数を扱うタグ。
かんデザ編集機能リリースにより、特有の属性値がかなり増え、マニュアルを一読しただけでは全体の理解が難しいため、以下に早見表を作成しました。
あくまで早見表なので、気になる箇所はぜひ公式マニュアル↑上で検索かけてください…！
APIリファレンスによくあるPropsの表をイメージして作成しましたが、正直公式のマニュアルは長くて読みにくく、マニュアルページの頭にこういった表がほしいところです…
（なお元々の<mt:Var>は、<$mt:setVar name="foo" value="bar" $>で格納した値を表示するためだけの変数だったので、name="foo"属性値だけ書いておけばよかった）
マニュアルで明示的に書かれていない値を、いくつか推測で補足しています。
該当箇所には※をつけているため、注意しつつ読み解いてもらえると助かります…！
<mt:Var>属性値早見表
基本的な属性値
| 属性名 | 値 | 必須 | 初期値 | 補足 |
|---|---|---|---|---|
| name | 文字列 | ✅ | 変数名 | |
| editor:type | text, hidden, color, checkbox, radio, select, number, date, email, password, tel, url, textarea, contenteditable, image, list, settings | ✅ | かんデザ編集画面に表示されるコンポーネントの種類 | |
| default | typeに対応する値※ | 初期値 ※typeごとに異なるため、「理解する」②〜④を参照ください | ||
| editor:label | 文字列 | かんデザ編集画面に表示されるコンポーネントの名称 | ||
| editor:description | 文字列 | かんデザ編集画面に表示される補足説明 | ||
| editor:mode | editor, text, attribute | editor | 変数値とカスタム要素の出力方法を設定 | |
| editor:options | 例：apple=りんご,banana=バナナ |
editor:typeがcheckbox, radio, selectの際に使用 |
||
| editor:options:multiple | 0,1 | 0※ | ※明記されていないが、初期値は0、editor:type="select"で複数選択する時に使用、1で複数指定可能 |
明示的に必須と書かれているのはnameとtypeだけですが、editor:labelは編集画面上の可読性を考えれば実質必須、それ以外もユーザビリティを考えれば、ほとんど必須に近い扱いと言えそうです。
editpr:typeがとにかく種類が多い…！
ある程度<input>要素と対応してますが、必ずしも一致するわけではありません。
editor:typeとeditor:modeの状態次第によって必要になる他の属性値があるので要注意です。
editor:modeについて補足すると、ほとんどの場合はeditorで問題ありません（デフォルトなので書く必要もない）。
例外として、editor:type="contenteditable"の時はeditor:mode="text"になり、また、
<a href="<mt:Var name="buttonUrl" editor:type="text" editor:mode="attribute">">
ボタン
/a>
のように、HTML要素の属性値として出力する場合はeditor:mode="attribute"となります。
DOMの更新に関する属性値（すべてoptional・初期値なし）
| 属性名 | 値 | 補足 |
|---|---|---|
| editor:update:selector | 文字列（CSSセレクタ） | 更新対象とする要素を特定するためのCSSセレクタを設定、複数設定可能 |
| editor:update:attribute |
text、src, contentなどHTML属性、style:background-color などのCSS設定 |
変数値が更新されたときに更新するDOM要素の属性を設定、複数設定可能 ⚠️editor:modeとの関連あり |
| editor:update:parent:selector | 文字列（CSSセレクタ） | 親要素のCSSセレクタを指定可能、editor:update:htmlと組み合わせることでリストを用意できる |
| editor:update:fetch | 0,1※ | 1を指定すると、データを保存後にfetchして、取得した内容を基にDOMが更新される（おそらく初期値は0）DOMの更新対象はeditor:update:selectorを使って指定 |
| editor:update:html |
$page_item_htmlのように、<li>を囲んだ<mt:SetVarBlock name="page_item_html">のnameを指定（$のprefix必須） |
<li>を用意できる（<li>に限らず<select>の<option>などにも利用できそう？） |
ここはかんデザ編集画面で変数の値を更新後、どのようにDOMが更新されるかに関わる属性値のようです。
editor:update:fetchは、『即座に更新したい箇所には不向き』と書かれていたので、初期値が0と推測しました。
（真理値を0,1で設定する仕様、やや可読性が低い（numberなのかboolなのか分からない）のでtrue, falseになってくれた方が嬉しい…）
editor:update:attributeにスタイルを指定する場合は、JavaScriptのHTMLElement.styleプロパティ（つまりstyle:backgroundColor）、CSSのスタイル名（style:background-color）のどちらでも書くことができます。.color-themeのようにCSSクラスがある場合は、シンプルにeditor:update:attribute="color-theme"となるようです。
変数の値を元にHTMLを挿入する属性値（どちらもoptional・初期値なし）
| 属性名 | 値 | 補足 |
|---|---|---|
| editor:if:value | HTML | 変数に値が入っていれば、指定されたHTMLを<!-- mt-site-editor-${editor.name} --><!-- /mt-site-editor-${editor.name} -->内に表示する |
| editor:if:empty | HTML | 変数に値が入っていなければ、指定されたHTMLを<!-- mt-site-editor-${editor.name}-if-empty --><!-- /mt-site-editor-${editor.name}-if-empty -->内に表示する※ |
editor:if:emptyは<mt:Var editor:type="list" editor:resource="entry">において記事が1件もなかった時に、『記事が選択されていません』とテキストを出す、などの使い道がありそうです。
⚠️<mt:If>と違い、editor:if:valueはあくまでかんデザ編集画面内に表示するかしないかの話となります。
エディタの機能に関わる属性値（すべてoptional）
| 属性名 | 値 | 初期値 | 補足 |
|---|---|---|---|
| editor:require | 0,1 | 0 | 1にすると入力フィールドが必須入力（空欄不可）となる |
| editor:editor | plain, richtext | plain | richtextにすると入力フィールドにリッチテキストエディタを利用できる ⚠️editor:typeがtextareaとcontentetitableの場合 |
| editor:resource:type | page, entry | page | 表示するリソースをWebページまたは記事かの2択で設定可能 ⚠️editor:typeがlistの場合 |
ここはどれも必須ではありませんが、かなり使用頻度が高そうです。
エディタの表示や表示方法の調整で利用する属性値（すべてoptional）
| 属性名 | 値 | 初期値 | 補足 |
|---|---|---|---|
| editor:button:mode | before, after | after | ⚠️編集ボタンの配置をeditor:mode="text"の場合設定できる |
| editor:button:position |
0,0（top,leftの順に指定） |
0,0 | 編集ボタンの表示位置をCSSのtop,leftの値で調整できる、マイナス値の入力が可能、また10px,-20pxのようにpx表記も可能 |
| editor:style | button, inline, preview, none | button |
通常は最適化されて表示されるため、編集の必要がない button→編集ボタン（画面上で編集可能）、inline→画面内で直接編集、preview→editor:typeがimage,listの場合のみ、none→敢えて編集ボタンを表示したくない時に使う |
ここはエディタの細かな使い勝手に影響が出る値ですが、基本的にはデフォルトのままでも良さそうです。
強いて言えばeditor:button:positionを少しずらして、文字などが隠れないようにするくらいでしょうか。
メニューなどで利用する属性値（すべてoptional）
| 属性名 | 値 | 初期値 | 補足 |
|---|---|---|---|
| editor:update:required | 0,1 | 0 | 1にすると右上の『編集箇所』に更新必須項目として通知される |
| editor:show:menu | 0,1 | 1 | 1にすると右上の『編集箇所』にコンポーネントが表示される |
| editor:register | 0,1 | 1 | 1にすると右上の『編集箇所』に表示される ⚠️同じ変数名のコンポーネントが複数ある場合に使用 |
editor:update:requiredはかんデザ編集が使えるテーマを第三者に共有する際に、更新忘れを防ぐのに役立ちそうです。
editor:show:menu、editor:registerは敢えて非表示にしたいケースでなければ、デフォルトのままで良さそうです。
最後に
続く記事はこちらとなります。
まだまだ学習しながらのまとめのため、誤読などもあるかもしれません。
ぜひコメント頂けると嬉しいです！
Discussion