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

• 「メールに添付する」を有効化する
• 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」だった場合で解説します。

テキストユニット（LiteEditor）拡張方法基礎知識

テキストユニット（LiteEditor）のボタンは一からボタンを作っていくことや既にあるボタンに対して新しくボタンを追加することもできます。

デフォルトのボタンを残して新しいボタンを追加する

既存の、「リンク」「強調」「重要」などのボタンに加えて新しいボタンを追加する場合は、下のようなソースコードになります。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorConf.btnOptions.push({
    label: '<span class="lite-editor-font-underline"></span>',
    tag: 'u'
  });
});

複数追加したい場合は、下記のように pushメソッド をその分実行してください。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorConf.btnOptions.push({
    label: '<span class="lite-editor-font-underline"></span>',
    tag: 'u',
    group: 'mark'
  });
  ACMS.Config.LiteEditorConf.btnOptions.push({
    label: '<span class="lite-editor-font-italic"></span>',
    tag: 'i',
    group: 'mark'
  });
});

デフォルトで用意されているボタンを消して、一からボタンを作る

ボタンを一から作りたい人は、ACMS.Config.LiteEditorConf.btnOptions に新しく配列を代入することで可能になります。この際に、ACMS.Configの設定はACMS.Readyメソッドで括ることに注意してください。ACMS.ReadyがACMS.Configのデフォルトの設定を上書きする最適なタイミングになります。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorConf.btnOptions = [];
});

配列には以下のようにオブジェクトを入れることができます。例えば下のソースコードでは、アンダーラインを挿入するためのボタンを追加しています。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorConf.btnOptions = [{
    label: '<span class="lite-editor-font-underline"></span>',
    tag: 'u'
  }];
});

2つ以上ボタンを追加する場合はカンマ区切りでオブジェクトを渡してあげます。次の例ではアンダーライン挿入ボタンに加えて、斜体挿入ボタンを追加しています。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorConf.btnOptions = [{
    label: '<span class="lite-editor-font-underline"></span>',
    tag: 'u'
  },
  {
    label: '<span class="lite-editor-font-italic"></span>',
    tag: 'i'
  }];
});

上の画像のような以下5つの条件を満たすテキストユニットを作りましょう

1. それぞれのボタンが用途に合わせてグルーピングされてある。
2. メディア挿入ボタンがある。
3. 進むボタン、戻るボタンがある。
4. アイコンにはLiteEditorにデフォルトで用意されているアイコンフォントを使用。

この際にgroupというプロパティを使用して例えば以下のようにボタンをグルーピングします。ボタン同士が同じグループに属するのであればgroupに同じ値を代入します。下の場合はmarkというボタングループにしています。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorConf.btnOptions = [{
    label: '<span class="lite-editor-font-underline"></span>',
    tag: 'u',
    group: 'mark'
  },
  {
    label: '<span class="lite-editor-font-italic"></span>',
    tag: 'i',
    className: '',
    group: 'mark'
  }];
});

他にもボタンにはオプションとして以下のようなプロパティを設定可能です。

下記のように、js-media_insertというクラスが振られたボタンを追加することでメディアユニットを活用するボタンを追加可能です。js-media_insert自体は組み込みJSですのでテキストユニット（LiteEditor）とは関係ありません。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorConf.btnOptions = [{
    label: '<span class=" acms-admin-icon acms-admin-icon-unit-image acms-admin-padding-none"></span>',
    selfClassName: 'js-media_insert',
    action: 'extra',
    group: 'extra',
    onClick: function(self) {
        self.saveSelection();
    }
  }];
});

以下のようにactionプロパティにundo/redoを代入することでそのボタンにundo/redoの機能を持たせることができます。

ACMS.Ready(function(){
    ACMS.Config.LiteEditorConf.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'
        }
    ]
});

またLiteEditorにはいくつかのアイコンフォントが用意されていますのでこれを活用してボタンのラベルを調整しましょう。

最終的には以下のようなソースコードになります。この際に、下のJavaScriptはacms.jsを読み込んだ後に記述することに気をつけましょう。

ACMS.Ready(function(){
    ACMS.Config.mediaLibrary = 'off';
    ACMS.Config.LiteEditorConf.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',
        },
        {
            label: '<span class="acms-admin-icon acms-admin-icon-unit-image acms-admin-padding-none"></span>',
            selfClassName: 'js-media_insert',
            action: 'extra',
            group: 'extra',
            onClick: function(self) {
                self.saveSelection();
            }
        }
    ];
});

ハンズオンは以上で終わりですが、アイデア次第ではもっと便利なボタンが作れると思います。余力のある方はぜひチャレンジしてみてはいかがでしょうか？

フォームIDを作成

フォームIDは通常のフォームと同じようにフォーム管理の[フォームIDを作成]ボタンから作っていきます。 フォームID、フォーム名、一般のメールテンプレート、管理者のメールテンプレート、管理者のメールアドレスを設定していきます。

メールテンプレートのパスについて

動的フォームのメールテンプレートはsystemのテーマフォルダに用意されています。通常のフォームのメールテンプレートは自分で自由にレイアウトができますが、動的フォームでは自由にレイアウトなどカスタマイズができません。動的フォームのメールテンプレートのパスは以下のようになります。

動的フォーム画面からフォームIDをセット

動的フォームを設置したいエントリーに戻り、[フォーム]ボタンを押して動的フォーム作成画面で先ほど作成したフォームIDを設定してください。動的フォームで送信されたデータはこのフォームIDに蓄積されていきます。

バリデータとコンバーターを使う

[入力チェック]のリンクをクリックすることでフォームの項目を必須にしたり、文字数制限をしたり、文字を変換したり設定することができます。フォームのバリデータとコンバーターの設定について一部ご紹介していきます。

必須にする

項目はrequiredを選択します。メッセージにエラーメッセージを入力してください。

数値になっているかチェック

項目はdigitsを選択します。メッセージにエラーメッセージを入力してください。

入力文字数を制限する

項目はminLengthか、maxLengthを選択します。値には制限したい文字数を入力し、メッセージにエラーメッセージを入力してください。

入力した文字を変換する

入力の変換 ( converter )を選択し、値に変換したい種類を入力してください。コンバーターの変換種類についてはリファレンスのconverter ( c )の項目を御参考ください。

標準提供のテンプレートの中には、説明 {caption} が使われておりません。入力した内容を表示させる際には、テンプレートのカスタマイズが必要です。