MT5でテンプレート編集フォームをテキストエリアにする5つの方法

MT5でのテンプレート編集フォーム

MT5ではテンプレートの編集フォームにCodeMirrorが採用され、シンタックスハイライトのオンとオフを切り替えることができなくなりました。

ただ、シンタックスハイライトは綺麗でよいのですが、CodeMirrorでは「タブ文字」が認識されなかったり、編集領域が「iframe」になってしまうため「textarea」であることを前提にしたブラウザのプラグインが利用できなかったり、また単純に重いなど、利用の仕方や環境によっては不便な場合もあるようです。

今回はこれを解消する方法を5つ(他のブログで紹介されている方法を2つと独自の方法を3つ)紹介します。

まずは(1)〜(2)として、既に他のサイトで公開をされている方法を紹介します。

(1) MTのプラグインで無効にする

この問題を解決する方法として一番最初に紹介されたものだと思いますが、小粋空間さんが公開されているInvalidateCodeMirror プラグインというものがあります。

このプラグインではテンプレート編集画面のHTMLソースを書き換えてCodeMirrorが有効にならないようにしていますので、ブラウザを問わず有効で、かつCodeMirrorが重いという問題も解消されます。

(2) テンプレートのソースファイルを書き換える

また別の方法として、えぬぱすどっとねっとさんがMT5のテンプレート編集画面を軽快にする方法というものも公開をされています。

これも(1)と同様に、テンプレート編集画面のHTMLソースを書き換えてCodeMirrorが有効にならないようにするという方法を採用しているので、ブラウザを問わず有効で、かつCodeMirrotが重いという問題も解消されます。

これ以降、(3)〜(5)がこのサイトで新しく紹介する方法です。

(1)と(2)の方法ではサーバー上のMTに手を入れるため、ブラウザを問わず有効ですし、またCodeMirrorも有効にならないため軽量化もできるという優れた点があるのですが、ただ例えば、「ちょっとテンプレートが分からないので見てほしい」とか「プラグインを自由にインストールすることができない」とかいった場合には対応ができないというところがありました。

そこでこれ以降の方法ではサーバー上のMTではなく、ブラウザ(※1)に手を入れてtextareaで編集できるようにしようというアプローチで進めていきます。
(※1) (4)と(5)はFirefox限定

(3) ブックマークレットを使う

任意のページをアドホックに変更する場合はブックマークレットが便利なので、これを使ってみます。(どのブラウザでも動作します)

以下のリンクをブックマークして、MTのテンプレート編集ページで実行してください。

TextareaForMT

以下のようなコードになっています。

javascript:(function(){window.editor.getCode=null;jQuery('#text').show().attr('rows', 30);jQuery('.CodeMirror-wrapping').hide()})();

(4) Greasemonkeyスクリプトを使う

(3)ではテンプレート編集ページを開くたびにブックマークレットを実行する必要がありますが、Firefoxにはこういったスクリプトを自動で適用してくれるGreasemonkeyというアドオンがありますので、(3)と同じ内容でGreasemonkeyスクリプトを用意しました。

以下のリンクをクリックするとインストールできます。

TextareaForMT.user.js

以下のようなコードになっています。

// ==UserScript==
// // @name         TextareaForMT5
// // @namespace    http://github.com/usualoma/textarea-for-mt5
// // @description  Editing template by plain textarea.
// // @include      http://*
// // @exclude
// // ==/UserScript==
if (
	(typeof unsafeWindow.MT !== 'undefined')
	&& (typeof unsafeWindow.jQuery !== 'undefined')
) {
	(function() {
		var $ = unsafeWindow.jQuery;
		var code_mirror = $('#template-body-field .CodeMirror-wrapping');
		if (code_mirror.length) {
			setTimeout(function() {
				unsafeWindow.editor.getCode = null;
				code_mirror.hide();
				$('#text').attr('rows', 30).show();
			}, 1000);
		}
	})();
}

setTimeoutで1秒間を空けているのは、原因ははっきり分からないのですがこれを入れないとエラーになったからです。

(5) Firefoxのアドオンにする

(4)のGreasemonkeyスクリプトで多くの場合要件は満たすことができると思うのですが、一度初期化はされるためtextareaになる前に一瞬CodeMirrorでハイライトされたソースが表示されることもあり、若干気になります。

また誰かに奨めるときに、「Greasemonkeyはインストールされている？」と確認するのも若干面倒です。

というところで、「ブラウザに手を入れる方法でも最初から初期化されないようにしたい」かつ「Firefoxであれば難しいことを言わないで使えるようにしたい」という方針で、Firefoxのアドオンを作ってみました。

TextareaForMT5
※開発中のため動作が不安定の可能性もありますが、ご了承ください。

このプラグインを入れるとMT5のテンプレート編集画面でも最初からCodeMirrorが入っていないかのようにtextareaが表示されます。またインストール後「ツール > アドオン > TextareaForMT5」からテキストエリアの高さも指定することができます。

まとめ

MTに手を入れる方法(1)〜(2)からブラウザに手を入れる方法(3)〜(5)まで、5つの方法の紹介でした。

MT5ではテンプレートもMTでリビジョン管理ができるので、ブラウザで編集をして管理する方法もより積極的に行ってよいのではと考えています。なのでそんな意味でも、MTがデフォルトでtextareaで編集をさせてくれるオプション持っていればいいのにと思いつつ、今回はアドオンの作成などしてみました。