最近､Webサイト制作の選択肢のひとつとして､「Jekyll」に注目しています｡第1回は「Jekyll」とはなにか､どんなメリットがあるのか､簡単に紹介したいと思います｡
Jekyllを使った静的なWebサイト制作 基礎知識編 目次
Jekyllを使った静的なWebサイト制作 基礎知識編 – はじめに
Jekyllを使った静的なWebサイト制作 基礎知識編 – 第1回 – 「Jekyll」とは？
Jekyllを使った静的なWebサイト制作 基礎知識編 – 第2回 – デフォルトテーマで基本的な使い方を理解する
Jekyllを使った静的なWebサイト制作 基礎知識編 – 第3回（終）- テーマを適用､変更する
Jekyllとはなんぞ？
Jekyllは､静的Webサイトをシステマチックに構築するための､Ruby製のツールです｡Rubygemsにて配布されています｡
例えば､動的にページを生成するWordPressなどとは違い､Webサイトやブログを､あらかじめ作成されたページのテンプレートをもとに､静的なHTMLによって構築します｡
マークダウン形式によってページを作成できるのが特長です｡
Jekyll公式サイト
日本語の公式サイトです｡
Jekyllの読み方？
日本語風に発音するなら「ジキル」でいいと思います｡
『ジキル博士とハイド氏』（ジキルはかせとハイドし、原題：『ジキル博士とハイド氏の奇妙な事件』(The Strange Case of Dr. Jekyll and Mr. Hyde)は、ロバート・ルイス・スティーヴンソンの代表的な小説の1つ。1885年に執筆され、翌1886年1月出版。通称はジキルとハイド。
ジキル博士とハイド氏 – Wikipedia
静的なサイトとは？
静的なサイトとは､読んで字のごとく､単純に､リクエストされたHTMLファイルを表示する､といった仕組みのサイトのことです｡反対に､例えばWordPressのようなCMSで構築されたサイトは､リクエスト時にサーバー側でいろいろな処理を行い､データベースから情報を取得するなどしてページを生成し表示します｡これらは「動的」なサイトなどと呼ばれます｡
静的サイトを手作りで作る時の問題点
例えば､数十ページあるサイトを静的HTMLで作成するとします｡
静的HTMLで作成するということは､ページごとにHTMLファイルを用意して､テキストエディタで作成していくことになります｡
しかし､サイトのタイトルやロゴ､メインメニューなどを表示する「ヘッダー」部分や､copyrightなどを表示する「フッター」部分などは､全ページ共通のものにしたいですよね｡一番シンプルな方法は､まずメインページをひととおり作成して､ヘッダー部分とフッター部分を各ページにコピペする方法｡でも､これには一つ問題があります｡
この方法だと､ヘッダー部分やフッター部分を変更する際に､そのたびに全てのファイルにコピペを行わないといけません｡これでは､何百ページもある時には大変な作業ですし､また､コピペ忘れなどで完全な共通化ができなくなるかもしれません｡静的HTMLを作成する際には､ここが大きな問題のひとつとなります｡
また､記事の一覧ページを静的HTMLで作成する時は､まず記事を作成して､さらに一覧ページにそのページへのリンクを､同じページ名でリンクを貼り付ける作業が必要になってきます｡また､一覧に投稿日時やカテゴリーなどを表示する場合も､ページに記述した日時やカテゴリーと同じものを一覧の方にも記述しなければなりません｡つまり､変更が生じた際に､ページと一覧､両方を更新する必要が生じます｡静的HTMLによるサイト作成にはこのような更新時の問題がつきまといます｡
動的サイトにもデメリットはある
昨今ではWordPressのようなCMSによる動的なサイト作成が主流となっています｡動的サイトでは､あっちもこっちも変更しなければならない､といったような更新の問題で悩むことはありません｡しかし､WordPressを利用するには､サーバ側のPHPなどの環境が必要だったり､データベースが必要だったり､定期的なバージョンアップが必要だったり､また仕組みの複雑さに悩まされたりといった側面もあります｡動的サイトには動的サイトのデメリットもあるわけです｡
Jekyllによる静的サイトの自動生成
「WordPressのようなサーバ環境もデータベースも不要で､かつ各ページには共通のテンプレートを使用して､数ページ – 10ページ程度のサイトを構築したい！」
といった要件は､意外とあるものです｡静的HTMLで手作りで作成するにはボリュームがあるが､WordPressでは重すぎる｡みたいな｡
そんなサイト制作ツールの選択肢としてぴったりなのが､この「Jekyll」｡Jekyllは､テンプレート（レイアウト）ファイルや各記事（ページ）のファイルをもとに､静的HTMLを生成しサイトを構築してくれる､「ちょうどいい」感じのツールなのです｡
Jekyllではどんなことができる？
ざっくりですが箇条書きします｡一般的なWebサイトやブログのようなものは構築することができます｡
- テンプレート（レイアウト）を使用してヘッダーやフッターなどのパーツを共通化できる
- WordPressのような投稿記事（ブログ的なもの）と固定ページという概念がある
- 要するにブログが作れる
- 普通のサイトも作れる
- 投稿記事や固定ページはマークダウンでも書ける
- 記事一覧を作成できる
- 記事はカテゴリ分けやタグ付けができる
- ページネーションを作成できる
- Sassをコンパイルできる
- フィードを出力できる
Jekyllによる静的サイト作成のメリットは？
Jekyllによるサイト作成には以下のようなさまざまなメリットがあります｡
HTMLファイルを置いておける環境があれば公開できる
PHPのバージョンやらなんやらといったサーバの環境に依存せず､HTMLファイルやCSSなどを置いておける環境さえあれば､サイトを公開できます｡
データベースが要らない
WordPressなどのCMSではデータベースを必要としますが､Jekyllはデータベースを使用しません｡あくまで静的HTMLによってサイトを構築しますので､本番環境はもちろん､テスト環境でもデータベースを用意する必要はありません｡
バックアップやバージョン管理が容易
データベースを利用していないので､基本的にはプロジェクトフォルダをそのままバックアップするだけでOKです｡また､Gitなどによるバージョン管理も容易です｡
Github Pages またはGithubプロジェクトページ作成に優遇される
Githubには無料でサイトを公開できるGithub Pagesなるサービスがあります｡そして､このGithubページはJekyllのGitリポジトリをpushするだけでページを公開できるという優遇っぷりなので､Githubユーザーにはぜひおすすめします｡
Jekyllを使うデメリットは？
Jekyllがインストールされている環境でしか更新できない
Jekyllがインストールされた環境でしか､サイトの更新（HTMLファイルの生成､ビルド）ができません｡複数の環境で更新を行うには､各環境にJekyllをインストールする必要があります｡
また､現在はWindowsは公式にはサポートされていないようです（Linux, Unix または Mac OS Xとなっています｡）が､動かす方法はあるようです｡
メールフォームやコメント機能を実装できない
基本的に､サーバ側で何かしらの処理を行うコメントやメールフォームなどの機能は実装できません｡
Disqusコメントフォームを埋め込むことはできるようです｡
作業はあくまでエディタ上で
WordPressのように､Webブラウザからログインし､管理画面や記事作成画面を操作する､ということはできません｡あくまでも､テキストエディタで設定ファイルや記事ファイルに書き込んでいくスタイルとなります｡デメリットといえるかは分かりませんが｡
ターミナルを使う
Jekyllはターミナルからコマンドを打って操作します｡黒い画面こわいよー､という方には少しアレかもしれません｡とは言っても､基本的な使い方だけなら僕でも使えるくらい簡単なので､そんなに心配は要りません｡
Jekyllの使い所は？
Jekyllのメリット・デメリットを踏まえた上で､実際にJekyllが活躍する使い所として､こんな場合が挙げられると思います｡
- 数ページから10ページ程度のサイトの制作
- コメントやメールフォームは不要
- Githubページ（Githubプロジェクトページ）の作成
数ページから10ページ程度のサイトの制作
静的HTMLを手作りするのは手間だが､WordPressを使うのはちょっと重たい…｡そんな小規模のWebサイトを作るにはちょうどいいと思います｡
複数環境でJekyllを使うにはそれぞれの環境にJekyllをインストールしなければいけませんが､基本的には､Rubyがインストールされた環境で
gem install jeykyllするだけでJekyll環境は作れますし､Githubなどでバージョン管理を行っていれば､複数環境での更新も行えます｡
コメントやメールフォームは不要
僕もいくつかブログなどを運営していますが､基本的にはコメントやメールフォームは設置していません｡というのは､単純な連絡やそのページに対するコメントは､他のSNSでまかなえると考えているからです｡
小規模なサイト制作であれば､連絡やコメントは他SNSにまかせてしまう､というのも手だと思います｡
Githubページ（Githubプロジェクトページ）の作成
そのうち記事にするつもりですが､Githubページ､またはGithubのプロジェクトページを作成するにはもってこいだと思います｡というのも､Githubページは､Jekyllに特別対応してくれているからです｡
そもそも､僕がJekyllに興味を持ったきっかけのは､Githubページを作ろうというところからです｡はい｡
おわりに
Jekyllは､WordPressに置き換わる新世代Web制作ツール､などではありません｡WordPressとは趣旨も志向も全く異なります｡
WordPressは､テーマやプラグインを自作するには相応の知識が必要ですが､ブログを運用するだけに絞れば､ブラウザの設定画面や記事投稿画面といったGUI上で作業を行えます｡対照的に､Jekyllでは投稿の更新の際にもテキストエディタとコマンドラインを使います｡コードやコマンドに慣れ親しんだ方向けのツールと言えると思います｡
例えば､jQueryプラグインなどの開発者が､数ページのプロジェクトサイトを作りたい､なんてときには､ぴったりのツールと言えそうです｡
次は Jekyllを使った静的なWebサイト制作 基礎知識編 – 第2回 – デフォルトテーマで基本的な使い方を理解する