少し記事を書くのが遅くなりましたが、ブログのデザインをリニューアルしました。mersy からこのブログについて「スマホで読みにくいの、3日間でなんとかならない？」的な指摘を受けたので（笑

前回のリニューアルの記事（ブログのデザインをリニューアルしました）の日付が2011年11月12日だったので、約3年8ヶ月ぶりのリニューアルとなります。

レスポンシブデザイン

これまでは、当時の PowerCMS のデフォルトテンプレートをベースに DynamicMTML を使ってユーザーエージェントごとに振り分けていましたが、今回は、デザインは前回のものを踏襲しつつ、Bootstrap をベースにしてレスポンシブデザインにしました。

テンプレートの構造

テンプレートの構造としては、最近の僕の中の流行りというかベストプラクティスというか、設定用の変数をまとめた config モジュールを使ったり、モジュールをまとめたフレームワーク的なモジュールを使ったり、といった構造になっています。

例えば、ブログ記事のテンプレートはこんな感じです。

<mt:Unless name="compress" compress="1">
<mt:Ignore>==================================================
Template Name : entry_archive
Template Type : entry_archive / blog
Current Site : Web屋かたつむりくん > かたつむりくんのWWW
Required Vars : 
Template Note : 
==================================================</mt:Ignore>

<mt:SetVarTemplate name="blog_main">

<mt:Include module="mdl-blog_post" post_title_level="h1" show_breadcrumb="1" show_tags="1" google_adsense="1">

<mt:Ignore>==================================================
 SimilarEntries [start]
=================================================</mt:Ignore>
<div id="similar-entries" class="blog-post"></div>
<mt:SetVarBlock name="first"><h2 class="contents_title">関連記事<span> - <a href="https://github.com/bit-part/mt-plugin-SimilarEntries">SimilarEntries プラグイン</a>で表示</span></h2><ul></mt:SetVarBlock>
<mt:SetVarBlock name="last"></ul></mt:SetVarBlock>
<mt:SetVarBlock name="each_function">
function(i, text, odd, even){
 return '<li><a href="' + text + '</a></li>';
}
</mt:SetVarBlock>
<mt:SimilarEntriesShow
 fields="tags,keywords,category"
 priority="tags:2,keywords:1,category:1"
 script_url="/blog/SimilarEntries/SimilarEntries.js"
 relation_url="/blog/SimilarEntries/relation.json"
 template_url="/blog/SimilarEntries/template.json"
 target_selector="#similar-entries"
 limit="5"
 first="$first"
 last="$last"
 each_function="$each_function">
<mt:Ignore> SimilarEntries [ end ] </mt:Ignore>

<mt:Ignore>==================================================
 ZenBack [start]
=================================================</mt:Ignore>
<div class="blog-post">
<!-- X:S ZenBackWidget -->（略）<!-- X:E ZenBackWidget -->
</div>
<mt:Ignore> ZenBack [ end ] </mt:Ignore>

</mt:SetVarTemplate>

<mt:Include module="fw-default">
</mt:Unless>

この中の最後でインクルードしている fw-default モジュールは下記のような感じ。

<mt:Ignore>==================================================
Template Name : fw-default
Template Type : module / blog
Current Site : Web屋かたつむりくん > かたつむりくんのWWW
Required Vars : blog_main
Template Note : 構造は index.html と同じ。このテンプレートの構造を変更
 した場合は「index.html」の構造も合わせて変更すること。
==================================================</mt:Ignore>

<mt:Include module="mdl-config">
<mt:Include module="mdl-html_header">
<mt:Include module="mdl-header">

<div id="content" class="container">
 <div class="row">
 <div id="blog-main" class="col-sm-8">
 <mt:Var name="blog_main">
 </div><!-- /#blog-main -->
 <mt:Include module="mdl-sidebar">
 </div><!-- /.row -->
</div><!-- /.container -->

<mt:Include module="mdl-footer">
<mt:Include module="mdl-html_footer">

使い回す変数は JSON で管理

ちょっと実験的な試みではありますが、使い回す情報をまとめた config モジュールには、JSONを書いて、それをデコードして使ったりしています。

