コンフィグのサービス設定項目について解説します。

コンフィグのサービス設定項目一覧

---

各項目の解説についてはヘルプのツールチップをクリックすると解説をみることができます。

---

メール設定

メールに関する設定を行えます。

SMTPサーバー

ここで指定したSMTPサーバーを使ってメールを送信できます。Webサーバーと送信するメールアドレスのドメインが違う場合は、何も設定しないと送信元の偽装状態になるので、送信元のメールアドレスのSMTPを設定して回避できます。

また、メール送信サービスに接続する方法としてSMTP接続が用意されている場合も、こちらで設定します。

SMTPサーバーの設定画面

エラー通知

Ver. 3.1.0 で追加された監査ログ機能でエラー発生時にメール通知する機能がり、そのメール設定の設定値が確認できます。設定自体は管理画面で行うのではなく a-blog cms 設置ディレクトリにある「.env」ファイルで行います。

エラー通知時のメール設定画面

会員登録

会員登録時に自動送信されるメールの設定を行います。

会員登録時のメール設定画面

ユーザ情報変更

ユーザー（会員）がプロフィール変更した時に、変更内容を自動送信する機能の設定になります。

ユーザ情報変更時のメール設定画面

ユーザー情報変更（管理者）

ユーザー（会員）がプロフィール変更した時に、変更内容を管理者に送信する機能の設定になります。

ユーザ情報変更時のメール設定画面

メール認証管理ログイン

管理者・編集者のメール認証ログイン時に自動送信されるメールの設定になります。

メール認証ログイン時の自動送信設定

メール認証サインイン

一般ユーザー（会員）のメール認証ログイン時に自動送信されるメールの設定になります。

メール認証ログイン時の自動送信設定

パスワード再発行

パスワード再発行時に送信されるメールの設定になります。

パスワード再発行メール設定画面

コメント

コメントされた時に管理者に通知するメールの設定になります。

コメントの通知メール機能設定画面

承認

承認フローでの通知メールの設定になります。

承認通知メールの設定画面

メールマガジン

メールマガジン機能のメール設定になります。

メールマガジンのメール設定画面

アドバンス

メールのReturn-Pathを特定のメールアドレスに指定します。

メールのReturn-Path設定画面

プロパティ設定

Google API の Key設定や、サイトのメタ情報などを設定できます。

メタ情報

サイトで使用するメタ情報の「keyword」と「description」を登録します。ここで登録した情報はグローバル変数でいつでも呼び出せます。

メタ情報設定画面

ウェブサービス

外部サービスのAPIのKey設定を行います。

Google API Key 設定画面

Pingショット

ダッシュボードから「Ping送信」ボタンを押すことで、指定された更新通知サービスに通知します。

Pingショット設定画面

Google Maps のストリートビュー を表示する組み込みJSです。

この組み込みJSを活用することで、  Google Maps JavaScript API を活用し、 Google Maps のストリートビューを表示することができます。

使い方

Google Maps のストリートビュー を表示したい要素の class 属性に js-street-view を設定します。

さらに、data 属性を指定することで経度、緯度、zoom値などを指定できます。

<div 
  class="js-street-view"
  data-lazy="true"
  data-lat="37.869260"
  data-lng="-122.254811"
  data-pitch="0"
  data-zoom="10"
  data-heading="165"
  style="width: 100%; height: 500px;"
></div>

表示領域（viewport）に入るまで、組み込みJSの実行を遅延させる

Google Maps のストリートビューが画面の下部に存在する場合、組み込みJSの実行を、表示領域（viewport）に入るまで遅延させることで、パフォーマンスを向上させることが可能です。

data-lazy 属性の値に true を指定することで、組み込みJSの実行を遅延させることができます。

<div 
  class="js-street-view"
  data-lazy="true"
  data-lat="37.869260"
  data-lng="-122.254811"
  data-pitch="0"
  data-zoom="10"
  data-heading="165"
  style="width: 100%; height: 500px;"
></div>

設定

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

ユーザーによって入力されたパスワードの強度（推定されやすいか否か）を判定して表示する機能です。

この機能を活用することで、会員制サイトのようなユーザー自身でパスワードを設定する必要がある場面で、推測されにくいパスワードを設定してもらいやすくすることができます。

デモ

以下のようなパスワード強度チェッカーが実装できます。

使い方

パスワード入力用の input 要素を囲む要素の class 属性に js-password_strength を設定します。

そして、パスワード入力用の input 要素及び、パスワードの強度判定結果を表示する要素、パスワードの強度判定結果を文字列で表示する要素の class 属性に js-input 及び、 js-meter 、 js-label を設定してください。

以下は、パスワード強度チェッカーを実装する最低限のサンプルコードです。

<div class="js-password_strength">
  <input
    type="password"
    name="pass"
    value=""
    id="input-text-pass"
    class="js-input"
    autocomplete="new-password"
  >
  <div>
    <div class="js-meter acms-password-strength-meter"></div>
  </div>
  <span class="js-label acms-password-strength-label" aria-live="assertive"></span>
</div>

設定

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

