MovableType構築案件で使うテーマを作ってみた【mt-theme-starterket】


この記事は [Movable Type Advent Calendar 2016 – Adventar](http://www.adventar.org/calendars/1381) の 5日目になります。

初のAdvent Calendarの投稿になります。※投稿にあたり自分のブログでも？っと思ったのですがタイムオーバー
いつにしようか迷いましたが、12月5日は結婚記念日だったのでこの日を選択しました。

好きなMTタグは、変数系のタグが大好きです。なんでも入れれる押入れみたいなところが好き
（mt:Var・mt:SetVar・mt:SetVars・mt:SetVarBlock・mt:SetVarTemplate）

今年は、約6年勤めた会社を退職し転職したり同時進行案件で徹夜をしたりバタバタとしてた1年でした。※社会人初の有給休暇の一ヶ月が楽しかった(*´ω｀*)

さて、本題にいきたいと思います。

## なぜテーマを作ったのか

今年は小さいものから大きいものまでMTの実装案件が特に多い1年でした。
毎回お馴染みの既存テーマのデリートをした日々が続き、もう自分用のテーマキットを作ったほうがいいなと思ったので初のテーマ？を作ることにしました。

実際、既存テーマから作業して使わないテンプレート・ウィジェット周りを残したままリリースしていました。
使っていないテンプレートやウィジェットを残してても動作はするのですが、案件で使っていないものを残しておくのは別の方改修する時に迷ってしまいます。基本のテンプレートで作業を開始して必要あれば追加（ウィジェットなど）すればいいと思ったからです。

自分が構築するときに使うベース的なものを用意すれば良いと思ったのが作ったきっかけになります。

タイトルのようにmt-theme-starterketは、デザインも処理も特にないテーマになります。（これをテーマと呼んでいいのか疑問ですが。。）※決まったテンプレートモジュールだけが格納されているだけ

クライアントによってやりたいこと・デザインも違うためそういったものは要件が決まった段階で0ベースで作っていく形になります。
何事もシンプルかつフレキシブルに活用していきたいと思いました。

他の組み込みしている方がどういったフローで構築しているかわかりませんが、私は決まった処理などは虎の巻（メモ書き）やドキュメントをみて作成することがほとんどです。※MTタグやれることいっぱいあるけど覚えられないもん(；・∀・)

私の担当する案件は、以下のようなワークフローがほとんどです。（一般的だと思いますが）
全体のプロジェクトとしてはたくさんあるのですが、制作フローとしてはこのような感じになります。

* デザイン作成・Fix
* サーバの用意（MTのインストールやコーディングプレビュー用サーバの用意など）  // （最近は担当していませんが以前は担当範囲）
* プラグインの選定と検証（やりたいことができるプラグインを探したり検証したり）
* コーディング実装  // （担当範囲）
* MTの組み込み  // （担当範囲）メイン

## 構築のルールを考えてみた（設計と呼ばれる部分）

私は、命名規則とか設計とか得意じゃないタイプなんですが、テーマを作る上最低限のルールだけを設けてみました。

``` html
<mt:ignore>
命名・設計とか厳密!!が多いプロジェクトありますが、本当にルールは緩い・少ないのが一番だと思っている自分。多いと忘れるし伝えるコストが一番かかるし。※仮にドキュメント豊富でもパット見でわかるものが一番。
</mt:ignore>
```

以下のルールで構築することを考えてみた

* テンプレートのラベル名はすべて英語表記にする（テンプレート見た時に全体を統一させるため）※デバイスごとにテンプレートを分ける場合は、接頭辞にpc_◯◯やsp_◯◯などにする
* テンプレートの中にはかならず用途を記述すること（テンプレート作成時にフォーマット用意しておくこと）
* 基本テンプレートモジュールはすべてWebSiteで管理すること（案件で変わる可能あり）
* ウェブページはすべてWebSiteで管理すること
* カスタムフィールド名の接頭辞をつけて管理すること（例えばオブジェクトが記事に対してのフィールド場合：entry_◯◯ etc）
* グローバルで使う設定（定数やblog_id）などに関しては、configモジュールに記述すること
* 各ページやブログテンプレートで使い回しができるレイアウト（コンポーネント）をSetVarTemplateで記述して、functionモジュールに記述すること
* 変数名の命名規則は接頭辞で管理すること

当たり前ですが定数やblog_idなどをまとめて書いておくと使い回しもできるし変更にも一箇所修正で対応できたります。
定義したSetVarは上書きすることも可能なので、各ブログのテンプレートに定義し直すことも可能です。

以下は、base_descriptionを設定してブログAのテンプレートでは文字列を上書きして出力する方法になります。
上書きはメリット・デメリットがあったりします。
メリットは固有テンプレートに対して条件分岐処理をさせずに変化を加えることができる。やりすぎると何が上書きされているのか見通しが悪くなったりします。※デザインの段階である程度の洗い出しはしておくと良いかと思います。

### ウェブサイトに定義しているconfigモジュール

``` html
<mt:ignore>
========================================
Template Name : config
Template Type : Module / WebSite
Template Note : 各種設定
========================================
</mt:ignore>

<mt:SetVars>
dateformat=%Y.%m.%d
blogid_all=1,2,3
blogid_website=1
blogid_basename=0
base_keywords=テスト,テスト,テスト,テスト,テスト,テスト
base_description=ベースの説明文が入ります。ベースの説明文が入ります。ベースの説明文が入ります。
base_sitedomain=www.exsapmle.com
base_ogpimageurl=http://www.exsapmle.com/ogimage.png
</mt:SetVars>
```

### 各ブログAのインデックステンプレート

```
<mt:ignore>
========================================
Template Name : index
Template Type : Layout / WebSite
Template Note : ブログAのトップページ
========================================
</mt:ignore>

<mt:ignore>** ローカル変数 **</mt:ignore>
<mt:SetVars>
base_description=ブログ用の説明文が入ります。
</mt:SetVars>
<mt:ignore>** 表示部分 **</mt:ignore>
<p><mt:Var name="base_description" /></p>
```

## mt-theme-starterketについて

自分が設けた構築ルールを元にmt-theme-starterketを作成してみました。
Githubにアップしているテーマには、WebSiteとBlogで分けています。
Blogテーマは必要最低限でに留めています。※テーマ間ではモジュールのインクルードができないため

### インデックステンプレート（WebSite）

* index.html
* _format_template.html（テンプレートのフォーマット用）

### アーカイブテンプレート（WebSite）

* page.html（ウェブページ）

### テンプレートモジュール（WebSite）

* config（定数やblog_idを管理）
* footer（フッター用レイアウトモジュール）
* function（フッター用レイアウトモジュール）
* header（ヘッダー用レイアウトモジュール）
* html_foot（foot用のモジュール）
* html_head（head用のモジュール）
* navigation（ナビゲーション用レイアウトモジュール）
* script（スクリプト用レイアウトモジュール）

scriptのモジュールは、各ブログ固有でスクリプトを呼び出すことも想定したモジュールとして出しています。
`<mt:Var name="local_script">`としてmt:Varをしておき出力先に応じて宣言して使うことができます。


## リポジトリ

Githubにテーマをアップしましたので、これから自分用構築テーマを作ってみたい方の参考になればと思います。
※地味にリリース機能をはじめて使ってみました。(*´ω｀*)

* [Github:mt-theme-starterket](https://github.com/redamoon/mt-theme-starterket) 
* [Github:mt-theme-starterket:tag 1.0](https://github.com/redamoon/mt-theme-starterket/releases/tag/1.0)

## テーマを作ってみて思ったこと

今回、初めて作ってみて感じたのはプレビュー（HTMLデータ）からの組み込みがスムーズになりました。（HTMLデータをもらうケースの場合だと若干スムーズじゃないところもありましたが。。）

* 自分が把握できるテンプレートだから安心
* お馴染みのワークフローがなくなった（既存テーマのデリート）
* 初期の組み込みがスムーズになった
* 自分が作ったテンプレートだからある程度のドキュメントも作成することができる

私自身テーマ（HTMLのフレームワーク的）を作る気にはならなかったのですが、構築キットとして考えるとシンプルに作ることができました。

コーディングルールとかそういった感覚で、構築用テーマとして会社単位または個人単位でベース的なテーマを持っておくと良いかもしれませんね。

改良できる部分は、今後調整していければ思っています。
すでにやっている方もいるかと思いますが、自分用の構築キットを持っておくことをオススメしていきたいですね。

来年もMTML頑張りつつ、Data APIも手をだしつつ・・・`<mt:ignore>プラグインとか</mt:ignore>`自分自身のアップデしていければ思います。