先週、Grunt.jsについて先日こちらの記事で紹介しました。
今回はECTというJavaScriptを使用したテンプレートエンジンを使ってファイルを生成する、CMSのような仕組みの例を紹介します。

ウェブ制作していると、「ページレイアウトは似てるんだけど、画像や文言はExcelの原稿をコピペしながら...」と、大量なHTMLを生成しないといけないとき、ありますよね？
キャンペーンや短期間のサイト運用では、Movable TypeなどのCMSの導入までは求められなかったり。
そんなときに制作サイドで準備出来る、運用効率化の手法です。

導入はこちらの記事を参考にさせていただきました。

ECTの別な使い方についても書いておりますので、こちらも参考になればと思います。

今回やりたいこと

• CMSの導入規模ではなく、同じフォーマットのHTMLが大量にページがある。
• HTMLを触らなくても、簡単に更新・修正をしたい。

大量のHTMLを一つ一つ更新するの手間がかかります。
その課題を解決するために、ECTを使って外部のJSファイルからHTMLに入るタイトルやテキストを出力します。

例として、Mr.クレバーこと藤原Dが現在ハネムーンで滞在しているらしいイタリアの観光スポットをまとめて生成してみます。

インストール

Gruntの初期設定が終わったら、ectをインストールします。
ターミナルから下記のコマンドを入力してください。

    sudo npm install grunt-ect --save-dev

ターミナルを起動させ、上記コマンドを実行してモジュールを追加してください。

今回のフォルダ構成は下記の通りです。

    project
    ├modules  
    │└milano.js             （ミラノの観光案内を更新するJSファイル）
    │└roma.js               （ローマの観光案内を更新するJSファイル）
    │└sicilia.js            （シチリアの観光案内を更新するJSファイル）
    ├template
    │└inc_header.ect        （コンパイル前のhead要素のテンプレート）
    │└inc_content_spot.ect  （コンパイル前のcontents要素のテンプレート）
    │└spot.ect
    ├spot                 （コンパイルされたHTMLが出力されるディレクトリ）
    ├package.json
    └Gruntfile.js

Gruntfile.js

    'use strict';
    module.exports = function(grunt) {
        var pkg, taskName;
        pkg = grunt.file.readJSON('package.json');
        var
            _modulePath = './modules/',                                 // テンプレートで使うモジュールのパス
            _destPrefix = 'spot/',                                      // 吐き出し先のパス
            _prefectureList = ['milano', 'roma', 'sicilia'],            // テンプレートjsのファイル名
            _spotList = [],                                             
            _i = 0, _num = _prefectureList.length,
            _prefecture = '';
        for(_i; _i < _num; _i++) {
            _prefecture  = _prefectureList[_i];
            _spotList[_prefecture] = {
                src:'spot.ect',                                         // コンパイル元
                dest: _destPrefix + _prefecture + '/index.html',        // コンパイルされたファイルのパス
                variables: require(_modulePath + _prefecture + '.js')   // テンプレートで使用するオブジェクト
            };
        }
        grunt.initConfig({
            dir: {
                template:'template',
            },
            ect:{
                options: {
                    root: '<%= dir.template %>'
                }
            }
        });
 
        // ectに動的にタスクをたす
        (function(){
            var _i = 0, _num = _prefectureList.length, _prefecture = '';
            for(_i; _i < _num; _i++) {
                _prefecture = _prefectureList[_i];
                grunt.config.data.ect[_prefecture] = _spotList[_prefecture];
            }
        }());
 
        // Gruntfile.jsに記載されているパッケージを自動読み込み
        for(taskName in pkg.devDependencies) {
            if(taskName.substring(0, 6) == 'grunt-') {
                grunt.loadNpmTasks(taskName);
            }
        }
 
        // 処理でエラーが出てもgruntを続ける
        grunt.registerTask('eatwarnings', function() {
            grunt.warn = grunt.fail.warn = function(warning) {
                grunt.log.error(warning);
            };
        });
    };

milano.js
外部読み込み用のjsファイル

        var prefix = {
            // ページタイトル
            title:'ミラノ',
            // 地域名
            area:'イタリア北部',
            //class名
            id:'milano',
            spots:[{
                // スポットのタイトル
                spotName1:'ミラノのドゥオーモ',
                spotName2:'スカラ座',
                spotName3:'スタディオ・ジュゼッペ・メアッツァ',
                // スポットのテキスト
                spotTxt1:'ミラノのドゥオーモ (イタリア語:Duomo di Milano、ドゥオーモ・ディ・ミラーノ) は、ロンバルディア州都ミラノの象徴である。都市の中心の同名のドゥオーモ広場に位置し、聖母マリアに献納されているドゥオーモである。 ミラノのドゥオーモは500万人のカトリック信者がいる世界最大の司教区であるミラノ大司教区を統括する首都大司教の司教座聖堂であり、その大司教は2011年からアンジェロ・スコラ枢機卿が務めている。',
                spotTxt2:'スカラ座（Teatro alla Scala、あるいは単にLa Scala）はイタリア・ミラノにある歌劇場である。初代の宮廷劇場以来の伝統を誇るイタリアオペラ界の最高峰とされる。',
                spotTxt3:'スタディオ・ジュゼッペ・メアッツァ (Stadio Giuseppe Meazza) は、イタリア・ロンバルディア州・ミラノにあるサッカー専用スタジアム。通称サン・シーロ (San Siro)。セリエAのインテル、ACミランのホームスタジアムとして使用されている。'
            }]
        };
        module.exports = prefix;

inc_header.ect
HTMLのhead要素のテンプレート

inc_content_spot.ect
HTMLのコンテンツ部分のテンプレート

        
        
        <% for spot in @spots : %>
            
                
                    
<%- @title %>
                    
<%- @area %>
                
                
                    
                        
<%- spot.spotName1 %>
                        
<%- spot.spotTxt1 %>
                    
                    
                        
<%- spot.spotName2 %>
                        
<%- spot.spotTxt2 %>
                    
                    
                        
<%- spot.spotName3 %>
                        
<%- spot.spotTxt3 %>
                    
                
            
        <% end %>
        
        

spot.ect
HTMLを出力するためのテンプレート

        <% include 'inc_header.ect', {title:@title, area:@area, id:@id} %>
        <% include 'inc_content_spot.ect', {title:@title, id:@id, spots:@spots} %>

ターミナルからECTのコマンド実行します。

    grunt ect

実行するとターミナルに表示されます。
下記が表示されたら、成功となります。

    >> Running "ect:milano" (ect) task
    >> File spot/milano/index.html created.
 
    >> Running "ect:roma" (ect) task
    >> File spot/roma/index.html created.
 
    >> Running "ect:sicilia" (ect) task
    >> File spot/sicilia/index.html created.

今回は、Gruntを使ってHTMLの効率化について書きました。
CSSについては、Sassを使うとコーディングをさらに効率化することができます。
Sassを使った効率化については別の機会に書かせていただければと思います。

編注：Mr.クレバー、勝手にネタにしてしまってスイマセン。おめでと！

Sample text about Italy from Wikipedia