カスタムフィールド

目次

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

カスタムフィールドとは

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

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

カスタムフィールドはフォームタグのように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(カスタムフィールド変数名:type)

<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 -->pickupされています<!-- 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="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>
      <input type="hidden" name="bfd_field_unit_image@old[{i}]" value="{bfd_field_unit_image@path}" />
    </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属性が記述されている要素が、順番を変更する時に「つかむ(ドラッグする)」部分になります。js-fieldgroup-sortable内で使用可能です。

item-delete

このclass属性が記述されている要素で、該当するカスタムフィールドグループが削除できます。js-fieldgroup-sortable内で使用可能です。

item-max

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

<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 -->


上記のような bfd_field_unit_group:loop のブロック中に変数を書くことで複数件のデータを表示させるのがカスタムフィールドグループの利用としては一般的ですが、ループさせずに 2番目だけ 表示させたいという場合には、{bfd_field_unit_lead[1]} のような記述でも「小見出し2です」を表示させることが可能です。(配列の添字は 0 から始まります)

カスタムフィールドメーカーの使い方

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


カスタムフィールドメーカーのメニュー

カスタムフィールドメーカーのメニュー


カスタムフィールドメーカーではカスタムフィールドを毎回どこからからコピペして書き換えたりしなくてもラベルや値、サイズなど入力していくだけカスタムフィールドの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に搭載されているカスタムフィールドメーカーと同じです。


developerサイトのカスタムフィールドメーカー

developerサイトのカスタムフィールドメーカー


本デベロッパーサイトのドキュメントページの、リファレンスのカスタムフィールドメーカーを選択すると移動することができます。是非サイト政策にお役立てください。


カスタムフィールドメーカの場所

カスタムフィールドメーカの場所

テキスト入力にインラインエディターを使用する

すでにテキストユニットに導入されているインラインエディタですが、このインターフェースはカスタマイズ次第でブログやカテゴリー、エントリーなどのカスタムフィールドとしても利用可能です。ここではその方法について、登録側(管理画面)と表示側に分けてご紹介します。

管理画面の記述

以下が、インラインエディターが実装された、カスタムフィールドのサンプルHTMLになります。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>インラインエディター</th>
    <td>
      <textarea name="sample_text" class="js-lite-editor-field acms-admin-form-width-full">{sample_text}</textarea>
      <input type="hidden" name="field[]" value="sample_text" />
    </td>
  </tr>
</table>

表示側の記述

表示したいインラインエディターの変数がsample_textであった場合、以下のように記述します。エントリーのカスタムフィールドで作成した場合はEntry系モジュールのentry:loop内に記述してください。校正せず、そのままのデータを出力する校正オプション[raw]を記述してください。

{sample_text}[raw]

ボタンの位置、クラス名、ボタンのオプションの変更

テキストユニットで導入されているインラインエディターとはオプションの指定方法が異なります。
a-blog cms Ver.2.11.40 の時点で LiteEditorFieldConf の設定がデフォルトで空になっているため、カスタムフィールドでLiteEditorを使用する場合は適用しているテーマ内にJavaScriptファイルを別途作成して設定ください。
ACMS.Config.LiteEditorFieldConf.xxxという記述で設定を下記のように適用します。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorFieldConf.btnPosition = 'bottom';
  ACMS.Config.LiteEditorFieldConf.classNames = {
    LiteEditor: 'entryFormLiteEditor',
    LiteEditorBtnGroup: 'acms-admin-btn-group acms-admin-btn-group-inline',
    LiteEditorBtn: 'acms-admin-btn',
    LiteEditorBtnActive: 'acms-admin-btn acms-admin-btn-active',
    LiteEditorBtnClose: '',
    LiteEditorTooltipInput: 'acms-admin-form-width-full'
  };
  ACMS.Config.LiteEditorFieldConf.btnOptions = [
   { label: 'リンク', tag: 'a', className: '', sampleText: 'リンクテキスト' },
   { label: '強調', tag: 'em', className: '', sampleText: ' ' },
   { label: '重要', tag: 'strong', className: '', sampleText: ' ' }
  ];
});

LiteEditorのデフォルトボタンをそのまま維持したい場合はbtnOptionsを下記のように指定します。

