お前に足りないものは、それは!
情熱・思想・理念・頭脳・気品・優雅さ・勤勉さ! そしてなによりもォォォオオオオッ!!
速さが足りない!!

そう、ぼくにはブログの執筆速度が足りない。ブログ書くのって結構ダルいですしね。欠番しないこと、自分に課したハードルが思いの外高い。

で、なんとかしてこのダルくて単調な作業を楽しく短縮したいと思い、最近ウワサのテンプレートエンジン、JadeでWP-Eブログ執筆用の環境を作ることにしました。今回はこれを使ってJadeを交えつつ、効率化の紹介と更なる効率化のアイデアを募る場にしたいなと。

Jadeってなんじぇ いど

超雑に言っちゃうと
sass → css
Jade → html
みたいな感じ。sass記法とか、coffeeスクリプトよろしく、インデントで閉じタグとかネストを定義していくタイプです。ついでに変数とかループとか使いたいし、ファイル分割して再利用、継承、代入なんかもしちゃおう、みたいな。

他にもテンプレートエンジン色々あるけど、Jadeが一番名前かっこいいです。

ちなみにこの記事をJadeで書くとこうなる。

でも、お難しいんでしょう?

百聞は一見に如かずとよく言いますが、前項での記述を見ればどれだけスイスイか、なんとなく分かると思います。慣れない内はJadeの記法につまずいてその度に調べることになるけど、慣れの問題。今回Jadeの使い方は本題から逸れるので使い方の説明はほかのサイトを参考にしてもらうといいです。
楽して習得したい人は、後で紹介するGitHubのリポジトリから参考にしてもらうといいかも。

また、sassやless宜しくコンパイルが必要です。面倒なのでタスク管理ツール使いましょう。最近流行りのgruntとかgulpとかのあれです。なんのことだかさっぱりだったらイクラさんの記事を読むよろし。とりあえず使いはじめるための１歩進んだところからのGrunt入門＠すぐ動かせるサンプルつき

んで、つくりました、WP-E記事執筆スタートアップセット。vwxyutarooo/wpenewpost-jade – GitHub
ローカルで簡単なブラウザチェックできちゃう親切設計。gulp使ってます。オススメ。gulpのインストールがまだの人は今やってしまおう。gulp/docs/getting-started.md – GitHub
node.jsが必要。Homebrewがあればスイスイだけど、無ければやはりとりあえず使いはじめるための１歩進んだところからのGrunt入門＠すぐ動かせるサンプルつきを参考にしよう。

ちなみに。Node.js とは一体何か？ – IBM developerWorks

gulpの環境を用意

で、node.jsが用意できてたら、ここから。
今回はぼくが作ったgulpfile.jsにしたがって動かすことになるので一般的に紹介されている
「gulpのグローバルインストール → ローカルインストール → うんぬん」
ではなく、
「gulpのグローバルインストール → ぼくが書いたgulpを走らせる」
といった手順になりまうす。

gulpをグローバルにインストール(PCにgulpをインストールするイメージ)

npm install -g gulp

WP-Eスタートアップセットをクローン

git clone git@github.com:vwxyutarooo/wpenewpost-jade.git

gulpのパッケージをインストール。”wpenewpost-jade”リポジトリ内”package.json”の記述にしたがってパケージをインストールしてくれます。

npm install

gulpタスク起動するか

gulp

若しくは

gulp openpen

おーぷんぷんでindex.htmlを開く。開かれるとうざい時はオプション無しで。

Jadeが凄いのは分かった、これでどうブログ執筆を高速化するよ?

WP3.9のリリースで画像がDrag&Dropでアップロード可能になったと盛り上がっているのに全く野暮な話だけど、ぼくブラウザで記事書くの苦手なのですよね。使い慣れたエディタで書きたい。んで、イージーに”Command + a”、”Command + c”で記事全文コピペして済ませたい。画像もフルパス入ってれば差し替え要らないし超イイね。実際にテキストと画像入れてみたら何か違う、ってことも割と頻繁に起こるので、この辺りはローカルで済ませたい。
そんな訳で、

1. content.jadeに記事内容を記述
2. settings.jadeにて色々宣言
3. index.htmlでシングルページを再現
4. 本番環境用の変数を有効にしてコンパイルすると画像ファイルのフルパスを生成
5. content.htmlの中身をまるごとWordPressにコピペ
6. “src/img”内の画像は圧縮してuploadsフォルダへ

そんな仕様にしてみました。ついでにgulpで画像圧縮もしちゃう!

注意事項

1. livereloadが効いていない(ブラウザのExtension使わない方法を見つけたので、工事中)
2. Jadeのコンパイルエラーでgulpのwatchタスクが中断する(あとで直そう)
3. アイデア出し、文章組み立ては短縮できない(人間のスペック不足)
4. 読めないままになってる画像あり(許そう、面倒だし)
5. WordPressとpタグ喧嘩させない為に(あまりエレガントではないけどpタグに対してクラス”p”を付与するとか。gulp-prettifyをやめればクラス要らない。)
6. brとWordPressを仲良くさせるために(これもgulp-prettifyを諦めれば。気になる人はPS Disable Auto Formatting使ってもいい)

とまあまだ色々問題点は残ってますが、Jadeやgulp、WP-Eを体感してもらうにはちょうどいいサイズだと思いまふ。

さいごに

なんだからなかった人へ

あんまり親切な記事ではないですね。Jadeやgulpの記法には一切触れていません。エンジニア系の人に取っては「たかがこの程度」と思われるでしょうし、初心者の人やデザイン寄りの人にとっては「これじゃ分からない」と不満に思われるでしょう。前者の人はもっといいものを作って情報発信していけばいいのです。後者の人はまずダウンロードしてみて、走らせてみる。layout.jadeに適当な文字を入力すると記事が入っていく感じを体感してみる。気に入ったらファイルの中身を覗いて研究するといいんじゃないかなと。ソースと結果から処理内容を想像するクセをつけてみて欲しい。
今回、contentjade、index.jade、layout.jade、settings.jade、の4つのファイルを使ってhtmlを生成しています。Jadeの機能全てとはいきませんが、それぞれのファイルで色々な方法が使われている筈です。

ぼく自身、初めてのJadeだったので多少苦労しました。extendsやblock、includeを理解するのに紙に書きながらトレースしたり。まあぼくの頭が足りないからなのですが。
基本的に、人の書いたものをよく見て、自分の求める形に書きなおしてみて学習しています。今回はTシャツの人のjade2html-with-gulpをモロパク…参考にさせてもらいました。
記述方法なんかは、Tシャツの人のJadeとhtmlを見比べてみれば、とっても分かりやすいと思います。

自分で使ってみて

今回の記事から早速つかってみた訳ですが、悪くないんじゃん! スイスイ! なによりJade書いてて楽しい。ストレスフリー。多い日も安心。文章がね。
でもね、如何に便利と言っても、ぼくごときの脳みそで思いつくことなんて、世の中の誰かがもっといい方法で確立してるはずなんですよね。だから、皆のオレオレブログ作成環境、紹介すると楽しいと思うよ!

参考サイト

• gaspanik/jade2html-with-gulp – GitHub
• japboy/jade-ftw.md – GitHub Gist