Zenn
🔩

MovableType.net『かんたんデザイン編集』を理解する③：editor:typeから考える・中編

2024/10/15に公開
Movable Type
movabletypenet
tech

記事の概要

③では②の前編に引き続き、公式マニュアルにある『かんたんデザイン編集コンポーネント利用例』と公式が10月1日に発表した新テーマ『Fusion Corporate』を見つつ、<mt:Var>のタイプごとの書き方を理解したいと思います。
https://zenn.dev/morit4ryo/articles/45f3c698349c43
https://movabletype.net/support/design/easy-design-sample.html
https://movabletype.net/blog/2024/10/fusion-corprate-css.html
中編ではeditor:typeのcheckbox, radio, select, number, urlを扱います。

HTMLでもフォーム作成などでよく登場するもの ①

6. editor:type="checkbox"

editor:type="checkbox"は表示のオン・オフなどを切り替えるのに使用できます。
ここでは、公式マニュアルのX(Twitter)シェアボタンの表示切り替えを例とします。

設定ファイル

<mt:Var
    name="socialButtonX-Twitter"
    editor:type="checkbox"
    editor:mode="editor"
    editor:label="X"
    editor:if:value='
        <li class="entry-social-x-twitter">
            <a href="https://x.com/intent/post?url=" class="twitter-share-button" data-lang="ja" data-count="vertical">
                ポスト
            </a>
        </li>'
    editor:if:empty=""
>

若干a href=""の中身を変更しました。
現在Twitter(X)のシェアリンクはhttps://twitter.com/shareではなくhttps://twitter.com/intent/postとなっており、shareのまま実装するとAndroidでは検索ページに飛ばされてしまいます。
公式マニュアルの画像を見る限り、シェア数のカウントは表示されていないので、もしかするとdata-count="vertical"は不要かもしれません。

また、上記の例ではチェックボックスが一つしか必要ないため使われていませんが、複数のチェックボックスを用意したい際にはeditor:optionsを使用して以下のよう選択肢を用意することができます。

<mt:var
    name="main_area"
    editor:type="checkbox"
    editor:options="mainNews=メインニュース,mainPages=メインページ"
/>

また、editor:optionsと<mt:setVarBlock>とを組み合わせて、以下のように書くことも可能です（かんたんデザイン編集仕様詳細を参照）。

<mt:setVarBlock name="main_area_options">
    mainNews=メインニュース,mainPages=メインページ
</mt:setVarBlock>
<mt:var
    name="main_area"
    editor:label="メインエリア"
    editor:description="メインエリアに表示する項目を選択します"
    editor:type="checkbox"
    editor:options="$main_area_options"
    default="mainNews,mainPages"
    editor:update:selector=".mainArea"
    editor:update:fetch="1"
/>

テンプレート

<ul>
    <!-- mt-site-editor-socialButtonX-Twitter-->
        <mt:If name="socialButtonX-Twitter">
            <a href="https://x.com/intent/post?url=<$mt:CanonicalURL$>" class="twitter-share-button" data-lang="ja" data-count="vertical">
        </mt:If>
    <!-- /mt-site-editor-socialButtonX-Twitter-->
</ul>

※公式マニュアルだと<mt:If>の中に〜が書かれてますが、ボタンを書かないといけないかな？と思ったので、現在ページのURLを取得する<$mt:CanonicalURL$>も追加した版のシェアリンクを書いてみました（未検証）。

radioとselectは公式の利用例・Fusion Corporateテーマではなく、かんたんデザイン編集仕様詳細にサンプルがありましたので、そちらを参照します。

7. editor:type="radio"

editor:type="radio"はモードの選択など、複数用意された選択肢から1つ選ぶのに使用できます。
仕様詳細例ではサイトのデザインをライトテーマ・ダークテーマから選ぶ例が載っています。
editor:update:attributeでは、カラーテーマの設定が絡みそうなCSSのbackground-colorを対象としてみました。
JavaScriptのHTMLElement.styleプロパティ（つまりstyle:backgroundColor）、CSSのスタイル名（style:background-color）のどちらでも書くことができます。
.color-themeのようにCSSクラスがある場合は、シンプルにeditor:update:attribute="color-theme"となるようです。

設定ファイル

<mt:setVarBlock name="color_theme_options">light=ライト,dark=ダーク</mt:setVarBlock>
<mt:var
    name="color_theme"
    editor:label="カラーテーマ"
    editor:type="radio"
    default="light"
    editor:update:selector="body"
    editor:update:attribute="style:backgroundColor"
    editor:options="$color_theme_options"
