Liquid の紹介
-
Upload
tomohiko-himura -
Category
Documents
-
view
1.712 -
download
7
description
Transcript of Liquid の紹介
![Page 1: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/1.jpg)
Liquid の紹介2013-03-02 広島Ruby勉強会
![Page 2: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/2.jpg)
Liquid
テンプレートエンジン
Jekyll で利用されている
![Page 3: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/3.jpg)
Jekyll って?
静的サイトジェネレータ
動的に HTML を生成しない
ローカルで HTML を生成
Github Pages で利用可能
![Page 4: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/4.jpg)
テンプレートエンジンって?
差し込み印刷みたいなもの
雛形を用意しておいて一部を置き換える
変数の利用
分岐や繰り返しを行うことも
タグを用いてマークアップ
![Page 5: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/5.jpg)
変数の出力
{{ 変数名 }}
![Page 6: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/6.jpg)
変数の出力
hoge = “goro” の場合
{{ hoge }} # => goro
![Page 7: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/7.jpg)
変数の出力
Hashが束縛されている場合
![Page 8: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/8.jpg)
変数の出力
{{ 変数名.キー }}
![Page 9: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/9.jpg)
変数の出力
hoge = { goro: “mogu” }
{{ hoge.goro }} # => mogu
![Page 10: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/10.jpg)
フィルタ
ヘルパ関数みたいなもの
シェルのパイプのように
引数がある場合は : でつなぐ
引数が複数ある場合は , でつなぐ
![Page 11: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/11.jpg)
フィルタ
{{ 変数 | フィルタ | フィルタ }}
![Page 12: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/12.jpg)
フィルタ
hoge = “gorogoro”
{{ hoge | replace_first: ‘goro’, ‘mogu’ }}
# => mogugoro
![Page 13: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/13.jpg)
フィルタ
{{ ‘5’ | plus:’1’ | times:’4’ }
# => 24 # 5 + 1 * 4
![Page 14: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/14.jpg)
分岐
{% if 条件 %}ifのとき{% endif %}
![Page 15: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/15.jpg)
分岐
{% if hoge == ‘goro’ %}
ぐるぐる{% endif %}
# => ぐるぐる
![Page 16: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/16.jpg)
繰り返し
{% for 変数名 in リスト %}
繰り返す内容
{% endfor %}
![Page 17: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/17.jpg)
その他のタグ、フィルタ
リファレンスなどを
https://github.com/Shopify/liquid/wiki/Liquid-for-Designers
![Page 18: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/18.jpg)
カスタムタグ
Rubyでがりがりとかく
![Page 19: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/19.jpg)
{{ }} vs {% %}
{% %} を使用した場合
未定義の変数だと例外が飛びます
![Page 20: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/20.jpg)
ERB じゃダメなん?
ERBだと
Rubyでできることなんでもできてしまう
サービスを利用する人が使う場合
機能制限したい
![Page 21: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/21.jpg)
Jekyll on Github
なにもしなくても使えます
カスタムタグの作成はできない
![Page 22: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/22.jpg)
プログラムで使う
template = “Hello {{ hoge }}”
binding = { hoge: “World” }Liquid::Template.parse(template).render binding
# => Hello World
![Page 23: Liquid の紹介](https://reader031.fdocuments.in/reader031/viewer/2022012313/558b474cd8b42a32468b4704/html5/thumbnails/23.jpg)
ご清聴ありがとうございます