スライドトグル


この機能はアクセシビリティの考慮がされておらず、制作者が意図せずアクセシビリティを考慮できていないサイトを作り込む危険性があるため、Ver. 3.2 より非推奨になりました。

代替機能として、HTML標準機能である summary, details タグの利用を推奨いたします。

特定の箇所をクリックした際に、指定した要素の表示/非表示をスライド効果で切り替えるトグル機能です。(Ver. 1.2.1より)初期状態は非表示状態です。

通常は隠しておき、クリックした時に表示されるようなものに使用できます。

デモ

詳細を表示する

詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。

デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

toggleHeadClassSuffix  : 'toggle-head',
toggleBodyClassSuffix  : 'toggle-body',

toggleHeadClassSuffix 表示/非表示を切り替えるときにクリックする要素のclass名の接尾辞(後ろにつく文字列)を指定します。
toggleBodyClassSuffix 表示/非表示が切り替わる要素のclass名の接尾辞(後ろにつく文字列)を指定します。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.toggleHeadClassSuffix = 'js-sample-toggle-head';
  ACMS.Config.toggleBodyClassSuffix = 'js-sample-toggle-body';
});

HTMLの編集

例)toggleHeadClassSuffixで「toggle-head」、toggleBodyClassSuffixで「toggle-body」と指定した場合

<p class="toggle-head">詳細を表示する</p>
<p class="toggle-body">詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。</p>

表示/非表示を切り替えるときにクリックする要素は、アンカーリンク()ではなくても動作します。

フォームのセキュリティ対応

フォームのセキュリティ設定周りについて学びましょう。

フォームは、一般ユーザーが送信できる箇所になり、セキュリティをしっかりと考えないといけない箇所になります。 標準的なセキュリティ対策は標準でされていますが、フォーム設定などによってもよりセキュリティを高めれますので、設定する意味や設定内容をここで学びましょう。

入力チェック

できる限り、テンプレートで指定したバリデーションは、「フォーム設定(管理画面でのフォーム詳細画面)」でもするようにしましょう。
ここの設定をおこたると、少しHTMLの知識のある人なら、開発者ツールでHTMLを変更し、バリデーションを突破されてしまう為になります。

テンプレートでのバリデーション設定

テンプレートでのバリデーション設定は以下のコードのようにHTMLによって設定できます。 ただし単なるHTMLコードなので、ブラウザの開発者ツールなどを利用すると、簡単にバリデーションの記述を削除して突破されてしまいます。

<input type="text" name="name" value="{name}" data-validator="name" />
<input type="hidden" name="field[]" value="name" />
<input type="hidden" name="name:v#required" value="" id="name-v-required" />
<div data-validator-label="name-v-required" class="validator-result-{name:v#required}">
  <p class="error-text">
    <span class="acms-admin-icon acms-admin-icon-attention"></span>名前は必須入力です。
  </p>
</div>

フォーム設定でのバリデーション設定

フォーム設定でバリデーション設定すると、サーバーサイドでのチェックになるので、攻撃者はこのバリデーションを突破できなくなります。



メールアドレスのテンプレート指定

メールアドレスの「テンプレート指定」は出来るだけ無効化させましょう。 バリデーションと同じようにテンプレートでの指定は、攻撃者がブラウザの開発者ツールなどで、自由に変更できてしまいます。 必要のない項目は「テンプレート指定を無効」にチェックをつけて無効化させましょう。

To, From, AdminTo, AdminFrom に「テンプレート指定を無効」にチェックを付けた場合は、必ず管理画面でメールアドレスを設定しましょう。設定しないと宛先と差出人の情報が空となり、メール送信で失敗します。

おすすめ設定

以下は、おすすめの設定内容になります。

一般メール設定

お問い合わせ者に自動返信するメールの設定になります。 お問い合わせ者に送信先メールアドレスさえフォームで入力してもらえればいいので、「To」以外はテンプレートで指定できないようにします。


項目 テンプレート指定
To 有効
From 固定値 無効 ✅
Cc 空 or 固定値 無効 ✅
Bcc 空 or 固定値 無効 ✅
Reply-To 空 or 固定値 無効 ✅

一般メール設定の設定例

一般メール設定の設定例


管理者宛メール設定

管理者宛メールは、送信先が決まっているので「AdminTo」をテンプレートで指定できなくします。

「AdminFrom」はお問い合わせ者のメールアドレスをテンプレートで設定することも多いと思いますが、おすすめとしては「AdminFrom」も固定にしてしまいます。 というのも、メールはCMSがあるサーバー、またはSMTPサーバーから送信されますので、Fromのメールアドレスドメインと送信サーバーが合わずFromの偽装にあたり迷惑メール扱いになる可能性が高いためになります。

ただ、このままでは管理者に届いたメールを返信しようと思っても、返信できないので「AdminReply-To」にお問い合わせ者のメールアドレスをテンプレートで指定するようにします。 これで、メーラーで返信する時、お問い合わせ者に返信できるようになります。


項目 テンプレート指定
AdminTo 固定値 無効 ✅
AdminFrom 固定値 無効 ✅
AdminCc 空 or 固定値 無効 ✅
AdminBcc 空 or 固定値 無効 ✅
AdminReply-To 有効

管理者宛メール設定の設定例

管理者宛メール設定の設定例


複数指定

特に理由がない限り複数指定できないようにチェックをつけましょう。
複数指定できてしまうと、フォームで大量のメールアドレスをカンマ続きで指定する事により、大量のメールを送信できてしまうことになります。



そもそも自動返信メールを送らない

問い合わせ受け付けメール(自動返信メール)を投稿者アドレスに送信しない設定にするのも方法の一つです。 この場合、そもそもメールが送信されないので、セキュリティを高めることができます。

ただしお問い合わせ者が正常にメールが送信されたか判断しずらいので、ここは、利便性とセキュリティを比べて判断するようにしましょう。

メール送信しないように設定する方法

フォーム設定で、メールアドレスを全て空にして、テンプレートからも指定できなくしましょう。これでメールは送信されなくなります。


メール送信しないように設定する方法

メール送信しないように設定する方法


reCAPTCHAの導入

標準機能ではありませんが、よりフォームのセキュリティを高めるために、ロボットか判断するGoogleの「reCAPTCHA」サービスと連携する方法がございます。
a-blog cms の拡張アプリとして用意されていますので、こちらもご検討ください。

https://github.com/appleple/acms-recaptcha