ACMS.Config.LiteEditorFieldConf.btnOptions = [
  { label: '<span class="lite-editor-font-back"></span>', action: 'undo', group: 'action' },
  { label: '<span class="lite-editor-font-go"></span>', action: 'redo', group: 'action' },
  { label: '<span class="lite-editor-font-link"></span>', tag: 'a', className: '', group: 'mark' },
  { label: '<span class="lite-editor-font-bold"></span>', tag: 'strong', className: '', group: 'mark' },
  { label: '<span class="lite-editor-font-italic"></span>', tag: 'i', className: '', group: 'mark' },
  { label: '<span class="lite-editor-font-underline"></span>', tag: 'u', className: '', group: 'mark' }
];

リッチエディターを使用する

Ver.2.11.0 から使えるようになったリッチエディターユニットですが、下の図のように、このインターフェースはカスタマイズ次第でブログやカテゴリー、エントリーのカスタムフィールドとしても利用可能です。ここではその方法について、登録側(管理画面)と表示側に分けてご紹介します。


登録側(管理画面)の記述

以下が、リッチエディターが実装された、カスタムフィールドのサンプルHTMLになります。js-expandやjs-expand-btnと記述された部分は要素を全画面表示するための記述で本来リッチエディターとは関係ありませんが、編集領域が狭い場合などに有効です。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>リッチエディター</th>
    <td>
      <div class="js-expand js-acms-expand">
        <div class="js-acms-expand-inner">
          <button class="js-expand-btn js-acms-expand-btn" type="button">
            <i class="acms-admin-icon acms-admin-icon-expand-arrow js-expand-icon"></i>
          </button>
          <div class="js-smartblock" data-heading-start="2" data-heading-end="3">
            <div class="js-smartblock-edit"></div>
            <input type="hidden" class="js-smartblock-body" name="rich" value="{rich@html}" />
            <input type="hidden" name="field[]" value="rich" />
            <input type="hidden" name="rich:extension" value="rich-editor" />
          </div>
        </div>
      </div>
    </td>
  </tr>
</table>

表側の記述

表示したいテーブルが、{rich} という変数の場合は以下のように記述します。エントリーのカスタムフィールドで作成した場合はEntry系モジュールのentry:loop内に記述してください。変数名そのままではなく、{rich@html}と記述して表示しないといけない点にご注意ください。

{rich@html}

なおこれら一連のソースコードは、カスタムフィールドメーカーからも生成できるようになっています。


カスタムフィールドメーカー

テーブル用の入力インターフェースを使用する

Ver.2.7.0 から使えるようになったテーブルユニットですが、下の図のように、このインターフェースはカスタマイズ次第でブログやカテゴリー、エントリーのカスタムフィールドとしても利用可能です。ここではその方法について、登録側(管理画面)と表示側に分けてご紹介します。



登録側(管理画面)の記述

以下が、テーブル編集のインターフェースが実装された、カスタムフィールドのサンプルHTMLになります。 IFブロックのELSEの方の記述に、まだカスタムフィールドが保存されていない場合、初期状態で表示したいテーブルのHTMLを記述します。

<div class="js-editable-table-field" style="background-color:#eee;padding:10px;">
  <div class="js-editable-table">
    <!-- BEGIN_IF [{table}[delnl]/nem] -->
    {table}[raw]
    <!-- ELSE -->
    <table>
      <tr>
        <th>サンプル</th>
        <th>サンプル</th>
	  </tr>
      <tr>
        <td>サンプル</td>
        <td>サンプル</td>
      </tr>
    </table>
    <!-- END_IF -->
    <input type="hidden" class="js-editable-table-dest" value="{table}" name="table">
    <input type="hidden" name="field[]" value="table">
  </div>
</div>

表側の記述

表示したいテーブルが、{table} という変数の場合は以下のように記述します。エントリーのカスタムフィールドで作成した場合はEntry系モジュールのentry:loop内に記述してください。 また、HTMLをそのまま出力したいので校正オプションである[raw]をつける必要があります。ご注意ください。

{table}[raw]

