CMS:CMS 表現を使用してテキスト文字列を操作する

読了時間:18分
CMS で表現を使用すれば、Velo や JS コードを使用せずに CMS の機能を最大限に活用することができます。
 
表現を使用すると、静的テキストと複数のコレクションフィールドの動的値を単一のテキスト文字列で組み合わせることができます。動的な日付、時刻、数値に書式を適用して必要に応じて表示したり、計算に数値フィールドを使用する数式を作成できます。同じ表現の中で関数を組み合わせて、結果をさらにカスタマイズすることも可能です。

CMS 表現で利用できる関数について

CMS 表現は、関数、リテラル値、コレクションフィールド値を組み合わせて、サイト上のデータを新しい方法で表示するものです。

サポートされているページ要素をデータセットに接続した後、そのテキスト値を CMS 表現に接続します。次に、関数、フィールド ID、文字列、数字、その他の構文で構成される表現を作成します。すると、接続された要素のテキストに表現の計算結果が表示されます。

表現の構造:

  • 関数:関数の後に括弧内に表示される値の計算方法を定義します。値は半角コンマで区切ってください(例:MultiIPLY(price, count)DAYS(_createdDate, NOW())CONcat("Created on ", _created Date) など)。
  • フィールド ID:各コレクションフィールドの固有の識別子です(例:title_createdDateclientName など)。
  • 文字列:文字、数字、記号、スペースを含むことができる文字のシーケンスです。
    • 文字列リテラル:静的テキストを表示するために使用される、引用符で囲まれた文字のシーケンスです(例:"Hello", 'Hello', '"Errata" by Kevin Young', "\"Errata\" by Kevin Young", "backslash is \\, forward slash is /" など)。
    • 数値リテラル:関数で使用される数値です(例:12310003.14など)。
    • 配列リテラル:通常は同じタイプの値の順序付けされたコレクションで、角括弧で囲まれた配列を表現します(例:[1,2,3]["cat", "dog", "mouse"] など)。
  • 特殊定数:関数の範囲内で特定の意味を持つ、事前定義された値を指します(例:truefalseundefinednull など)。
表現の中では大文字と小文字が区別されます。表現でフィールドを使用する場合は、フィールド名ではなくフィールド ID を使用してください。フィールド ID でも大文字と小文字が区別されます。

