アルファサード株式会社 代表取締役 野田 純生のブログ


やはりお前らのMTは間違っている!


公開日 : 2015-12-25 14:33:26


KeynoteScreenSnapz001

この記事は Movable Type Advent Calendar 2015 の最終日の記事です。

いや、今年も色々ありましたが実は地味に今年のトピックは Movable Type でテンプレートをフル実装する機会に恵まれたことですね。自分のブログ以外ではそんな機会はこれまでなかったのです。しかも PowerCMS じゃありません。予算の関係もあり、今回は Movable Type で行きましょう、ということになったのです。

本題に入る前に少し MTDDC の続きを

日本語変数名の使いどころ

日本語変数名の話しを少ししたよね。実際に有用なシーンに出会ったので紹介しておく。多言語サイトで。

<mt:BlogLanguage setvar="language">
<mt:If name="language" eq="ja">
    <mt:Setvars>
        サイト・パス=/jp/
        ホーム=ホーム
        最新ニュース=最新ニュース
        関連ニュース=関連ニュース
        年度=年度
        キーワード検索=キーワード検索
        サイト内検索=サイト内検索
    </mt:Setvars>
<mt:Else>
    <mt:Setvars>
        サイト・パス=/en/
        ホーム=Home
        最新ニュース=Latest News
        関連ニュース=Related News
        年度=Fiscal
        キーワード検索=Keyword Search
        サイト内検索=Search
    </mt:Setvars>
</mt:If>

<h1><mt:Var name="キーワード検索"></h1>

超わかりやすくないですかい? <mt:Var name="keyword_search_title"> みたいにわざわざ指定する必要ないんだから。同じテンプレートで行けるし、わざわざたくさんのカスタムフィールドを作る必要もない。比較や変数渡しの必要がなければ日本語でOK。

SetVarTemplate の使いどころ

Movable Type Advent Calendar の初日で BUNさんがちょうど書いていましたが、function(関数)のような形で使いまわしできるのがこのタグの良いところです。

複雑な分岐ロジックでなくとも、以下のようなテンプレートを直に分岐等を入れながら書くと、コーディングに修正が入った時の修正箇所が多くなります。

<mt:SetvarTemplate name="breadcrumbs_tmpl" note="パンくずのマークアップ">
<mt:Unless name="no_image"><img class="breadcrumb" src="/assets/img/common/breadcrumb.png" alt=""></mt:Unless>
<mt:If name="breadcrumbs_url">
<a class="breadcrumb" href="<mt:Var name="breadcrumbs_url">">
</mt:If>
<mt:Var name="breadcrumbs_title">
<mt:If name="breadcrumbs_url"></a>
</mt:If>
</mt:SetvarTemplate>

<mt:Var name="breadcrumbs_tmpl" breadcrumbs_url="$url" breadcrumbs_title="$title">

(※コーディングがどうとか言うなよ。俺が書いたんじゃねーんだ。) 要するに、URLとタイトル、画像の有無を渡せばパンくずのマークアップで出力できるというもの。

ここから本題。やはりお前らのMTは間違っている!

タイトルは釣り本気ですが、おおまかなテンプレート構築のフローを書きながらどんな風に作ったのかご紹介しつつ、何が間違っているのかについて考えていきましょう。

※ここで紹介したツール群は、年始に PowerCMS およびそれ以外の方法で(単品やクラウドサービスなど)でご提供する予定です。一部については既に公開しているものもあります。

コーディング素材を受け取って、MTのテンプレートに登録する

まず、制作会社から上がってきたコーディングデータと画像等の素材一式をMTのインデックステンプレートやアイテムに登録します。いくらなんでも自分でチマチマやるのは何なので、新人のデザイナーに「ここからこうやって登録...」といいかけて思ったのです。ハッ! いくら新人でもこんな単純作業に時間を割かせて良いものだろうか。今回の案件ではコーディングに SSIを利用していました。公開サイトでは動的なしくみは使えない制約があったので、ま、MTIncludeにすればええやと思いつつ...

納品されたコーディングデータ素材

とりあえずプラグインを作るところから始めました。でき上がったのがこいつです。

共通アイテム登録画面

ZIPファイルに素材を固めて管理画面からアップロードすると拡張子によってテキストファイル系はテンプレートに(インデックスか、テンプレートモジュールに)、画像等はアイテムに(@commonタグ付きで)登録してくれるものです。インクルードファイルをモジュールに、インクルード元ファイルをインデックス・テンプレートに登録すると、ちゃんと MTIncludeに変換してくれるんですぜ。

テンプレート編集画面の不便いろいろ

これはもう色々あるんですが、最初に大きな声で言っておきたいのは「お前ら声が小さい」「お前ら文字が小さい!」。デフォルトのフォントサイズは14ポイントです。で、これ設定とかで変えられません。アクセシビリティを何だと思ってるのか。年寄りを何だと思っているのか。

ということで次に作ったのがこいつです。ついでに最新の CodeMirror を入れてキーバインディングやスキンを変更できるようにしました。で、僕は MTのテンプレートにおいては「行を折り返す派」です!

テンプレート編集の設定

