WordPress のオリジナルテーマ開発で使用した技術やツールまとめ

どうもどうもお久しぶりでございます、EXP の Hinotan です。私の前回の記事の日付を見てみたら、なんと１年も前だったんですね―。こりゃイカン！

ということで、今回は EXP の WordPress オリジナルテーマ開発で各制作フローごとに使用した技術・ツールなどの紹介をしたいと思います。

チーム開発で必要なドキュメントの策定: GitHub Wiki
デザイン: Sketch
1. Page と Artboard の機能
2. ダミー画像の生成もプラグインでらくらく
環境構築
1. GitHub Flow でチーム開発
2. 開発マシン: vccw
3. gulp でビルドとコンパイル
コーディング
1. Jade でプロトタイピング
2. BEM に準拠した CSS 設計
3. CSS フレームワークの foundation を Sass でカスタマイズ
_s ベースで WordPress へ組み込み
最後に

1. チーム開発で必要なドキュメントの策定: GitHub Wiki

制作段階に入る前に、必要な情報をまとめたドキュメントを作成してチーム内で共有する必要がありますよね。実務では Backlog の Wiki などを活用する場合も多いと思いますが、EXP のテーマ開発では GitHub の Wiki を使用しました。チーム開発において素早くドキュメントが作れます。GitHub の Wiki は特にパブリックな開発をするときに便利かもしれません。

策定したドキュメント: はじめに; git & GitHub 運用ルール; コーディングルール; 制作にあたって

各ドキュメントの詳細は、もし興味があれば読んでもらえればと思います。

2. デザイン: Sketch

Sketch は Mac 向けのベクターベースのグラフィックツールです。EXP のページデザインも Sketch を使っています。Sketch でページデザインをしたのは今回が初めてだったので、まだまだ使いこなせてはいませんが、便利だなあと思った点をすこーしですが紹介します。

2-1. Page と Artboard の機能

Illustrator は複数のアートボードを作成することができますが、Sketch が優れている点は、ひとつの .sketch ファイルの中に複数のページを作って管理できることです。

それぞれの page の中に、デバイスごとのアートボードを作り、ひとつの .sketch ファイルで管理しています。

2-1. ダミー画像の生成もプラグインでらくらく

フロントページデザインのサムネイル画像やユーザーアイコンは全てダミー画像です。Content Generator Sketch Plugin を使って簡単にダミー画像を生成できます。

まだまだ便利な機能が満載の Sketch ですが、サクッとモックアップを作成して、HTML 起こしてプロトタイピングというやり方にはぴったりだと思います。ただし、デザインをしっかり作りこむなら Photoshop が良いでしょう。

3. 環境構築

3-1. GitHub Flow でチーム開発

GitHub Flow とは

git を使用した開発における、シンプルなブランチモデルのことです。特徴として次のような点があります。

デプロイは master ブランチから行う
作業用ブランチは master ブランチから切る
作業用ブランチの変更内容を定期的に push できる
レビューが必要な時やマージしても良い時はプルリクエストを作成
プルリクエストが承認されたら master に push してデプロイ

GitHub Flow のメリット

シンプルで簡単な GitHub Flow は、誰でも開発に参加しやすくプルリクエストをいつでも送ることができるのがメリットです。作業内容を定期的に push できるので、バックアップも同時にできますよね。push されたものは作業中であるということに過ぎず、それが混乱のもとになることもありません。Web サイト制作では GitHub Flow で十分機能しますし、複雑なブランチモデルの git-flow(※) よりも向いているかもしれません。

GitHub Flow (Original) http://scottchacon.com/2011/08/31/github-flow.html
GitHub Flow (日本語訳) https://gist.github.com/Gab-km/3705015

git-flow について

私は git-flow で開発をしたことがないので概要を把握しているだけに過ぎませんが、GitHub Flow との大きな違いは次のような点です。

全部で5つのブランチモデルが存在する
種類はメインブランチとサポートブランチの2種類
master, develop がメイン
Feature branches, Release branches, Hotfix branches がサポート
作業用ブランチ(Feature branches)は master ではなく develop から切る
「リリース」を目的として設計

5つのブランチが存在するため、参加する人によってはハードルが高いですね。どのブランチがどんな目的を持っていて、どのブランチから分岐してどこへマージされるのかを把握しておかないと何だか色々大変そうな雰囲気がします。

