技術資料

Movable Type のプラグインの作り方の解説記事、第二回です。

前回の記事は、

• Movable Typeプラグイン開発入門：第一回 基本的なプラグインの作成方法

今回は、Movable Type 管理画面のプラグイン一覧で、プラグインの設定変更ができるところまで進めます。

config.yaml に設定画面の情報を追加

前回の記事で作成した SamplePlugin の config.yaml に、設定画面の情報を追加します。

今回は、何らかの外部APIから情報を取得するプラグインを作ると仮定して、APIキーと、APIの有効/無効フラグの設定を行なえるようにします。

config.yaml の内容は以下の通り。

id: SamplePlugin
name: SamplePlugin
version: 0.2
description: 一覧画面で設定を変更できるだけのプラグインです。
author_name: Tatsuya Abe
author_link: https://www.abe-tatsuya.com/
doc_link: https://www.abe-tatsuya.com/document_url/

system_config_template: sampleplugin_setting.tmpl
settings:
    sample_api_key:
        default:
        scope: system
    sample_api_enable:
        default: 0
        scope: system

追加したフィールドは以下の通りです。

system_config_template

設定画面のテンプレートファイル名。
ここで指定したファイル名のテンプレートファイルを tmpl/ ディレクトリ内に作成します。

settings

設定画面で表示する設定項目の情報。
sample_api_key(APiキー) と sample_api_enable(APIの有効/無効フラグ) の二つの設定項目を追加しています。

default

初期値

scope

設定のスコープ(system: システム全体, blog: ブログ単位)

また、version と description を前回から微妙に変えています。

設定画面のテンプレートファイルを作成

system_config_template で指定したファイル名のテンプレートファイル(sampleplugin_setting.tmpl)を tmpl/ ディレクトリ内に作成します。

sampleplugin_setting.tmpl の内容は以下の通り。

<mtapp:setting id="sample_api_key" label="APIキー">
    <input type="text" name="sample_api_key" id="sample_api_key" class="form-control w-100"
        value="<mt:GetVar name="sample_api_key" escape="html">">
</mtapp:setting>


<mtapp:setting id="sample_api_enable" label="API有効化">
    <br>
    <label>
        <input type="radio" name="sample_api_enable" id="sample_api_enable_yes" class="custom-control-input"
         value="1"<mt:if name="sample_api_enable" eq="1"> checked="checked"</mt:if> >
         APIを有効化する
    </label>
    <br>
    <label>
        <input type="radio" name="sample_api_enable" id="sample_api_enable_no" class="custom-control-input"
         value="0"<mt:if name="sample_api_enable" ne="1"> checked="checked"</mt:if> >
         APIを無効化する
    </label>
</mtapp:setting>

APIキーの入力欄と、APIの有効/無効を選択するラジオボタンを設定画面に表示するテンプレートファイルを作成しました。

動作確認

設定画面の情報を追加したプラグインをインストールし、Movable Type の管理画面にログインします。

「システム」⇒「設定」⇒「プラグイン」を開いて、インストールされているプラグインの一覧を確認します。

「SamplePlugin」の「設定」をクリックすると、設定画面が表示されます。

APIキーの入力欄と、APIの有効/無効を選択するラジオボタンが表示されていることを確認します。また、sample_api_enable の default値を 0 に設定したので、初期状態では「APIを無効化する」が選択されていることも確認します。

フォームに適当に値を入力して「変更を保存」を行なうと、入力した値がちゃんと保存されます。

保存されたデータは、Movable Type のデータベースの mt_plugin_data テーブルに保存されています(BLOB型のデータとして保存されるので、直接データベースから内容を確認するのは手間ですが)。