MT5 移行 - Emacs/LaTeX 用 SyntaxHighlighter; ImageMagick convert

このお休み，國芳展に出かける以外はうちでずっと MovableType ブログ管理システム（以下 MT）のバージョンアップ作業をやっていた。これまで Ver. 4 を使っていたんだけど，記事数が 1000 を越えてからカテゴリアーカイブが更新されないなどの不具合が出て，記事を追加するたびに再構築するなどの面倒な対処をさせられていた。でも MT 版更新はデザインの移行がしち面倒くさくてならない。それでも，小さい面倒を毎回強いられるより，MT 5.12 へのバージョンアップという本格的な面倒を一回だけ受け容れることにした。

Movable Type 5 移行

せっかくなのでデザインを新しくすることにした。Photoshop と Illustrator を用いてバナーやロゴなどの素材を自作した。MT4 のウィジェット設定をいちいち画面でコピーしてテキストファイルに格納して，これらを MT5 のデザイン設定に反映した。スタイルシートの調整がもっとも手間を要した。MT では，あるスタイル要素がいろんなスタイルシートで定義されているので，思うような効果が出ないとき悪さをしている定義を探すのがたいへんである。もっとラクな移行方法があるんだろうけど，MT をきちんと勉強するなんて気持ちはまったく起きない。

過去のブログ記事を MT4 環境でエクスポートし，Emacs や sed で必要な編集を施した。6 年も運用していると，引用などの表示様式に統一がなくなってしまったので，少しは改善しようと思ったのである。ついでに，先日インストールした SyntaxHighlighter をプログラム・コードの部分に全面的に適用した。

SyntaxHighlighter Emacs Lisp / LaTeX 用スクリプト

この過程で SyntaxHighlighter に Emacs-lisp，LaTeX，コマンドライン用のスクリプトがないのが気に入らなくなり，自作した。言語の追加は正規表現の扱い以外は極めて容易である。Emacs-lisp と LaTeX 用を以下に掲載しておく（コマンドライン用は Bash 用のものを少し訂正しただけなので割愛）。lisp 用は funcs 等の変数に指定したものが色づけされる。LaTeX 用はコメント行，コントロールシーケンスのみが色づけされる設定である。lisp 用，LaTeX 用のマークアップは brush に対してそれぞれ lisp，latex を指定すればよい。

/**
 * SyntaxHighlighter Emacs-lisp
 */
;(function()
  { 
      typeof(require) != 'undefined' ?
          SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
 
      function Brush()
      {
          var funcs     = 'lambda list progn mapcar car cdr reverse ' +
                          'member append format';
          var keywords  = 'let while unless cond if eq t nil defvar ' +
                          'dotimes setq listp numberp not equal';
          var macros    = 'loop when dolist dotimes defun';
          var operators = '> < + - = * / %';
 
          this.regexList = [
              { regex: SyntaxHighlighter.regexLib.doubleQuotedString, 
                       css: 'string' },
              { regex: new RegExp('&\\w+;', 'g'), css: 'plain' },
              { regex: new RegExp(';.*', 'g'), css: 'comments' },
              { regex: new RegExp('\'(\\w|-)+', 'g'), css: 'variable' },
              { regex: new RegExp(this.getKeywords(keywords), 'gm'), 
                       css: 'keyword' },
              { regex: new RegExp(this.getKeywords(macros), 'gm'),
                       css: 'keyword' },
              { regex: new RegExp(this.getKeywords(funcs), 'gm'), 
                       css: 'functions' }
          ];
      };
   
      Brush.prototype = new SyntaxHighlighter.Highlighter();
      Brush.aliases   = ['lisp'];
      SyntaxHighlighter.brushes.Emacs = Brush;
      typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
  })();

/**
 * SyntaxHighlighter LaTeX
 */
;(function()
  { 
      typeof(require) != 'undefined' ? 
          SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
 
      function Brush()
      {
          this.regexList = [
              { regex: new RegExp('%.*','gm'),  css: 'comments' },
              { regex: new RegExp('\\\\\\w*','gm'), css: 'keyword' }
          ];
      };
   
      Brush.prototype = new SyntaxHighlighter.Highlighter();
      Brush.aliases   = ['latex', 'tex'];
      SyntaxHighlighter.brushes.Latex = Brush;
      typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
  })();

ImageMagick convert 色の置換

今回のブログ・デザイン変更でいちばん困ったのは，背景色変更に伴う画像の扱いである。背景色はこれまで白（RGB で示すと #ffffff）だったのを明灰色（#e8e5e1）に変えたのだが，すでにゴマンとある画像が白の背景色を前提としているためにドロップシャドウなどが白抜きになっていて，これを明灰色の背景に配置すると白の枠が大いに目立って醜いことこの上ない。例えばこんな感じになってしまう。

この対策のために何百とある画像を作り直すのは現実的でない。背景色になじむ枠画像と重ね合わせる調整をスタイルシートで行うことなどを考えたが，ブラウザによっては配置がずれたりしてさらに醜くなるかも知れず，うまくない。結局，ImageMagick によって色の置換を行うことにした。

ImageMagick には convert ユーティリティが付属していて，各種画像変換が可能である。

convert -fill '#rgb-after' -opaque '#rgb-pre' prefile afterfile

とやるとファイル prefile の RGB 値 rgb-preの色を rgb-after に置き換えて afterfile に出力してくれるのである。しかも -fuzz nn% オプションを付加すれば，指定した度合いでファジーに中間色を置き換えてくれる。いくつかパーセンテージを変えて試したところ，-fuzz 10% くらいがよい感じであった。そこで，tcsh コマンドライン上で以下のようにして画像を一括変換した。もちろん，エクスポートしたブログ記事テキストの画像ファイル名拡張子を .png に置換しておかなければならない。

% foreach i (*.jpg)
foreach? set bn=`basename $i .jpg`
foreach? convert -fuzz 10% -fill '#e8e5e1' -opaque '#ffffff' $bn.jpg $bn.png
foreach? end
%

これで上の画像は以下のとおりとなり，背景色に対してごく自然になじむようになった。UNIX のコマンドライン・ユーティリティの文化は偉大である。ただし，白にごく近い色への変更でないとこの方法は通用しない。また，当然ながら画像の #ffffff の白がすべて #e8e5e1 に置き換わるので純白の画面がおとなしくなってしまうだけでなく，文字を含む画像では少し字が瘠せてしまうので，手放しでよいというわけではない。それでも私の目的には充分であった。Web に掲載する画像にドロップシャドウを付ける場合は，白抜きの部分をアルファチャンネル（透過）にして PNG で作成しておくべき — 今回の教訓。

エクスポート・ブログ記事テキストの編集が終わったら，新 MT5 環境でインポートし，再構築して，過去の記事の取り込みは完了した。MT5 にバージョンアップして，1000 を超過した記事のカテゴリ処理もうまく行くようになっただけでなく，再構築がかなり高速になった。

insomnia - 二夜目の眠れない夜