一つのフィールドで複数のエラーを検知したい場合があります。例えば以下のように、必須だけではなく、数値のみ許可したり、最大数値を設定したりです。

• 必須
• 数値のみ許可
• 100以下の数値を許可

今ままでのエラー表記

ここまでで紹介したエラー表記の仕方は、以下のようなコードでした。

<input type="text" name="age" value="{age}">
<input type="hidden" name="field[]" value="age">
<input type="hidden" name="age:validator#required"> <!-- 必須チェック -->
<input type="hidden" name="age:validator#digits"> <!-- 数値チェック -->
<input type="hidden" name="age:validator#max" value="100"> <!-- 最大数チェック -->

<!-- BEGIN age:validator --><p class="notice">年齢が入力されていないか、数値（100以下）が入力されていません。</p><!-- END age:validator -->

間違ってはいませんが、どのエラーにひっかかっているのか判りにくいです。

エラーにあわせてメッセージを変える

<input type="text" name="age" value="{age}">
<input type="hidden" name="field[]" value="age">
<input type="hidden" name="age:validator#required"> <!-- 必須チェック -->
<input type="hidden" name="age:validator#digits"> <!-- 数値チェック -->
<input type="hidden" name="age:validator#max" value="100"> <!-- 最大数チェック -->

<!-- BEGIN age:validator#required -->
<p class="notice">年齢を入力してください。</p><!-- END age:validator#required --><!-- BEGIN age:validator#digits -->
<p class="notice">年齢には数値を入力してください。</p><!-- END age:validator#digits -->><!-- BEGIN age:validator#max -->
<p class="notice">年齢には100以下の数値を入力してください。</p><!-- END age:validator#max -->

エラーメッセージが分岐され必要なメッセージだけが出力されるようになりました。

このようにエラーメッセージ用のブロックを書き換える事で、複数のバリデーターを設定した場合のエラーで、別々のメッセージを表示させることができます。

<!-- BEGIN [対象の項目名]:validator#[オプション名] --><p>[エラーメッセージ]</p><!-- BEGIN [対象の項目名]:validator#[オプション名] -->

特殊なエラーメッセージ

フォームでファイルをアップロードする時に upload_max_filesize を超えた場合、POSTが空になるのでフィールド毎にエラーは出せない。 なので以下の記述で全体のエラーメッセージを出力。

<!-- BEGIN post:v#filesize -->リクエストサイズが大きすぎます<!-- END post:v#filesize -->

このハンズオンでは外部コンテキスト挿入機能（ctx）とエントリーのカスタムフィールドを使用してカテゴリー分けをする方法を紹介しています。

通常ではa-blog cmsの標準のカテゴリー設定でカテゴリー分けを行いますが、カスタムフィールドを使うことでURLコンテキストに依存せずにカテゴリーを分けることができます。このカスタマイズではカスタムフィールドでカテゴリーを分け、カテゴリーエントリーリストのように外部コンテキスト挿入機能を使い表示するまでの方法をご紹介します。

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

デフォルトで入っているカテゴリーを参考にカスタムフィールドメーカーでカスタムフィールドを作成します。

値（value）は見出しとしても使用するため項目名と合わせ日本語にしておきましょう。

作成したら、ソースコードをコピーしましょう。

次に、/themes/site2018/admin/entry/field.html に貼り付けます。 貼り付け後、エントリーの編集画面を開くとセレクトメニューが表示さているのでカテゴリーに合わせていくつかエントリーに設定をしておきましょう。

モジュールIDの作成

先ほど作成したカスタムフィールド（ID：CF_category）を表示するため、「フィールドバリューリスト（Field_ValueList）」のモジュールIDを作成します。

引数のフィールド（field）の部分に「CF_category/nem」を記入します。 上記のように指定することで「CF_category」というフィールドの値だけを出力することができます。 また、「/nem」という記述がないと正確にフィールドが絞り込まれませんので注意が必要です。

「nem」についての参考：カスタムフィールドの検索

テンプレートの編集

実際にカテゴリーエントリーリストのようにエントリーをカテゴリー別にリスト表示させてみましょう。 使用するモジュールは下記の2つです。

フィールドバリューリスト（Field_ValueList）の設置

フィールドバリューリストのスニペットではセレクトメニューで出力されるようになっていますが、今回は見出しとして出力したいため<!-- BEGIN value:loop --> ~ <!-- END value:loop -->の修正が必要です。 下記のソースを/themes/site2018/top.htmlの確認用テンプレートの上あたりに設置します。

