ブログ記事詳細検索プラグイン（その21・検索フォーム／検索結果表示の事例・数値の範囲をselectで選択）

数値で条件を指定する際に、selectで範囲を選べるようにしたいこともよくあります。
今回はその方法を解説します。

数値の範囲をselectで選択

以下のような事例を基に解説します。

  • 商品の価格を表すために、「entry_price」というベースネームのカスタムフィールドを作っているものとします。
  • 検索結果表示用のテンプレートモジュールには、「詳細検索結果」という名前を付けるものとします。
  • 以下の表のように、selectで価格帯の選択肢を選べるようにします。
番号下限（○○円以上）上限（□□円未満）
1なし1,000
21,0003,000
33,0005,000
45,0007,000
57,00010,000
610,000なし

1.範囲と送信値のリストの定義

selectで数値の範囲を選べるようにしたい場合、まず数値の範囲と、それぞれに対応してCGIに送信する値のリストを定義します。
この定義は、GetQueryParamプラグインの「MTSetRangeList」というタグで行います。

1-1.MTSetRangeListタグの書き方

MTSetRangeListタグの書き方は、以下のようになります。
「リスト名」のところで、範囲のリストに名前を付けます。
なお、下限または上限だけを指定する場合は、その部分を省略します。 

<mt:SetRangeList list_name="リスト名">
送信値1,下限1,上限1
送信値2,下限2,上限2
・・・
送信値n,下限n,上限n
</mt:SetRangeList>

1-2.MTSetRangeListタグの例

例えば、今取り上げている例で、1番～6番の選択肢のそれぞれについて、フォームからCGIに送信する値を「range01」～「range06」にするとします。
また、この範囲のリストに「range」という名前を付けるとします。

この場合のMTSetRangeListタグの書き方は、以下のようになります。
1番の範囲には下限がないので、「range01,,1000」として、下限を指定していません。
また、6番の範囲には上限がないので、「range06,10000,」として、上限を指定していません。 

<mt:SetRangeList list_name="range">
range01,,1000
range02,1000,3000
range03,3000,5000
range04,5000,7000
range05,7000,10000
range06,10000,
</mt:SetRangeList>

なお、MTSetRangeListタグの部分は、検索フォームのテンプレートと、検索結果表示テンプレートの両方で使います。
そこで、MTSetRangeListタグの部分をテンプレートモジュールにしておいて、検索フォーム／検索結果表示の両テンプレートに組み込めるようにすることをお勧めします。

2.検索フォームにselectを出力

次に、1.で定義したリストを使って、フォームに送信する値と範囲の上限／下限を取り出し、それらを元にして検索フォームにselectを出力します。

2-1.MTGetRangeListタグ

リストから送信値／下限／上限を取り出すには、GetQueryParamプラグインの「MTGetRangeList」というテンプレートタグを使います。 

<mt:GetRangeList list_name="リスト名">
  個々の送信値と上限／下限を出力する処理
</mt:GetRangeList>

MTGetRangeListタグのブロックの中では、以下の各変数を使って、フォームから送信する値と、それぞれに対応する下限／上限の値を得ることができます。
なお、変数名に含まれる「__」は半角のアンダースコア2つです。

出力する値変数名
フォームからの送信値__value__
下限__min__
上限__max__

2-2.検索フォームの例

MTGetRangeListタグを使って、検索フォームのテンプレートに冒頭の画面のようなselectを出力するには、以下のようにタグを組みます。
なお、範囲のリストを定義する部分（MTSetRangeListタグのブロック）を、「数値範囲」というテンプレートモジュールに入れたものとします。 

<form method="get" action="<$mt:RealtimeRebuildCGIPath$>">
  <input type="hidden" name="blog_id" value="<$mt:BlogID$>" />
  <input type="hidden" name="tmpl_id" value="<$mt:GetTemplateID tmpl_name="詳細検索結果"$>" />
  <p>
    <$mt:Include module="数値範囲"$>
    <label for="entry_price_range">価格</label>
    <select id="entry_price_range" name="entry_price_range">
    <mt:GetRangeList list_name="range">
      <option value="<$mt:GetVar name="__value__"$>">
        <mt:If name="__min__">
          <$mt:GetVar name="__min__"$>円以上
        </mt:If>
        ～
        <mt:If name="__max__">
          <$mt:GetVar name="__max__"$>円未満
        </mt:If>
      </option>
    </mt:GetRangeList>
    </select>
  </p>
  <p>
    <input type="submit" value="送信" />
  </p>
</form>

