【Web制作】テンプレートエンジン&タスクランナー「Cactus」を使ってWeb制作を加速化!

今回はテンプレートエンジン&タスクランナー「Cactus」のご紹介です。

Cactus for Macの名の通り、Mac専用アプリとなります。
Screen Shot 2015-04-22 at 23.11.58

Cactusで何が出来るの?

Web制作に携わる皆さんは「Grunt」「Gulp」といったタスクランナーを耳にしたことがあると思います。
実際に使っている方も多くいらっしゃるでしょう。

一応簡単にご説明しますと…

・SassやCoffeeScript等、そのままではWebページとして使えない効率的な言語の変換作業
・JavaScriptなどのminify
・画像サイズの圧縮
・リアルタイムプレビューのためのローカルサーバー構築
以上などの処理を自動化(ooo.scssが更新されたら自動で変換など)をするための監視・実行ツールです。

GruntやGulpもカスマイズ性に富んでおり、自由にやりたいことを組み立てられるのですが、

  • Node.jsのインストール
  • JavaScript形式でタスクを定義
  • プラグイン等の設定
  • 黒い画面でのgulp watch等の実行

などなど、慣れている人にとってはなんてことない処理でも、取っ付きにくい方もいらっしゃるでしょう。

しかし! CactusはすべてUIで、しかも必要な機能がまるっと入った状態ですぐ利用できます。

さっそく使ってみる

Screen Shot 2015-04-22 at 23.45.54

起動してみました。

Create

Screen Shot 2015-04-22 at 23.46.22

いろいろとプロジェクトのテンプレートが選べるのですが、今回Profileというものにしてみました。

Screen Shot 2015-04-22 at 23.47.12

作られました。
右記にあるスイッチがONのときはファイル更新の監視と、リアルプレビューのサーバーが設定されます。
自動でChromeの画面に表示されました。

Screen Shot 2015-04-22 at 23.48.20

ディレクトリの中身はこうなってます。

Screen Shot 2015-04-22 at 23.51.05

各ディレクトリについて

  • .build
    • 変換が必要なものは変換された状態のものが入ります。最終的な出来上がりのものになります。自動で出力されるものなので、編集は基本的にしません(しても上書きされます)。
  • pages
    • ここには必要なページ(HTMLファイル)を作っていきます。
  • plugins
    • 今回は割愛します。
  • static
    • ImageやCSS, JavaScriptなどを置きます。(SCSSやCoffeeScriptでもOKです)
  • templates
    • pagesで共通化できる部分など、テンプレート化したいものを置きます。

簡単に以上のような構成となっています。

templatesの使い方

今回のテンプレートエンジンで肝となる部分です。

テンプレートのHTML(base.html)
<!doctype html>
<html>
<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="shortcut icon" href="{% static '/images/favicon.ico' %}">
     <link rel="stylesheet" href="{% static '/css/style.css' %}">

     {% block header %}
          <title>Profile</title>
     {% endblock header %}
</head>

<body>
     {% block content %}
          Main content
     {% endblock content %}

     {% block scripts %}
          <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <script src="{% static '/js/main.js' %}"></script>
          <script src="{% static '/js/retina.js' %}"></script>
     {% endblock scripts %}
</body>
</html>

見慣れないものがありますね。{% ~ %}という記述はテンプレートエンジンの記載方法です。(djangoというものを取り入れているようです)
解説の前に、これをつかったHTMLの書き方を見てみます。(pagesフォルダに追加するファイルです)

{% extends "base.html" %}
{% block content %}

     <a id="docs" href="http://cactusformac.com/redirect/#documentation">Documentation</a>

     <section id="wrapper">
          <header id="header">
               <img id="avatar" class="2x" src="{% static '/images/avatar.jpg' %}"/>
               <h1>{% block title %}Profile{% endblock title %}</h1>
               <h2>Small personal page.</h2>
          </header>

          <p>The profile starting point is a small personal landing page. It displays your avatar and generates a snippet of text, suitable for a description or personal information.</p>
     </section>

     <a href="http://cactusformac.com/?utm_source=templates&utm_medium=badge&utm_campaign=profile-template">
     <img id="badge" class="2x" src="{% static '/images/badge.png' %}"/>
</a>

{% endblock content %}

ここでもまた{% ~ %}がでてきましたね。

{% extends "base.html" %}

まずbase.htmlをテンプレートとして使うことを定義します。(templatesディレクトリにあるファイルです)

{% block content %}
~
~
{% endblock content %}

これで、base.html{% block content %}の中身を上書きすることになります。

base.htmlを名の通りベースとして、ページを作る方法です。
また、templateにあるほうを取り入れてつくる場合は、{% include 'menu.html' %}により取り込むこともできます。

なので使いこなすためには、
base.htmlで核となるページ構成(headerやfooter)を作り、部品ごとに更にテンプレートつくってインクルードします。

まとめ

冒頭お伝えしたとおり、Sassのコンパイルなども自動でしてくれるため、環境の準備や学習コストが少なく最新の効率化技術を取り入れることができそうです。
テンプレートの活用についても、WordPress化する前にすでにheader.php用のheader.htmlとして分けて作れてしまうなどのメリットもあります。

是非お試しください!

フォローして続編をチェック

@universionsをフォロー