【EC-CUBE 4】Twig まとめ(3)　～ trans / nl2br / escape / raw / price ～

{{ 値 | trans }} や {{ 値 | nl2br }} ってどういう意味？　どうやって使う？

本記事では、Twigテンプレートでよく使われる「フィルター」と呼ばれる機能について纏めています。

EC-CUBE 4で用意されているTwigファイルを元に説明しているので、実際にコードを弄りながら見てみると理解が早いかもしれません。

なお、Twigについては以下記事でも纏めていますので、合わせてご覧ください。

• Twig まとめ(1)　～継承やブロックについて～
• Twig まとめ(2)　～ if / for / set / with ～
• Twig まとめ(4)　～ マクロについて ～

【動作環境】
EC CUBEのバージョン：4.2.1
サーバー：Xserver

フィルターとは？

{{ 値 | フィルター }}

このように記述することで、「｜」の前にある値に特定のフィルター処理を適用し、表示できるようになります。

用意されているフィルターには多くの種類がありますが、ここではEC-CUBEでよく見かけるものをピックアップしました。

trans

『trans』は、自動翻訳してくれるフィルターです。

EC-CUBEでは、デフォルトでいくつかのワードに対して日本語表示・英語表示が登録されており、LOCALE（ロケール）によって表示を切り替えることができます。

• デフォルトのLOCALEは「ja」（日本語）になっています。
• 翻訳ワードリストは、「src/Eccube/Resource/locale」ディレクトリにある「messages.ja.yaml」と「messages.en.yaml」ファイルで確認できます。
  • ワードの追加や修正は、「app/Customize/Resource/locale」下にファイルをコピーして編集します。

使用例

EC-CUBEの管理画面より新しくページを作成し、実際に『trans』フィルターを使ってみました。

{% extends 'default_frame.twig' %}
{% block main %}

  <h1>【フィルターの使用方法】</h1>
  <h2>trans の例</h2>
  <p>{{ 'common.select' | trans }}</p>
  <p>{{ 'common.select__pref' | trans }}</p>
  
{% endblock %}

localeはデフォルトのまま（ja）になっているため、以下のように表示されます。

• common.select　→　選択してください
• common.select__pref　→　都道府県を選択

というように、ちゃんと翻訳されていますね。

nl2br

『nl2br』は、自動で改行（<br>タグ）を入れてくれるフィルターです。

通常、エンターキーで文字列を改行しても表示には反映されませんが、このフィルター適用下では改行した部分に<br>タグが挿入されるようになります。

使用例

EC-CUBEの管理画面より新しくページを作成し、実際に『nl2br』フィルターを使ってみました。

{% extends 'default_frame.twig' %}
{% block main %}

  <h1>【フィルターの使用方法】</h1>
  <h2>nl2br の例</h2>
  <p>{{ 'おはようございます。
        こんにちは。
        こんばんは。'}}</p>
  <p>{{ 'おはようございます。
        こんにちは。
        こんばんは。'| nl2br }}</p>

{% endblock %}

• 上の<p>タグは、フィルターを使わずにエンターキーで改行を入れたのみ。
• 下の<p>タグは、『nl2br』フィルターを適用。

並べて書いたので少しわかりにくいですが、上の一行（おはようございます。こんにちは。こんばんは。）は改行なしで表示されているのに対し、下は改行されて三行になっていますね。

escape & raw

『escape』は自動でエスケープ処理を行い、『raw』は自動でエスケープ処理をしないフィルターです。

使用例

EC-CUBEの管理画面より新しくページを作成し、実際に『escape』&『raw』フィルターを使ってみました。

{% extends 'default_frame.twig' %}
{% block main %}

  <h1>【フィルターの使用方法】</h1>
  <h2>escape の例</h2>
  <p>{{ '<b>HELLO</b>' }}</p>
  <p>{{ '<b>HELLO</b>' | escape }}</p>

  <h2>raw の例</h2>
  {% set example = '<b>HELLO</b>' %}
  <p>{{ example }}</p>
  <p>{{ example | raw }}</p>
  
{% endblock %}

1. 「escape」フィルターの使用例
   • 文字列 “HELLO” を太字にする<b>タグで囲み、escapeする場合としない場合で表示
2. 「raw」フィルターの使用例
   • {% set %} で変数exampleに文字列 “<b>HELLO</b>” を代入し、それをrawする場合としない場合で表示
     {% set %} については こちらの記事 で解説しています。

• 「escape」フィルターを使用した場合、<b></b>はタグと認識されず、そのまま文字列として表示されます。
• 「raw」フィルターの使用した場合、逆に<b></b>はタグと認識されます。

price

「price」は、数値の前に￥マークを追加し、3桁ごとにカンマを挿入するフィルターです。

使用例

EC-CUBEの管理画面より新しくページを作成し、実際に『price』フィルターを使ってみました。

{% extends 'default_frame.twig' %}
{% block main %}

  <h1>【フィルターの使用方法】</h1>
  <h2>price の例</h2>
  <p>{{ 1000 }}</p>
  <p>{{ 1000 | price }}</p>
  
{% endblock %}

数値「1000」を、「price」フィルターを使用する場合としない場合で比較します。

フィルターを使用した場合、数字の前に「￥」が追加され、3桁目と4桁目の間にカンマが挿入されていますね。

まとめと応用

以上、EC-CUBEでよく使われるものを例に、フィルターの使い方について紹介しました。

ここで紹介した以外にも、文字列を大文字にする「upper」や小文字にする「lower」、最初の文字だけを大文字にする「capitalize」など、たくさんのフィルターが存在します。興味のある方は、ぜひ調べて使ってみてください！

オリジナルフィルターを作成する

Twig Extensionという機能を使えば、自分で好きなフィルターを作成することもできます。
詳細は以下記事で解説しているので、興味のある方は本記事と合わせてご覧ください。

あわせて読みたい

【EC-CUBE 4】Twig Extensionを使って新しいフィルターを作成する 本記事では、Twigテンプレートエンジンの機能を拡張できるTwig Extensionを使って、新しいフィルターを作成する方法について紹介します。 Twig Extensionとは？ Twigテ…