Movable Type のブログ記事の出力ファイル名を変更する管理画面のカスタマイズ

実装する機能

今回のカスタマイズで追加するというボタンには、次のような機能を実装します。

• 出力ファイル名のロックを解除する。
• 出力ファイル名を「日-時分秒」のフォーマットで書き換える。Movable Type 備忘録さんの URL がそれっぽかったのでマネしました。
  （例） 9月22日 6 時50分30 秒の場合：22-065030
• 書換え後にブログ記事を保存する。
• ただし、既に出力ファイル名がこのフォーマットになっている場合は、確認メッセージを表示し、書き換えて保存するか、書き換えずにそのまま保存するか分岐する。

カスタマイズ方法

管理画面のカスタマイズについては、Movable Type プロフェッショナル・スタイル MT4.1対応の Track B の「 5 ユーザー指向の管理画面をつくる」がとても参考になります。

カスタマイズするファイルの準備

今回カスタマイズするのは、ブログ記事やウェブページの編集画面用のテンプレートファイル「 edit_entry.tmpl 」です。このファイルは以下の場所にあります。

• mt
  • tmpl
    • cms
      • edit_entry.tmpl

このファイルを直接カスタマイズせずに、ローカルにコピーして同名で保存したファイルをカスタマイズします。

カスタマイズ内容

さっそくカスタマイズしてみます。

まずは「出力するファイル名を設定して保存」ボタンを追加するために、「 edit_entry.tmpl 」の 60 行目の後に、次の button 要素を挿入します。

[ 60 行目]
        ><__trans phrase="Save"></button>

[挿入するソース]
    <mt:if name="object_type" ne="page">
    <button
        mt:mode="save_entry"
        name="basenameStamp_entry_save"
        type="submit"
        title="出力ファイル名に「日時分秒」を設定して保存"
        class="primary-button"
        onclick=" basenameStamp ()"
        >出力ファイル名を設定して<__trans phrase="Save"></button>
    </mt:if>

このボタンには、通常の「保存」と同様の機能を持たせたいので、54 ～ 60 行目の「保存」ボタンのソースをコピーして、少しだけ変更しています。

このボタンは、その性質上、ウェブページには必要ないので、if タグで全体を囲ってウェブページ以外にのみ反映されるようにしています。

    <mt:if name="object_type" ne="page">
    .....
    </mt:if>

onclick で、クリックされたときに basenameStamp という JavaScript の関数を呼び出します。この関数が、今回のカスタマイズの肝です。

        onclick=" basenameStamp ()"

次に、button 要素挿入後の 911 行目の後に、次のソースを挿入して、basenameStamp という JavaScript の関数を定義します。

[挿入後の 911 行目]
        </script>

[挿入するソース]
    <script type="text/javascript">
    function basenameStamp () {
        var defaultValue = document.entry_form.basename.value;
        var defaultValueCheck = defaultValue.match(/\d{2}-\d{6}/);
        function stamp () {
            toggleFile();
            function digits(num) {
                if(num < 10){num = '0' + num;}
                return num;
            }
            var now = new Date();
            var dateTime = '' + digits(now.getDate()) + '-' + digits(now.getHours()) + digits(now.getMinutes()) + digits(now.getSeconds());
            document.entry_form.basename.value = dateTime;
        }
        if (defaultValueCheck) {
            var warning = confirm ("出力ファイル名は既に設定されている可能性があります。\n\n現在の出力ファイル名 : " + defaultValue + "\n\n変更して保存しますか？");
            if (warning) { stamp (); }
        } else {
            stamp ();
        }
    }
    </script>

関数内を上から順に見ていくと、まず、「出力ファイル名」を設定するテキストエリアの値を取得し、変数 defaultValue に代入します。

        var defaultValue = document.entry_form.basename.value;

その変数 defaultValue の値を、設定するフォーマットになっているか正規表現でチェックし、結果を変数 defaultValueCheck に代入します。

        var defaultValueCheck = defaultValue.match(/\d{2}-\d{6}/);

次に、出力ファイル名を書き換える関数 stamp を定義します。toggleFile(); は出力ファイルを変更できるようにするロックの解除、関数 digits で 10 未満の数字の頭に 0 を付けて 2 桁に、それ以降で出力ファイル名のテキストエリアの内容を、現在時刻を取得して先ほどのフォーマットにして書き換えます。

        function stamp () {
            toggleFile();
            function digits(num) {
                if(num < 10){num = '0' + num;}
                return num;
            }
            var now = new Date();
            var dateTime = '' + digits(now.getDate()) + '-' + digits(now.getHours()) + digits(now.getMinutes()) + digits(now.getSeconds());
            document.entry_form.basename.value = dateTime;
        }

最後に実際の処理を設定します。

        if (defaultValueCheck) {
            var warning = confirm ("出力ファイル名は既に設定されている可能性があります。\n\n現在の出力ファイル名 : " + defaultValue + "\n\n変更して保存しますか？");
            if (warning) { stamp (); }
        } else {
            stamp ();
        }
    }

先ほど正規表現でチェックした値がマッチした場合は既に出力ファイル名を変更している可能性が高いので確認メッセージを表示します。「OK」をクリックすると出力ファイル名を書き換えて保存し、「キャンセル」を押すと書き換えずにそのまま保存します。これは誤ってファイル名を書き換えてしまわないようにする保険的な機能です。

正規表現でチェックした値がマッチしなかった場合は、出力ファイル名を書き換えて保存します。

カスタマイズしたファイルをアップロード

以上の内容に書き換えたファイルを文字コード UTF-8 で保存し、次のディレクトリにアップロードします。ファイル名は「 edit_entry.tmpl 」です。

• mt
  • alt-tmpl

最初に「 edit_entry.tmpl 」があったディレクトリとは別ですのでご注意ください。

動作確認

ブログ記事の編集（作成）画面にアクセスしてみると、ボタンが表示されています。

ウェブページの編集（作成）画面には表示されていません。

ボタンをクリックして、正常に動作することが確認できました。

以上です。カスタマイズしたファイルを置いておきますので、解凍してご自由にお使いください。

• edit_entry.zip

※ご利用は自己責任でお願いします。

【2008-10-01 追記】

この続きのカスタマイズで、「公開日」も同時に変更するカスタマイズを掲載しました。

• 「出力ファイル名」と「公開日」を同時に変更する管理画面のカスタマイズ