ドキュメントdocument

カスタムフィールド

カスタムフィールドの基本

カスタムフィールドとは

エントリーや、カテゴリー・ブログ・ユーザーに対して独自のデータを追加することができる機能です。追加したデータは表示や検索用のキーとして利用されます。例えば、ひとつの商品を紹介するエントリーに対して「値段・発売日・サイズ」などの情報をカスタムフィールドとして追加することで、商品情報のデータベースを作ることができます。

カスタムフィールドのタグの基本

カスタムフィールドはフォームタグのようにHTMLベースで書くことができます。値段を入れるカスタムフィールドを追加してみましょう。カスタムフィールドの変数は price にします。

<input type="text" name="price" value="{price}" />
<input type="hidden" name="field[]" value="price" />

HTMLベースなので入力画面を入力しやすいレイアウトできます。

カスタムフィールドでできること

カスタムフィールドは以下のような入力フォームが追加できます。

  • テキスト(テキスト、テキストエリア、チェックボックス、ラジオボタン、セレクトボックス)
  • 画像
  • ファイル
  • 地図(GoogleMaps)

カスタムフィールドの作成

カスタムフィールドはテキスト、テキストエリア、チェックボックス、ラジオボタン、セレクトなど用途に応じて作ることができ、お問い合わせフォームやエントリー作成画面、ブログ・カテゴリー・ユーザー・モジュールの管理画面で使います。
カスタムフィールドの記述について解説します。

テキストのカスタムフィールド

テキストを入力するカスタムフィールドを作ることができます。
サンプルHTML(カスタムフィールド変数名:furigana)

<tr>
  <th>ふりがな</th>
  <td>
    <input type="text" name="furigana" value="{furigana}" class="acms-form-width-3quarters" />
    <input type="hidden" name="field[]" value="furigana" />
  </td>
</tr>

テキストエリアのカスタムフィールド

テキストエリアを入力するカスタムフィールドを作ることができます。
サンプルHTML(カスタムフィールド変数名:inquiry)

<tr>
  <th>お問い合わせ内容</th>
  <td>
    <textarea name="inquiry" class="acms-form-width-3quarters">{inquiry}</textarea>
    <input type="hidden" name="field[]" value="inquiry" />
  </td>
</tr>

チェックボックスのカスタムフィールド

チェックボックスを入力するカスタムフィールドを作ることができます。 サンプルHTML(カスタムフィールド変数名:time)