WYSIWYGエディター(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>

メディアを使用する

メディアを利用したカスタムフィールドとは

Ver.2.10からメディアを利用したカスタムフィールドを作れるようになりました。メディアのカスタムフィールドを使うとメディア管理に登録されている画像やファイルをカスタムフィールドとして登録することができます。

a-blog cmsに標準で梱包されているsiteテーマにもブログのカスタムフィールドにメディアのカスタムフィールドが組み込まれています。


メディア選択

「メディア選択」をクリックするとメディア一覧から画像もしくはファイルを選択するモーダルウィンドウが出現します。


メディアアップロード

またカスタムフィールドより「アップロード」ボタンをクリックするとそこから新たにメディアを登録するためのモーダルウィンドウが出現します。


メディアのカスタムフィールドからもメディアユニットのように複数ファイルアップロード可能ですが、カスタムフィールドとして登録されるファイルは初めの一個だけになります。

メディア編集

また「メディア編集ボタン」をクリックすることで、メディアのカスタムフィールドから直接登録されたメディアを編集することができます。ただし、このメディアが他の場所でも使われている可能性があるので十分注意して編集してください。


メディア削除

また、カスタムフィールドに登録してあるメディアは「削除」ボタンをクリックすることでカスタムフィールドへの登録を解除できます。メディアに登録されたファイルは削除されません。

カスタムフィールドの記述方法

メディアのカスタムフィールドは簡単なHTMLを記述するだけで作成可能です。下はメディアのカスタムフィールドのサンプルコードになります。

<tr class="js-media-field">
  <th>サイト ロゴ
    <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="サイトのロゴ画像を設定します。"></i>
  </th>
  <td>
    <div>
      <!-- BEGIN_IF [{site_logo@thumbnail}/nem] -->
      <img src="{site_logo@thumbnail}" class="acms-admin-img-responsive js-preview" alt="{site_logo@alt}" />
      <!-- ELSE -->
      <img src="" style="display:none" class="acms-admin-img-responsive js-preview" />
      <!-- END_IF -->
    </div>
    <div class="acms-admin-margin-top-mini">
      <button type="button" class="js-insert acms-admin-btn">メディア選択</button>
      <button type="button" class="js-insert acms-admin-btn" data-mode="upload">アップロード</button>
      <button type="button" class="js-edit acms-admin-btn">メディア編集</button>
      <button type="button" class="js-remove acms-admin-btn acms-admin-btn-danger">削除</button>
    </div>
    <input type="hidden" name="site_logo" value="{site_logo}" class="js-value" />
    <input type="hidden" name="field[]" value="site_logo" />
    <input type="hidden" name="site_logo:extension" value="media" />
  </td>
</tr>

メディアのカスタムフィールドを利用したい領域に js-media-field というクラスを追加します。その後その領域内で、メディア選択ボタンには、js-insert、メディア編集ボタンにはjs-edit、削除ボタンにはjs-removeというクラスを付与します。またメディアの選択結果をプレビューしたい場合はimg要素に js-previewというクラスを付与します。アップロードボタンも選択ボタンと同じく、js-insertクラスを付与しますが、data-mode属性をuploadにする必要があります。さらに、アップロードしたい画像のタイプを制限したい場合は、data-type属性を利用します。data-type="image"にすると画像のみアップロード可能に、また、data-type="file"とするとファイルのみアップロード可能になります。

カスタムフィールドメーカーの利用

Ver.2.10よりカスタムフィールドメーカーからメディア用のカスタムフィールドもHTML出力できるようになっています。記述量が多いのでこちらで設定する方が間違いが少ないのでオススメです。


こちらのカスタムフィールドメーカーはdeveloperサイトからもご利用いただけます。

ファイルをアップロードする

ファイルをアップロードするカスタムフィールドついて詳しく説明します。
以下で説明しているファイルのカスタムフィールドは、ソースコードの生成はカスタムフィールドメーカーで簡単に作成できます。

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

例)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属性に拡張子を記述します。ここで指定した種類のファイルのみアップロードできます。拡張子は1つのみ指定可能です。
指定していない場合はコンフィグの設定が適用されます。

<input type="hidden" name="フィールド名@extension" value="pdf" />
拡張子を複数指定したい

拡張子を複数指定してユーザーに入力のヒントを提示したい場合は、HTMLのaccept属性を使用することを推奨しています。

以下の例では、.pdf、.docx、.docの拡張子を許可しています。ユーザーは指定された拡張子のファイルのみ選択できるようになります。 <input type="file" name="フィールド名" accept=".pdf,.docx,.doc" />

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

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

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

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

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


ファイル名をランダムにするには

valueの値を空欄にすることでランダムになります

<input type="hidden" name="pdffile@filename" value="" />
ファイル名をアップロードされたファイル名のままにするには

valueの値を"@rawfilename"にすることでそのままになります

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

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

例)「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ファイルの表示

画像をアップロードする

画像をアップロードするカスタムフィールドついて詳しく説明します。
以下で説明しているファイルのカスタムフィールドは、ソースコードの生成はカスタムフィールドメーカーで簡単に作成できます。

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

例)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" />

