MovableType.net『かんたんデザイン編集』を理解する②：editor:typeから考える・前編
記事の概要
前回のかんたんデザイン編集①では<mt:Var>のみを扱いましたが、
かんたんデザイン編集を実現するには<mt:Var>をどのようにソースコードに組み込むかの理解が必要です。
②では公式マニュアルにある『かんたんデザイン編集コンポーネント利用例』と公式が10月1日に発表した新テーマ『Fusion Corporate』を見つつ、書き方を理解したいと思います。
ソースコードがそれなりに長くなったので、前・中・後編に分けて書きます。
前編ではeditor:typeのtext, image, textarea, contenteditable, colorを扱います。
前提
SetVarBlock, SetVarTemplate
この後様々なMTタグが登場しますが、かんデザ編集の設定を行うのに必須のタグが、SetVarBlock, SetVarTemplateです。
<mt:SetVarBlock name=""></mt:SetVarBlock>
<mt:SetVarTemplate name=""></mt:SetVarTemplate>
の2種類でかんデザ編集の対象となる領域を指定できます。
よくある例としては、画像・テキストなどのように1項目しか内部に入らないものはBlock、記事一覧・ピックアップ記事のように複数項目が入るものはTemplateで記述します。
MTSetVarBlockとMTSetVarTemplateとの違いは、囲んだ内容が処理された結果が値となるか、囲んだ内容が処理されずテンプレートのまま値となるかです。
大まかな記述方法の理解
かんデザ編集で扱えるようにするには、テンプレートファイル内のかんデザ編集で変更できるようにしたい部分と、そのテンプレートファイルに紐づく設定ファイルの2つに記述することができます。
かんデザ編集画面の左側にある、プレビューエリアを直接触って編集したい場合はテンプレートファイル、右側にある設定パネルで編集したい場合は設定ファイルに記述する必要があります。同じ変数名を両方に記述することで、両方に表示することも可能です。
MovableType.netのテンプレートファイル名と関連性で軽く触れましたが、メインページ（index.html）であれば、
- テンプレートのファイル名…
index.html.mtml - テンプレートに紐づくかんたんデザイン編集設定パネル…
index_settings.mtml
となります。
テンプレートには4種類ありますが、システム・テンプレート以外のテンプレートはすべて***_settings.mtmlを記述することができます。
⚠️システム・テンプレートで作成できるものの一つに404ページがありますが、こちらも***_settings.mtmlを記述できないため、かんデザ編集によりサイトの見た目が変更されても浮かないようなデザインにする必要がありそうです。
本題：具体的な利用方法を検討する
かんたんデザイン編集①にて、editor:typeの種類についてはすでに触れましたが、editor:typeが何かによってその他の属性値が変わってきます。ここからは画像・テキストなどeditor:typeをもとに利用方法を検討してみたいと思います。
1. editor:type="text"
editor:type="text"はコピーライトやボタンに表示するテキストなど、短文・リッチテキストで記述する必要がない際に使用します。
editor:type="textarea"との違いは、
- 入力フィールドが
"text"より大きい（＝長文入力を想定している） -
editor:type="textarea"はeditor:editor="richtext"と組み合わせることで、リッチテキストでの入力が可能
です。
設定ファイル
フッターに記述されているコピーライトを例にします。
編集画面左側のプレビューと右側の設定パネルとの両方で行えるようにするため、設定ファイルとテンプレートファイルの両方に同じ変数名name="copyright"で記述します。
<mt:Var
name="copyright" <!-- 変数名：必須 -->
editor:label="コピーライト" <!-- ラベル：必須ではないが設定パネルで見やすい -->
editor:type="text" <!-- タイプ：必須 -->
default="© 2024 Six Apart" <!-- 初期値：必須ではないが入れてあると分かりやすい -->
editor:mode="editor" <!-- モード：デフォルトはeditorなので書かなくても良い、基本的にはほぼeditor -->
editor:update:required="1" <!-- 画面右上の『編集箇所』に更新必須項目として表示：便利機能系 -->
editor:register="0" <!-- 画面右上の『編集箇所』に表示：設定ファイルとテンプレートファイルの両方に同変数名が存在する場合、どちらかを0（非表示）にする -->
>
※editor:register="0"は公式マニュアルには記載がありませんでしたが、Fusion Corporateテーマのソースコードを見る限り、記載した方が良さそうでした。
テンプレート
<p>
<mt:Var
name="copyright" <!-- 変数名：必須 -->
editor:label="コピーライト"
editor:type="contenteditable" <!-- タイプ：必須、`contenteditable`はプレビュー内で直接編集が可能 -->
default="© 2024 Six Apart"
editor:mode="text" <!-- `モード：editor:type="contenteditable"`の場合必須 -->
editor:button:mode="before" <!-- 編集ボタン位置（前後）：デフォルト（`after`）のままでも良さそうですが、使用例のソースコードを見るとフッターの右端にコピーライトがあるので、左側の方に配置することで見やすくしたのかもしれません -->
editor:button:position="-15,-25" <!-- 編集ボタン位置（上左）：いわゆるCSSの`top, left`なので、単位は`px`です -->
editor:update:required="1"
>
</p>
編集ボタン関連の属性値はテンプレートファイルにしか登場しません。
また、editor:type="contenteditable"もテンプレートファイルにしか登場しません。
公式マニュアルではeditor:type="text"使用例はフッターの電話番号・コピーライトでしたが、電話番号を入力するならeditor:type="tel"の方がより適切な気もします。
と言いつつ、あくまでかんデザ編集上での入力の話のため、モバイルで数字キーボードが表示されるなどのユーザビリティも関係ありませんし、HTMLの<input type="tel">自体も適切なpatternなどを記述しない限り、入力される文字列の制限が発生しないので、あまり気にしなくて良いのかもしれません。
2. editor:type="textarea"
『1. editor:type="text"』で触れた通り、editor:type="textarea"は一定以上長いテキストに使用します。
ここではeditor:editor="richtext"と組み合わせた例として、トップページのメインキャッチコピーを挙げます。
設定ファイル
<mt:Var
name="mainlead__title"
editor:label="メインキャッチコピー"
editor:type="textarea"
editor:editor="richtext" <!-- エディタ：リッチテキストが使用になる、`editor:type`が`textarea`または`contenteditable`の場合のみ使用可能 -->
default="<p>Stylish Corporateは<br>企業サイトです</p>"
editor:mode="editor"
editor:update:required="1"
editor:register="0"
>
テンプレート
<mt:Var
name="mainlead__title"
editor:label="メインキャッチコピー"
editor:type="contenteditable"
editor:mode="text" <!-- `モード：editor:type="contenteditable"`の場合必須 -->
editor:editor="richtext" <!-- エディタ：リッチテキストが使用になる、`editor:type`が`textarea`または`contenteditable`の場合のみ使用可能 -->
default="<p>Stylish Corporateは<br>企業サイトです</p>"
editor:button:position="-15, -20"
editor:button:mode="before"
editor:update:required="1"
>
3. editor:type="contenteditable"
editor:type="contenteditable"は既にtext・textareaのセクションに登場しました。
かんデザ編集画面上で直接テキストの編集が可能となるタイプです。そのため、テンプレートファイルにしか登場しません。
注意事項としてはeditor:type="contenteditable"の場合、
-
editor:mode="text"が必須 -
editor:editor="richtext"が使用可能
となります。
使用例はtext・textareaのセクションを参照してください。
4. editor:type="image"
その名の通り、画像に使用します。
サイトロゴやトップページのメイン画像、サイト全体のOGP画像など、幅広く使用できます。
ここではトップページのメイン画像を、シンプルな例として扱います。
設定ファイル
<mt:Var
name="asset_id" <!-- 変数名：必須 -->
editor:label="メイン画像"
editor:description="トップページのメイン画像を設定します。横長の画像がおすすめです。" /* 設定ファイルに表示する補足説明 -->
editor:type="image" <!-- タイプ：必須 -->
editor:mode="editor" <!-- モード：デフォルトなので記述いらない可能性あり -->
editor:update:selector=".indexImg" <!-- DOMの更新対象となる要素：CSSセレクタで指定（今回は`<div>`のクラス名`.indexImg`で指定） -->
editor:update:attribute="style:backgroundImage" <!-- DOMの更新対象となる属性：キャメルケースで記述 -->
editor:register="0" <!-- 画面右上の『編集箇所』に表示しない -->
>
テンプレート
<div class="indexImg"
<mt:If name="asset_id">
style="background-image:url(<mt:Asset id="$asset_id"><$mt:AssetURL$></mt:Asset>);"
<mt:Else>
<$mt:SetVar name="asset_id" value="1"$>
</mt:If>
></div>
<mt:Var
name="asset_id"
editor:label="メイン画像"
editor:type="image"
editor:mode="editor"
editor:update:selector=".indexImg"
editor:update:attribute="style:backgroundImage"
editor:button:position="-270,5"
>
初めて出てくるMTタグがあるので補足すると、MTAssetはidで指定した単一のアイテムを取得するタグです。
<mt:Asset id="$asset_id">のidには<mt:Var>のnameが入ります。
それにより、<$mt:AssetURL$>には<mt:Var>で選択した画像のURLが代入されるようになります。
また、<mt:If>``<mt:Else>によって、エディタに値が存在しない場合の表示を切り替えることができます。
より使いやすい例としては、editor:if:valueとeditor:if:emptyを組み合わせ、かんデザ編集画面で画像が設定されてない場合の表示を作成することが可能です。
以下にFusion Corporateテーマを参照しつつ、大まかな使用例を書いてみました（動作未検証）。
<mt:Var
name="asset_id"
editor:type="image"
editor:update:selector=".indexImg"
editor:update:attribute="style:backgroundImage"
...
>
<!-- mt-site-editor-asset_id -->
<mt:If>
<div class="indexImg" style="background-image:url(<mt:Asset id="$asset_id"><$mt:AssetURL$></mt:Asset>);">
</div>
<mt:Else>
<div class="indexImg" style="background-color:skyblue;"></div> <!-- 画像がない場合のスタイリング -->
</div>
<!-- mt-site-editor-asset_id-if-empty -->
<div class="indexImg" style="background-color:gray;">メイン画像を設定してください</div>
<!-- /mt-site-editor-asset_id-if-empty -->
</mt:If>
<!-- /mt-site-editor-asset_id -->
5. editor:type="color"
editor:type="color"は単品のボタンなどの色に適用することも可能ですが、サイト全体の文字色やメインカラー・背景カラーなどを統一するカラーセットの指定ができると、とてもテーマとしての運用性が高まります。
色は、<input type="color">を利用して指定するため、値は16進数RGB#rrggbbしか使用できず、アルファ値は指定できません（アルファ値を書くと自動で#000000となる）。
ただしかなりソースコードが長く、Javascriptの記述も必要なため、カラーセットについてはここでは触れません。公式マニュアルにソースコードがありますので、そちらを参照ください。（ページ中盤に『全般設定：色設定』というセクションがあります）
ここでは参考程度にシンプルな、ボタンの色を変えるサンプルコードを書いてみます（未検証）。
テンプレート
<a
class="sampleButton"
href="<mt:Var
name="buttonUrl"
editor:type="text"
editor:mode="attribute"
editor:update:selector=".sampleButton"
editor:update:fetch="1"
default="/contact/"
>"
style="background-color:<mt:Var
name="button_color"
editor:label="ボタンの色"
editor:type="color"
editor:mode="editor"
editor:update:selector="sampleButton"
editor:update:attribute="style:backgroundColor"
>"
> サンプルボタン </a>
最後に
続く『かんたんデザイン編集③：使用ケースから考える・中編』はこちらです。
まだまだ学習しながらのまとめのため、誤読などもあるかもしれません。
ぜひコメント頂けると嬉しいです！
こちらのスクラップにて、MovableType.netの環境構築やGitHub連携から始め、順を追ってまとめているので、興味があればぜひご覧ください！
Discussion