別冊とっしーぱんち

IT技術系、Ruby関連、プログラミングお役立ち

トップ > RubyGems > 【RubyGem紹介】HTMLテンプレートエンジン「liquid」

【RubyGem紹介】HTMLテンプレートエンジン「liquid」

RubyGems

単品のHTMLと簡単なCSSを書いてWebページを作るみたいなことをしてる人なんですが。テーブルで表示するようなリスト表示ものを作りたいってときに、数行程度ならまだしも１０とか超えてくると、物量多いしコピペミスるしということで疲れたりします。体力が少ないのでここはプログラミングの力を借りてHTMLを一部生成できるようにしたい！そこで登場するのがHTMLテンプレートエンジンです。

Ruby標準ライブラリのなかにも「erb」というものがあるんですが、それよりも高機能な雰囲気だったLiquidをつかってみることにしました。ちなみにLiquidはShopifyという会社が開発。その会社が運営するネットショップ開設サービス、利用者がShopify（日本でいう楽天市場みたいな）で自分のサイトをカスタマイズするときにも使われているそうです。

Gemインストール

# インストール
gem install liquid

# バージョン確認
gem list liquid
liquid (4.0.3)

ちいさく試す

最小限っぽいコードはこんな感じになりました。

require 'liquid'

product = {'title' => "Awesome shoes"}

File.open("index.liquid") do |f|
  template = Liquid::Template.parse(f.read)
  puts template.render( 'product' => product )
end

index.liquidというのは、Liquidで使われる構文が埋め込まれたHTMLファイルです。こんな感じ

<!DOCTYPE html>
<head>
<meta charset="utf-8">
    <title>Liquid Demo Page</title>
</head>
<body>

{%  if product.title == "Awesome shoes" %}
    these shoes are awesome!!!
{%  endif %}

</body>


</html>

{% if product.title == "Awesome shoes" %}の中身がRubyの文法で記述できるわけです。puts template.render( 'product' => product )で渡したproductの中身が"Awesome shoes"という内容だったら、these shoes are awesome!!!と表示せよ、という意味になります。基本形はこれだけ。

ここまでだとerbと大差ないのですが、他にもフィルタやテンプレートからテンプレートを呼び出せるようです。それはまた次の機会にでもこの記事に書き足していければと思います。最近思うのはこの手の技術記事ってブログの特徴であるリライトを重ねていく方がより良いものになったりするのではないかなと考えていまして。少しずつ紹介しながら、内容を拡充しながら記事を育てていく感じにできればなあと考えています。

shopify.dev