各記述の説明

3行目:アップロードした画像の表示【必須】

標準サイズ:normal / 画像(小):tiny / 画像(大):large 正方形サイズ(v.1.5.0より追加):square / 画像(正方形)

例)各画像サイズの記述例

<!-- BEGIN フィールド名@normal:veil --><img src="%{ARCHIVES_DIR}{フィールド名@path}" width="{フィールド名@x}" height="{フィールド名@y}" alt="{フィールド名@alt}" /><!-- END フィールド名@normal:veil --><br />
<!-- BEGIN フィールド名@tiny:veil --><img src="%{ARCHIVES_DIR}{フィールド名@tinyPath}" width="{フィールド名@tinyX}" height="{フィールド名@tinyY}" alt="{フィールド名@tinyAlt}" /><!-- END フィールド名@tiny:veil --><br />
<!-- BEGIN フィールド名@large:veil --><img src="%{ARCHIVES_DIR}{フィールド名@largePath}" width="{フィールド名@largeX}" height="{フィールド名@largeY}" alt="{フィールド名@largeAlt}" /><!-- END フィールド名@large:veil --><br />
<!-- BEGIN フィールド名@square:veil --><img src="%{ARCHIVES_DIR}{フィールド名@squarePath}" width="{フィールド名@squareX}" height="{フィールド名@squareY}" alt="{フィールド名@squareAlt}" /><!-- END フィールド名@square:veil --><br />

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

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

6〜9行目:アップロードしてある画像を削除する記述【任意】

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

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

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

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

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

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

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

14行目:altの指定【任意】

<input type="text" name="フィールド名@alt" value="{フィールド名@alt}" />

15行目:アップロードする画像の拡張子を指定【任意】

拡張子を指定し、画像の形式も自働的に変換されます。

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

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

カスタムフィールドからアップロードされた画像は、/archives/bid/内に格納されます。(その他の場所にはアップロードできません。)

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

17行目:アップロードする画像の大きさを指定【任意】

幅(width)と高さ(height)を指定します。幅と高さどちらかを指定すると指定した大きさを元に縦横比に合わせて画像がリサイズされます。「size」は画像の長辺を指定します。

<input type="hidden" name="フィールド名@width" value="画像の幅の数値" />
<input type="hidden" name="フィールド名@height" value="画像の高さの数値" />
<input type="hidden" name="フィールド名@size" value="画像の長辺の数値" />

画像(小)と(大)と(正方形)の大きさを指定することもできます。指定した場合にのみ、画像(小)と(大)と(正方形)の画像が作成されます。 ※正方形画像はv.1.5.0から使用できる機能です。

画像(小)の場合
tinyWidth, tinyHeight, tinySize
画像(大)の場合
largeWidth, largeHeight, largeSize
画像(正方形)の場合
squareWidth, squareHeight, squareSize

例)各画像サイズの記述例

<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="画像(正方形)の長辺の数値" />

※Widthでは横の長さを、Heightでは縦の長さを、Sizeでは長辺を基準にして指定することができます。

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

a-blog cmsの組み込みJSを使えば、下の図のようなOpenStreetMapのインターフェースを使って、緯度・経度・ズームの値をカスタムフィールドとして登録することができます。ここではその方法について、登録側(管理画面)と表示側に分けてご紹介します。



登録側(管理画面)の記述

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

<table class="entryFormTable acms-table-entry">
  <tr class="js-open-street-map-editable">
    <th>地図</th>
    <td>
	<div class="acms-form-group">
	  <input type="text" name="" value="" class="js-osm-search" size="40" />
	  <input type="button" name="" value="検索" class="js-osm-search-btn acms-admin-btn"  />
	</div>
	<div class="acms-form-group">
	  <div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>
	</div>
	<div class="acms-form-group">
	  緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-osm-lat" />
	  経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-osm-lng" />
	  ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-osm-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>

記述の説明

まず、js-open-street-map-editableというクラスでOpenStreetMapのインターフェースを適応したいエリア全体に記述してください。

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

次に以下のようにjs-open-street-map-pickerというクラスをdivなどの要素に記述することによってピン付きのマップを表示することができます。

<div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>

緯度・経度・ズームの値を入力箇所は以下のように記述します。緯度のフィールドにはjs-osm-latを、経度の情報にはjs-osm-lng、ズーム値のフィールドにはjs-osm-zoomを記述してください。そうすることで、OpenStreetMapのピンの位置とフィールドの値を紐づけることができます。

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