表現を入力すると、関数とフィールド ID を正しく使用するための提案が表示されます。[開発モードを有効にすると、エディタでフィールド ID を見やすく表示することができます。
表現の書き方に関する重要な情報:
  • コレクションフィールドを参照するときは、フィールド名ではなくフィールド ID を入力します。フィールド ID は、フィールド名とは異なり、各コレクションフィールドの固有の識別子です。
  • 関数とフィールド ID は大文字と小文字が区別されます。両方の値で使用している大文字と小文字に注意してください。
  • CONCAT 関数の場合は、「静的」な文字列リテラル値を引用符で囲んでください。これには、静的な句読点や参照されたフィールド間のスペースが含まれます。
  • 関数が機能しない場合は、「表現」フィールドの下部にあるエラーメッセージで問題の解決方法を確認してください。

データセット内の表現に要素を接続する

まず、関連する要素を CMS に接続し、「表現を接続」オプションを選択します。次に、使用する表現を入力します。表現の作成については、次のセクションを参照してください。
Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタで、CMS に接続したい要素(例:テキスト、ボタン、ギャラリーなど)をクリックします。
  2. CMS に接続」アイコン  をクリックします。
  3. データセットを選択」ドロップダウンをクリックし、コレクションに接続されている既存のデータセットを選択します。または、「新しいデータセットを作成」をクリックし、接続するコレクションを選択します。
  4. 接続設定」下で該当するドロップダウンをクリックし、「表現」を選択します。
  1. 表現」フィールドをクリックします。
  2. 使用する関数名を入力します(例:CONCATDATETEXT など)。
    ヒント:入力を開始すると、使用できる関数のリストが表示されるのでそこから選択できます。
  1. 開き括弧を入力します: (
  2. 表現で使用するフィールド ID または値を入力します。入力すると、選択できる一致するフィールド ID のリストが表示されます。
  3. 閉じ括弧を入力します:

表現の例

表現はさまざまな形で記述することができます。以下のセクションでその一例をご紹介します。

文字列の連結を使用して複数のフィールド値を組み合わせる

CONCAT 関数を使用して、複数の異なるコレクションフィールドの値を 1つのテキストフィールドに組み合わせます。関数に独自のテキストを追加して、静的文字と動的値を組み合わせることができます。静的文字は変更されませんが、動的値はデータセットによって取得されたアイテムに基づいて変化します。スペースや句読点(例:"" または "," など)を使用します。
 
異なる関数を使用して同様の操作を行えます。また、関数内で関数を組み合わせてより高度なタスクを行うこともできます。表現に問題がある場合は、エラーメッセージを参照して解決方法を確認してください。
たとえば、CONCAT 関数を使用して、動的アイテムページを紹介するカスタムテキストを作成することができます。テキストで各メンバーの名前や役職、勤続期間などを紹介することができます。表現は以下のようになります:
1CONCAT("弊社の",jobTitle,"を務める",title,"さんの入社日は",date,"です。")
この例では以下のようなフィールドを使用しています:
jobTitle フィールド ID は、各メンバーの役職名を含むコレクションフィールドを表します。title フィールド ID は、各会員の名前を含むフィールドを表します。hireDate キーは、各メンバーの勤務開始日のフィールドに紐づいています。静的テキストと句読点がすべて引用符で囲まれていることにご注意ください。
CONCAT 関数の基本的な使用例については、以下の表を参照してください:
使用事例
表現
結果
フィールド値をスペースや句読点なしで組み合わせる
CONCAT(value,value)
CONCAT(title,jobTitle)
Brian ChangVP Product
複数のフィールド値を半角コンマとスペースで区切って組み合わせる
CONCAT(value,", ",value)
CONCAT(title,", ",jobTitle)
Brian Chang, VP Product
静的テキストとフィールド値を組み合わせる
CONCAT("Hello, ",value)
CONCAT("Hello, ",title)
Hello, Brian Chang
フィールド値を先頭と末尾の静的テキストと組み合わせる
CONCAT("Hello, ",value,", welcome back.")
CONCAT("Hello, ",title,", welcome back.")
Hello, Brian Chang, welcome back.

日時の書式設定

ライブサイトで日付・時刻のフォーマットを制御したり、日付から値を計算したりする場合は、日付 / 時刻関数を使用します。これらの関数は、日付、時刻、および数値のフィールドタイプで動作します。
上の例では、以下の関数を使用しています:
DAYS 関数は、動的な dueDate フィールドから今日の日付までの日数を返します。DAYS 関数と TODAY 関数、および静的テキストと動的テキストを統合するために使用される CONCAT 関数の組み合わせ方をご確認ください。
下記の該当する関数をクリックして、詳細を確認してください:

TEXT 関数を使用した数値の書式設定

TEXT 関数を使用して、数字に書式を適用します。たとえば、数値フィールドタイプの値を通貨やパーセントで書式設定することができます。TEXT 関数を使用して数字を変換する方法はこちら
上の例では、以下の関数を使用しています:
TEXT 関数で、数値フィールドタイプ(price)をドル金額に設定します。価格の前に静的テキストを追加する CONCAT 関数内に TEXT 関数がどのように挿入されているかをご確認ください。
TEXT 関数の使用例については、以下をクリックしてください:

数学関数

数学関数を使用して、異なる数値フィールドタイプや静的番号に基づいて計算を実行することができます。
上の例では、以下の関数を使用しています:
MINUS 関数で 20-11=9 を計算します。20 の値は静的で、数値フィールドの値(rewardPoints)は動的です。表現の中で、静的テキストと動的値を組み合わせる CONCAT 関数内に MINUS 関数を挿入する方法をご確認ください。
数式の使用例については、以下の表を参照してください:
使用事例
表現
結果
2つの数値の合計を計算する
ADD(value,value)
ADD(number1,number2)

ADD(4,20)
24
2つの数字の差を計算する
MINUS(value,value)
MINUS(number1,number2)

MINUS(100,1)
99
2つの数値を掛け算する
MULTIPLY(value,value)
MULTIPLY(number1,number2)

MULTIPLY(2,4)
6
1つの数値を別の数値で割る
DIVIDE(value,value)
DIVIDE(number1,number2)

DIVIDE(10,2)
5
2つの値が同じ場合は「true」を、それ以外は「false」を返す
EQ(value,value)
EQ(number1,number2)

EQ(200,200)
true
数値(x)を別の数値(y)で累乗する
POW(x,y)
POW(2,3)
POW(3,3)
8
27

論理関数

他の関数内に論理関数を追加して、条件付きステートメントの作成、データのフィルタリング、数学的操作などを行うことができます。
上の例では、以下の関数を使用しています:
leftInStock フィールドには「0」より大きい値がないため、IF 関数と GT(より大きい)関数を組み合わせた場合は「完売」が返されます。
論理関数の例については、以下の表を参照してください:
関数
詳細
結果
EQ(均等)
2つの値が同じであるかどうかを確認
EQ(5,5)
true
IF
条件テストを実行し、条件が真の場合はある値を、偽の場合は別の値を返却
IF(EQ(5,5),"Yes","No")
Yes
NE(同じでない)
2つの値が同じでないことを確認
NE(5,7)
true
GT(より大きい)
ある値が別の値より大きいかどうかを確認
GT(7,5)
GT(7,7)
true
false
LT(未満)
ある値が別の値よりも小さいかどうかを確認
LT(5,7)
LT(7,5)
true
false
GTE(以上)
1つの値が別の値以上かどうかを確認
GTE(7,5)
GTE(5,5)
GTE(5,4)
true
true
false
LTE(以下)
1つの値が別の値以下かどうかを確認
LTE(5,7)
LTE(5,5)
LTE(5,4)
true
true
false
NOT
false から true、または true から false に変換
NOT(false)
NOT(true)
true
false
AND
両方の値が true の場合にのみ true、それ以外の場合は false を返却
AND(true,true)
And(true,false)
true
false
OR
両方の値が false の場合にのみ false、それ以外の場合は true を返却
OR(true,false)
OR(false,false)
true
false

よくある質問

表現の使用に関するよくある質問と回答については、以下をクリックしてください。

お役に立ちましたか?

|