Movable Typeにおいて、CKEditor for Movable Typeを適用したリッチテキストエディタ内にMTタグ（テンプレートタグ）を記述することはできるだけ避けたいことではありますが、ページの構成によってはやむを得ずMTタグを記述しなければならない状況が発生することがあります。

<!-- MTタグの例 -->
<$mt:SetVar name="category" value="中学1年"$>
<$mt:Include module="開設科目リスト"$>

しかし、ソース表示に変更してMTタグを貼り付け、WYSIWYG表示に変更すると、下記のようにMTタグがエンティティ化され、MTタグとして機能しない状態に陥ります。

フォーマットを「なし」にせず、「リッチテキスト」のままでMTタグとして扱う方法はないのでしょうか？

CKEditorのconfig.jsファイルのカスタマイズで解決

この事例も以前紹介した記事「CKEditor for Movable Typeの出力ソースをカスタマイズする方法」と同様に、CKEditorのconfig.jsファイルをカスタマイズすることで解決可能です。

名前空間CKEDITOR.config内にprotectedSourceという設定項目があるので、正規表現を利用してMTタグを表す文字列を記述します。<mt:Entries>、</mt:Entries>、<$mt:EntryTitle$>の3タイプの形式（ブロックタグとファンクションタグ）を<[\$\/]?mt[\s\S]*?>という文字列で表現しています。

これにより、下記のようにソース表示で入力したMTタグが正しく保持されるようになります（正確にはWYSIWYGモードでの編集を不可能にしている）。なお、WISYWIG表示ではMTタグは全く表示されないので注意が必要です。

カスタマイズ対象ファイルとコード例は下記の通りです。

カスタマイズ対象ファイル

/(MTインストールディレクトリ)/mt-static/plugins/CKEditor/ckeditor/config.js

• ※ MTにログインし、システムのプラグイン設定＞その他の設定に記述することで同様の編集ができるようですが、案件毎に設定するのは手間なので、ファイルを編集する方法を採用しています。

記述するコード

CKEDITOR.editorConfig = function(config) {
    // MTタグのエンティティ化を抑止
    config.protectedSource.push(/<[\$\/]?mt[\s\S]*?>\n?/g);
};

• ※ 改行が除去されるのを防止するため、正規表現に改行コードを含めています。

カスタマイズ後のconfig.jsのダウンロード

Gistに格納しましたのでよろしければご利用ください。

• Gist −CKEditor for Movable Type向けの設定ファイル

昨日の「Ruby初心者だけどゼロパディングするカスタムSassファンクションを作ってみた」に引き続き、文字列を置換するカスタムSass関数(custom Sass functions)を作ってみました。以前ヨモツネットの@yomotsuさんが「SVG GradientをSASS(LESS)で生成してCSS Gradientとして扱うmixin」の中で「SASSで文字列のreplaceができればいいのですが...。」と書かれていたので、需要があるかなと思った次第です。

• ※ "custom Sass functions"を昨日は「カスタムSassファンクション」と訳したのですが、今日からは「カスタムSass関数」と訳すことにします。「カスタムSass関数」の方が分かりやすく、しっくりくる気がするので...。

• 続きを読む

Twitterで「Sassを書いている時にゼロパディング（ゼロ埋め）したいんだけど...」という趣旨のツイートを見て（頻繁にありそうな話ですね）、次のようなコードを書きました。

• ※ width: 2em;はアテです。

// SCSS
$tmp: "";
@for $i from 1 through 3 {
	@if $i < 10 {
		$tmp: "0#{$i}";
	} @else {
		$tmp: $i;
	}
	.item-#{$tmp} { width: 2em; }
}

// CSS
.item-01{ width:2em; }
.item-02{ width:2em; }
.item-03{ width:2em; }

ただ、これだと汎用性・再利用性が悪いので、カスタムSassファンクションを考えてみました。

• 続きを読む

CSSのみでグラデーションが生成できるlinear-gradient関数は便利ですが、実際に利用しようとすると以下のような課題が発生します。

• ベンダープリフィックス（-moz-や-webkit-）を付けた記述をいくつか書かなければならない
• ビジュアルデザイン上（PSD上）で設定されたグラデーション設定（カラー・位置）を、色の数だけコピ＆ペーストしなければならない

これらの課題はグラデーションの数が増えれば増えるほど負担になってきます。そこで、SassとPhotoshopのスクリプトを利用して、クロスブラウザなCSS3グラデーションを簡単に実現する方法をご紹介します。

対応ブラウザ

• Internet Explorer(6〜10)
• Firefox
• Safari
• Google Chrome
• Opera

• ※ IE8以下はCSS3 PIEでサポート。

• 続きを読む

「[β版] Photoshopのグラデーションオーバーレイ設定を取得するスクリプト」を更新する際、CSSグラデーション（linear-gradient()）の構文変更が最新のブラウザではどう扱われているのか気になり、実装状況の確認を行いました。

構文・解釈の変更内容

キーワードの構文変更

グラデーションの起点を示していたものが、2011年9月8日付の草案より"to bottom"のようにグラデーションの方向を示すようになりました（"to"というワードと共に指定する）。つまり、上から下へのグラデーションは従来topと記述していましたが、to bottomと記述するようになりました。

// 2012年1月12日付最終草案に基づく記述方法
background-image: linear-gradient(to bottom, black, white);

角度表記の解釈の変更

水平右方向を0°とし反時計回りに回転するものとなっていたものが、2011年7月12日付の草案より方位角（0°は下から上で時計回りに回転）となりました。つまり、0degは左から右へのグラデーションを表していたものが、下から上へのグラデーションを表すものになっています。

• 続きを読む