今回は、ShopifyのLiquidを使って日付を表示するフォーマットの一覧をご紹介していきます。
ECサイトではセールのカウントダウンや商品の発送日など、日付を表示する機会が多くあります。そんな時にこの記事が参考になれば幸いです。
Liquidとは、Shopifyのテンプレートエンジンで、Shopifyストアのテーマをカスタマイズするために使用するプログラミング言語のようなものです。
本記事では詳細は割愛しますが、Liquidを使うことでHTML、CSS、JavaScriptを動的に生成することができます。
日付を表示する基本
まず、Liquidで日付を表示する基本的な方法についてご紹介していきます。
例えば、ブログ記事の公開日を表示するには下記のようにLiquidで記載します。
{% article.published_date | date: "%Y-%m-%d" %}
- %Y = 年（4桁数字）
- %m = 月（2桁数字）
- %d = 日（2桁数字）
分解するとこのようになるので、下記のように表示されます。
"2021-09-01"
ちなみに現在の時間を出力する時はこちら
{% "now" | date: "%Y-%m-%d" %}
Liquidを書いてあげると本日の日付が出力されます。
Liquidで表示できる日付フォーマット一覧
基本的な表示方法をご紹介しましたので、さっそくLiquidで表示できるフォーマット一覧をご紹介します。
曜日（Weekday）
| %a | 英語の曜日（Mon~Sun形式） |
| %A | 英語の曜日（Monday~Sunday形式） |
| %w | 数字の曜日（0~6）0は日曜日Liquidで表示できる時間フォーマット一覧 |
日にち（Day）
| %d | 数字の日にち（01~31形式） |
| %e | 数字の日にち（1~31形式）先頭の0はなし |
| %j |
年間を通して何日目か（001~366） |
月（Month）
| %b |
英語の月（Jan~Dec形式） |
| %B |
英語の月（January~December形式） |
| %m |
数字の月（01~12 形式） |
|
%e |
数字の月（1~12形式）先頭の0はなし |
年（Year）
| %Y | 数字の年（2021など4桁） |
| %y | 数字の年（21など2桁） |
Liquidで曜日を日本語に変換する方法
次に時間のフォーマットをご紹介します。
日付ほど使用頻度はないかもしれませんが、覚えておくと良いかもしれません。
時間（Hour）
| %H | 24時間での表記（00~23） |
| %I | 12時間での表記（00~12）英語の大文字Iアイ |
| %l | 12時間での表記（1~12）英語の小文字lエル ゼロなし |
分（Minute）
| %M | 分（00~59） |
秒（Second）
| %S | 秒（00~60） |
| %s | 秒（無限？）日付等全て秒に換算して直す。 日付の比較に便利。 |
その他
| %P | 午前か午後（"am"か"pm"） |
| %p | 午前か午後（"AM"か"PM"） |
| %Z | 該当のタイムゾーン（UTCなど） |
Liquidで曜日を日本語にする方法
最後に、英語の日付を日本の曜日に直す方法についてご紹介していきます。
曜日はデフォルトでは日本語で表示することができないので、下記のようにして表示します。
{%- assign weekday = 'now' | date: '%a' -%}
{%- capture weekday_jp -%}
{%- if weekday == 'Sun' -%}
{{- '(日)' -}}
{%- elsif weekday == 'Mon' -%}
{{- '(月)' -}}
{%- elsif weekday == 'Tue' -%}
{{- '(火)' -}}
{%- elsif weekday == 'Wed' -%}
{{- '(水)' -}}
{%- elsif weekday == 'Thu' -%}
{{- '(木)' -}}
{%- elsif weekday == 'Fri' -%}
{{- '(金)' -}}
{%- elsif weekday == 'Sat' -%}
{{- '(土)' -}}
{%- endif -%}
{%- endcapture -%}
{{ article.published_at | date: '%Y年%_m月%e日' append: weekday_jp }}
まとめ
今回は、Liquidで日付を表示するフォーマットを紹介してきました。
Liquidの記述には専門的な知識が必要になりますが、日付などはフォーマットを覚えておくと表示できるようになるので、必要な時には本記事を参考にしていたでると幸いです。