コンフィグには複数の設定機能があり、どのコンフィグが適応されているか最初分からなくなる時があります。ここではコンフィグの設定機能と、どのようにコンフィグの値が決定されるか学びましょう。

コンフィグ設定機能の種類

以下コンフィグを設定できる機能について紹介します。

config.system.default.yaml

a-blog cms で使用するコンフィグのデフォルト値になります。様々な管理画面や機能設定のデフォルト値を定義しています。 管理画面にあるコンフィグのデフォルト値としても利用されますが、管理画面にない設定値もこのファイルで設定しています。

ファイルの場所

private/config.system.default.yaml

config.system.yaml

「config.system.default.yaml」は、上書き不可のコンフィグファイルですが、値を変更したい場合に、このファイルで「config.system.default.yaml」の値を上書きます。 このファイルはCMSアップデートで上書きされないため、自由にカスタマイズ可能です。

例えば管理画面になり設定を変更したり、管理画面のデフォルト値を変更できたりします。

ファイルの場所

private/config.system.yaml

ブログの初期コンフィグ（非推奨）

「コンフィグセット」が出来る前の設定方法になります。このコンフィグはブログと結びついているため、ブログ毎の設定になり、同じコンフィグを他のブログで利用することはできません。同じ設定を行いたい場合にも、すべてのブログで同じ設定を行う必要があります。

このブログの初期コンフィグ（非推奨）

コンフィグセット・テーマセット・編集画面セット

Ver. 3.0 から、コンフィグのセットをブログまたはカテゴリーにセットすることで、コンフィグ設定できるようになりました。 これにより同じコンフィグの各セットを利用しているブログやカテゴリーのコンフィグを一回の操作で変更できるようになります。

編集画面セットの一覧

ルールのコンフィグ

ルール毎にコンフィグを設定できます。ルールで設定した条件に当てはまるアクセスの時だけ、有効になるコンフィグになります。

ルールのコンフィグ一覧

コンフィグ値の決定フロー

上記のコンフィグ設定機能で設定されたコンフィグが最終的には１つのコンフィグ値となります。以下のフローチャート図のようにコンフィグがロードされていきます。 どれかひとつのコンフィグ設定を読み込むのではなく、順番が決まっていて、上書きされていくイメージになります。

コンフィグ値の決定フロー

a-blog cms には、読者権限のユーザーとして、サイト上からユーザーが自由に会員登録することができる機能が標準機能として提供されています。

会員サインアップ（会員登録）フォームはテンプレートをカスタマイズすることが可能なので、オリジナルデザインの会員サインアップ（会員登録）フォームを作成することができます。

また、ステップフォームとしてフォームを分割することもできるため、入力項目が多くなってしまった場合でもユーザビリティの高い会員サインアップ（会員登録）フォームを作成することができます。

会員登録機能設定

サイト上からユーザーが自由に会員登録できるようにするためには、管理画面 > コンフィグ > ログイン設定 を変更する必要があります。

会員登録機能セクションから、"ユーザー登録の外部申請" を有効にしてください。

会員サインアップ（会員登録）機能の設定

会員登録機能の設定では、他にも会員登録時にメールアドレスの有効性確認をするかどうかの他、会員登録時のユーザー権限を変更することができます。

Member_Signup モジュール

会員サインアップ（会員登録）フォーム機能は、Member_Signup モジュールとして提供しています。

デフォルトでは以下のように入力・確認・完了・認証の4つのステップに分かれています。（step#2 はデフォルトでは利用されていませんがステップフォーム実装の例として記述されています。）

フォーム送信時のバリデーションに失敗した場合、ステップの遷移は行われず、送信前のステップに遷移します。

<!-- BEGIN_MODULE Member_Signup -->
<div class="acms-member-container">
  @include("/_member/parts/header.html")

  <!-- BEGIN step#auth -->
  @include("/_member/parts/signup/auth.html")
  <!-- END step#auth -->

  <!-- BEGIN step#input -->
  @include("/_member/parts/signup/input.html")
  <!-- END step#input -->

  <!-- BEGIN step#2 -->
  @include("/_member/parts/signup/input2.html")
  <!-- END step#2 -->

  <!-- BEGIN step#confirm -->
  @include("/_member/parts/signup/confirm.html")
  <!-- END step#confirm -->

  <!-- BEGIN step#result -->
  @include("/_member/parts/signup/result.html")
  <!-- END step#result -->
</div>
<!-- END_MODULE Member_Signup -->

また、Form モジュール と同じく送信した値は変数として表示できます。また、バリデーターやコンバーターも Form モジュールと同じ形式で利用できます。

特別なステップ

フォームモジュールと同様にステップはカスタマイズで任意のステップ名で増減することができますが、以下に紹介するステップはステップ名が予め決まっています。

利用できる変数・ブロック

基本的には、Form モジュール と同じくフォームの項目として送信された値が変数として利用可能です。また、会員登録時に発行されるメールアドレス認証URLからアクセスしたときに表示されるステップである auth ステップを除いて、以下の変数が利用できます。

会員登録時に発行されるメールアドレス認証URLからアクセスしたときに表示される auth ステップでは以下のブロックが利用できます。このブロックにより、ユーザーに対して、メールアドレス認証が成功したかどうかの結果を表示できるようになります。

