MTのテンプレート編集画面にEmmetを組み込んでみた

Twitter・Facebookで先に動画だけ公開したのですが、Movable Typeのテンプレート編集画面にEmmetを組み込んでみました。

最近PowerCMSを使用した案件を進めていて、作業中にこれはどのようにテンプレートを組むのだろう?と思い、テンプレート編集画面を使って試行錯誤を重ねることがあります。その際、HTMLを書くのが少し手間で、Emmetが使えたらなと思ったのがきっかけです。(GhostTextもありますが、とにかくサッと書き始めたい。ポイントだけHTML・MTMLを書くとエンコーディングの判定が上手くいかず文字化けすることが...。)

探してみると、GithubにEmmet plugin for CodeMirror 4.x+を見つけました。CodeMirror 4.x+対応ということでCodeMirrorの最新版(5.13.2)を入れて動作させてみたところ、思惑通り動作しました。さらにmte<mt:Entries></mt:Entries>に展開するなどのカスタマイズを加え、テンプレートを編集している画面を動画にしました。(先日の動画は見づらかったので撮り直しました。)

動画内でタイプしてみましたが、!でHTML5のベースとなるコードが展開されたり、ul>li>aでリストが展開されたりと、スピーディにコードを記述していくことができるようになりました。

テーマをMonokaiに、キーバインディングをSublime Textにするなど、見やすさ・使いやすさも向上させています。もう少しEmmetをカスタマイズしていくと、コードの試行錯誤には便利な画面ができそうです。またプラグイン化して、容易に適用・削除ができるようになると良いなと検討しています。

この記事のタグ