先日発売されたプラグイン本なんですが、実は執筆の時点で600ページ以上ありまして、編集の段階でボツになった原稿が大量にあります。笑

今回はボツになった原稿の中から、Gruntを使ったプラグイン開発というネタの原稿を放出します。

まあ最近はgulpのほうが…って声もあるでしょうが、そのへんはお好みで。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

Gruntとは？

スマートフォンなどの普及により私たちが制作するウェブサイトのフロントエンド部分は、非常に速いスピードで高度化しています。

それにともなってTwitter BootstrapやFoundation、Sassなどのフレームワークが登場し、CSSやJavaScriptの開発作業そのものも複雑で面倒なものとなってきました。

Gruntとは、これらの設定作業やビルド作業、テストなどを自動化するためのツールで、WordPress本体でも3.8から採用されています。

GruntはNode.jsを使用しているためビルド用のスクリプト(Gruntfile.js)をJavaScriptで書くことができます。

そのため比較的学習コストが低い上に柔軟性が高く、ウェブ開発においてはスタンダードになりつつあるツールです。

著者が公開しているいくつかのプラグインでもJavaScriptやCSSのメンテナンスにGruntを使用しており、CSSやJavaScriptのMinyfyによるサイトの高速化や、サードパーティーのライブラリの最新版の適用が簡単になるなど、さまざまなメリットが得られています。

また、Vagrantと同じく、Gitに登録しておくことでSassなどの設定そのものもプロジェクトごとに共有することができるため、チーム内でのコラボレーションにも役立っています。

さらに、Gruntには、grunt-initというプロジェクトのテンプレートをあらかじめ登録しておく機能があり、これを使用することでWordPressプラグインの開発時間そのものも削減することができます。

この節では、Gruntのインストールと、Gruntを使用したWordPressプラグインの開発手法について、概要を説明していきたいと思います。

Gruntのインストール

Gruntをインストールするには、まずはじめにNode.jsをインストールする必要があります。

ここでは、Macを中心に説明していきますが、Windowsでも利用することは可能なので、ぜひチャレンジしてみてください。

HomebrewおよびXcodeのインストール

MacでGruntを使用するために必要な環境を整えるには、Homebrew及びXcodeをインストールする必要があります。

これら2つのツールは、Gruntに限らずあらゆる場面で必要となりますので、ぜひインストールしておくことをおすすめします。

Node.jsのインストール

Homebrewがインストールされたら、さっそくインストールにとりかかります。

まず、以下のコマンドでHomebrewのパッケージを最新版にアップデートしてください。

$ brew update
$ brew upgrade

次にNode.jsをインストールします。

$ brew install node

grunt-cli及びgrunt-initのインストール

Node.jsのインストールに成功したら、npmというコマンドが使用できるようになったはずです。

npmはNode.jsのパッケージ管理ツールのことで、このコマンドを使用するとGruntも含めたNode.js製の様々なツールを簡単にインストールできるようになります。

ではさっそくgrunt-initをインストールしてみましょう。

$ sudo npm install -g grunt-cli grunt-init

Hatamotoを使用したプラグイン開発

前述のとおり、grunt-initを使用すると様々なプロジェクトのテンプレートを作成することができます。

そこで今回は、筆者が使用しているHatamotoというWordPressプラグイン用のGruntテンプレートを使ってプラグインを開発してみましょう。

HatamotoをGitHubから入手

まず、いままでgrunt-initを使用したことがない方は、以下のコマンドでテンプレート用のディレクトリを作成してください。

$ mkdir ~/.grunt-init

次に、このテンプレートディレクトリ内にHatamotoをGitHubからcloneしてください。

$ git clone git@github.com:megumiteam/hatamoto.git ~/.grunt-init/hatamoto

以上で準備は完了です。

.grunt-initディレクトリの下にhatamotoというディレクトリができていることを確認して下さい。

ためしにgrunt-initとコマンドを入力して実行してみてください。

$ grunt-init

すると以下のようにHatamotoというプラグインがある旨が表示されると思います。

Running "init" task

A valid init template name must be specified.

Available templates
       hatamoto  Develop a WordPress plugin.