git-flow (日本語訳) http://keijinsonyaban.blogspot.jp/2010/10/successful-git-branching-model.html
A successful Git branching model http://nvie.com/posts/a-successful-git-branching-model/

どんなブランチモデルで開発するかは、そのプロジェクトに合ったものを設定すると良さそうですね。私は以前 master,develop,feature branches の3つのブランチモデルでの開発に参加したこともあります。

※ 「A successful Git branching model」の利用をサポートするツールが git-flow というのが正しいのですが、ここでは git-flow としています。

3-2. vccw で WordPress のローカル環境構築

すでにローカル開発用マシンとして定着している vccw ですが、

$ vagrant up

とコマンドを叩けば WordPress がローカルに自動インストールされます。具体的な環境構築方法は公式サイトの通りで、

VirtualBox のインストール
Vagrant のインストール
ホスト設定を書き換える vagrant-hostsupdater のインストール $ vagrant plugin install vagrant-hostsupdater
vccw 本体のクローン
$ git clone git@github.com:vccw-team/vccw.git
$ cd path/to/directory; vagrant up
ホスト名または http://192.168.33.10/ をブラウザから入力して確認

vccw の良い点は、

チーム間での共有が楽
WordPress が自動的にインストールされる
WP-CLI, WordMove インストール済

ですね。

3-3. gulp でビルドとコンパイル

gulp は Node.js ベースのビルドシステムヘルパーです。詳しくは、CodeGrid のgulp とは何かという記事が分かりやすいです。この記事では、

gulp とは何か
ビルドシステムヘルパー gulp とタスクランナーの Grunt との違い
自動化の必要性
導入方法と基本的な使い方

に触れています。なお、記事公開時の gulp のバージョンは3.8.7です。

そんな言わずと知れた gulp ですが、ハマチが作ってくれた gulp-web-starter の gulpfile.js には以下のタスクを記述しています。

Sass を CSS にコンパイル(sass-globbing 必須)
Jade を HTML にコンパイル
Browserify
sprite 画像の生成
BrowserSync
_s と foundation の自動インストール

もともと gulp-web-starter は、様々な案件で使いまわせるように汎用化して作られています。こんな風に、あらかじめ制作キットを作って GitHub にあげておくと便利ですね。EXP のテーマ開発でも gulp-web-starter
を使いました。

4.コーディング

4-1. Jade でプロトタイピング

出来上がったデザインをテーマ化する前に、 HTML, CSS, JS でコーディングする過程がありますが、クライアントワークではブラウザ/デバイス確認用のプロトタイプとして活用できますね。EXP ではプロトタイプ作成に Jade を使いました。

Jade とは

Jade は JST (JavaScript Templates) の一つであり、HTML を書くための軽量マークアップ言語である Haml に影響を受けた JavaScript テンプレートエンジンでもあります。

Jade について。より

公式サイトと gist(日本語で書かれています) を見れば、 Jade の書き方をひと通り把握できるので以下を参考にしてください。

Jade を使うメリット

一時期「テンプレートエンジンで爆速コーディング！」という言葉を目にしましたが、確かにコーディングの高速化はテンプレートエンジンを使うメリットのひとつです。

WordPress のテーマ開発において、 Jade のようなテンプレートエンジンを使うメリットは高速化に加えて次の点であると思います。

WordPress と同等のテンプレート構造を持たせることが可能
モジュール化
チームで分担して同時進行が可能

モジュール化することで、例えばAさんは _sidebar.jade を担当、Bさんは _header.jade を担当、Cさんは _single.jade(content-single.php の部分) を担当することができます。header や footer などの共通パーツは include させてテンプレート化しているので、修正が必要な場合も _header.jade だけを編集すれば、コンパイルされた全ての .html ファイルに変更内容が反映されます。

4-2. BEM に準拠した CSS 設計

複数人で開発を行う際は当たり前のことですが、メンテナンス性の観点からコーディングルールは事前に決めておく必要があります。

EXP のコーディングルールでは、CSS に関して

Sass は SCSS 記法で記述する
BEM の考え方に準拠

を基本的な考え方とし、id はスタイル目的では使わず、JS の操作に使う場合に限定しています。class に関しては部分的に SMACSS を取り入れ、modifier の接続には — (ダブルハイフン)で利用する MindBEMding を採用しています。

BEM について

