Open Table of Contents
Nanoc を使ってみる
●インストール
●新規サイトの作成
●コンテンツの作成
関連記事
Nanoc とは？
Nanoc とは、静的な Web サイトを生成するための Ruby で書かれたコンテンツビルドツールである。
●nanoc: a Ruby site compiler that generates static HTML » home
自身の好みのフォーマットで記載した文書を他のフォーマット(標準では HTML)に変換して出力してくれる。
それだけではない。
作成した文書群を1つの文書の集合体(所謂サイト)として管理することができる。
結果として作成されるコンテンツは静的だが、その静的なコンテンツを作成する段階で、最近の文書の一覧、タグ付けされたページの一覧など、文書の属性に合わせたページを動的に作成することができる。
コンテンツマネージメントシステム(CMS)のようだが、一般的に言われる CMS がサーバ側で動作するのに対し、Nanoc はローカルの普通のパソコン上で動作する。
Ruby を入れて、Nanoc をインストールしてしまえば、Apache や Web Application サーバなど特別なものをインストールする必要はない。
(Nanoc で使用するプレビュー用の簡易 Web サーバは別途ライブラリとしてインストールする。)
サーバで公開しようと思えば、生成された静的コンテンツをまとめてサーバにアップロードするだけでよい。静的なコンテンツなので、サーバ側に特別な Web Application サーバなどは必要ない。普通のレンタルサーバなどで公開することができる。
さらにうれしいこととしては、Ruby を知っている人であれば、コンテンツの生成時に利用する filter、helper などを必要な要件に合わせて自作し、拡張していくことができる。
また、汎用的によく使われるであろう filter、helper の機能は既に用意されていたりするので、out-of-the-box で大概のことはできるようになっている。
このサイトも元々 Mephisto という Ruby On Rails ベースの CMS で管理していたが、Nanoc に切り替えてみた。
Nanoc を使ってみる
インストール
Ruby が入っていない場合は、Ruby をインストールしておく。また、Nanoc は RubyGems というパッケージ管理ツールでインストールすることになるので、RubyGems も入れておく必要がある。
ここでは、Ruby、RubyGems のインスール方法についての記載は割愛する。詳細は以下のサイトなどを参照。
●Ruby ダウンロード
●Ruby Install Guide::初心者のための Ruby インストールガイド
●Ruby ライブラリ
上記が既にインストールされていることを前提で、gem コマンドを使って Nanoc をインストールする。
$ sudo gem install nanoc
Nanoc には、作成されたサイトを確認するためのプレビュー機能がある。これを利用するためには、adsf というライブラリを必要とするので、これも gem でインストールしておく。
$ sudo gem install adsf
この文書を書いている環境は以下の通り。
$ nanoc -v
nanoc 3.1.3 (c) 2007-2010 Denis Defreyne.
Ruby 1.8.6 (2010-01-11) running on i686-darwin9.8.0 with RubyGems 1.3.7
新規サイトの作成
適当なディレクトリで、nanoc コマンドの create_site コマンドを使って新規のサイトを作成する。
$ nanoc create_site dr_blog
create config.yaml
create Rakefile
create Rules
create content/index.html
create content/stylesheet.css
create layouts/default.html
Created a blank nanoc site at 'dr_blog'. Enjoy!
$ cd dr_blog
$ ll
total 24
-rw-r--r-- 1 taka staff 22 6 15 11:22 Rakefile
-rw-r--r-- 1 taka staff 692 6 15 11:22 Rules
-rw-r--r-- 1 taka staff 2082 6 15 11:22 config.yaml
drwxr-xr-x 4 taka staff 136 6 15 11:22 content
drwxr-xr-x 3 taka staff 102 6 15 11:22 layouts
drwxr-xr-x 3 taka staff 102 6 15 11:22 lib
drwxr-xr-x 2 taka staff 68 6 15 11:22 output
上記は、dr_blog という名前のサイトを作成している。コマンドを発行したディレクトリ配下にコンテンツが作成されている。
content ディレクトリ配下に文書を作成していくことになる。作成したコンテンツから静的サイトを作成するには、nanoc compile コマンドを使用する。
先程のコマンド実行時に既に雛形的なコンテンツが用意されているので、コンパイルして現在の状況をプレビューで確認してみる。
$ nanoc compile
Loading site data...
Compiling site...
create [0.00s] output/style.css
create [0.03s] output/index.html
Site compiled in 0.05s.
content ディレクトリ存在するコンテンツがコンパイルされて、output ディレクトリに出力される。
プレビューを確認するためのサーバを起動する。
$ nanoc view
デフォルトでは、localhost の 3000 ポートで待ち受けているので、ブラウザの URL 欄に、http://localhost:3000/ と入力する。
ブラウザで以下の画面が確認できたら、ここまでの作業は順調に進んでいることになる。
コンテンツを作成していく作業は、
●コンテンツを書く
●コンパイルする (nanoc compile)
●生成されたコンテンツを確認する (nanoc view)
という流れになる。
コンテンツの作成
試しに、1コンテンツ作成してみる。
先程のプレビュー画面で見た画面のコンテンツ(Nanoc では、Item と呼んでいる)は、content/index.html に記載されている。
---
title: Home
---
<h1>A Brand New nanoc Siteh1>
<p>
You've just created a new nanoc site. The page you are looking at right now is
the home page for your site. To get started, consider replacing this default
homepage with your own customized homepage. Some pointers on how to do so:
p>
<ul>
<li>
<p>
<strong>Change this page's contentstrong> by editing the "index.h%tml"
file in the "content" directory. This is the actual page content, and
therefore doesn't include the header, sidebar or style information (those
are part of the layout).
p>
li>
<li>
<p>
<strong>Change the layoutstrong>, which is the "default.html" file in
the "layouts" directory, and create something unique (and hopefully less
bland).
p>
li>
ul>
<p>
If you need any help with customizing your nanoc web site, be sure to check
out the documentation (see sidebar), and be sure to subscribe to the
discussion group (also see sidebar). Enjoy!
p>
--- と --- で囲まれている領域は、コンテンツ(Item)のメタデータ(もしくは、属性)と呼ばれるものである。記法は YAML のフォーマットとなっている。このセクションは生成されるコンテンツにはそのままは表示されない部分となる。
content ディレクトリ配下にファイルを作成していけば、それがそのままコンテンツになるのだが、ここでは、Nanoc の用意している create_item コマンドを使う方法を試してみる。
ちなみに、先程から﹁コンテンツ﹂という言葉に Item という表記を入れていたが、Nanoc では1つのコンテンツは、1つの Item として管理されている。
hello-world というコンテンツを作成する。
$ nanoc create_item hello-wold
create content/hello-wold.html
An item has been created at /hello-wold/.
content ディレクトリ配下に作成された hello-wold.html の内容は以下の通り。
---
title: A New Item
---
Hi, I'm a new item!
以下のように書き換えて保存する。
---
title: Hello World!!
---
<h2>This is ths first page. "Hello World"h2>
コンパイルする。
$ nanoc compile
Loading site data...
Compiling site...
create [0.02s] output/hello-wold/index.html
skip [0.00s] output/style.css
skip [0.00s] output/index.html
Site compiled in 0.03s.
新たに output/hello-wold/index.html が生成されている。URL に http://localhost:3000/hello-world/ と入力し、ブラウザで表示を確認する。
ほんとの触りの部分だけの紹介だが、Nanoc は拡張性が高く便利なツールだ。