Movable Type のブログ記事の出力ファイル名は、デフォルトのままだと、タイトルから判断してシステムが自動的に作成します。 基本的には、タイトルに含まれる英数字を拾い出し、スペースはアンダースコア「 _ 」、すべてが日本語だったら「 post-1 」のようになります。 このシステムが自動的に作成するファイル名が結構イケてなくて、異様に長かったりアンダースコアやらハイフンやらがバンバン入っ...
Movable Type のブログ記事の出力ファイル名は、デフォルトのままだと、タイトルから判断してシステムが自動的に作成します。
基本的には、タイトルに含まれる英数字を拾い出し、スペースはアンダースコア「 _ 」、すべてが日本語だったら「 post-1 」のようになります。
このシステムが自動的に作成するファイル名が結構イケてなくて、異様に長かったりアンダースコアやらハイフンやらがバンバン入っていたりすることがあります。また、異様に長いファイル名があったと思ったら「 post-1 」というファイル名があったりして、サイト内での統一が全く取れていないことに気付き、悲しくなったりもします。
Movable Type の知識がある程度あれば、最初からアーカイブマッピングを設定し、ブログ記事の ID をファイル名にしたり、投稿日時をファイル名にしたりして、統一することができますが、僕のように「とりあえず始めてみた」的な人は、こういった状態に陥ることは少なくないのではないでしょうか。
だからと言って、途中でアーカイブマッピングを変更するわけにもいかないし、毎回手動で変更するのも面倒なので、目をつむってしまうことも少なくないかもしれません。
そこで、ブログ記事の編集画面に、「出力ファイル名を設定して保存」というボタンを作るカスタマイズをしてみました。
今回のカスタマイズで追加するというボタンには、次のような機能を実装します。
管理画面のカスタマイズについては、Movable Type プロフェッショナル・スタイル MT4.1対応の Track B の「 5 ユーザー指向の管理画面をつくる」がとても参考になります。
今回カスタマイズするのは、ブログ記事やウェブページの編集画面用のテンプレートファイル「 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 」です。
最初に「 edit_entry.tmpl 」があったディレクトリとは別ですのでご注意ください。
ブログ記事の編集(作成)画面にアクセスしてみると、ボタンが表示されています。
ウェブページの編集(作成)画面には表示されていません。
ボタンをクリックして、正常に動作することが確認できました。
以上です。カスタマイズしたファイルを置いておきますので、解凍してご自由にお使いください。
※ご利用は自己責任でお願いします。
この続きのカスタマイズで、「公開日」も同時に変更するカスタマイズを掲載しました。