Templates that exist in the /Users/miya/.grunt-init directory may be run
with "grunt-init TEMPLATE". Templates that exist in another location may be run
with "grunt-init /path/to/TEMPLATE". A template is a directory that must
contain, at the very minimum, a template.js file.

For more information, see http://gruntjs.com/project-scaffolding

デフォルト値を設定する

Hatamotoには、defaults.json.sampleというファイルが同梱されています。

このファイルを、~/.grunt-initディレクトリの直下にdefaults.jsonというファイル名でコピーして、テキストファイルの内容を修正してください。

これは、grunt-initコマンドを実行した際に表示されるプロンプトのデフォルト値として使用されます。

{
  "contributor":     "megumithemes",
  "homepage":        "https://digitalcube.jp/",
  "author_name":     "Digitalcube Co,.Ltd",
  "author_url":      "https://digitalcube.jp/",
  "repository_type": "git",
  "repository_url":  "",
  "license":         "GPLv2",
  "license_uri":     "http://www.gnu.org/licenses/gpl-2.0.html"
}

Hatamotoを使ってプラグインを作ってみる

まず任意の名前のプラグイン用ディレクトリを作成してください。

$ mkdir my-first-plugin

次に、作成したディレクトリ内に移動して、grunt-initコマンドを実行してください。

$ cd my-first-plugin
$ grunt-init hatamoto

grunt-initコマンドを実行すると、プラグイン名や作者名などのいくつかの情報を求められますので、それぞれの内容に順番に答えてください。

defaults.jsonが~/.grunt-initディレクトリ直下にある場合は、そこに入力されている内容がデフォルト値として表示されます。

Running "init:hatamoto" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.

Please answer the following:
[?] Name of the plugin. (My First Plugin)
[?] PHP function prefix (alpha and underscore characters only) (my_first_plugin)
[?] Version of the WordPress that your plugin requires. (3.8)
[?] A brief description of the Plugin. (This is a awesome cool plugin.)
[?] Contributor should be a list of wordpress.org userid's. (miyauchi)
[?] URI of page describing plugin and updates. (https://firegoby.jp/)
[?] Your name. (Takayuki Miyauchi)
[?] URI of the plugin author. (https://firegoby.jp/)
[?] Type of source code repository. (git)
[?] URI of source code repository.
[?] License (GPLv2)
[?] License URI (http://www.gnu.org/licenses/gpl-2.0.html)
[?] Using admin panel? "yes" or "no". (no)
[?] Will you use "Sass", "LESS", or "none" for CSS with this project? (Sass)
[?] Will you use Composer with this project? "yes" or "no". (no)
[?] Do you need to make any changes to the above before continuing? (y/N)

Writing .gitignore...OK
Writing Gruntfile.js...OK
Writing css/my-first-plugin.scss...OK
Writing includes/README.md...OK
Writing js/my-first-plugin.js...OK
Writing languages/my_first_plugin.pot...OK
Writing my-first-plugin.php...OK
Writing readme.txt...OK
Writing package.json...OK

Initialized from template "hatamoto".

Done, without errors.

以上が完了すると、以下のようなファイル構成でプラグインが生成されます。

my-first-plugin
├── .gitignore
├── Gruntfile.js
├── css
│   └── my-first-plugin.scss
├── includes
│   └── README.md
├── js
│   └── my-first-plugin.js
├── languages
│   └── my_first_plugin.pot
├── my-first-plugin.php
├── package.json
└── readme.txt

ここで出来上がったプラグインには、あらかじめJavaScriptのMinyfyやSassをビルドするためのGruntfile.jsが同梱されています。

それらを使用するには、プラグインディレクトリ内で以下のコマンドを実行して必要なツールをインストールしてください。

$ npm install

あとは、.jsや.scssを修正して、そのたびに以下のコマンドを実行するだけです。

$ grunt

Hatamotoで作成されるプラグインには、他にも国際化や管理画面など、プラグインの基本となる機能があらかじめ実装されています。

もちろんオープンソースなのでフォークして自分流にカスタマイズするなど、前述のVagrant環境と組み合わせて、ぜひいろいろ挑戦してみてください。

---