<tr>
  <th>時間帯</th>
  <td>
    <label>
      <input type="checkbox" name="time[]" value="午前"{time:checked#午前} />
      午前
    </label>
    <label>
      <input type="checkbox" name="time[]" value="午後"{time:checked#午後} />
      午後
    </label>
    <input type="hidden" name="field[]" value="time" />
  </td>
</tr>

ラジオボタンのカスタムフィールド

ラジオボタンを入力するカスタムフィールドを作ることができます。 サンプルHTML(カスタムフィールド変数名:gender)

<tr>
  <th>性別</th>
  <td>
    <label><input type="radio" name="gender" value="男"{gender:checked#男} />男</label>
    <label><input type="radio" name="gender" value="女"{gender:checked#女} />女</label>
    <input type="hidden" name="field[]" value="gender" />
  </td>
</tr>

セレクトのカスタムフィールド

セレクトボックスを入力するカスタムフィールドを作ることができます。 サンプルHTML(カスタムフィールド変数名:gender)

<tr>
  <th>ご用件</th>
  <td>
    <select name="type">
      <option value=""></option>
      <option value="ご質問"{type:selected#ご質問}>ご質問</option>
      <option value="資料請求"{type:selected#資料請求}>資料請求</option>
      <option value="その他"{type:selected#その他}>その他</option>
    </select>
    <input type="hidden" name="field[]" value="type" />
  </td>
</tr>

ブログのカスタムフィールド

ブログの管理画面にカスタムフィールドを作って、独自の情報を持たせることができます。テキスト、画像、ファイルなどブログ毎に項目が作れます。


ブログのカスタムフィールドはブログ管理のカスタム設定タブにあります。カスタムフィールドを追加するには以下のファイルを利用中のテーマフォルダに置いてください。

/themes/利用中のテーマ/admin/blog/field.html

ブログのカスタムフィールドを作る

/themes/利用中のテーマ/admin/blog/field.html にサイトの説明を入力するカスタムフィールドを追加してみましょう。

<input type="text" name="siteDescription" value="{siteDescription}" class="acms-form-width-full" />
<input type="hidden" name="field[]" value="siteDescription" />

サイトに表示させる

ブログのカスタムフィールドはBlog_Fieldモジュール、Entry_BodyやEntry_SummaryモジュールのblogFieldブロック内で使うことができます。

Blog_Fieldモジュールで表示

<!-- BEGIN_MODULE Blog_Field -->
<p>{siteDescription}</p>
<!-- END_MODULE Blog_Field -->

Entry_BodyやEntry_SummaryモジュールのblogFieldブロック内で表示

モジュールIDの設定して、entry:loop内にblogFieldブロックを記述してください。

<!-- BEGIN_MODULE Entry_Summary id="testID" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->

<!-- BEGIN blogField -->
<p>{siteDescription}</p>
<!-- END blogField -->

<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

Entry_BodyやEntry_Summaryモジュールでブログのカスタムフィールドの情報を出すときはモジュールIDの表示設定にカスタムフィールド ブログフィールドにチェックをしてください。



カテゴリーのカスタムフィールド

カテゴリーの管理画面にカスタムフィールドを作って、独自の情報を持たせることができます。テキスト、画像、ファイル、地図などカテゴリー毎に項目が作れます。


カテゴリーのカスタムフィールドはカテゴリー管理のカスタム設定タブにあります。カスタムフィールドを追加するには以下のファイルを利用中のテーマフォルダに置いてください。

/themes/利用中のテーマ/admin/category/field.html

カテゴリーのカスタムフィールドを作る

/themes/利用中のテーマ/admin/category/field.html にページのキーワードを入力するカスタムフィールドを追加してみましょう。

<input type="text" name="category_meta_keywords" value="{category_meta_keywords}" class="acms-form-width-full" />
<input type="hidden" name="field[]" value="category_meta_keywords" />

サイトに表示させる

カテゴリーのカスタムフィールドはCategory_Fieldモジュール、Category_ListやCategory_EntryList、Entry_BodyやEntry_SummaryモジュールのcategoryFieldブロック内で使うことができます。

Category_Fieldモジュールで表示

<!-- BEGIN_MODULE Category_Field -->
<p>{category_meta_keywords}</p>
<!-- END_MODULE Category_Field -->

Category_ListやCategory_EntryListモジュールで表示

category:loop内にカテゴリーのカスタムフィールドを書きます。

<!-- BEGIN_MODULE Category_List -->
<!-- BEGIN category:loop -->

<!-- BEGIN ul#front -->
<ul><!-- END ul#front --><!-- BEGIN li#front -->
	<li><!-- END li#front --><!-- BEGIN category:veil -->
		<a href="{url}">{name} - {category_meta_keywords}</a><!-- END category:veil --><!-- BEGIN li#rear -->
	</li><!-- END li#rear --><!-- BEGIN ul#rear -->
</ul><!-- END ul#rear -->

<!-- END category:loop -->
<!-- END_MODULE Category_List -->

Entry_BodyやEntry_SummaryモジュールのcategoryFieldブロック内で表示

モジュールIDの設定して、entry:loop内にcategoryFieldブロックを記述してください。

<!-- BEGIN_MODULE Entry_Summary id="testID" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
     
<!-- BEGIN categoryField -->
<p>{category_meta_keywords}</p>
<!-- END categoryField -->
     
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

Entry_BodyやEntry_Summaryモジュールでカテゴリーのカスタムフィールドの情報を出すときはモジュールIDの表示設定にカスタムフィールド カテゴリーフィールドにチェックをしてください。



エントリーのカスタムフィールド

エントリーの作成画面にカスタムフィールドを作って、独自の情報を持たせることができます。テキスト、画像、ファイル、地図などエントリー毎に項目が作れます。


エントリーのカスタムフィールドはエントリー作成画面にあります。カスタムフィールドを追加するには以下のファイルを利用中のテーマフォルダに置いてください。

タイトルやカテゴリーの下にカスタムフィールドを表示したい場合

/themes/利用中のテーマ/admin/entry/field.html

ユニットの下にカスタムフィールドを表示したい場合

/themes/利用中のテーマ/admin/entry/field_foot.html

エントリーのカスタムフィールドを作る

/themes/利用中のテーマ/admin/entry/field.html にエントリーをピックアップするチェックボックスのカスタムフィールドを追加してみましょう。

<label class="acms-form-checkbox"><input type="checkbox" name="pickup[]" value="true"{pickup:checked#true} /><i class="acms-ico-checkbox"></i> ピックアップ</label>
<input type="hidden" name="field[]" value="pickup" />

サイトに表示させる

エントリーのカスタムフィールドはEntry_Fieldモジュール、Category_EntryListやCategory_EntrySummary、Entry系モジュールのentry:loop内で使うことができます。

Entry_Fieldモジュールで表示

<!-- BEGIN_MODULE Entry_Field -->
<p>{pickup}</p>
<!-- END_MODULE Entry_Field -->

Category_EntryListやCategory_EntrySummaryモジュールで表示

entry:loop内にエントリーのカスタムフィールドを書きます。

<!-- BEGIN_MODULE Category_EntryList -->
<!-- BEGIN categoryEntryList:loop --><!-- BEGIN categoryUl#front -->
<ul class="txtListMenu"><!-- END categoryUl#front --><!-- BEGIN category:loop -->
	<li><a href="{categoryUrl}">{categoryName}</a><!-- BEGIN entry:veil -->
		<ul class="txtListMenu"><!-- BEGIN entry:loop -->
			<li><a href="{entryUrl}">{entryTitle} {pickup}</a></li><!-- END entry:loop -->
		</ul><!-- END entry:veil --><!-- END category:loop --><!-- BEGIN categoryLi#rear -->
	</li><!-- END categoryLi#rear --><!-- BEGIN categoryUl#rear -->
</ul><!-- END categoryUl#rear --><!-- END categoryEntryList:loop -->
<!-- END_MODULE Category_EntryList -->

Entry系モジュールで表示

モジュールIDの設定して、entry:loop内にエントリーカスタムフィールドを記述してください。

<!-- BEGIN_MODULE Entry_Summary id="testID" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
     
<!-- BEGIN pickup:touch#true -->pickpuされています<!-- END pickup:touch#true -->
     
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

Entry系モジュールでエントリーのカスタムフィールドの情報を出すときはモジュールIDの表示設定にカスタムフィールド エントリーフィールドにチェックをしてください。



ユーザーのカスタムフィールド

ユーザーの管理画面にカスタムフィールドを作って、独自の情報を持たせることができます。テキスト、画像、ファイル、地図などユーザー毎に項目が作れます。


ユーザーのカスタムフィールドはユーザー管理のカスタム設定タブにあります。カスタムフィールドを追加するには以下のファイルを利用中のテーマフォルダに置いてください。

/themes/利用中のテーマ/admin/user/field.html

ユーザーのカスタムフィールドを作る

/themes/利用中のテーマ/admin/user/field.html にユーザーの郵便番号を入力するカスタムフィールドを追加してみましょう。

〒 <input type="text" name="zip" value="{zip}" id="zip" class="acms-form-width-mini" size="14" />
<input type="hidden" name="field[]" value="zip" />

サイトに表示させる

ユーザーのカスタムフィールドはUser_Fieldモジュール、User_ProfileやUser_Search、Entry_BodyやEntry_SummaryモジュールのuserFieldブロック内で使うことができます。

User_Fieldモジュールで表示

<!-- BEGIN_MODULE User_Field -->
<p>{zip}</p>
<!-- END_MODULE User_Field -->

User_ProfileやUser_Searchモジュールで表示

user:loop内にユーザーのカスタムフィールドを書きます。

<!-- BEGIN_MODULE User_Profile -->
<!-- BEGIN user:loop -->

<p>{zip}</p>

<!-- END user:loop -->
<!-- END_MODULE User_Profile -->

Entry_BodyやEntry_SummaryモジュールのuserFieldブロック内で表示

モジュールIDの設定して、entry:loop内にuserFieldブロックを記述してください。

<!-- BEGIN_MODULE Entry_Summary id="testID" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
     
<!-- BEGIN userField -->
<p>{zip}</p>
<!-- END userField -->
     
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

Entry_BodyやEntry_Summaryモジュールでユーザーのカスタムフィールドの情報を出すときはモジュールIDの表示設定にカスタムフィールド ユーザーフィールドにチェックをしてください。



モジュールのカスタムフィールド

モジュールの管理画面にカスタムフィールドを作って、独自の情報を持たせることができます。テキスト、画像、ファイル、地図などモジュール毎に項目が作れます。


モジュールのカスタムフィールドは、モジュールID一覧>モジュールIDの変更の順に移動したページのカスタム設定のタブにあります。カスタムフィールドを追加するには以下のファイルを利用中のテーマフォルダに置いてください。

/themes/利用中のテーマ/admin/module/field.html

モジュールのカスタムフィールドを作る

/themes/利用中のテーマ/admin/module/field.html に見出しを入力するカスタムフィールドを追加してみましょう。

<input type="text" name="module_heading" value="{module_heading}" class="acms-admin-form-width-3quarters" />
<input type="hidden" name="field[]" value="module_heading" />

サイトに表示させる

モジュールのカスタムフィールドはモジュールIDが作成できるモジュールのmoduleFieldブロック内で使用できます。

moduleFieldブロックで表示

<!-- BEGIN_MODULE Entry_Summary id="testID" -->

<!-- BEGIN moduleField -->
<h2>{module_heading}</h2>
<!-- END moduleField -->

<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
    ...
<!-- END entry:loop -->
<!-- END unit:loop -->

<!-- END_MODULE Entry_Summary -->

モジュールのカスタムフィールドをご使用の際は、使用したいモジュールIDのカスタムフィールドの項目をチェックしてください。



カスタムフィールドグループ

カスタムフィールドグループとは、単体の項目であるカスタムフィールドを複数まとめて取り扱うことができる機能です。カスタムフィールドの項目を追加したり、削除したりすることができます。
カスタムフィールドグループはカスタムフィールドと同じように画像やテキストのカスタムフィールドを組み合わせて使えます。


例)画像とテキスト、テキストエリアを組み合わせたカスタムフィールドグループです。

<table class="js-fieldgroup-sortable">
<!-- BEGIN bfd_field_unit_group:loop -->
<tr class="sortable-item">
<td class="item-handle">
<div class="acms-form-group"><span class="acms-icon acms-icon-sort2"></span></div>
<a class="item-delete acms-btn-admin acms-btn-admin-danger block-level" href="#" onclick="return false;">削除</a>
</td>
<td>
<table class="nestTable">
<tr>
	<th>小画像</th>
	<th>小見出しとURL</th>
	<th>小概要</th>
</tr>
<tr>
	<td>
		<!-- BEGIN bfd_field_unit_image:veil -->
		<img src="%{ARCHIVES_DIR}{bfd_field_unit_image@path}" />
		<!-- END bfd_field_unit_image:veil -->
		<br />
		<label>
			<input type="checkbox" name="bfd_field_unit_image@edit[{i}]" value="delete" />
			削除
		</label>
		<input type="hidden" name="bfd_field_unit_image@old[{i}]" value="{bfd_field_unit_image@path}" />
		<input type="file" name="bfd_field_unit_image[{i}]" class="acms-form-width-full" />
		<input type="hidden" name="bfd_field_unit_image@width[{i}]" value="200" />
	</td>
	<td>
		<div class="acms-form-group">
			<input type="text" name="bfd_field_unit_lead[{i}]" value="{bfd_field_unit_lead}" class="acms-form-width-full" />
		</div>
		<input type="text" name="bfd_field_unit_url[{i}]" value="{bfd_field_unit_url}" class="acms-form-width-full" />
	</td>

	<td>
		<textarea name="bfd_field_unit_summary[{i}]" class="acms-form-width-full" >{bfd_field_unit_summary}</textarea>
	</td>
</tr>
</table>
</td>
</tr>
<!-- END bfd_field_unit_group:loop -->
<tr class="sortable-item item-template">
<td class="item-handle">
<span class="acms-icon acms-icon-sort2"></span>
</td>
<td>
<table>
<tr>
	<th>小画像</th>
	<th>小見出しとURL</th>
	<th>小概要</th>
</tr>
<tr>
	<td>
		<input type="file" name="bfd_field_unit_image[]" class="acms-form-width-full" />
		<input type="hidden" name="bfd_field_unit_image@width[]" value="200" />
	</td>
	<td>
		<div class="acms-form-group">
			<input type="text" name="bfd_field_unit_lead[]" value="" class="acms-form-width-full" />
		</div>
		<input type="text" name="bfd_field_unit_url[]" value="" class="acms-form-width-full" />
	</td>
	<td>
		<textarea name="bfd_field_unit_summary[]" class="acms-form-width-full" ></textarea>
	</td>
</tr>
</table>
</td>
</tr>
<tfoot>
<tr>
<td colspan="3">
<input type="button" class="item-insert acms-btn-admin" value="項目を追加する" />
</td>
</tr>
</tfoot>
</table>

<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_lead" />
<input type="hidden" name="field[]" value="bfd_field_unit_lead" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_url" />
<input type="hidden" name="field[]" value="bfd_field_unit_url" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_summary" />
<input type="hidden" name="field[]" value="bfd_field_unit_summary" />

<input type="hidden" name="bfd_field_unit_image:extension" value="image" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@path" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@x" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@y" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@edit" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@old" />
<input type="hidden" name="field[]" value="bfd_field_unit_image" />
<input type="hidden" name="field[]" value="@bfd_field_unit_group" />

カスタムフィールドグループ内のclass

カスタムフィールドグループ内では、いくつかの特殊なclassの記述があります。これらは、実際にブラウザ上で表示される際に機能します。

js-fieldgroup-sortable

このclassの記述がある要素内で、カスタムフィールドグループが使用できます。 ひな形となり、この要素の内容が追加されます。

item-handle

このclassの記述がある要素が、順番を変更する時に「つかむ(ドラッグする)」部分になります。

item-delete

このclassの記述がある要素で、該当するカスタムフィールドグループが削除できます。

item-max

このclassの記述がある要素のvalueにある値がカスタムフィールドグループに挿入できる項目の最大数となります。例えば以下のソースコードで、7以上の項目を追加しようとすると警告文が表示されます。

<input type="hidden" class="item-max" value="6" />

例で使用したカスタムフィールドの解説

カスタムフィールドの定義

カスタムフィールドのグループ名(@bfd_field_unit_group)とカスタムフィールド変数名(bfd_field_unit_lead)をセットで定義します。

<input type="hidden" name="@カスタムフィールドのグループ名[]" value="カスタムフィールド変数名" />
<input type="hidden" name="field[]" value="カスタムフィールド変数名" />

カスタムフィールドのグループ名(@bfd_field_unit_group)はカスタムフィールドのグループ名を記述しています。

<input type="hidden" name="field[]" value="@カスタムフィールドのグループ名" />

テンプレートに表示する

エントリーカスタムフィールドで作成した場合は、Entry系モジュールのentry:loop内にカスタムフィールドグループを記述してください。

<!-- BEGIN bfd_field_unit_group:loop -->
<div style="width:200px; float:left; margin-right:20px;">
<!-- BEGIN bfd_field_unit_image:veil -->
<img src="%{ARCHIVES_DIR}{bfd_field_unit_image@path}" alt="" width="200">
<!-- END bfd_field_unit_image:veil -->
<h3><a href="%{HTTP_ROOT}{bfd_field_unit_url}">{bfd_field_unit_lead}</a></h3>
<p>{bfd_field_unit_summary}</p>
</div>
<!-- END bfd_field_unit_group:loop -->


カスタムフィールドの検索

検索とURLコンテキスト

a-blog cmsでは、いま表示しているページがWebサイトのどこにいるか、どのような状態であるかをURL上のパスとして表現しています。(これを「URLコンテキスト」といいます。)
例えば以下のURLは、

http://example.com/search/field/price/100/300/

「searchカテゴリーの、priceというフィールドの値が100または300」の情報を表示します。

この検索機能によりサイトの利用者にとっての検索性を高めることが可能になります。

Field_Searchモジュール

Field_Searchモジュールを使えば、サイトの利用者はより簡単にサイトの情報を検索することができます。というのも「URLコンテキスト」を利用するための検索フォームを提供できるからです。

例えば下の図の検索フォームですと、URLコンテキストはフォームのカスタマイズにより、以下のURLのようになります。

http://example.com/realestate/field/price/gte/30000/lte/50000/_and_/station/JR名古屋駅/


URLコンテキストを利用した検索方法

URLコンテキストを利用した検索方法は以下のような方法があります。

  1. 簡単な検索
  2. 簡単な検索 [複数条件・or検索]
  3. 演算子検索
  4. 演算子検索 [複数条件・and検索]
  5. 演算子選択単数
  6. 演算子、結合子選択 [複数条件]
  7. チェックボックスを使用した複数条件指定
  8. 違うフィールドの複合検索 [複数条件]

1.簡単な検索

合致する条件を一つ指定する検索です。指定した条件に合致するエントリーが表示されます。

URLコンテキストの例

http://example.com/field/price/100

検索フォームの例


Field_Searchモジュールの例

<!-- BEGIN_MODULE Field_Search -->
<form action="" method="post" class="acms-form">
	<table>
		<tr>
			<th>価格</th>
			<th>検索</th>
		</tr>
		<tr>
			<td>
				<label class="acms-form-radio">
				<input type="radio" name="price" value="100"{price:checked#100} /><i class="acms-ico-radio"></i>100</label>
				<label class="acms-form-radio">
				<input type="radio" name="price" value="200"{price:checked#200} /><i class="acms-ico-radio"></i>200</label>
				<label class="acms-form-radio">
				<input type="radio" name="price" value="300"{price:checked#300} /><i class="acms-ico-radio"></i>300</label>
				<input type="hidden" name="field[]" value="price" />
			</td>
			<td>
				<input type="hidden" name="cid" value="%{CID}" />
				<input type="hidden" name="bid" value="%{BID}" />
				<input type="submit" name="ACMS_POST_2GET" value="検索" class="acms-btn-admin" />
			</td>
		</tr>
        </table>
</form>
<!-- END_MODULE Field_Search -->

2.簡単な検索 [複数条件・or検索]

合致する条件を複数指定する検索です。指定した条件のいずれかに合致する(=or検索)エントリーが表示されます。

URLコンテキストの例

http://example.com/field/price/200/300/

検索フォームの例


Field_Searchモジュールの例

<!-- BEGIN_MODULE Field_Search -->
<form action="" method="post" class="acms-form">
<table>
		<tr>
			<th>価格</th>
			<th>検索</th>
		</tr>
		<tr>
			<td>
				<label class="acms-form-checkbox" for="input-price-100">
					<input type="checkbox" name="price[]" value="100" id="input-price-100"{price:checked#100} />
					<i class="acms-ico-checkbox"></i>100
				</label>
				<label class="acms-form-checkbox" for="input-price-200">
					<input type="checkbox" name="price[]" value="200" id="input-price-200"{price:checked#200} />
					<i class="acms-ico-checkbox"></i>200
				</label>
				<label class="acms-form-checkbox" for="input-price-300">
					<input type="checkbox" name="price[]" value="300" id="input-price-300"{price:checked#300} />
					<i class="acms-ico-checkbox"></i>300
				</label>
				<input type="hidden" name="field[]" value="price" />
			</td>
			<td>
				<input type="hidden" name="cid" value="%{CID}" />
				<input type="hidden" name="bid" value="%{BID}" />
				<input type="submit" name="ACMS_POST_2GET" value="検索" class="acms-btn-admin" />
			</td>
		</tr>
        </table>
</form>
<!-- END_MODULE Field_Search -->

3.演算子検索

演算子で条件を指定する検索です。条件に合致するエントリーが表示されます。

URLコンテキストの例

http://example.com/field/price/lte/300/

検索フォームの例


Field_Searchモジュールの例

<!-- BEGIN_MODULE Field_Search -->
<form action="" method="post" class="acms-form">

        <!-- 宣言 -->
	<input type="hidden" name="field[]" value="price" />

	<!-- 演算子 -->
	<input type="hidden" name="price@operator" value="lte" />
	<table>
		<tr>
			<th>価格</th>
			<th>検索</th>
		</tr>
		<tr>
			<td>
				<select name="price">
					<option value="">上限なし</option>
					<option value="300"{price:selected#300}>300円以下</option>
					<option value="200"{price:selected#200}>200円以下</option>
					<option value="100"{price:selected#100}>100円以下</option>
				</select>
			</td>
			<td>
				<input type="hidden" name="cid" value="%{CID}" />
				<input type="hidden" name="bid" value="%{BID}" />
				<input type="submit" name="ACMS_POST_2GET" value="検索" class="acms-btn-admin" />
			</td>
		</tr>
        </table>
</field>

演算子部分の記述

<input type="hidden" name="カスタムフィールド名@operator" value="演算子" />
name属性

カスタムフィールド名の後ろに「@operator」を記述します。

Value属性

演算子を記述します。

演算子条件意味
eq=等しい
neq!=等しくない
gt>より大きい
gte>=以上
lt<より小さい
lte<=以下
lkLIKE含まれる
nlkNOT LIKE含まれない
reREGEXXP指定した表記表現に合致する
nreNOT REGEXP指定した正規表現に合致しない
emEMPTY値が空(何も入ってこない)
nemNOT EMPTY値が空(何も入ってこない)ではない

4. 演算子検索 [複数条件・and検索]

複数の演算子で条件を指定する検索です。すべての条件に合致する(=and検索)エントリーが表示されます。

URLコンテキストの例

http://example.com/field/price/gte/300/lte/100/

検索フォームの例


Field_Searchモジュールの例

<!-- BEGIN_MODULE Field_Search -->
<form action="" method="post" class="acms-form">

	<!-- 宣言 -->
	<input type="hidden" name="field[]" value="price" />

	<!-- 演算子 -->
	<input type="hidden" name="price@operator[0]" value="gte" />
	<input type="hidden" name="price@operator[1]" value="lte" />

	<table>
		<tr>
			<th>価格(下限)</th>
			<th>価格(上限)</th>
			<th>検索</th>
		</tr>
		<tr>
			<td>
				<select name="price[]">
					<option value="">上限なし</option>
					<option value="300"{price[0]:selected#300}>300円以上</option>
					<option value="200"{price[0]:selected#200}>200円以上</option>
					<option value="100"{price[0]:selected#100}>100円以上</option>
				</select>
			</td>
			<td>
				<select name="price[]">
					<option value="">上限なし</option>
					<option value="300"{price[1]:selected#300}>300円以下</option>
					<option value="200"{price[1]:selected#200}>200円以下</option>
					<option value="100"{price[1]:selected#100}>100円以下</option>
				</select>
			</td>
			<td>
				<input type="hidden" name="cid" value="%{CID}" />
				<input type="hidden" name="bid" value="%{BID}" />
				<input type="submit" name="ACMS_POST_2GET" value="検索" class="acms-btn-admin" />
			</td>
		</tr>
        </table>
</form>
<!-- END_MODULE Field_Search -->

5.演算子選択単数

条件の値を入力し、かつ演算子を指定する検索です。条件に合致するエントリーが表示されます。

URLコンテキストの例

http://example.com/field/price/neq/200/

検索フォームの例


Field_Searchモジュールの例

<!-- BEGIN_MODULE Field_Search -->
<form action="" method="post" class="acms-form">

    <!-- 宣言 -->
    <input type="hidden" name="field[]" value="price" />

    <table>
        <tr>
            <th>オペレータ</th>
            <th>価格</th>
	    <th>検索</th>
	</tr>
	<tr>
	    <td>
	        <select name="price@operator">
		    <option value="eq"{price@operator:selected#eq}>=</option>
		    <option value="neq"{price@operator:selected#neq}>!=</option>
		    <option value="lt"{price@operator:selected#lt}>&lt;</option>
                    <option value="lte"{price@operator:selected#lte}>&lt;=</option>
                    <option value="gt"{price@operator:selected#gt}>&gt;</option>
		    <option value="gte"{price@operator:selected#gte}>&gt;=</option>
                    <option value="lk"{price@operator:selected#lk}>LIKE</option>
                    <option value="nlk"{price@operator:selected#nlk}>NOT LIKE</option>
                    <option value="re"{price@operator:selected#re}>REGEXP</option>
                    <option value="nre"{price@operator:selected#nre}>NOT REGEXP</option>
                    <option value="em"{price@operator:selected#em}>EMPTY</option>
                    <option value="nem"{price@operator:selected#nem}>NOT EMPTY</option>
               </select>
	    </td>
            <td>
		<input type="text" name="price" value="{price}" size="10" />
            </td>
            <td>
                <input type="hidden" name="cid" value="%{CID}" />
                <input type="hidden" name="bid" value="%{BID}" />
                <input type="submit" name="ACMS_POST_2GET" value="検索" class="acms-btn-admin" />
	    </td>
	</tr>
    </table>
</form>
<!-- END_MODULE Field_Search -->

6.演算子、結合子選択[複数条件]

条件の値を入力し、かつ演算子を指定する検索です。複数の条件をand検索かor検索で条件に合致するエントリーが表示されます。

URLコンテキストの例

http://example.com/field/price/gte/300/or/lte/150/

検索フォームの例


Field_Searchモジュールの例

<!-- BEGIN_MODULE Field_Search -->
<form action="" method="post" class="acms-form">

<!-- 宣言 -->
<input type="hidden" name="field[]" value="price" />
<input type="hidden" name="price[0]" />
<input type="hidden" name="price[1]" />
<input type="hidden" name="price@connector[0]" />
<input type="hidden" name="price@connector[1]" />
<input type="hidden" name="price@operator[0]" />
<input type="hidden" name="price@operator[1]" />

<table>
	<tr>
		<th>価格</th>
		<th>AND OR</th>
		<th>価格</th>
		<th>検索</th>
	</tr>
	<tr>
		<td>
			<select name="price@operator[0]">
				<option value="">選択しない</option>
				<option value="eq"{price@operator[0]:selected#eq}>=</option>
				<option value="neq"{price@operator[0]:selected#neq}>!=</option>
				<option value="lt"{price@operator[0]:selected#lt}>&lt;</option>
				<option value="lte"{price@operator[0]:selected#lte}>&lt;=</option>
				<option value="gt"{price@operator[0]:selected#gt}>&gt;</option>
				<option value="gte"{price@operator[0]:selected#gte}>&gt;=</option>
				<option value="lk"{price@operator[0]:selected#lk}>LIKE</option>
				<option value="nlk"{price@operator[0]:selected#nlk}>NOT LIKE</option>
				<option value="re"{price@operator[0]:selected#re}>REGEXP</option>
				<option value="nre"{price@operator[0]:selected#nre}>NOT REGEXP</option>
				<option value="em"{price@operator[0]:selected#em}>EMPTY</option>
				<option value="nem"{price@operator[0]:selected#nem}>NOT EMPTY</option>
			</select><br/>
			<input type="text" name="price[0]" value="{price[0]}" size="10" />
			円
		</td>
		<td>
			<label class="acms-form-radio">
			<input type="radio" name="price@connector[1]" value="and"{price@connector[1]:checked#and} /><i class="acms-ico-radio"></i>and</label>
			<label class="acms-form-radio">
			<input type="radio" name="price@connector[1]" value="or"{price@connector[1]:checked#or} /><i class="acms-ico-radio"></i>or</label>
			<input type="hidden" name="field[]" value="price@connector[1]" />
		</td>
		<td>
			<select name="price@operator[1]">
				<option value="">選択しない</option>
				<option value="eq"{price@operator[1]:selected#eq}>=</option>
				<option value="neq"{price@operator[1]:selected#neq}>!=</option>
				<option value="lt"{price@operator[1]:selected#lt}>&lt;</option>
				<option value="lte"{price@operator[1]:selected#lte}>&lt;=</option>
				<option value="gt"{price@operator[1]:selected#gt}>&gt;</option>
				<option value="gte"{price@operator[1]:selected#gte}>&gt;=</option>
				<option value="lk"{price@operator[1]:selected#lk}>LIKE</option>
				<option value="nlk"{price@operator[1]:selected#nlk}>NOT LIKE</option>
				<option value="re"{price@operator[1]:selected#re}>REGEXP</option>
				<option value="nre"{price@operator[1]:selected#nre}>NOT REGEXP</option>
				<option value="em"{price@operator[1]:selected#em}>EMPTY</option>
				<option value="nem"{price@operator[1]:selected#nem}>NOT EMPTY</option>
			</select><br/>
			<input type="text" name="price[1]" value="{price[1]}" size="10" />
			円
		</td>
		<td>
			<input type="hidden" name="cid" value="%{CID}" />
			<input type="hidden" name="bid" value="%{BID}" />
			<input type="submit" name="ACMS_POST_2GET" value="検索" class="acms-btn-admin" />
		</td>
	</tr>
    </table>
</form>
<!-- END_MODULE Field_Search -->

チェックボックスを使用した複数条件指定

チェックボックスで複数の条件指定する検索です。複数の条件をand検索かor検索で条件に合致するエントリーが表示されます。

URLコンテキストの例

http://example.com/field/price/or/lt/100/100/or/nem//or/gt/300/

検索フォームの例


Field_Searchモジュールの例

<!-- BEGIN_MODULE Field_Search -->
<form action="" method="post" class="acms-form">
	<!-- 宣言 -->
	<input type="hidden" name="field[]" value="price" />

	<input type="hidden" name="price[0]" />
	<input type="hidden" name="price[1]" />
	<input type="hidden" name="price[2]" />
	<input type="hidden" name="price[3]" />
	<input type="hidden" name="price[4]" />

	<input type="hidden" name="price@operator[0]" />
	<input type="hidden" name="price@operator[1]" />
	<input type="hidden" name="price@operator[2]" />
	<input type="hidden" name="price@operator[3]" />
	<input type="hidden" name="price@operator[4]" />

	<input type="hidden" name="price@connector[0]" />
	<input type="hidden" name="price@connector[1]" />
	<input type="hidden" name="price@connector[2]" />
	<input type="hidden" name="price@connector[3]" />
	<input type="hidden" name="price@connector[4]" />

	<!-- 演算子 -->
	<input type="hidden" name="price@operator[0]" value="lt" />
	<input type="hidden" name="price@operator[1]" value="eq" />
	<input type="hidden" name="price@operator[3]" value="eq" />
	<input type="hidden" name="price@operator[4]" value="gt" />

	<!-- 結合子 -->
	<input type="hidden" name="price@connector" value="and" />

	<table>
		<tr>
			<th>AND OR</th>
			<th>価格</th>
			<th>検索</th>
		</tr>
		<tr>
			<td>
				<label for="input-radio-price-connector-and" class="acms-form-radio">
					<input type="radio" name="price@connector" value="and"{price@connector:checked#and} id="input-radio-price-connector-and" />
					<i class="acms-ico-radio"></i>
					and
				</label>
				<label for="input-radio-price-connector-or" class="acms-form-radio">
					<input type="radio" name="price@connector" value="or"{price@connector:checked#or} id="input-radio-price-connector-or" />
					<i class="acms-ico-radio"></i>
					or
				</label>
			</td>
			<td>
				<label for="input-checkbox-price-0" class="acms-form-checkbox">
					<input type="checkbox" name="price[0]" value="100"{price[0]:checked#100} id="input-checkbox-price-0" />
					<i class="acms-ico-checkbox"></i>
					100未満
				</label>
				<label for="input-checkbox-price-1" class="acms-form-checkbox">
					<input type="checkbox" name="price[1]" value="100"{price[1]:checked#100} id="input-checkbox-price-1" />
					<i class="acms-ico-checkbox"></i>
					100
				</label>
				<label for="input-checkbox-price-2" class="acms-form-checkbox">
					<input type="checkbox" name="price@operator[2]" value="nem" id="input-checkbox-price-2"{price@operator[2]:checked#nem} />
					<i class="acms-ico-checkbox"></i>
					空ではない
				</label>
				<label for="input-checkbox-price-3" class="acms-form-checkbox">
					<input type="checkbox" name="price[3]" value="300"{price[3]:checked#300} id="input-checkbox-price-3" />
					<i class="acms-ico-checkbox"></i>
					300
				</label>
				<label for="input-checkbox-price-4" class="acms-form-checkbox">
					<input type="checkbox" name="price[4]" value="300"{price[4]:checked#300} id="input-checkbox-price-4" />
					<i class="acms-ico-checkbox"></i>
					300超
				</label>
			</td>
			<td>
				<input type="hidden" name="cid" value="%{CID}" />
				<input type="hidden" name="bid" value="%{BID}" />
				<input type="submit" name="ACMS_POST_2GET" value="検索" class="acms-btn-admin" />
			</td>
		</tr>
	</table>
</form>
<!-- END_MODULE Field_Search -->

8.違うフィールドの複合検索 [複数条件]

Ver. 2.1.1以前は、違うカスタムフィールドの複合検索はAND検索のみしかできませんでしたが、Ver2.1.1からOR検索にも対応しました。

AND検索のURL

http://example.com/field/price/gte/1000/and/color/red <!-- 以前からのURL -->
<!-- または -->
http://examplecom/field/price/gte/1000/_and_/color/red/

「and」または「_and_」で繋げる事により、違うフィールドのAND検索を行えるようになります。 この場合、priceが1000以上かつcolorがredなものを検索します。

OR検索のURL

http://example.com/field/price/gte/1000/_or_/color/red

「_or_」で繋げる事により、違うフィールドのOR検索を行えるようになります。 この場合、priceが1000以上、またはcolorがredなものを検索します。

*注意 : em(空の時)はOR検索で利用できません。

Field_Searchモジュールの例

<!-- BEGIN_MODULE Field_Search -->
		<form action="" method="post" class="acms-form">
			<table class="realestateSearch">
				<tr class="acms-hide-sp">
					<th>最寄り駅</th>
					<th>家賃</th>
					<th>検索</th>
				</tr>
				<tr>
					<td>
					<span class="acms-hide-md acms-hide-pc">最寄り駅</span>
					<select name="station">
						<option value="">未設定</option>
						<option value="あの駅"{station:selected#あの駅}>あの駅</option>
						<option value="この駅"{station:selected#この駅}>この駅</option>
						<option value="その駅"{station:selected#その駅}>その駅</option>
					</select>
					<input type="hidden" name="field[]" value="station" />
					</td>
					<td class="tableNowrap">
						<span class="acms-hide-md acms-hide-pc acms-show-sp">家賃</span>
						<select name="price[]">
							<option value="">下限なし</option>
							<option value="30000"{price[0]:selected#30000}>30,000円以上</option>
							<option value="50000"{price[0]:selected#50000}>50,000円以上</option>
							<option value="80000"{price[0]:selected#80000}>80,000円以上</option>
						</select>
					 - 
						<select name="price[]">
							<option value="">上限なし</option>
							<option value="80000"{price[1]:selected#80000}>80,000円以下</option>
							<option value="50000"{price[1]:selected#50000}>50,000円以下</option>
							<option value="30000"{price[1]:selected#30000}>30,000円以下</option>
						</select>
						
						<input type="hidden" name="field[]" value="price" />
						<input type="hidden" name="price@operator[0]" value="gte" />
						<input type="hidden" name="price@operator[1]" value="lte" />
					</td>

					<td>
						<input type="hidden" name="cid" value="%{CID}" />
						<input type="hidden" name="bid" value="%{BID}" />
						<input type="hidden" name="price@separator" value="or" />
						<input type="submit" name="ACMS_POST_2GET" value="検索" class="btn btnSearchBlock" />
					</td>
				</tr>
			</table>
		</form>
		<!-- END_MODULE Field_Search -->

フィールド名@separatorand または or を設定する事により、設定できるようになります。


カスタムフィールドの値で検索する( Field_Searchモジュール )

カスタムフィールドの情報を元にサイト検索を実装する

a-blog cmsのカスタムフィールドの情報は、サイト内検索の対象にすることができます。前回のモジュールIDとカスタムフィールドを利用した情報の絞り込みと同じ事を、検索窓というエンドユーザー側のインターフェースから行えます。

今回は、そのカスタムフィールド検索のサンプルファイルについて紹介します。

検索のサンプルファイルについて

/themes/sample@blog2014/search/form.html ※動作確認する際はテーマ設定を「sample@blog2014」テーマに設定してください。

Field_Searchモジュール

Field_Searchモジュールを利用することで、カスタムフィールドの値を使って記事を検索することができます。 /themes/sample@blog2014/search/form.html を一部抜粋 priceというカスタムフィールドを対象に検索を行っています。

<!-- BEGIN_MODULE Field_Search -->
<dl>
    <dt>簡単な検索</dt>
    <dd>
        <form action="" method="post">
        <!-- 宣言 -->
        <input type="hidden" name="field[]" value="price" />
        <p>
            価格
            <label for="input-radio-price-100">
                <input type="radio" name="price" value="100"{price:checked#100} id="input-radio-price-100" />
                100
            </label>
            <label for="input-radio-price-200">
                <input type="radio" name="price" value="200"{price:checked#200} id="input-radio-price-200" />
                200
            </label>
            <label for="input-radio-price-300">
                <input type="radio" name="price" value="300"{price:checked#300} id="input-radio-price-300" />
                300
            </label>
        </p>

        <p>
            <input type="hidden" name="tpl" value="search" />
            <input type="hidden" name="cid" value="%{CID}" />
            <input type="hidden" name="bid" value="%{BID}" />
            <input type="submit" name="ACMS_POST_2GET" value="search" />
        </p>
        </form>
    </dd>
</dl>
<!-- END_MODULE Field_Search -->

サンプルのファイルを見ると分かるように、検索用の項目はカスタムフィールドの入力側の画面と同じように記述します。すでにエントリー編集ページにカスタムフィールド項目を追加してあれば、その部分をコピーしてしまっても良いでしょう。

POST_2GET

データの送信先になるPOSTモジュールにはACMS_POST_2GETを指定します。サンプルファイルからコピーして特に編集する必要はない部分です。

<input type="submit" name="ACMS_POST_2GET" value="search" />

検索対象のエントリー作成しましょう

**/themes/sample@blog2014/admin/entry/field.html **に価格({price})のカスタムフィールドが用意されています。 エントリーに価格({price})の値を入れていきましょう。 http://ドメイン/search/ でアクセスするとpriceを検索するフォームが表示されます。

<table class="entryFormTable">
    <tr>
        <th>価格</th>
        <td>
            <input type="text" name="price" value="{price}" size="10" />
            <input type="hidden" name="field[]" value="price" />
        </td>
    </tr>
</table>

カスタムフィールドの検索で出来ること

カスタムフィールドを元にした検索データベースが作成できます。エントリーに商品情報(値段・色・種類など)や、店舗情報(地域・取り扱い品・営業時間など)を登録することで商品や店舗の情報をエントリーとしてまとめて取り扱うことができます。

またそれらを検索できるようにすることでエンドユーザーからの情報の検索性を高めることも可能になります。サンプルファイルを参考に、ぜひ実装してみてください。


任意の入力フィールドをCKEditorにする

a-blog cmsでは、任意の入力フィールドをCKEditorにする設定が標準で実装されています。(v1.2.1より)

通常は、ユニットのプルダウンメニューで「ウィジウィグ」を選択すると、入力フィールドがCKEditorに切り替わりますが、この機能を使用すると任意の入力フィールドをCKEditorの入力画面にすることができます。

カスタムフィールドであらかじめウィジウィグ入力することが決まっている場合などに設定すると便利です。


任意の入力フィールドをCKEditorにした場合の表示

任意の入力フィールドをCKEditorにした場合の表示


任意の入力フィールドをCKEditorにする

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。


ckeMark : 'textarea.js-ckeditor',

ckeMark CKEditorにする入力フィールドのセレクタを指定します。

2. HTMLの編集

例)ckeMarkで「textarea.js-ckeditor」と指定した場合

<textarea name="textarea" class="js-ckeditor"></textarea>

ウィジウィグユニットとの違い

ここで説明しているCKEditorは、初期状態のものを使用しています。ウィジウィグユニットで表示される入力フィールドは、絵文字エディタであり、CKEditorとはツールバーや絵文字の種類が異なります。


ウィジウィグユニットの絵文字エディタ

ウィジウィグユニットの絵文字エディタ

ウィジウィグユニットの絵文字エディタを任意の入力フィールドで使用するには

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。

    emoMark         : 'textarea.js-emoditor',

2. HTMLの編集

CKEditorの場合と同様に、絵文字エディタにしたい要素にconfig.jsで指定したセレクタを記述します。

例)emoMarkで「textarea.js-emoditor」と指定した場合

<textarea name="textarea" class="js-emoditor"></textarea>

カスタムフィールドでファイルをアップロードできるようにする

カスタムフィールドを作成して、ファイルをアップロードできるようにする方法を説明します。(v1.3.0より)

ファイルをアップロードするカスタムフィールドの作成

例)PDFファイルをアップロードするカスタムフィールド(フィールド名:pdffile)

<!-- BEGIN pdffile@path:veil -->
<input type="hidden" name="pdffile@old" value="{pdffile@path}" />
<input type="hidden" name="pdffile@secret" value="{pdffile@secret}" />
<input type="hidden" name="pdffile@baseName" value="{pdffile@baseName}" />
<input type="hidden" name="pdffile@fileSize" value="{pdffile@fileSize}" />

<label for="input-checkbox-pdffile@edit">
<input type="checkbox" name="pdffile@edit" value="delete" id="input-checkbox-pdffile@edit" /> 削除
</label>
<a href="%{HTTP_ARCHIVES_DIR}{pdffile@path}"><img src="/images/fileicon/pdf.gif" width="64" height="64" alt="zip" /></a><!-- END pdffile@path:veil -->
<input type="file" name="pdffile" />
<input type="hidden" name="field[]" value="pdffile" />
<input type="hidden" name="pdffile:extension" value="file" />
<input type="hidden" name="pdffile@extension" value="pdf" />
<input type="hidden" name="pdffile@filename" value="pdf/example.pdf" />

各記述の説明

2行目:ファイルがアップロードされなかった場合に既存のアップロードされているファイルの情報を送信する記述【必須】

<input type="hidden" name="フィールド名@old" value="{フィールド名@path}" />

4行目:システムのファイル名を表示するための記述【任意】(v1.4.2から)

<input type="hidden" name="pdffile@baseName" value="{pdffile@baseName}" />

5行目:ファイルサイズを自動で取得するための記述【任意】(v1.4.2から)

<input type="hidden" name="pdffile@fileSize" value="{pdffile@fileSize}" />

7〜9行目:アップロードしてあるファイルを削除する記述【任意】

<label for="input-checkbox-フィールド名@edit">
<input type="checkbox" name="フィールド名@edit" value="delete" id="input-checkbox-フィールド名@edit" /> 削除
</label>

10行目:アップロードしたファイルのアイコンとリンク表示【必須】

<a href="%{HTTP_ARCHIVES_DIR}{フィールド名@path}"><img src="アイコンファイルのパス" width="64" height="64" alt="代替テキスト" /></a>

11行目:ファイルを入力する記述【必須】

<input type="file" name="フィールド名" />

12行目:カスタムフィールドであることの記述【必須】

<input type="hidden" name="field[]" value="フィールド名" />

13行目:通常のフィールドではなく、拡張フィールドであることの記述【必須】

<input type="hidden" name="フィールド名:extension" value="file" />

14行目:アップロードするファイルの拡張子を指定【任意】

value属性に拡張子を記述します。ここで指定した種類のファイルのみアップロードできます。指定していない場合はコンフィグの設定が適用されます。(→設定内容は「エントリーの編集設定(ユニット追加ボタン/テキストタグセレクト/サイズセレクト/エントリー編集/イメージ編集/アップロード許可ファイル拡張子)」の「アップロード許可ファイル拡張子」参照)

<input type="hidden" name="フィールド名@extension" value="pdf" />

15行目:アップロードする場所とファイル名を指定【任意】

カスタムフィールドからアップロードされたファイルは、/archives/bid/内に格納されます。(その他の場所にはアップロードできません。)※@filenameは@baseNameと違い、ファイル名を指定することができます。

<input type="hidden" name="フィールド名@filename" value="アップロードするファイルのパス" />

PDFファイルをアップロードしたカスタムフィールド

PDFファイルをアップロードしたカスタムフィールド

カスタムフィールドでアップロードしたファイルを表示

例)「pdffile」というフィールド名でPDFファイルをアップロードした場合

<!-- BEGIN pdffile:veil --><a href="%{HTTP_ARCHIVES_DIR}{pdffile@path}"><img src="アイコンファイルのパス" width="64" height="64" alt="代替テキスト" /></a><!-- END pdffile:veil -->

PDFファイルの表示

PDFファイルの表示


カスタムフィールドで画像をアップロードできるようにする

カスタムフィールドを作成して、画像をアップロードできるようにする方法を説明します。(v1.3.0より)

画像をアップロードするカスタムフィールドの作成

例)PNGファイルをアップロードするカスタムフィールド(フィールド名:topVisual)

<!-- アップロード済みのファイルのプレビューエリア -->
<!-- BEGIN topVisual@path:veil -->
<img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" /><br />
<input type="hidden" name="topVisual@old" value="{topVisual@path}" />
<input type="hidden" name="topVisual@secret" value="{topVisual@secret}" />
<label for="input-checkbox-topVisual@edit">
<input type="checkbox" name="topVisual@edit" value="delete" id="input-checkbox-topVisual@edit" />
削除
</label><br /><!-- END topVisual@path:veil -->
<!-- イメージファイルをアップロードするフィールド -->
<input type="file" name="topVisual" size="20" />
<input type="hidden" name="field[]" value="topVisual" />
<input type="hidden" name="topVisual:extension" value="image" />
<input type="text" name="topVisual@alt" value="{topVisual@alt}" />
<input type="hidden" name="topVisual@extension" value="png" />
<input type="hidden" name="topVisual@filename" value="topVisual.png" />
<input type="hidden" name="topVisual@width" value="820" />

「カスタムフィールドで画像をアップロードできるようにする」の続きを読む

カスタムフィールドでGoogle Mapsの入力インターフェースを実装する

カスタムフィールドを利用して、Google Mapsの経度・緯度・ズーム値の入力インターフェースを作成する方法を説明します。

カスタムフィールドでGoogle Mapsの入力インターフェースを実装する

例)[ブログ管理] - [ブログ詳細]画面にカスタムフィールドを実装する場合(/admin/blog/field.html)

ここでは、ブログ管理画面のブログ詳細画面として使用される field.html に記述する内容を説明します。以下の内容を追加することで、ブログ詳細画面の編集時にカスタムフィールドとして入力できるようになります。

field.html に追加する内容


ブログのカスタムフィールドで設定した例(設定)

ブログのカスタムフィールドで設定した例(設定)


<table>
<tr class="js-map-editable">
<th>カスタムフィールドを利用したGoogle Maps</th>
<td>
<input type="text" name="" value="" class="js-editable_map-search_text" disabled="disabled" size="40" />
<input type="button" name="" value="検索" class="js-editable_map-search_button" disabled="disabled" />
<img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=400x300&maptype=roadmap&markers=35.185574,136.899066&sensor=false" width="400" height="300" style="display:block;" />
緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-map_editable-lat" />
経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-map_editable-lng" />
ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-map_editable-zoom" />
<input type="hidden" name="field[]" value="mapLat" />
<input type="hidden" name="field[]" value="mapLng" />
<input type="hidden" name="field[]" value="mapZoom" />
</td>
</tr>
</table>

各記述の説明(設定部分)

各記述にある「js-」で始まるclassは、必ず上記の記述のとおりに記述してください。(各記述の全体を囲む要素には「class="js-map-editable"」を必ず記述してください。)記述しない場合、正常に動作しなくなります。

2行目:Google Maps編集用のclassの記述

Google Mapsをカスタムフィールドで利用するための記述。各記述全体を囲む要素に記述してください。

<tr class="js-map-editable">

5〜6行目:スポット検索の入力エリアの記述

スポットの位置を住所やスポット名で検索するための入力エリア。

<input type="text" name="" value="" class="js-editable_map-search_text" disabled="disabled" size="入力エリアの横幅" />
<input type="button" name="" value="ボタンのラベル名" class="js-editable_map-search_button" disabled="disabled" />

7行目:マップの表示の記述

<img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=マップの幅xマップの高さ&maptype=roadmap&markers=35.185574,136.899066&sensor=false" width="マップの幅" height="マップの高さ" style="display:block;" />

8〜10行目:緯度・経度・ズーム値の入力エリアの記述

緯度 <input type="text" name="lat" value="{mapLat}" size="入力エリアの横幅" class="js-map_editable-lat" />
経度 <input type="text" name="lng" value="{mapLng}" size="入力エリアの横幅" class="js-map_editable-lng" />
ズーム <input type="text" name="zoom" value="{mapZoom}" size="入力エリアの横幅" class="js-map_editable-zoom" />

11〜13行目:緯度・経度・ズーム値のカスタムフィールドであることの記述

<input type="hidden" name="field[]" value="mapLat" />
<input type="hidden" name="field[]" value="mapLng" />
<input type="hidden" name="field[]" value="mapZoom" />

古いバージョンをお使いの方はご注意ください。(2013年1月15日追記)

v1.5.2でGoogle Mapsのカスタムフィールドが正しく動作していないことが分かりました。

パッチファイルを用意しました。

/js/dispatch/admin.js
/js/dispatch/edit.js
ダウンロードしてきたファイルを上書きしてください。


画像をアップロードするカスタムフィールドの作成

画像をアップロードするカスタムフィールド

例)PNGファイルをアップロードするカスタムフィールド(カスタムフィールドの変数:topVisual)

<!-- アップロード済みのファイルのプレビューエリア -->
<!-- BEGIN topVisual@path:veil -->
<img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" /><br />
<input type="hidden" name="topVisual@old" value="{topVisual@path}" />
<input type="hidden" name="topVisual@secret" value="{topVisual@secret}" />
<label for="input-checkbox-topVisual@edit">
	<input type="checkbox" name="topVisual@edit" value="delete" id="input-checkbox-topVisual@edit" />
	削除
</label><br /><!-- END topVisual@path:veil -->
<!-- イメージファイルをアップロードするフィールド -->
<input type="file" name="topVisual" size="20" />
<input type="hidden" name="field[]" value="topVisual" />
<input type="hidden" name="topVisual:extension" value="image" />
<input type="text" name="topVisual@alt" value="{topVisual@alt}" />
<input type="hidden" name="topVisual@extension" value="png" />
<input type="hidden" name="topVisual@filename" value="topVisual.png" />
<input type="hidden" name="topVisual@width" value="820" />

記述の解説

画像をアップしたプレビュー【必須】

<img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" />

画像のデータを保持するための記述【必須】

<input type="hidden" name="topVisual@old" value="{topVisual@path}" />
<input type="hidden" name="topVisual@secret" value="{topVisual@secret}" />

画像を削除するチェックボックス【必須】

<label for="input-checkbox-topVisual@edit">
	<input type="checkbox" name="topVisual@edit" value="delete" id="input-checkbox-topVisual@edit" />
	削除
</label>

画像のカスタムフィールドであることの記述【必須】

<input type="hidden" name="topVisual:extension" value="image" />

画像のaltの指定【任意】

<input type="text" name="topVisual@alt" value="{topVisual@alt}" />

画像の拡張子を指定【任意】

<input type="hidden" name="topVisual@extension" value="png" />

画像のファイル名を指定【任意】

<input type="hidden" name="topVisual@filename" value="topVisual.png" />

画像のサイズを指定【任意】

<input type="hidden" name="topVisual@width" value="820" />

画像のサイズはさまざまな指定方法があります。横幅でリサイズしたり、縦幅でリサイズしたり、正方形にトリミングしたり、最大・最小サイズなど指定することができます。複数のサイズの画像を生成したいときは複数のサイズを指定してください。

<input type="hidden" name="フィールド名@width" value="画像の幅の数値" />
<input type="hidden" name="フィールド名@height" value="画像の高さの数値" />
<input type="hidden" name="フィールド名@size" value="画像の長辺の数値" />
<input type="hidden" name="フィールド名@tinyWidth" value="画像(小)の幅の数値" />
<input type="hidden" name="フィールド名@tinyHeight" value="画像(小)の高さの数値" />
<input type="hidden" name="フィールド名@tinySize" value="画像(小)の長辺の数値" />
<input type="hidden" name="フィールド名@largeWidth" value="画像(大)の幅の数値" />
<input type="hidden" name="フィールド名@largeHeight" value="画像(大)の高さの数値" />
<input type="hidden" name="フィールド名@largeSize" value="画像(大)の長辺の数値" />
<input type="hidden" name="フィールド名@squareWidth" value="画像(正方形)の幅の数値" />
<input type="hidden" name="フィールド名@squareHeight" value="画像(正方形)の高さの数値" />
<input type="hidden" name="フィールド名@squareSize" value="画像(正方形)の長辺の数値" />

ファイルをアップロードするカスタムフィールドの作成

ファイルをアップロードするカスタムフィールド

ファイルのカスタムフィールドを作成することでPDFやExcelなどのファイルをエントリーから投稿できるようになります。ファイルのカスタムフィールドの作成方法について解説していきます。

例)PDFファイルをアップロードするカスタムフィールド(フィールド名:pdffile)

<!-- BEGIN pdffile@path:veil -->
<input type="hidden" name="pdffile@old" value="{pdffile@path}" />
<input type="hidden" name="pdffile@secret" value="{pdffile@secret}" />
<input type="hidden" name="pdffile@baseName" value="{pdffile@baseName}" />
<input type="hidden" name="pdffile@fileSize" value="{pdffile@fileSize}" />
<label for="input-checkbox-pdffile@edit">
	<input type="checkbox" name="pdffile@edit" value="delete" id="input-checkbox-pdffile@edit" /> 削除
</label>
<a href="%{HTTP_ARCHIVES_DIR}{pdffile@path}"><img src="/images/fileicon/pdf.gif" width="64" height="64" alt="zip" /></a><!-- END pdffile@path:veil -->
<input type="file" name="pdffile" />
<input type="hidden" name="field[]" value="pdffile" />
<input type="hidden" name="pdffile:extension" value="file" />
<input type="hidden" name="pdffile@extension" value="pdf" />
<input type="hidden" name="pdffile@filename" value="pdf/example.pdf" />

記述の解説

ファイルがアップロードされなかった場合に既存のアップロードされているファイルの情報を送信する記述

<input type="hidden" name="pdffile@old" value="{pdffile@path}" />
<input type="hidden" name="pdffile@secret" value="{pdffile@secret}" />

ファイルサイズ

<input type="hidden" name="pdffile@baseName" value="{pdffile@baseName}" />
<input type="hidden" name="pdffile@fileSize" value="{pdffile@fileSize}" />

アップロードしてあるファイルを削除する記述【任意】

<label for="input-checkbox-pdffile@edit">
	<input type="checkbox" name="pdffile@edit" value="delete" id="input-checkbox-pdffile@edit" /> 削除
</label>

アップロードしたファイルのアイコンとリンク表示【必須】

<a href="%{HTTP_ARCHIVES_DIR}{pdffile@path}"><img src="/images/fileicon/pdf.gif" width="64" height="64" alt="zip" />

ファイルのカスタムフィールドであることの記述【必須】

<input type="hidden" name="pdffile:extension" value="file" />

アップロードするファイルの拡張子を指定【任意】

<input type="hidden" name="pdffile@extension" value="pdf" />

アップロードする場所とファイル名を指定【任意】

<input type="hidden" name="pdffile@filename" value="pdf/example.pdf" />

この場合、アップロードしたファイル名に関係なくファイル名はexample.pdfとして保存されます

補足

ファイル名をランダムにするには
valueの値を空欄にすることでランダムになります

<input type="hidden" name="pdffile@filename" value="" />

ファイル名をアップロードされたファイル名のままにするには
valueの値を"@rawfilename"にすることでそのままになります

<input type="hidden" name="pdffile@filename" value="@rawfilename" />

カスタムユニットでも同様に、ファイル名のままにする場合は value="@rawfilename" とします。


Google Mapsのカスタムフィールドの作成

Google Mapsのインターフェースのカスタムフィールドを使って、緯度・経度・ズームの値を入力することができます。


Google MapsのインターフェースのカスタムフィールドのサンプルHTMLになります。

<table class="entryFormTable acms-table-entry">
<tr class="js-map-editable">
<th>地図</th>
<td>
	<div class="acms-form-group">
		<input type="text" name="" value="" class="js-editable_map-search_text" disabled="disabled" size="40" />
		<input type="button" name="" value="検索" class="js-editable_map-search_button acms-btn-admin" disabled="disabled" />
	</div>
	<div class="acms-form-group">
		<img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=400x300&maptype=roadmap&markers=35.185574,136.899066&sensor=false" width="400" height="300" style="display:block;" />
	</div>
	<div class="acms-form-group">
		緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-map_editable-lat" />
		経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-map_editable-lng" />
		ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-map_editable-zoom" />
	</div>
	<input type="hidden" name="field[]" value="mapLat" />
	<input type="hidden" name="field[]" value="mapLng" />
	<input type="hidden" name="field[]" value="mapZoom" />
</td>
</tr>
</table>

記述の説明

Google Mapsをカスタムフィールドで利用するための記述。各記述全体を囲む要素に記述してください。

<tr class="js-map-editable">

スポットの位置を住所やスポット名で検索するための入力エリア。

<input type="text" name="" value="" class="js-editable_map-search_text" disabled="disabled" size="40" />
<input type="button" name="" value="検索" class="js-editable_map-search_button acms-btn-admin" disabled="disabled" />

マップの表示の記述

<img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=400x300&maptype=roadmap&markers=35.185574,136.899066&sensor=false" width="400" height="300" style="display:block;" />

緯度・経度・ズームの値を入力箇所

緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-map_editable-lat" />
経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-map_editable-lng" />
ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-map_editable-zoom" />
<input type="hidden" name="field[]" value="mapLat" />
<input type="hidden" name="field[]" value="mapLng" />
<input type="hidden" name="field[]" value="mapZoom" />

テンプレートに表示する

緯度 {mapLat}、経度 {mapLng}、ズーム {mapZoom} という変数の場合は以下のように記述します。エントリーのカスタムフィールドで作成した場合はEntry系モジュールのentry:loop内に記述してください。

<img class="js-s2d-ready" src="http://maps.google.com/maps/api/staticmap?center={mapLat},{mapLng}&zoom={mapZoom}&size=400x300&maptype=roadmap&markers={mapLat},{mapLng}&sensor=false" width="400" height="300" style="display:block;" />

カスタムフィールドメーカーについて

管理画面のコンフィグ管理のところにガイドライン/ツール「カスタムフィールドメーカー」というページがあります。


カスタムフィールドメーカーではカスタムフィールドを毎回どこからからコピペして書き換えたりしなくてもラベルや値、サイズなど入力していくだけカスタムフィールドのHTMLが作れてしまう便利な機能になります。カスタムフィールドではテキストや画像などさまざまなカスタムフィールドを組み合わせることができます。

  • テキスト
  • セレクト
  • ラジオ
  • チェックボックス
  • テキストエリア
  • 画像
  • カスタムフィールドグループ
  • カスタムユニット

カスタムフィールドの作り方

  1. typeとタイトル、フィールド名を入力します。
  2. それぞれの項目に応じた項目に対して、値を入力して[生成]ボタンを押すとカスタムフィールドのHTMLが生成されます

続けてtype セレクトに変更しタイトル、name属性、option要素(label・value)を入力して[生成]ボタンを押すとテキストの下にセレクトのカスタムフィールドが生成されます。



画像のカスタムフィールドを生成

タイトル、name要素、通常サイズ、altの入力、tinyサイズ、largeサイズ、squareサイズなど細やかに設定することができます。


また、「フロント側のリサイズ機能を使用する」という項目にチェックを入れることで、画像のブラウザ上でのリサイズを可能にするソースコードを生成します。 これを使うことで、通常だとそのままアップロードができないサイズの画像もアップロードできるようになります。例えば、デジタルカメラで撮影したような容量の大きい画像をブラウザ上でリサイズしてサーバーにアップロードすることができるということです。

カスタムフィールドグループの作り方

まずは、下の図のように、「カスタムフィールド」、「カスタムフィールドグループ」、「カスタムユニット」からカスタムフィールドグループを選択します。


  1. groupタイトルとgroup名を入力
  2. テキスト、セレクト、ラジオ、チェックボックス、テキストエリア、画像を選択
  3. 要素に合わしたタイトル、name属性、値などを入力
  4. [追加]ボタンを押すと要素が追加されます
  5. 2の手順に戻り、要素をまた選択してカスタムフィールドを追加してください
  6. 最後に[生成]ボタンを押してください

カスタムユニットの作り方

まずは、下の図のように、「カスタムフィールド」、「カスタムフィールドグループ」、「カスタムユニット」からカスタムユニットを選択します。


あとは、カスタムフィールドの作り方と同じです。 typeとタイトル、フィールド名を入力します。 それぞれの項目に応じた項目に対して、値を入力して[生成]ボタンを押すとカスタムフィールドのHTMLが生成されます

その他、カスタムフィールドメーカーの便利な機能

他にもカスタムフィールドメーカーには下記のような便利な機能が用意されています。

  • フィールドに対する「変換・入力チェック」用ソースコードの生成
  • 生成されたコードのプレビュー機能
  • フィールドの「出力用ソース」生成機能
  • 生成コードに対する管理画面用クラスの付与

フィールドに対する「変換・入力チェック」用ソースコードの生成

「変換・入力チェックを利用する」という項目にチェックを入れると、下の図のように変換と、入力チェックのためのフィールドが出現します。


はじめに、「変換」ですが、これを使うことで例えば「大文字」で登録されたアルファベットを「小文字」に変換したりするためのソースコードを生成可能です。「参照」と書かれたボタンを押していただくと下の図のようにモーダルウィンドウが現れますので、その中から変換したい項目を選択してください。変換のフィールドには複数の値を登録することも可能です。


つづいて「入力チェック」ですが、こちらは入力された値を指定した条件でチェックできます。もし条件に沿わない値が入力された場合、再度入力を促すことができます。 下の例は、あるフィールドに対して値が入力されていない場合に、「値を入力してください」というメッセージを表示する際のサンプルです。


その他にも、文字数チェックや、URLチェックなど様々な条件で値を判定することができます。「値」の欄には文字数チェックにおいて最大文字数を入れたり、正規表現マッチで、正規表現を入れたりする際に使用します。

生成されたコードのプレビュー機能

また、下の図のように、「入力用ソース」、「プレビュー」、「出力用ソース」と書かれたタブのあるボックスから、プレビューを選択していただくと、下の図のように実際に出力されたソースがどのような見た目になるのかを確認することができます。


フィールドの「出力用ソース」生成機能

これは、カスタムフィールドに入力された値の結果をテーブル形式で表示したい時に使用します。 例えばお問い合わせのフォームにて、入力された値をお客様に確認してもらうためのソースコードとして役にたちます。


生成コードに対する管理画面用クラスの付与

下の図のように、「acms-admin.cssを使用する」という項目にチェックを入れることで、a-blog cmsの管理画面で使用されているクラスが施されたソースコードを生成できます。 これにチェックを入れていないと、全くクラスの施されていないソースコードが生成されます。


デベロッパーサイトのカスタムフィールドメーカーを使用する

本デベロッパーサイトでもカスタムフィールドメーカーを使用することができます。
下の図のように、使い方はa-blog cmsに搭載されているカスタムフィールドメーカーと同じです。


本デベロッパーサイトのグローバルナビゲーションよりカスタムフィールドメーカーを選択すると移動できます。
是非サイト制作にお役立てください。



表示されていないカスタムフィールドの値を削除しないようにする

通常、エントリーデータの変更時にはカスタムフィールドの値は全て更新が行われます。そのエントリーに登録されているカスタムフィールドの値を全て削除したのちに、入力されている値を登録します。
例えば、新規エントリー登録時には、カスタムフィールドとしてTEL、FAXの項目にデータを入力して保存します。誤って編集時はカスタムフィールドのTEL、FAXの項目を記述しておらず、保存してしまいました。本来ならカスタムフィールドが無い状態で保存したため先ほど入力したTELとFAXの値は消えてしまいますが、下記の記述をするとカスタムフィールドの値が削除されないようになります。
エントリーのカスタムフィールドだけではなく、カテゴリーやブログのカスタムフィールドも同様に値を保持することができます。

全て削除してから登録するのではなく、画面に存在している値のみ上書きするには、下記の2行を入力・編集画面のformブロック内に記述します。

<input type="hidden" name="updateField" value="on" />
<input type="hidden" name="field[]" value="updateField" />

カスタムフィールドを検索に入らないようにする

キーワード検索やカスタムフィールド検索で、カスタムフィールドの値が検索に引っかからないように設定することができます。例えば、商品の値段をカスタムフィールドで登録しており、一般ユーザには商品の値段を表示したくないケース等に使うことができます。

例えば、カスタムフィールドがpriceの場合、name属性にprice:searchと設定し、value="0"とします。

<input type="text" name="price" value="{price}" />
<input type="hidden" name="field[]" value="price" />
<!-- 下を追加 -->
<input type="hidden" name="price:search" value="0">

カスタムフィールドをキーにしたエントリーの表示順設定

カスタムフィールドの検索を行ったときに、検索結果のエントリーを指定した順番に表示する方法を説明します。(※カスタムフィールド検索については「カスタムフィールドの検索」をご覧ください)

1. 検索対象になるエントリーを用意する

まずは検索対象になるエントリーを用意します。エントリーを作成し、エントリーのカスタムフィールドを追加します。 ここでは例として、「price」というフィールドを用意し、いくつかエントリーを登録しておきます。 /themes/使用中のテーマ/admin/entry/field.html というファイルを作成します。 以下のソースを、/themes/使用中のテーマ/admin/entry/field.html にエントリーのカスタムフィールドを記述します。

<table class="entryFormTable acms-admin-table-entry">
  <tr>
    <th>価格</th>
    <td>
        <input type="text" name="price" value="{price}" size="10" /> 円
        <input type="hidden" name="field[]" value="price" />
        <input type="hidden" name="price:c" value="n" />
        <input type="hidden" name="price:validator#digits" />
        <!-- BEGIN price:validator#digits -->
        <p class="acms-admin-error-text">数値を入力してください。</p>
        <!-- END price:validator#digits -->
    </td>
  </tr>
</table>

エントリーのカスタムフィールドが作成できたら、作成したカスタムフィールドに値を入力し、[作成]ボタンをクリックし保存します。これを数回繰り返し、いくつかエントリーを登録します。 これで検索対象になるエントリーが用意できました。

2. カスタムフィールドをキーにした検索フォームを作成する

手順1で作成したカスタムフィールドをキーにした検索フォームを作成します。以下のソースは、フィールド「price」をキーにして検索するフォームです。

21行目にて、tplを「/index.html」と指定しているので、/themes/使用中のテーマ/index.html に検索フォームを設置してください。

<!-- BEGIN_MODULE Field_Search -->
<table>
  <th>演算子検索</th>
  <td>
    <form action="" method="post" class="acms-form">
      <!-- 宣言 -->
      <input type="hidden" name="field[]" value="price" />
       
      <!-- 演算子 -->
      <input type="hidden" name="price@operator" value="lte" />
       
      <p>価格
        <select name="price">
        <option value="">上限なし</option>
        <option value="300"{price:selected#300}>300円以下</option>
        <option value="200"{price:selected#200}>200円以下</option>
        <option value="100"{price:selected#100}>100円以下</option>
        </select>
      </p>
      <p>
        <input type="hidden" name="tpl" value="/index.html" />
        <input type="hidden" name="cid" value="%{CID}" />
        <input type="hidden" name="bid" value="%{BID}" />
        <input type="submit" name="ACMS_POST_2GET" value="検索する" class="acms-btn" />
      </p>
    </form>
  </td>
</table><!-- END_MODULE Field_Search -->

これでカスタムフィールドの値をキーにして検索するフォームができました。

3. エントリーを表示する順番を設定する

検索結果のエントリーの表示順を設定をする方法は3つあります。

  • (A)モジュールまたはモジュールIDのコンフィグ [優先度:低]
  • (B)モジュールIDの引数設定 [優先度:中]
  • (C) input要素での指定 [優先度:高]

(A)モジュールまたはモジュールIDのコンフィグ [優先度:低]

検索結果のエントリー表示にはモジュールを使用します。その使用するモジュールのコンフィグの「表示順」の設定で、以下の4つの中から選択します。

  1. フィールド(昇順)
  2. フィールド(降順)
  3. 数値フィールド(昇順)
  4. 数値フィールド(降順)

※ カスタムフィールドを「数値」として扱いたい場合は「数値フィールド」を選択します。

※ フィールドと数値フィールドの違い … 数値フィールドの昇順にすると、3、20、100…のように数値として小さい値から順になりますが、フィールドの昇順の場合、数値ではなく「文字列」として扱われるため、100、20、3…のようにアルファベット順になります。アルファベット順の昇順の場合、1が2より先にくるためです。


表示順をフィールド(昇順)に設定する

Entry_Bodyの表示順設定


なお、モジュールIDを使って、検索内容を表示する場合は「フィールド」の引数にチェックをつけてください。チェックをつけることで、検索内容と一致するものが表示されます。


(スクリーンショット)

モジュールIDの設定には引数にチェックをつける


(B)モジュールIDの引数設定 [優先度:中]


検索結果のエントリー表示で使用しているモジュールIDの引数設定で、以下の4つの中から設定します。

表示順意味
field-ascフィールド(昇順)
field-descフィールド(降順)
intfield-asc数値フィールド(昇順)
intfield-desc数値フィールド(降順)

モジュールIDの引数設定の例


※ カスタムフィールドを数値として扱いたい場合は「intfield-asc」「intfield-desc」を使用します。


(C)input要素を使った指定 [優先度:高]

手順2で作成したフォームのsubmitボタンの記述部分に、表示順を指定する記述を追加します。この記述の情報はURLコンテキストに反映されるため、指定を反映させるにはモジュールIDの引数設定にチェックを入れてください

表示順を設定する記述

<input type="hidden" name="order" value="表示順" />
表示順意味
field-ascフィールド(昇順)
field-descフィールド(降順)
intfield-asc数値フィールド(昇順)
intfield-desc数値フィールド(降順)

今回の例では、価格は数値として扱い降順に表示する場合は、以下のような記述と設定になります。

<input type="hidden" name="order" value="intfield-desc" />
<input type="hidden" name="tpl" value="search" />
<input type="hidden" name="cid" value="%{CID}" />
<input type="hidden" name="bid" value="%{BID}" />
<input type="submit" name="ACMS_POST_2GET" value="検索する" class="acms-btn" />

モジュールIDの引数設定にチェックを入れる


表示順のチェックと表示順指定を両方設定した場合


引数設定の表示順で、表示順のチェックと表示順指定を両方設定すると、URLコンテキストに表示順の情報があるときにはURLコンテキストが優先され、URLコンテキストに表示順の情報がないときに、引数設定に入力した表示順が適用されます。


引数設定にチェックと表示順指定を両方入力した場合


以上で、エントリーをソート表示する検索フォームができました。


表示順設定の優先度について

先述の(A)〜(C)の3つの表示順設定が、(A)〜(C)いずれか1つではなく重複している場合は、優先度がより高いものが適用されます。

表示順の設定の使い分け

基本的には「(A)モジュールまたはモジュールIDのコンフィグ」で説明した設定で表示順 を設定します。1ページに複数の検索フォームがある場合で、それぞれのフォームによって検索結果の表示順を変えたいときは、「(B)モジュールIDの引数設定」 か、「(C)input要素を使った指定」で指定します。


購読者登録の項目を増やす、認証を行わないようにする

購読者登録機能のカスタマイズ方法について解説します。

  • 購読者登録の項目を増やす方法
  • 購読者登録のデフォルトユーザー権限を変える方法
  • 購読者登録後、送られてきたメールのURLをクリックしなくても認証できる方法

購読者登録機能を有効にしましょう

購読者登録機能を使うことで自由にユーザーを登録することができます。ショッピングや会員サイトなどで使われています。
購読者登録機能は管理画面にログインしていただきコンフィグ一覧 > 機能設定 に移動し「ユーザー登録:ユーザー登録の外部申請を受け付ける」にチェックをしてください。


ログイン中の投稿者には、自分が投稿したエントリーのみ表示するにチェック


購読者登録機能を有効にすると http://a-blog cms設置先/login/ にアクセスしたときに「新規の読者登録はこちら」というリンク先ができています。



購読者登録の項目を増やす方法


購読者登録の項目に名前とメールアドレスという項目があります。ここに項目を増やしていきましょう。項目はカスタムフィールドを使って増やすことができます。
購読者登録のテンプレートは /themes/system/login.html に記述されています。 /themes/system/login.html をご利用のテーマにコピーしましょう。
/themes/ご利用のテーマ/login.html

購読者登録はsubscribeブロック内にあります。ここに追加したい項目のカスタムフィールドを追加しましょう。
登録画面のスクリーンショットはデフォルトレイアウトのままですが、login.htmlにHTMLやCSSを追加することでレイアウトの調整も出来ると思います。オリジナルデザインのユーザー登録画面を作成してください。

<!-- BEGIN subscribe -->
<div class="acms-titleBox"><!-- BEGIN_MODULE Blog_Field --><!-- BEGIN_IF [{loginHeaderImage@path}/nem/] --><!-- BEGIN loginHeaderImage:veil --><img class="acms-loginHeaderImage" src="%{ARCHIVES_DIR}{loginHeaderImage@path}" alt="%{BLOG_NAME}"><!-- END loginHeaderImage:veil --><!-- ELSE --><img class="acms-loginHeaderImage" src="/images/ablogcms_login.gif" alt="a-blog cms">
<!-- END_IF --><!-- END_MODULE Blog_Field --></div>
<div class="acms-loginBox">
<div class="acms-siteImageText"><span class="acms-label" style="background-color:%{BLOG_THEME_COLOR};">%{BLOG_NAME}</span>&nbsp;<span class="acms-label">新規読者登録</span></div>
<!-- BEGIN sendMsg#before -->
<p class="acms-login-text">お名前とメールアドスを登録いただくと指定されたメールアドレスに確認メールが送信されます。メールの内容の従って登録をしてください。</p><!-- END sendMsg#before --><!-- BEGIN sendMsg#after -->
<p class="acms-alert acms-alert-info">入力されたメールアドレス宛に、確認用URLをパスワードを記載したメールを送信しました。</p><!-- END sendMsg#after -->

<label for="input-text-mail" class="validator-result-{name:validator#required} acms-alert acms-alert-danger">名前が入力されていません。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#required} acms-alert acms-alert-danger">メールアドレスが入力されていません。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#email} acms-alert acms-alert-danger">不正なメールアドレスです。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#doubleMail} acms-alert acms-alert-danger">すでに登録されているメールアドレスです。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#send} acms-alert acms-alert-danger">メールの送信に失敗しました。システムの設定に問題があります。システムの管理者にお問い合わせください。</label>

<div class="acms-form">
	<label class="acms-form-block acms-clear">名前</label>
	<input type="text" name="name" value="{name}" class="acms-form-large  acms-form-block validator-result-{name:validator#required} acms-sp-form-top" placeholder="" />
	<input type="hidden" name="user[]" value="name" />
	<input type="hidden" name="name:validator#required" />
	<label class="acms-form-block acms-clear">メールアドレス</label>
	<input type="text" name="mail" value="{mail}" class="acms-form-large  acms-form-block validator-result-{mail:validator#required} validator-result-{mail:validator#email} validator-result-{mail:validator#doubleMail} validator-result-{mail:validator#send} acms-sp-form-bottom" placeholder="" />
	<input type="hidden" name="user[]" value="mail" />
	<input type="hidden" name="mail:validator#required" />
	<input type="hidden" name="mail:validator#email" />
	<input type="hidden" name="mail:validator#doubleMail" />
</div>

<!-- BEGIN submit -->
<p class="loginAction">
	<button type="submit" class="acms-btn-admin acms-btn-admin-primary acms-btn-block acms-btn-large" name="ACMS_POST_Login_Subscribe">読者登録</button>
</p><!-- BEGIN_MODULE Touch_SnsLogin -->
<p class="acms-border"><span class="acms-borderText acms-login-text">もしくは</span></p>
<p class="acms-login-text">SNSアカウントで登録するとワンクリックでログインできます。</p>
<p class="loginAction acms-login-facebook acms-btn-snsloginContainer">
	<span class="acms-btn-snsimage acms-btn-snsimage-facebook">
		<span class="acms-icon acms-icon-facebook"></span>
	</span>
	<button type="submit" class="acms-btn-admin acms-btn-facebooklogin acms-btn-block acms-btn-large acms-btn-snslogin" name="ACMS_POST_Api_Facebook_OAuth_Login">読者登録</button>
</p>
<p class="loginAction acms-login-twitter acms-btn-snsloginContainer">
	<span class="acms-btn-snsimage acms-btn-snsimage-twitter">
		<span class="acms-icon acms-icon-twitter"></span>
	</span>
	<button type="submit" class="acms-btn-admin acms-btn-twitterlogin acms-btn-block acms-btn-large acms-btn-snslogin" name="ACMS_POST_Api_Twitter_OAuth_Login">読者登録</button>
</p>
<!-- END_MODULE Touch_SnsLogin -->
<input type="hidden" name="type" value="signup" />
<!-- END submit -->
<p class="loginLink">
	<a href="/login/">ログイン画面に戻る</a>
</p>
</div>
<!-- END subscribe -->

今回は会社名と好きな果物の項目を追加しました。
他にも電話番号、住所、職種、性別など必要な項目を増やしてください。

<label class="acms-form-block acms-clear">会社名</label>
<input type="text" name="company" value="{company}" class="acms-form-large  acms-form-block" />
<input type="hidden" name="field[]" value="company" />
<label class="acms-form-block acms-clear">好きな果物 :</label>
<select class="formSelect" name="fruit">
	<option value="" selected="selected">選択してください</option>
	<option value="りんご"{fruit:selected#りんご}>りんご</option>	
	<option value="ぶどう"{fruit:selected#ぶどう}>ぶどう</option>
	<option value="みかん"{fruit:selected#みかん}>みかん</option>
</select>
<input type="hidden" name="field[]" value="fruit" />


読者登録申請 メールのテンプレートに項目を追加する

購読者登録すると申請メールが届きます。このメールのテンプレートに先ほど追加した「会社名」と「好きな果物」の項目を記述してください。
メールのテンプレートはsystemテーマにあるのでご利用のテーマにコピーしてきてください。
/themes/system/mail/subscribe/subject.txt
/themes/system/mail/subscribe/body.txt
/themes/system/mail/subscribe/adminSubject.txt
/themes/system/mail/subscribe/adminBody.txt

ご利用のテーマ内にコピーしてきたbody.txtとadminBody.txtを開いて、「会社名」と「好きな果物」の項目を追加します。
/themes/ご利用のテーマ/mail/subscribe/body.txt
/themes/ご利用のテーマ/mail/subscribe/adminBody.txt

読者登録の申請を行いました。

名前 : {name}
パスワード : {pass}
会社名 : {company}
好きな果物 : {fruit}

以下のリンクをクリックし、メールアドレス、パスワードを入力してログインして下さい。
{subscribeUrl}[raw]

ユーザー管理画面のテンプレートに項目を追加する

次にユーザー管理画面にも「会社名」と「好きな果物」の項目を追加していきましょう。
ご利用のテーマのadminフォルダ内にuserフォルダを作成してください。その中にfield.htmlファイルを作りましょう。
/themes/ご利用のテーマ/admin/user/field.html

<table class="adminTable acms-table-admin-edit">
	<tr>
		<th>会社名</th>
		<td>
			<input type="text" name="company" value="{company}" />
			<input type="hidden" name="field[]" value="company" />
		</td>
	</tr>
	<tr>
		<th>好きな果物</th>
		<td>
			<select name="fluit">
				<option value=""></option>
				<option value="りんご"{fluit:selected#りんご}>りんご</option>
				<option value="ぶどう"{fluit:selected#ぶどう}>ぶどう</option>
				<option value="みかん"{fluit:selected#みかん}>みかん</option>
			</select>
			<input type="hidden" name="field[]" value="fluit" />
		</td>
	</tr>
</table>

実際に登録して、ユーザーの管理画面で確認してみましょう。
新しく追加した「会社名」と「好きな果物」が追加されています。



購読者登録のデフォルトユーザー権限を変える方法

購読者登録ですがVer.1.6.0からユーザー登録した人の権限を購読者だけでなく「投稿者」「編集者」を設定できるようになりました。投稿者を購読者登録画面から申請することができます。
※この機能はスタンダードライセンスだとユーザー数は基本5userまでなので、無制限ユーザー追加オプションやプロフェッショナル/エンタープライズ版を利用している方におすすめします。

この機能の設定は管理画面 コンフィグ > 機能設定の「外部申請時の権限」にあります。ここに申請されたときデフォルトで作成されるユーザーの権限を選択してください。



購読者登録後、送られてきたメールのURLをクリックしなくても認証できる方法

購読者登録は申請するとメールアドレスとパスワードの書いてあるメールのが届き、そのURLからログイン画面でメールアドレスとパスワードを入れることで初めてユーザー登録が完了します。
この機能を使うことで購読者登録を申請するだけでユーザー登録ができます。
管理画面 コンフィグ一覧 > 機能設定の「外部申請時のアクティベーション:メールアドレスの有効性とパスワード認証を行わない」にチェックをすると申請確認メールのメールアドレスとパスワードをクリックしなくてもユーザー登録ができるようになります。