また、下のようなHTMLを記述すれば、スポットの位置を住所やスポット名で検索するための入力エリアを作ることもできますが、検索の精度はそれほどよくないので、検索結果の緯度経度が実際のものとずれている場合もあります。その場合は手動でピンを動かして緯度経度を設定してください。

<input type="text" name="" value="" class="js-osm-search" />
<input type="button" name="" value="検索" class="js-osm-search-btn acms-btn-admin" />

表側の記述

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

<div class="js-open-street-map" data-lat="{mapLat}" data-lng="{mapLng}" data-zoom="{mapZoom}" style="width: 100%; height: 300px;"></div>

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">
        <!-- BEGIN_IF [{mapLat}/em] -->
        緯度 <input type="text" name="mapLat" value="35.185574" size="9" class="js-map_editable-lat" />
        経度 <input type="text" name="mapLng" value="136.899066" size="10" class="js-map_editable-lng" />
        ズーム <input type="text" name="mapZoom" value="10" size="10" class="js-map_editable-zoom" />
        <!-- ELSE -->
        緯度 <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" />
        <!-- END_IF -->
      </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="https://maps.googleapis.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=400x300&maptype=roadmap&markers=35.185574,136.899066&sensor=false&key=%{GOOGLE_API_KEY}" width="400" height="300" style="display:block;" />

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

<!-- BEGIN_IF [{mapLat}/em] -->
緯度 <input type="text" name="mapLat" value="35.185574" size="9" class="js-map_editable-lat" />
経度 <input type="text" name="mapLng" value="136.899066" size="10" class="js-map_editable-lng" />
ズーム <input type="text" name="mapZoom" value="10" size="10" class="js-map_editable-zoom" />
<!-- ELSE -->
緯度 <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" />
<!-- END_IF -->

テンプレートに表示する

単一で表示する

緯度が {mapLat}、経度が {mapLng}、ズームが {mapZoom} という変数の場合は以下のように記述します(ここでは説明しやすいように具体的な変数名を使用しますが、実際の変数名は任意です)。エントリーのカスタムフィールドで作成した場合はEntry系モジュールのentry:loop内に記述してください。

<img class="js-s2d-ready" src="https://maps.googleapis.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;" />

一覧ページで複数のピンを表示する

エントリーのカスタムフィールドで緯度を{map_lat}、経度が{map_lng}、カテゴリーのカスタムフィールドで緯度を{index_map_lat}、経度を{index_map_lng}、ズームを{index_map_zoom}を指定している例です。

下記の例では、それぞれmarkersとalt属性にEntry_Summaryを使うことで複数ピンの表示と、ピンをクリックした後の吹き出しを表示しています。

<!-- BEGIN_MODULE Category_Field -->
<div>
<!-- BEGIN_MODULE Entry_Summary id="summary_map" -->
  <!-- BEGIN_SetRendered id="map-markers" -->
  <!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->{map_lat},{map_lng}<!-- BEGIN glue -->|<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->
  <!-- END_SetRendered -->

  <!-- BEGIN_SetRendered id="map-messages" -->
  <!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;a href=&quot;{url}&quot;&gt;&lt;!-- BEGIN image:veil --&gt;&lt;img src=&quot;%{MEDIA_ARCHIVES_DIR}{main_photo@path}&quot; width=&quot;200&quot; alt=&quot;&quot; /&gt;&lt;br/&gt;&lt;!-- END image:veil --&gt;{title}&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<!-- BEGIN glue -->[[:split:]]<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->
  <!-- END_SetRendered -->
<!-- END_MODULE Entry_Summary -->

<img class="js-s2d-ready" src="http://maps.google.com/maps/api/staticmap?center={index_map_lat},{index_map_lng}&zoom={index_map_zoom}&size=820x400&maptype=roadmap&markers=<!-- GET_Rendered id="map-markers" trim="1" -->&sensor=false" alt="<!-- GET_Rendered id="map-messages" trim="1" -->" width="820" height="400" style="display:block;" />
</div>
<!-- BEGIN_MODULE Touch_SessionWithCompilation --> <p class="edit-link">[<a href="%{BLOG_URL}bid/%{BID}/cid/%{CID}/admin/category_edit/">編集</a>]</p><!-- END_MODULE Touch_SessionWithCompilation -->
<!-- END_MODULE Category_Field -->

ストリートビューを利用する