BEM とは Block, Element, Modifier の頭文字をとったもので、Yandex で開発されたフロントエンドの命名手法です。以下の記事が参考になります。

SMACSS について

SMACSS は CSS を記述するためのスタイルガイドです。こちらも詳しくは以下の記事が参考になるでしょう。

マークアップと Sass の記述例

BEM, MindBEMding, SMACSS を取り入れたマークアップは次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example</title>
</head>
<body>
    <div class="l-container">
        <header class="l-header">
            <h1 class="logo"><a href="">logo</a></h1>
            <nav class="gNav">
                <ul class="gNav__list">
                    <li class="gNav__item gNav__item--about"><a href="">about</a></li>
                    <li class="gNav__item gNav__item--product"><a href="">product</a></li>
                    <li class="gNav__item gNav__item--contact"><a href="">contact</a></li>
                </ul>
            </nav>
        </header>
        <div class="l-main">
            <section class="block">
                <h2 class="block__title">This is a title.</h2>
                <p class="block__description">description is here.</p>
                <p class="block__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed in fermentum diam, non elementum lorem. Cras tempor est rutrum, ullamcorper justo quis,
                 commodo nulla. Nulla cursus mauris ut feugiat pellentesque. Morbi mauris velit,
                 dapibus nec sapien tempor, aliquet feugiat lorem.</p>
            </section>
        </div><!-- / .l-main -->
        <footer class="l-footer">
            <p class="copyright">© 2015 exp</p>
        </footer>
    </div><!-- / .l-container -->
</body>
</html>

Sass と相性の良い BEM

BEM は Sass との相性も良く、BEM(MindBEMding) を使った .scss ファイルはこんな風になります。私はこの書き方に慣れてしまったので、Sass と BEM なしでは少々辛いです・・・w

.block {
    width: 100px;
    height: auto;
    margin: 0;
    background: #ffffff;
    &__element {
        padding: 20px;
    }
    &--modifier {
        background: $colorRed; 
    }
}

4-3. CSS フレームワークの foundation を Sass でカスタマイズ

foundation は Bootstrap と並ぶ CSS の2大（？）フレームワークのうちのひとつですが、foundation を使うメリットをいくつか挙げてみました。

class 設計が自由
- 自分でつけた class 名に foundation の mixin を include させれば良いので、HTML の可読性と CSS のメンテナンス性を保てる
Media Query が使いやすい
レスポンシブのグリッドシステムが、mixin を駆使して柔軟に対応できる

foundation を使った、実際の Sass のソースコードを見てみましょう。

.post {
  background-color: #fff;
  &--single {
    margin-top: 20px;
    @media #{$medium-up} {
      margin-top: 50px;
    }
  }
}

このソースコードは EXP で実際に記述しているもので、モバイルファーストで書かれています。.post--single の中にネストされている @media #{$medium-up}{...} が Media Query の記述です。$medium-up のとき、つまり 641px 以上の時は margin-top: 50px; となります。foundation のドキュメントを見ると、各デバイス毎のブレイクポイントがあらかじめ定義されているので、Media Query を使う場合は上記のようにネストさせて書けば OK です。もちろんネストさせずに分けて書くこともできます。

紹介したものはほんの一例ですが、foundation を Sass でカスタマイズするととても便利なのでオススメです。

5. _s ベースで WordPress に組み込み

コーディングが終われば、いよいよ組み込み作業です。ここで環境構築の時に自動インストールしておいた _s が活躍します。プロトタイプを _s にマージして、WordPress タグを置き換えるだけで OK です。

_s を使うメリットは、_s でベースのテンプレート構成ができていることと、_s で構築済みの階層を継承できることです。そのため制作の高速化と、個々の制作者の癖を多少吸収してくれます。WordPress では、テンプレート構成に個人の癖が強く出る場合もたまにあるので、複数人で開発する場合は _s を使うと後々平和かもしれませんね。

6. 最後に

今までつらつらと技術やツールを紹介してきましたが、実際のソースコードは GitHub のリポジトリにあげてあるので、興味のある方は参考にしてみてください。

EXP GitHub Repository: https://github.com/wpe-exp/exp; EXP で使用している、WordPress のオリジナルテーマの公開リポジトリ
gulp-web-starter: https://github.com/vwxyutarooo/gulp-web-starter; ハマチが作った web スターターキット

以上、業界2年目に突入した Hinotan がお送りしましたー。

目次