まず、4行目のMTIncludeタグで、「数値範囲」のテンプレートモジュールを読み込み、範囲のリストを定義します。
そして、7～17行目のMTGetRangeListタグのブロックで、範囲のリストから送信値／下限／上限を1組ずつ順に取り出し、select内の個々のoption用を順に出力します。

9行目では、「<option value="○○">」のタグを出力しています。
「○○」の部分を「<$mt:GetVar name="__value__"$>」にしていますので、value属性には、フォームから送信する値（「range01」など）が出力されます。

10～17行目では、option要素の中身を出力しています。
11行目の「<$mt:GetVar name="__min__"$>円以上」と、15行目の「<$mt:GetVar name="__max__"$>円未満」によって、範囲の下限と上限を元に「1000円以上」「3000円未満」等が出力されます。

1.のところで定義したリストでは、下限／上限がない範囲もあります。
それらがない場合（＝変数__min__や__max__の値がない場合）は、「○○円以上」や「○○円未満」を出力しないようにします。
そのために、10／12行目や14／16行目にMTIfタグを入れています。

なお、このフォームを含むテンプレートの例は、以下のリンクからダウンロードすることができます。

数値の範囲をselectで選択する場合の検索フォームテンプレートの例

3.検索結果表示テンプレートの作成

検索結果表示テンプレートでは、フォームから送信された値から、数値の範囲の下限／上限を割り出して、MTSearchConditionCompare等のタグで条件を指定するようにします。

3-1.MTGetRangeFromValueタグ

送信値を元に、それに対応する上限／下限を読み込むには、GetQueryParamプラグインの「MTGetRangeFromValue」というテンプレートタグを使います。 

<mt:GetRangeFromValue list_name="リスト名" value="送信値">
  下限／上限を使った処理
</mt:GetRangeFromValue>

「リスト名」に、範囲のリストの名前を指定します。
また、「送信値」には、フォームから送信された値（MTSetRangeタグで、個々の範囲の送信値として指定した値）を入れます。
MTGetRangeFromValueタグのブロックの中では、以下の変数を使って範囲の下限／上限を扱うことができます。

扱う値変数名
下限__min__
上限__max__

例えば、「1.範囲と送信値のリストの定義」のところで挙げた例のように、「range」という名前のリストを定義したとします。
そして、以下のようにテンプレートを組むとします。 

<mt:GetRangeFromValue list_name="range" value="range03">
  下限／上限を使った処理
</mt:GetRangeFromValue>

この場合、「range」リストの中で、送信値の「range03」に対応する下限／上限の3000／5000が取り出されます。
そして、MTGetRangeFromValueタグのブロックの中では、変数__min__と__max__の値が、それぞれ3000／5000になります。

3-2.検索結果表示テンプレートの例

ここまでの話に基づいて、2.の検索フォームに対応する検索結果表示テンプレートを作ります。
検索結果表示テンプレートの中で、検索結果を読み込む部分を抜き出すと、以下のようになります。 

<$mt:GetQueryParamsToVars$>
<$mt:Include module="数値範囲"$>
<mt:SearchConditions>
  <mt:SearchConditionCFSection field="entry_price">
    <mt:GetRangeFromValue list_name="range" value="$qp_entry_price_range">
      <$mt:SearchConditionCFCompare ge="$__min__" lt="$__max__"$>
    </mt:GetRangeFromValue>
  </mt:SearchConditionCFSection>
</mt:SearchConditions>

まず、1行目のMTGetQueryParamsToVarsタグで、フォームから送信された値を変数に代入します。
フォームでは、範囲選択のselectに「entry_price_range」というname属性を指定していましたので、そのselectで選ばれた範囲の名前（「range01」等）は、変数qp_entry_price_rangeに代入されます。
次の2行目では、範囲のリストを読み込むために、MTIncludeタグで「数値範囲」のテンプレートモジュールを組み込みます。

4～8行目で、「entry_price」のカスタムフィールドに対して条件を設定しています。
5行目のMTGetRangeFromValueタグで、「range」リストの中から、selectで選択された範囲（変数qp_entry_price_rangeの値）に対応する下限／上限を読み込みます。
そして、その下限／上限（変数__min__／__max__の値）を、MTSearchConditionCFCompareタグに指定しています。

なお、上記の部分を含むテンプレートの例は、以下のリンクからダウンロードすることができます。

数値の範囲をselectで選択する場合の検索結果表示テンプレートの例

4.SearchEntriesプラグイン関係の記事の一覧

SearchEntriesプラグイン関係のその他の記事は、以下のリンクから参照できます。