a-blog cms Ver.2.11よりGoogle Mapユニットでストリートビューが利用できるようになりました。それに伴いカスタムフィールドでもストリートビューの表示位置を調整して表示することができるようになりました。 以下はストリートビューを使ったカスタムフィールドのイメージです。


以下はストリートビュー対応した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">
        <!-- BEGIN_IF [{mapLat}/em]-->
        <img class="js-map_editable-container"
          src="//maps.google.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=400x400&maptype=roadmap&markers=35.185574,136.899066&key=%{GOOGLE_API_KEY}"
          width="400" height="300" style="display:block;" />
        <!-- ELSE -->
        <img class="js-map_editable-container"
          src="//maps.google.com/maps/api/staticmap?center={mapLat},{mapLng}&zoom={zoom}&size=400x400&maptype=roadmap&markers={mapLat},{mapLng}&key=%{GOOGLE_API_KEY}"
          width="400" height="300" style="display:block;" />
        <!-- END_IF -->
        <div class="js-map_editable-panorama" style="width: 100%; height: 600px; display: none;"></div>
      </div>
      <div class="acms-form-group" style="margin-bottom: 10px; margin-top: 10px;">
        <!-- BEGIN_IF [{mapLat}/em] -->
        緯度 <input type="text" name="mapLat" value="35.185574" size="9" class="js-map_editable-lat" />
        経度 <input type="text" name="mapLng" value="136.899066" size="10" class="js-map_editable-lng" />
        ズーム <input type="text" name="mapZoom" value="10" size="10" class="js-map_editable-zoom" />
        <!-- ELSE -->
        緯度 <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" /> -->
        <!-- END_IF -->

      </div>
      <input type="hidden" name="field[]" value="mapLat" />
      <input type="hidden" name="field[]" value="mapLng" />
      <input type="hidden" name="field[]" value="mapZoom" />
      <input type="hidden" name="field[]" value="viewZoom" />
      <input type="hidden" name="field[]" value="viewHeading" />
      <input type="hidden" name="field[]" value="viewPitch" />
      <div class="acms-admin-form-checkbox">
        <input type="checkbox" id="viewActivate" name="viewActivate" value="true" class='js-map_editable-activate' />
        <label for="viewActivate">
          <i class="acms-admin-ico-checkbox"></i>ストリートビューを利用する
        </label>
      </div>
      <div>
        ズーム <input type="text" name="viewZoom" value="{viewZoom}" size="9" class="js-map_editable-zoom-view" />
        方向 <input type="text" name="viewHeading" value="{viewHeading}" size="10" class="js-map_editable-heading" />
        ピッチ <input type="text" name="viewPitch" value="{viewPitch}" size="10" class="js-map_editable-pitch" />
      </div>
    </td>
  </tr>
</table>

ストリートビューの表示

また登録したストリートビューは以下のように表示できます。

<div class="js-street-view column-street-view-inner" data-lazy="true" data-lat="{mapLat}" data-lng="{mapLng}" data-pitch="{viewPitch}" data-zoom="{viewZoom}" data-heading="{viewHeading}"></div>

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

検索と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検索)エントリーが表示されます。

※注意:同じフィールドの値でAND検索は利用できません。

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>
</form>
<!-- END_MODULE Field_Search -->

演算子部分の記述

<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検索とOR検索ですが、混ぜて使うことは出来ません。ただし AND -> 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 を設定する事により、設定できるようになります。

カスタムフィールドのデータを検索の対象外にする

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

例えば、カスタムフィールドが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の設定には引数にチェックをつける

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


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


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

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

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

モジュール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の引数設定にチェックを入れる

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


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


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


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

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


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


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

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

表示順の設定の使い分け

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

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

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

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

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

読者登録機能のカスタマイズ

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

  • 読者登録の項目を増やす方法
  • 読者登録時のデフォルトユーザー権限を変える方法
  • 読者登録後、送られてきたメールの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からログイン画面でメールアドレスとパスワードを入れることで初めてユーザー登録が完了します。
この機能を使うことで読者登録を申請するだけでユーザー登録ができます。
管理画面 コンフィグ一覧 > ログイン設定 のページ内、読者登録機能の「メールアドレスの有効性確認:メールアドレスの有効性とパスワード認証を行わない」にチェックをすると申請確認メールのメールアドレスとパスワードをクリックしなくてもユーザー登録ができるようになります。


「メールアドレスの有効性確認:メールアドレスの有効性とパスワード認証を行わない」にチェックをする

「メールアドレスの有効性確認:メールアドレスの有効性とパスワード認証を行わない」にチェックをする