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

IWDD41で発表したTenjinテンプレートエンジンで快適Web制作3の続きエントリーです。

画像ファイルが沢山あるページの場合、srcやaltをそのままhtmlの中に書いても良いですが、yamlファイルで管理したりすると便利かも。

apple:
  src:        apple.jpg
  alt:        りんごの写真
  width:      300
grape:
  src:        grape.jpg
  alt:        ぶどうの写真
  width:      400
lemon:
  src:        lemon.jpg
  alt:        レモンの写真
  width:      500

data.yaml

それぞれの画像ファイルに対するメタデータを、このようなYAML形式で作っておきます。

そして、以下のようなテンプレートを作ると、YAMLファイルからデータを読み込んで、それぞれの項目名を元に、imgタグを返すことができます。

<?rb
@title='YAMLファイルからページを作る'

# YAMLファイルを読み込んで、指定されたハッシュのimgタグを返す
require 'yaml'
def yaml2img(key)
  hash   = YAML.load(File.read('data.yaml'))
  ysrc   = hash[key]['src']
  yalt   = hash[key]['alt']
  ywidth = hash[key]['width']
  @_buf << '<img src="/images/'+ysrc+'" alt="'+yalt+'" width="'+ywidth+'">'
end
?>

<?rb import 'header.html' ?>
  <div>
    <?rb yaml2img('apple') ?>
    <?rb yaml2img('grape') ?>
    <?rb yaml2img('lemon') ?>
  </div>
<?rb import 'footer.html' ?>

yaml.html

imgタグを返すyaml2imgメソッドをテンプレート内で定義して、テンプレート内で<?rb yaml2img() ?>で呼ぶと、その場所にimgタグが出力されます。

http://localhost/yaml.html にアクセスすると、

<html>
  <head>
    <title>YAMLファイルからページを作る</title>
  </head>
  <body>
  <div>
    <img src="/images/apple.jpg" alt="りんごの写真" width="300">
    <img src="/images/grape.jpg" alt="ぶどうの写真" width="400">
    <img src="/images/lemon.jpg" alt="レモンの写真" width="500">
  </div>
  <div>ここがフッター</div>
  </body>
</html>

という結果が得られると思います。

Sun, 10 Jan 2010 02:47:00 GMT | permalink | no comments


Trackbacks

Use the following link to trackback from your own site:
http://blog.migiue.jp/trackbacks?article_id=70

Comments

Leave a response

Leave a comment