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

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

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

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

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

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

目次

フィルターとは?

{{ 値 | フィルター }}

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

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

trans

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

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

スクロールできます
ワード日本語
(messages.ja.yaml)
英語
(messages.en.yaml)
common.select選択してくださいPlease select
common.select__pref都道府県を選択Select prefecture
common.select__unspecified指定なしUnspecified
common.select__all_products全ての商品All Products
common.required必須Required
登録されているワードの一例
  • デフォルトのLOCALEは「ja」(日本語)になっています。
  • 翻訳ワードリストは、「src/Eccube/Resource/locale」ディレクトリにある「messages.ja.yaml」「messages.en.yaml」ファイルで確認できます。
    • ワードの追加や修正は、「app/Customize/Resource/locale」下にファイルをコピーして編集します。
LOCALEの変更方法

ルートディレクト直下の「.env」ファイルを開き、35~40行目付近にある『ECCUBE_LOCALE=ja』を『ECCUBE_LOCALE=en』に変更すると、英語翻訳(messages.en.yaml)が適用されるようになります。

使用例

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)になっているため、以下のように表示されます。

フィルター「trans」の使用例
  • 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』フィルターを適用。
フィルター「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」と「raw」の使用例
  • 「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」フィルターを使用する場合としない場合で比較します。

フィルター「price」の使用例

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

まとめと応用

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次