Zenn
🔩

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

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

記事の前提

④では③の中編に引き続き、公式マニュアルにある『かんたんデザイン編集コンポーネント利用例』と公式が10月1日に発表した新テーマ『Fusion Corporate』を見つつ、書き方を理解したいと思います。
https://zenn.dev/morit4ryo/articles/883fcc05da354d
https://movabletype.net/support/design/easy-design-sample.html
https://movabletype.net/blog/2024/10/fusion-corprate-css.html
後編ではeditor:typeのdate, email, password, tel, list, hidden, settingsを扱います。

HTMLでもフォーム作成などでよく登場するもの ②（公式サンプルなし）

ここから先のdate, email, password, telは公式マニュアル・FusionCorporateに使用例がないケースとなるため、独自に検証したものとなります。
そのため、最低限理解する必要がある

  • どういった入力フォームになるのか
  • defaultの値はどのように指定できるのか
    をメインに見ており、不十分な点もあるかもしれませんがご理解ください。

11. editor:type="date"

名前の通り、日付を入力できるタイプとなります。
例えば<mt:If>などを組み合わせれば、バナーなど「特定の要素の公開日を指定したい」ケースに使用できるかもしれません（ちなみにeditor:type="time"は存在しませんでした）。
日付入力専用のGUIが用意されているので、設定パネル上で日付以外の値を入力できないようになっています。

設定ファイル

<mt:Var
  name="date_test"
  editor:label="dateテスト"
  editor:type="date"
  editor:mode="editor"
  default="2024-04-01"
>

12. editor:type="email"

こちらはメールアドレスを入力できるタイプです。
お問い合わせなど連絡先のメールアドレスなどを指定する場合に使えるかもしれません。
（お問い合わせに関しては、MovableType.netのフォームがあるため、そちらを使う方が良さそうですが）
入力する値はバリデーションが用意されているため、明らかにメールアドレスではない値を入力するとエラーが出ます。

設定ファイル

<mt:Var
  name="email_test"
  editor:label="emailテスト"
  editor:type="email"
  editor:mode="editor"
  default="foo@example.com"
>

13. editor:type="password"

パスワードを設定できるタイプです。
使用頻度はかなり低そうですが、サイトのBasic認証や、 限定公開記事の作成などに使用できるかもしれません…？
※サイト自体のBasic認証/パスワード認証は、「設定 > 公開 > 限定公開」で有効にできるため、特に自力で実装する必要はないと思われます。
入力した値は*で見えなくなるので、入力間違いには注意が必要です。

設定ファイル

<mt:Var
  name="password_test"
  editor:label="passwordテスト"
  editor:type="password"
  editor:mode="editor"
  default="12345678"
>

14. editor:type="tel"

電話番号を入力できますが、HTMLの<input type="tel">と同様で特にバリデーションがないようです。

設定ファイル

<mt:Var
  name="tel_test"
  editor:label="telテスト"
  editor:type="tel"
  editor:mode="editor"
  default="0120-000-000"
>

その他・独特なもの

最後に、editor:typeの中でも特殊なものを3つ扱います。
公式の利用例・Fusion Corporateテーマだけでなく、かんたんデザイン編集仕様詳細のサンプルを参照します。

15. editor:type="list"

MovableType.netで作成した記事やウェブサイトを複数選択できます。
ヘッダーやフッターに掲載するリンクの設定などに使用することが可能です。
Fusion Corporateテーマのフッターナビゲーションを参照します。

設定ファイル

<mt:Var
    name="theme_sub_menu_items"
    editor:label="フッターナビゲーションに表示するウェブページ"
    editor:type="list"
    editor:mode="editor"
    editor:update:selector=".MTSE-sub-menu-item"
    editor:update:html="$theme_sub_menu_item_template"
    editor:update:parent:selector=".MTSE-sub-menu"
    editor:register="0"
>

テンプレート

<mt:Var
    name="theme_sub_menu_items"
    editor:label="フッターナビゲーションに表示するウェブページ"
    editor:type="list"
    editor:mode="editor"
    editor:update:selector=".MTSE-sub-menu-item"
    editor:update:html="$theme_sub_menu_item_template"
    editor:update:parent:selector=".MTSE-sub-menu"
    editor:button:position="-10,-15"
>
<mt:If name="theme_sub_menu_items">
    <mt:Pages ids="$theme_sub_menu_items">
        <li class="MTSE-sub-menu-item">
            <a class="MTSE-sub-menu-item__title MTSE-sub-menu-item__url" href="<$mt:PagePermalink$>"><$mt:PageTitle encode_html="1"$></a>
        </li>
    </mt:Pages>
</mt:If>

<mt:Pages>ではidsで複数指定された記事・ウェブページのidを取り、idの数だけリスト<li>としてリンク<a>を作成し、ページタイトル<$mt:PageTitle encode_html="1"$>を表示しています。

16. editor:type="hidden"

editor:type="hidden"では、<input type="hidden" />（＝画面上に表示されないinput要素）が挿入されます。
公式マニュアルの例では、次の 17. editor:type="settings" のような、設定項目を<template>内で複数扱う際に使用されるケースがありました。
ただhiddenを使用しないと書けないケースというものは恐らく無く、登場頻度はかなり低いと思われます。

設定ファイル

  <swipper-loop>
    <h4>最後のスライドまで到達した場合の動作</h4>
    <$mt:Var name="swipper_loop" editor:type="hidden"$>
    <fieldset>
      <label
        ><input
          type="radio"
          name="swipper-loop"
          value="true"
        />最初に戻る</label
      >
      <label
        ><input type="radio" name="swipper-loop" value="false" />戻らない</label
      >
    </fieldset>
  </swipper-loop>

17. editor:type="settings"

settingsでは、コンポーネントの中に入れ子構造となる形で<template>を持たせることができます。
こちらもhiddenと同様に、settingsを使用しないと書けないケースというものは恐らく無く、登場頻度はかなり低いと思われます。
（単にレイアウトを整えたいのであればHTMLタグを使用すれば事足りるため）

以下の画像は「イメージスライダー」という名前のテンプレート・モジュールの設定パネルに、下記ソースコードを記述した結果です。ソースコードの内容は公式マニュアル詳細仕様の内容を元に、少しだけ変更を加えています。（末尾の注意事項も参照）

<mt:var name="">で指定した名前を<template data-template-name="">にも指定することで、以下のような見た目となります。

設定ファイル

<mt:var
    name="banner-image"
    editor:type="settings"
    editor:mode="editor"
    editor:label="バナー画像"
    editor:description="バナー画像の変更が可能です。"
/>
<template data-template-name="banner-image">
    <mt:var
        name="banner-image-src"
        editor:type="image"
        editor:mode="editor"
        editor:description="画像"
        editor:register="0" />
    <mt:var
        name="banner-image-url"
        editor:type="text"
        editor:description="リンクURL"
        editor:mode="editor"
        editor:register="0" />
    <mt:var
        name="banner-image-text"
        editor:type="textarea"
        editor:description="テキスト"
        editor:mode="editor"
        editor:register="0" />
</template>

最後に

ここまで、17種類のeditor:typeをそれぞれの使用例とともに纏めました。
これらを組み合わせることで、かなりカスタマイズ性の高いMT.netテーマの作成が可能となると思います！
実際にテーマ開発を行った上でまた細かな記事を書ければと思います。

まだまだ学習しながらのまとめのため、誤読などもあるかもしれません。
ぜひコメント頂けると嬉しいです！

Discussion