blog.migiue.jp

Tenjinテンプレートエンジンで快適Web制作

IWDD41で「Tenjinテンプレートエンジンで快適Web制作」として発表してきました。

VGAアダプタを忘れてプロジェクタに映せなかったので(><)、blogにコードを貼ってみます。

素のHTMLを何ページも手書きしたくない、CMSを入れる程でもない、DreamWeaverテンプレートでは物足りない。 デザイナーでもテンプレートエンジンを使いこなしたい。Rubyを使いたい。そんな人にお勧めです。

今年はもっとRubyを勉強しようと思っているので、Ruby用のrbTenjinを使ってデモを書きました。

IWDDで発表した内容は

  • 基本的なTenjinの使い方
  • ヘッダ、本文、フッタの３ファイルに分ける方法
  • エクセルファイルからデータを読み込んでHTMLページ生成
  • YAMLファイルからデータを読み込んでHTMLページ生成
  • CGIのパラメータを受け取ってページの内容を変える

基本的なTenjinの使い方

テンプレートファイルの中で

  • ${...}と書けばrubyの式を評価した結果が入る（HTMLエスケープ有り）
  • #{...}と書けばrubyの式を評価した結果が入る（HTMLエスケープ無し）
  • <?rb ... ?>でrubyの文を埋め込める

Apacheで使うための設定

今回はCGIとして動かして、そのCGIの中でTenjinを使っていきます。

  1. Tenjinを動かすためのパーサとしてのCGI
  2. apacheで動かすための.htaccessファイル
  3. テンプレートファイル

まず、1.Tenjinを動かすためのCGIを http://dekstop.de/weblog/2006/01/rhtml_on_osx_with_apache_and_erb/ を参考にして書いてみます。これを「tenjin.cgi」とかの名前で保存しておきます。CGIがテンプレートファイルを受け取って、Tenjinに渡してレンダリングした結果を表示しています。

#!/usr/bin/ruby
$KCODE = 'utf-8'
require 'time'
# require 'rubygems'                          # 必要ならば
require 'tenjin'

time = Time.now.httpdate

HEADERS = <<EOF
Date: #{ time }
Server: #{ ENV['SERVER_SOFTWARE'] }
Last-Modified: #{ time }
Content-Type: text/html

EOF

begin

  path = nil
  if (ENV['PATH_TRANSLATED'])
    path = ENV['PATH_TRANSLATED']
  else
    file_path = ENV['REDIRECT_URL'].include?(File.basename(__FILE__)) ? ENV['SCRIPT_URL'] : ENV['REDIRECT_URL']
    path = File.expand_path(ENV['DOCUMENT_ROOT'] + '/' + file_path)
    raise "Attempt to access invalid path: #{path}" unless path.index(ENV['DOCUMENT_ROOT']) == 0
  end

  tenjin = Tenjin::Engine.new(:cache => false)  # キャッシュ機能は今は外しておく
  output = tenjin.render(path)                  # テンプレートをレンダリングする

  print HEADERS + output                        # レンダリング結果を出力

rescue Exception
  # エラーが発生した場合
  print "Content-Type: text/html\n\n"

  # error message
  print "<h1>Script Error</h1>"
  print "<pre>#{ $! }</pre>"

  # debug info
  print "<h2>Backtrace</h2>"
  print "<pre>#{$!.backtrace.join("\n")}</pre>"

  print "<h2>Environment</h2>"
  print "<pre>#{ENV.keys.map { |key| key + ' = ' + ENV[key] + "\n"} }</pre>"

  print "<hr>"
  print "<i>#{__FILE__} -- #{time}</i>"

end

tenjin.cgi

apacheで動かすための.htaccessファイル

Apacheのmod_actionを使って、htmlファイルへのアクセスを、tenjin.cgiに渡すようにします。テンプレートファイルの拡張子は.rhtmlとかでも良いのですが、.htmlにしておくと、URLの見た目的にも、エディタでの扱いやすさ的にも良いと思います。

Options +ExecCGI

AddHandler tenjinpage .html
Action tenjinpage /tenjin.cgi

.htaccess

ここまで出来たら準備完了です。テンプレートファイルを作って、動作確認してみます。

<?rb aaa = 'こんにちはー' ?>
<html>
  <head>
    <title>${aaa}</title>
  </head>
  <body>
    ${aaa}
  </body>
</html>

test.html

こんなHTMLファイルを作って、 http://localhost/test.html にアクセスしてみると、変数aaaの内容が${aaa}で評価されて、ブラウザには

<html>
  <head>
    <title>こんにちはー</title>
  </head>
  <body>
    こんにちはー
  </body>
</html>

という内容が返ってくると思います。

毎回CGIを呼び出しているので、スピードが気になる場合は、レンダリング結果を静的ページとして保存してしまうのも良いと思います。