テンプレートの記述方法

INFO

Ranklet4 では新しく採用した Handlebars テンプレートエンジンを推奨しています。旧 Ranklet からテンプレートを移植する場合は、テンプレート（旧 Ranklet 互換）をご覧ください。

Ranket4 の HTML テンプレートおよび SCSS テンプレートは、テンプレートエンジン Handlebars を採用しています。

Web ページから取得する情報については、ページデータの取得を参照してください。

最上位で使える記述

ランキングのループ

{{#each rankings}} ~ {{/each}}
ランキングを 1 位から最後までループします。

ランキングのループ内で使える記述

順位

{{rank}}
順位を出力します。

ページの URL

{{url}}
ページの URL を出力します。

ページのタイトル

{{title}}
ページのタイトルを出力します。

ページの説明文

{{description}}
ページの説明文を出力します。

ページのサムネイル URL

{{thumbnailUrl}}
ページのサムネイル URL を出力します。Ranklet メタ画像がある場合は Ranklet メタ画像、OGP 画像の場合はそのサムネイル画像 URL になります。

ページの代表画像 URL

{{rawImageUrl}}
ページの代表画像 URL を出力します。Ranklet メタ画像がある場合は Ranklet メタ画像、OGP 画像の場合はその画像 URL になります。OGP 画像は通常、サムネイルに向かない高解像度画像が用いられるため、可能な限り{{thumbnailUrl}}を利用することを推奨します。

ページのページビュー

{{metric}}
ページのページビューを出力します。

Ranklet メタデータ

{{rankletMeta.メタデータ名}}
ページの Ranklet メタデータを出力します。

値の有無の判定

Hundlebars の#if ヘルパーを利用して、値の有無を判定できます。

例えば、{{#if title}} ~ {{/if}}と記述すると、タイトルがある場合にのみ内容が出力されます。

任意の場所で使える記述

ランキングの公開日時

{{datetime publishedAt}}
ランキングが公開された日時を出力します。datetime ヘルパーと組み合わせることで様々な形式で日時をフォーマットできます。

集計日数

{{days}}
ランキングの集計対象日数を出力します。number ヘルパーと組み合わせることで数値の表示形式を調整できます。

集計開始日

{{datetime dateFrom}}
ランキングの集計開始日を出力します。datetime ヘルパーを使用して様々な形式でフォーマットできます。

集計終了日

{{datetime dateTo}}
ランキングの集計終了日を出力します。datetime ヘルパーを使用して様々な形式でフォーマットできます。

ランキング件数

{{topN}}
ランキングの最大順位（表示件数）を出力します。number ヘルパーと組み合わせることで数値の表示形式を調整できます。

日付のフォーマット（datetime ヘルパー）

numberヘルパーを利用すると、日時を整形できます。

基本的な使い方

{{datetime publishedAt}}

フォーマット指定

第 2 引数でフォーマット文字列を指定できます。フォーマットは以下の記号を使用します：

• YYYY - 4 桁の年
• MM - 2 桁の月（01-12）
• DD - 2 桁の日（01-31）
• HH - 2 桁の時（00-23）
• mm - 2 桁の分（00-59）
• ss - 2 桁の秒（00-59）

フォーマット例

<!-- 基本形式: 2024-03-15 14:30:00 -->
{{datetime publishedAt}}

<!-- 日本式: 2024年3月15日 -->
{{datetime publishedAt "YYYY年MM月DD日"}}

<!-- 日付のみ: 2024-03-15 -->
{{datetime publishedAt "YYYY-MM-DD"}}

<!-- 時刻のみ: 14:30 -->
{{datetime publishedAt "HH:mm"}}

<!-- 完全形式: 2024年03月15日 14時30分 -->
{{datetime publishedAt "YYYY年MM月DD日 HH時mm分"}}

<!-- スラッシュ区切り: 03/15/2024 -->
{{datetime publishedAt "MM/DD/YYYY"}}

数値のフォーマット（number ヘルパー）

数値をフォーマットして出力します。

カンマ区切りで表示

{{number metric}}

小数点桁数を指定（カンマ区切りなし）

{{number 100.123 2}}

使用例

<!-- ページビューをカンマ区切りで表示: 1,234,567 PV -->
{{number metric}}PV

<!-- 小数点以下2桁で表示: 85.68 -->
{{number 85.678 2}}