<!-- BEGIN_MODULE Field_ValueList id="field_value_category" -->
  <!-- BEGIN value:loop -->
    <div class="module-header clearfix">
      <h2 id="summary_default-top_summary" class="module-heading">{value}</h2>
    </div>
  <!-- END value:loop -->
<!-- END_MODULE Field_ValueList -->

エントリーリスト（Entry_List）の設置

エントリーリストはフィールドバリューリスト内に設置します。 そのためモジュールのエスケープの作業が必要になります。 エスケープメーカーが用意されていますので、テキストエリアにスニペットを貼り付け「エスケープ」を一度クリックし、「クリップボードにコピー」をクリックします。これでモジュールのエスケープとコピーができました。

コピーしたスニペットを.module-headerのclass属性のついたdiv要素の後に貼り付けます。 このままだと、まだフィールドで絞り込まれておらずただのエントリーリストとなってしまうため外部コンテキスト挿入機能（ctx）を使用してフィールドで絞り込みましょう。

<!-- BEGIN_MODULE\ Entry_List ctx="field/CF_category/eq/{value}" -->
~~~~~略~~~~~
<!-- END_MODULE\ Entry_List -->

モジュールの開始部分にctx="field/CF_category/eq/{value}"を追加します。 このときの「{value}」はフィールドバリューリストの変数をエントリーリストに渡しているためエスケープの必要はありません。

下記のように「見出し + タイトルのリスト」の表示がされているはずです。

これでこのハンズオンは以上となります。

サンクスページを作ってコンバージョン率を分析できるようにする

フォームは1枚のテンプレート( HTML )でフォームの入力から送信結果までが全て完結できます。この状態だと、最初から最後まで単一のURLで画面遷移が行われてしまうため、Google Analytics等でコンバージョンを調べる際に、ゴールページを設定することができませんでした。 サンキューページ( 送信のお礼ページ )を別で用意して、フォームの送信が完了したら、そのページが表示されるようにします。

サンキューページを用意する