どうです? 見やすくなったでしょ?

改良後のテンプレートエディタ

次に手をつけたのはウィジェットとメモ欄です。メモ欄のことは MTDDCで話したので今日は詳しく触れませんが、ここ ( alfasado/mt-plugin-template-note ) からダウンロードできます改良されたテンプレート編集画面

しかしそれよりも何よりも「インクルードテンプレート」ウィジェットがあるのに「インクルードされているテンプレート」ウィジェットがないじゃん!

ということで次にこれを作りました。全テンプレートをロードするのでこれ、非同期読み込みです。ええ、これ書くために jQuery 勉強したんだぜマジで。

リンクされているテンプレートウィジェット

これで完璧だよね、とか自己満足して作業進めてたらそれでも足りない何かに気づいたのです。グローバルテンプレートへの移動が不便! そんなこともあろうかと、こいつ ((MT5)ユーザーダッシュボードに左メニューを追加する。 - Junnama Online) を入れておいたのです。でれでもテンプレート編集してる時だし移動したいのは。ということで、次にこれ作ったのさ。テンプレートをブックマーク保存できて、一覧画面、編集画面の右側のウィジェットに表示されるように。

ブックマークウィジェット

グローバルテンプレートの改良

(追記)グローバルテンプレート嫌いな人いるよとなんてうだけど、多言語サイトの共通テンプレートとかどこかのブログに置くのも気持ち悪いし、ブログIDが開発と本番で変わることってざらにあるのだからやはりそういうのはグローバルテンプレートが素直だと思う。ウェブサイトの配下にブログって手もあるけど、ひとつのサイトなのにブログ数が多いのってスマートじゃないと思う。いろんな意味で。(追記ここまで)

Twitter 検索してみたら色々出てくるじゃん。

あれ、途中からリビジョンの話しになったよ。グローバルテンプレートにはリビジョンがない。

2015年ですぜこれ。MT Studioで対応してたので、そいつを切り出して移植。ついでに Diffを見られるようにした(グローバルテンプレートに限らない)。

グローバルテンプレートのリビジョン対応

続いてこれ。

これ見たの、東京から新大阪へ向かう新幹線の中。京都に着いたあたりで見たんだよね。で、新大阪に着くまでにかけるやろかと思って、書けた。

シェルで、また敷居が高いとか何とか、ちゃんとUIも作っといた。

テンプレート一覧画面から実行できる

てか、そもそもテーマが当てられた時にリビジョンが保存されるようにしておいた。

これもなぁ。。。多分MT4で導入された MTInclude多様のテンプレートでページの先頭に空行たくさん入る問題の解決のためなんだろうが、これこそ安易な解決をするな、の好例だと思う。これについての対処としては、コメントタグを先頭に入れて正規表現で置換と言う美しくない解決を(今回は)した。

納品ドキュメントを作りやすく

乗ってきたのでついでに作った。というか上半期末の全社会議での社員の発表で話題に上がっていたので作った。テンプレートに「メモ」を付けておけば、それを含めて一覧に表示してくれる。HTMLで生成したけど、PDF化すればいいんじゃないかと(CSVも考えたけどこっちのほうが現実的っぽかった)。

テンプレートの納品ドキュメント

いい加減疲れてきた。他にも色々作った。他の Advent Calendar に書いたネタ( Authoring Tool Accessibility Guidelines の観点から CMSの画像挿入フローを検証する - Junnama Online )ですが、リッチテキストエディタと画像挿入のところを何とかしたくて リッチテキストエディタ及びエディタへのアイテム挿入に関する機能を拡張する Advanced Editorというプラグインを作った。

だいたい、記事編集画面の title要素は何だ ?

この画面キャプチャ見て何とも思いませんか?

記事編集画面の title要素が不適切。全ての記事で「記事の編集 - ブログ名 - ソフト名」となっている

アクセシビリティもそうだし、そもそもウィンドウやタブをいっぱい開いて作業してる時に何が何だかわかんないと思うんだがこれ、いつからなの? 誰も指摘しなかったのだろうか。プラグイン書いといたので、ご自由に使ってください。

ヒントは現場に転がっているし、声を上げることがコミュニティへの貢献に繋がる

このエントリで言いたかったことは、まさにこの一文なのです。MTQ でも FogBugz でも日本語でもOK。お前ら本当に Data APIが欲しかったの? いや、 Data APIが駄目だとか言ってるわけではなくて、普段 Movable Type 乗りまわしてるのってテンプレート、サイト構築してる我々じゃないか。何も考えずに目の前の仕事を進めるのではなく、考えるヒントは日常の仕事の中に転がっている。“事件は会議室で起こっているんじゃない、現場で起こってるんだ” ってことを再認識した師走の午後でした。

それでは、メリークリスマス、良いお年をお迎えください。



このブログを書いている人
野田純生の写真
野田 純生 (のだ すみお)

大阪府出身。ウェブアクセシビリティエバンジェリスト。 アルファサード株式会社の創業者であり、現役のプログラマ。経営理念は「テクノロジーによって顧客とパートナーに寄り添い、ウェブを良くする」。 プロフィール詳細へ