/>

8. editor:type="select"

editor:type="select"もradioと同様に、モードの選択など、複数用意された選択肢から1つ選ぶのに使用できます。
違いはまず名前の通り、radioはラジオボタン、selectはドロップダウンリストから選択できることと、更にselectではeditor:options:multiple="1"と設定することで複数選択することも可能です。
（表示の分かりやすさとしては、複数選択をさせるならcheckboxを選択する方が良いとは思います）

仕様詳細例ではサイトのデザインをライトテーマ・ダークテーマから選ぶ例が載っています。
（editor:type="select"に変化しただけで、他の部分はeditor:type="radio"のサンプルコードと同様です）

設定ファイル

<mt:setVarBlock name="color_theme_options">light=ライト,dark=ダーク</mt:setVarBlock>
<mt:var
    name="color_theme"
    editor:label="カラーテーマ"
    editor:type="select"
    default="light"
    editor:update:selector="body"
    editor:update:attribute="style:backgroundColor"
    editor:options="$color_theme_options"
/>

9. editor:type="number"

editor:type="number"では、表示したい記事の件数など、数字入力に使用します。
ここではFusion Corporateテーマを参考に、最新記事の表示件数を扱います。

設定ファイル

<mt:SetVarTemplate name="theme_entry_item_template">
    <$mt:Include module="記事アイテム" title_tag="h3"$>
</mt:SetVarTemplate>
<mt:Var
    name="theme_toppage_latest_entries_limit"
    editor:label="最新記事の件数"
    editor:type="number"
    default="3"
    editor:update:fetch="1"
    editor:update:selector=".MTSE-latest-entries"
    <!-- ↓は記事の件数を更新した際に、記事一覧のHTMLを更新する必要があるので、mt:SetVarTemplateのnameを指定している -->
    editor:update:html="$theme_entry_item_template" 
    editor:register="0"
>

テンプレート

<mt:SetVarTemplate name="theme_entry_item_template">
    <$mt:Include module="記事アイテム" title_tag="h3"$>
</mt:SetVarTemplate>
<section class="MTSE-latest-entries">
    <mt:Var
        name="theme_toppage_latest_entries_limit"
        editor:label="最新記事の件数"
        editor:type="number"
        default="3"
        editor:update:fetch="1"
        editor:update:selector=".MTSE-latest-entries"
        editor:button:position="-10,-15"
    >
    <mt:If name="theme_toppage_latest_entries_limit" ge="1">
        <h2>お知らせ</h2>
        <div>
        <mt:Entries limit="$theme_toppage_latest_entries_limit">
            <$mt:Var name="theme_entry_item_template"$>
        </mt:Entries>
        </div>
      </mt:If>
    </mt:If>
</section>

※基本的な構造はFusion Corporateそのままですが、ここではeditor:type="number"の機能に焦点を当てたいため、細かな<mt:Else>やスタイリングのためのクラスなどは省いています。

<mt:If>は『使用ケースから考える・前編』でも扱いましたが、属性値のgeは初登場なので触れておくと、例えばge="1"の場合、指定した変数の値が 1 以上の場合にのみ実行します。
ここでは表示する最新記事の件数を指定しているので、1件以上であれば「お知らせ」として表示され、0件であれば、「お知らせ」自体が表示されなくなります。
geの他にもeq（=）、ne（≠）など色々用意されています。
詳細はこちらにまとまっています。
https://www.movabletype.jp/documentation/appendices/tags/if.html

10. editor:type="url"

editor:type="url"では、SNSアカウントへのリンクなど、URLを記入できます。
ここでは公式マニュアルのSNSアカウントへのリンクボタンを例とします。
この例ではテンプレート上では操作せず、右側の設定パネルのみでSNSアカウントへのリンクを指定する仕様のため、ソースコードも設定ファイルのもののみとなります。

設定ファイル

<mt:Var
    name="x-twitter"
    editor:label="XのURL"
    editor:type="url"
    editor:description="例：https://twitter.com/movabletypenet"
    editor:update:fetch="1"
    editor:update:selector=".footer-sns__wrap"
>

最後に

続きはこちらに執筆しました。
https://zenn.dev/morit4ryo/articles/aa217fd9167f7b
まだまだ学習しながらのまとめのため、誤読などもあるかもしれません。
ぜひコメント頂けると嬉しいです！

Discussion