フォームの項目をカスタマイズする

会員サインアップ（会員登録）フォームの項目はカスタマイズすることが可能で、ユーザーの基本設定の項目から特定の項目とユーザーのカスタムフィールドを以下のように自由に設置することができます。

基本設定のフィールド（項目）を送信する場合は、 name 属性に user[] を、 value 属性に 送信したいフィールド（項目）名を指定した input タグを一緒に記述する必要があります。

<input type="text" name="name" value="{name}"  placeholder="山田 太郎" />
<input type="hidden" name="user[]" value="name" />

<!-- ↓カスタムフィールドも追加できます -->
<input type="text" name="company" value="{company}" />
<input type="hidden" name="field[]" value="company" />

フォームの項目として追加できるユーザーの基本設定項目は以下になります。

以下はカスタマイズ例として、プライバシーポリシーのチェックボックスをカスタムフィールドとして設置しています。

<!-- BEGIN_MODULE Member_Signup -->
<form action="" method="post" class="acms-form" enctype="multipart/form-data">
  <ul>
    ... その他の項目
    <li class="form-group">
      <div class="form-label">
        <label class="acms-form-block acms-clear">プライバシーポリシーへの同意</label>
      </div>
      <label class="acms-form-checkbox form-checkbox-only" for="input-privacy-on" data-validator="privacy">
        <input type="checkbox" name="privacy[]" value="on" id="input-privacy-on" {privacy:checked#on}/>
        <i class="acms-ico-checkbox"></i>
        <span class="form-checkbox-only-label">
          <a href="%{BASE_URL}privacy.html" target="_blank">プライバシーポリシー</a>に同意する
        </span>
      </label>
      <input type="hidden" name="field[]" value="privacy"/>
      <input type="hidden" name="privacy:v#required" id="privacy-v-required"/>

      <p class="form-helper-text">※お客様の個人情報はお問い合わせへの対応のみに利用させていただきます。</p>

      <div role="alert" aria-live="assertive">
        <div data-validator-label="privacy-v-required" class="validator-result-{privacy:validator#required}">
          <p class="form-error-text"><span class="acms-icon acms-icon-news" aria-hidden="true"></span>プライバシーポリシーを確認し、同意いただけないとお問い合わせに応じることができません。</p>
        </div>
      </div>
    </li>
  </ul>

  <p class="form-message is-bold">プライバシーポリシーをご一読いただき、送信内容のご確認にお進みください。</p>

  <div class="form-button-group">
    <input type="hidden" name="step" value="confirm" />
    <button
      type="submit"
      name="ACMS_POST_Member_Signup_Confirm"
      class="button is-lg is-width-lg form-button"
    >
      内容を確認する
    </button>
  </div>
</form>
<!-- END_MODULE Member_Signup -->

ステップフォームのカスタマイズ

標準のフォームモジュールと同様に name 属性に step が指定されている input 要素の value 属性にステップ名を指定することで遷移先のステップを指定することができます。

以下のサンプルコードでは、遷移先のステップを confirm として指定しています。

<input type="hidden" name="step" value="confirm" />
<button
  type="submit"
  name="ACMS_POST_Member_Signup_Confirm"
  class="button is-lg is-width-lg form-button"
>
  内容を確認する
</button>

会員サインアップ（会員登録）フォームを送信する

Member_Signup_Confirm モジュールは、送信された値のバリデーションとステップ遷移をするためのPOSTモジュールです。また、Member_Signup_Submit モジュールはバリデーションとステップ遷移に加え、会員登録処理や認証メールの送信をするためのPOSTモジュールになります。

エラー時の表示

バリデーションはテンプレート側で任意に指定することができますが、いくつかの値はプログラム側で強制的にバリデーションを設定しているため、テンプレートにバリデーターを設定していなくても、バリデータのエラーが表示されます。

会員サインアップ（会員登録）フォームで何らかのエラーが起きた場合には以下のフィールド（項目）がバリデーションエラーとして表示されます。

自動返信メール

会員登録が成功した場合、登録ユーザー及び、管理者宛にメールが送信されます。登録ユーザーはメールに記載のURLからアカウントを有効化することができます。

会員登録時の自動返信メールはカスタマイズすることが可能です。メールテンプレートについては、コンフィグ > メール設定から変更することができます。

会員登録時の自動返信メールについての設定画面

自動送信メールでは以下の変数が利用できます。

上記の変数以外にもユーザーのカスタムフィールドとして登録したデータも自動返信メール内で変数として利用可能です。

メールアドレス認証なしで会員登録する

通常、会員登録は申請するとメールアドレス認証のためのURLが記載されたメールが届き、そのURLにアクセスすることで、メールアドレスの有効性が確認され、会員登録が完了します。

しかし、メールアドレス認証をせずに会員登録を完了させたい場面もあるかと思います。そのような場面に対応するため、コンフィグ > ログイン設定から会員登録機能から「メールアドレスの有効性確認」を無効にすることで、メールアドレス認証をせずに会員登録を完了できるようになります。

メールアドレス認証をしない設定を有効にする