Jekyllというrubyの静的HTML生成ツールがあります。
実際に実務としては使っていませんが、割りと面白いツールですので勉強がてら紹介してみます。

インストールなどについては、詳しく説明しているブログが多数ありますので、ここでは割愛します。

Jekyllについて詳しく説明しているサイト
・CodeGrid 有料ですがかなり詳しく紹介してあります。
・ゆっくりと…【WordPressよりjekyllで本格的ブログを作りたくなる、かもしれないまとめ】
・kaoriya 【Windowsでjekyllを使えるようにするよ】

ここでは、実際のweb制作の現場でどう使えるかを考えてみたいと思います。

Jekyllとは？

静的なHTMLを書き出してくるツールです。
と書くとすごく分かりにくいですね。
素のHTMLと違って、headerなどのパーツをインクルードできたり、ブログ的なアーカイブページができたり、テーマファイルの共有ができたりします。
データベースが不要ですので、ローカルで開発環境を整えるだけで利用可能です。

Jekyllはあくまでジェネレーターなので、自由にデザインを適用することができます。(逆をいうと、素の状態からのスタートになります)
※bootstrapを組み込んだJekyllワークフレームもあります。

ちなみに、jekyll-bootstrapはgit経由で簡単に導入できます。
（windows環境ではgitの設定など少し手間です。その辺の話題はまた後日書きます。）

git clone http://github.com/plusjade/jekyll-bootstrap.git インストールしたいディレクトリ

Jekyllでのサイト作成時のワークフロー

ざっくりと書くと
Jekyllの起動(コマンド)
↓
ベースとなるファイルの作成、編集(テキストエディタ)
↓
サーバー(ローカル環境)の監視&HTMLの生成(コマンド)

となります。

そう、黒い画面必須です。
残念ながら、これで、ハードル3割増し(当社比)

といっても、コマンド自体はデータのあるディレクトリに移動して

jekyll build

Webサイトの生成を行います。

jekyll build --watch

ファイルの変更を監視して、変更のあるたびにWebサイトの生成を行います。

jekyll serve

ローカルサーバを立ち上げてWebサイトのプレビューを行うことができます。URLはデフォルトでhttp://localhost:4000となります。

jekyll serve --watch

ローカルサーバを立ち上げつつ、ファイルの変更も監視してそのたびにWebサイトの生成を行います。

くらいですから、それほど大変なことではありません。

上記のワークフローも実際には、ある程度自動化できそうですが、肝心なファイルの作成、編集はテキストエディタで行なわなければなりませんし、htmlの生成もコマンドを叩く必要があります。

実際のweb製作現場では、どうかな？

前置きが長くなりましたが、実際の制作現場ではどうなのかというところを考えてみます。
ざっくりまとめると

使えそうな案件
・大前提としてCMSが導入できない案件
・ニュースリリースなどの定期更新が頻繁にある
・サイト構成が似通っていて、モジュール化できそうなデザイン

逆に導入しない方がいい案件
・更新は原則クライアントが行なう。
　→HTMLの生成にはコマンドを叩く必要がありますので
・windows環境
　→設定できますが、結構めんどくさいと思いました。

作業的には基本、テキストエディタで行ないますので、ドリームウィーバーなどのオーサリングツールを利用しているような場合も向きませんね。逆に、普段からCMSでサイト制作をしているような場合は、導入しやすいのではないかと思います。

モジュールのインクルードはかなり自由にできますので、事前にきちんと設計してサイトを作らないとカオス化必須です。

ただ、その辺の問題をクリアでき、作業フローをきちんとルール化できれば、コーダー／プログラマが設計、コーディングし流し込みをそれ以外の人に振るみないな分業化も可能になりそうだなと感じています。
かなりプログラマさんよりなツールなので、簡単に導入できる訳ではないかと思いますが、うまく使えれば作業効率が軽減できそうですね。

実際に使ってみて思ったのが、ノンプログラマにはすこしハードルが高いかもしれないということです。
インストールまではいいですが、サイト／ブログの作成、コンテンツの流し込み、公開に至るまでコマンドを叩く機会が多いです。

次回は実際につまづいてしまった部分を紹介したいと思います。

Follow me!