<mt:Ignore>==================================================
Template Name : mdl-config
Template Type : module / blog
Current Site : Web屋かたつむりくん > かたつむりくんのWWW
Required Vars :
Template Note :
==================================================</mt:Ignore>

<mt:Ignore>==================================================
 Default Settings [start]
=================================================</mt:Ignore>

<mt:Ignore><!-- ブログ説明 [start] --></mt:Ignore>
<mt:BlogInformation convert_breaks="0" json_decode="1" setvar="json">
<mt:Var name="json" key="items" setvar="items">
<mt:Var name="items" index="0" setvar="blog_info">
<mt:Ignore><!-- ブログ説明 [ end ] --></mt:Ignore>

<mt:SetVarBlock name="config_settings">{
 "meta_title": "<mt:BlogName>",
 "meta": {
 "keywords": "<mt:Var name="blog_info" key="keywords" escape="html">",
 "description": "<mt:Var name="blog_info" key="description" escape="html">",
 "viewport": "width=device-width, initial-scale=1.0"
 },
 "meta_og": {
 "title": "<mt:BlogName>",
 "url": "<mt:BlogURL>",
 "description": "<mt:Var name="blog_info" key="description">",
 "image": "<mt:BlogURL>assets/img/profile/w3w_og.png",
 "type": "blog"
 },
 "meta_fb": {
 "app_id": "",
 "admins": ""
 },
 "meta_twitter": {
 "card": "summary",
 "site": "@tinybeans",
 "creator": "@tinybeans"
 },
 "body_class": "blog",
 "css": {
 "0100": "<mt:Var name="blog_info" key="root_path">assets/fancybox/jquery.fancybox.css?v=2.1.5",
 "0200": "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css",
 <mt:Ignore>
 "0*00": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css",
 "0*00": "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/simplex/bootstrap.min.css",
 </mt:Ignore>
 "0300": "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css",
 "0400": "<mt:Var name="blog_info" key="root_path">assets/css/main.css?v=<mt:Var name="blog_info" key="theme_version">"
 },
 "js_header": {},
 "js_footer": {
 "0100": "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js",
 "0200": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js",
 "0300": "<mt:Var name="blog_info" key="root_path">assets/fancybox/jquery.fancybox.pack.js?v=2.1.5",
 "0400": "<mt:Var name="blog_info" key="root_path">assets/js/main.js?v=<mt:Var name="blog_info" key="theme_version">",
 "0500": "https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"
 }
}</mt:SetVarBlock>

<mt:Var name="config_settings" compress="3" json_decode="1" setvar="config">
<mt:Var name="config" key="meta" setvar="meta">
<mt:Var name="config" key="meta_og" setvar="meta_og">
<mt:Var name="config" key="meta_fb" setvar="meta_fb">
<mt:Var name="config" key="meta_twitter" setvar="meta_twitter">
<mt:Var name="config" key="css" setvar="css">
<mt:Var name="config" key="js_header" setvar="js_header">
<mt:Var name="config" key="js_footer" setvar="js_footer">

<mt:Ignore> Default Settings [ end ] </mt:Ignore>

MTSetVar でハッシュや配列にすればいい話ですが、なんとなくこの方が見やすいかな、と思いました。

この段階では JSON を一旦デコードしてハッシュなどにしていますが、このリニューアル後に MTGetJSONValue というタグで、

<mt:GetJSONValue name="config.meta_og.title">

のようにドットシンタックスで直接 JSON の値をとれるプラグインを作った（MTAppjQuery に入れると思います）ので、その辺を使ってもっとシンプルに書きなおしていこうと思います。

MTAppJSONTable を活用

また、ブログ設定ページに、テキスト（複数行）カスタムフィールドを作り、そこに MTAppjQuery の機能の一つである MTAppJSONTable を使っていくつかの情報を書いたりもしています。ここは必要に応じて増やしていく予定です。

詳細は後ほど

まだテンプレートの完成度は粗い感じなので（検索もないし・・・）、flexibleSearch.js を導入したりして、今後徐々に仕上げていこうと思います・・・

また、ここではざっと説明しただけですが、Movable Type のテンプレートを書く際の参考になるかもしれませんので、後日、もう少し詳しいことを書いていこうかなと思います。