スタイルガイドベースなMTテンプレート

思いつきメモエントリーです。

スタイルガイドが制作現場でどのくらい使われているのかは定かじゃないですが、スタイルガイドベースなMTMLはどうなんだろう?というのを妄想してみました。
以下の様な作り方は当たり前なのかもしれないですが・・・・

スタイルガイドっていったらこういうのとかですね。

Style Guide
http://www.starbucks.com/static/reference/styleguide/
boxed-groups.scss · Styleguide
https://github.com/styleguide/css/6.0

HTML実装のみの案件でもスタイルガイドを作って納品する様にしたいなぁと考えつつ、デザイン作る上でもページ毎というよりはスタイルガイドを作ってそれの組み合わせなんじゃないかな,と思ったりしますが、まずは自分の作業する身近なところでなにかできないものか?と。

サンプル1

たとえばこんな価格表のデザインがあったとします(これをサイト内で色々使い回すか?という話はおいときます)。

(「Pure」のサンプルをつかってます。)

これをどこでも使える様なテンプレートの持ち方をできないものか?と考えて、以下の様なテンプレートを書いてみます。

    <mt:Ignore>==========
    データ
    ==========</mt:Ignore>
    <mt:SetVarBlock name="hogehoge">
    {"items":[
      {
      "title":"Personal",
      "tableclass":" pricing-table-biz",
      "price":"$5",
      "tablelist":"Free setup,Custom sub-domain,Standard customer support,1GB file storage,1 database,Unlimited bandwidth"
      },
      {
      "title":"Small Business",
      "tableclass":" pricing-table-free pricing-table-selected",
      "price":"$25",
      "tablelist":"Free setup,Use your own domain,Standard customer support,10GB file storage,5 database,Unlimited bandwidth"
      },
      {
      "title":"Enterprise",
      "tableclass":" pricing-table-enterprise",
      "price":"$45",
      "tablelist":"Free setup,Use your own domain,Premium customer support,Unlimited file storage,25 database,Unlimited bandwidth"
      }
    ]}
    </mt:SetVarBlock>
    <mt:Var name="hogehoge" json_decode="1" setvar="json">
    <mt:Var name="json" key="items" setvar="items">
    <mt:Ignore>==========
    表示部分
    ==========</mt:Ignore>
    <mt:loop name="items">
    <mt:If name="__first__">
        <div class="pricing-tables pure-g">
    </mt:If>
    <div class="pure-u-1 pure-u-md-1-3">
                <div class="pricing-table<mt:Var name="tableclass">">
                    <div class="pricing-table-header">
                        <h2><mt:Var name="title"></h2>
                        <span class="pricing-table-price">
                           <mt:Var name="price">  <span>per month</span>
                        </span>
                    </div>
                    <ul class="pricing-table-list">
                        <mt:Var name="tablelist" split="," setvar="tablelistarray">
    <mt:loop name="tablelistarray"><li><mt:Var name="__value__"></li></mt:loop>
                    </ul>
                    <button class="button-choose pure-button">Choose</button>
                </div>
            </div>
    <mt:If name="__last__">
        </div> <!-- end pricing-tables -->
    </mt:If>
    </mt:loop>
    <mt:SetVar name="items">

分かりやすいようにここではデータを直接テンプレートに直書きしていますが、表示部分はスタイルガイドの1つの項目に対応させておけばサイト内で色々使い回しが出来るのかなと思ったりしました。

表示部分についてはテンプレートモジュールにしてincludeするなり、共通用のテンプレートモジュールをインクルードしておいて、そこでSetVarTemplateしておいたものをGetVarして読み込むと言ったことも出来そうな気はします。

サンプル2

たとえば以下の様なブロックが並ぶレイアウトだったとします。

HTML的にはこんなかんじのものが繰り返されてるとします。

    <div class="l-box">
        <h3 class="information-head">YUI 3.10.2 Released</h3>
        <p>We are happy to announce the release of YUI 3.10.2! You can find it now on the Yahoo! CDN, download it directly, or pull it in via npm. We've also updated the YUI Library website with the latest documentation. </p>
    </div>

このときにそれぞれをブログ記事などでもってたとして、テンプレート側は以下のように書いておくとします。

    <mt:Ignore>==========
    データセット
    ==========</mt:Ignore>
    <mt:SetVarBlock name="data_posts">
    {"items":[
    <mt:entries lastn="0">
    <mt:setvarBlock name="item{title}"><mt:entryTitle></mt:setvarBlock>
    <mt:setvarBlock name="item{content}"><mt:entryBody remove_html="1" regex_replace="/\n|\t/g",""></mt:setvarBlock>
    <mt:var name="item" to_json="1"><mt:unless __last__>,</mt:unless __last__>
    </mt:entries>
    ]}
    </mt:SetVarBlock>
    <mt:Var name="data_posts" json_decode="1" setvar="json">
    <mt:Var name="json" key="items" setvar="items">


    <mt:Ignore>==========
    取り出し部分 : Template Moduleで管理
    ==========</mt:Ignore>
    <mt:Include module="style-information">

テンプレートモジュールは以下の様な感じになってればとりだせます。

    <mt:loop name="items">
    <mt:If name="__first__">
        <div class="information pure-g">
    </mt:If>
            <div class="pure-u-1 pure-u-md-1-2">
                <div class="l-box">
                    <h3 class="information-head"><mt:Var name="title"></h3>
                    <p><mt:Var name="content"></p>
                </div>
            </div>
    <mt:If name="__last__">
        </div> <!-- end information -->
    </mt:If>
    </mt:loop>
    <mt:SetVar name="items">

こうすることで、データの所がmt:Entriesでもmt:Pagesでもテンプレートのデータセットの部分をかえるだけで同じ見た目部分については使い回しが出来そうな気がします。

変数がふえることになりますが、クラスも変数化してしまえばもう少し柔軟に使えそうです。
Gridとかもテンプレートの最初で設定すれば勝手にレイアウトできるかも?しれないです。

パーツの変更があったときはテンプレートモジュールだけを修正すれば一括で変更を反映させることが出来そうです。


CSS - 少し細かいBEMい話 - Qiita」とかで紹介されてるBlock、Elementの単位でMTのテンプレートも管理するとHTML/CSSの変更などがあっても柔軟に対応出来るのではないか、と思ったり。

CSS - 少し細かいBEMい話 - Qiita
http://qiita.com/hiloki@github/items/4fa99b8755a22878449e

実現させようとするとデザイン作成の時点でそのあたりを意識してもらう必要もありますし、テンプレートの書き方も毎回変数考えないといけないし、データセットするところと表示用のloopとか(慣れてないからか)メンドクサイ感がとてもありますし、処理的にどうなの?とか実際どうなんだろう?とおもったりしますが妄想ということで。

表示部分がモジュールになっててそれをグリグリ管理画面で並び替えができるGUIができて、テンプレートの方もそれを反映させられるようになれば、わざわざ管理画面でテンプレートかかなくてもGUIベースで表示側の並び替え・調整ができたりするかも?(しないかも?)しれないし、データの取得と変数を定義さえしておけばブログ記事から取り出すとかページから取り出すとかさえ選択すれば勝手に情報も表示出来るのかもなー、とおもったりしたわけです。

mt:Entriesで普通に書いた方が楽だというのは重々承知のうえですが、運用で壊れにくくなるかな、と。

だったら、HTMLにコメント書くようなかんじで実装出来るCMSだったりテンプレートエンジンでもいいじゃん、という話もありますよね。。。

メモ


Comments

comments powered by Disqus