thanks.html ファイルを作成し、この中にサンキューページの内容を入れていきます。まず、結果表示( step#result )のブロックをこのthanks.htmlに持ってきます。これで、送信完了画面でこのthanks.htmlのテンプレートが使われても、送信結果が表示できるようになります。

<!-- BEGIN_MODULE Form -->

<!-- BEGIN step#result -->
<!-- フォームステップ：完了画面 -->
<div class="acms-entry contactBox">
	<section class="entryColumn">
		<h2 class="contactH2">メールでのお問い合わせ</h2>
		<p class="message">お問い合わせありがとうございました。以下の内容で送信しました。</p>
		<!--#include file="/contact/form/confirm.html"-->
	</section>
</div>
<!-- END step#result -->

<!-- END_MODULE Form -->

確認ページからthanks.htmlに飛ぶようにする

<!-- BEGIN step#confirm -->
<!-- フォームステップ：確認画面 -->
<!--#include file="/contact/form/confirm.html"-->
<form action="?step=reapply" method="post" class="acms-form acms-inline-btn">	<input type="hidden" name="step" value="reapply" />
	<input type="hidden" name="takeover" value="{takeover}" />
	<input type="submit" name="ACMS_POST_Form_Chain" value="入力画面へ戻る" id="btnToInput" class="acms-btn" />
</form>

<form action="thanks.html" method="post" class="acms-form">	<input type="hidden" name="To[]" value="{email}" />
	<input type="hidden" name="AdminReply-To[]" value="<{email}>" />
	<input type="hidden" name="AdminFrom[]" value="<{email}>" />
	<input type="hidden" name="step" value="result" />
	<input type="hidden" name="takeover" value="{takeover}" />
	<input type="hidden" name="id" value="contactForm" />
	<input type="submit" name="ACMS_POST_Form_Submit" value="送信" id="btnSubmit" class="acms-btn acms-btn-primary acms-btn-admin-save" />
</form>
<!-- END step#confirm -->

ファイルを添付するには、最低でも以下の設定が必要です。各項目の詳細については、本ページをご一読ください。

• 「メールに添付する」を有効化する
• formタグのenctypeを指定する

画像をアップロードして添付する場合は、合わせて以下の設定も必須です。

• アップロード許可ファイル拡張子に画像ファイルの拡張子を追加する
• 画像をアップロードする場合も、input要素に type="file"を指定する

また、formタグのenctype属性に enctype="multipart/form-data" と指定しないとファイル等をアップロードできないため、確認してください。

アップデートできるファイル（拡張子）を限定する

添付できるファイル拡張子を限定することができます。

指定方法

<input type="hidden" name="pdf@extension[]" value="pdf" />
<input type="hidden" name="pdf@extension[]" value="zip" />

許可したい拡張子分だけ、カスタムフィールド名@extension[] で指定します。

エラーメッセージの記述方法

<!-- BEGIN pdf:v#extension -->許可されていない拡張子です<!-- END pdf:v#extension -->

サーバーの制限を超える容量のファイルを添付されるとPHPのエラーが表示されてしまい、メールも送信されません。そこで、ここでは添付ファイルの容量の制限を行いたいと思います。（Ver. 2.6.1.4より）

指定方法

<input type="hidden" name="pdf:v#filesize" value="200"> <!-- KBで指定（200KB） -->

上記のようにバリデータと同じようにテンプレート上に指定する方法もありますが、フォームの場合は合わせて管理画面からも設定する事をお勧めします。HTMLでの指定は、知識がある人ならブラウザ上から制限を解除する事ができてしまうからです。（それでもバリデータは適切なエラーメッセージを表示するために必要です）

フォーム詳細画面で「ファイルサイズ上限値」を設定してください。（KBで指定）

エラーメッセージの記述方法

指定した容量を超えた場合や、upload_max_filesizeを超えた場合のブロック

<!-- BEGIN pdf:v#filesize -->ファイルサイズが大きすぎます<!-- END pdf:v#filesize -->

post_max_sizeを超えた場合のメッセージブロック（全体）

upload_max_filesize超えた場合、POSTが空になるのでフィールド毎にエラーは表示できません。 なので、以下の記述で全体のエラーメッセージを出力します。

<!-- BEGIN post:v#filesize -->リクエストサイズが大きすぎます<!-- END post:v#filesize -->

以下は、変数名がpdfだった場合のソースコードの例です。

<tr>
    <th>PDF</th>
    <td>
        <!-- アップロード済みのファイルのプレビューエリア -->
        <!-- BEGIN_IF [{pdf@path}/nem/] -->
        <img src="%{ARCHIVES_DIR}{pdf@path}" width="450" alt="" /><br />
        <a href="%{ARCHIVES_DIR}{pdf@path}">{pdf@originalName}</a>
        <input type="hidden" name="pdf@old" value="{pdf@path}" />
        <input type="hidden" name="pdf@secret" value="{pdf@secret}" />
        <input type="hidden" name="pdf@originalName" value="{pdf@originalName}" />
        <label for="input-checkbox-pdf@edit">
            <input type="checkbox" name="pdf@edit" value="delete" id="input-checkbox-pdf@edit" />
            削除
        </label><br /><!-- END_IF -->

        <!-- ファイルをアップロードするフィールド -->
        <input type="hidden" name="pdf:v#filesize" value="500" id="pdf-v-filesize"> <!-- 500KBで制限 -->
        <input type="file" name="pdf" size="20" />
        <input type="hidden" name="field[]" value="pdf" />
        <input type="hidden" name="pdf:extension" value="file" />
        <input type="hidden" name="pdf@extension[]" value="pdf" />

        <!-- エラーメッセージ -->
        <div data-validator-label="pdf-v-filesize" class="validator-result-{pdf:v#filesize}">
            <p class="error-text"><span class="acms-icon acms-icon-attention"></span>ファイルサイズが大きすぎます。</p>
        </div>
        <div data-validator-label="pdf-v-extension" class="validator-result-{pdf:v#extension}">
            <p class="error-text"><span class="acms-icon acms-icon-attention"></span>許可されていない拡張子です。</p>
        </div>
    </td>
</tr>

<!-- BEGIN post:v#filesize -->リクエストサイズが大きすぎます<!-- END post:v#filesize -->

値を挿入するinput要素は、type="file"を指定する

画像をアップロードする場合も、値を挿入するinput要素の type属性にはfileを設定してください。

記述例

<input type="file" name="pdf" size="20" />

変数名

ここではファイル添付をした時に使用できる変数名を解説します。以下変数名が「pdf」だった場合で解説します。