<!-- BEGIN_MODULE ShoppingForm -->

<!-- BEGIN step-->
<!-- 新規 -->
<!-- END step -->

<!-- BEGIN step#reapply -->
<!-- 修正 -->
<!-- END step#reapply -->

<!-- BEGIN step#confirm -->
<!-- 確認 -->
<!-- END step#confirm -->

<!-- BEGIN step#result -->
<!-- 完了 -->
<!-- END step#result -->

<!-- END_MODULE ShoppingForm -->

<h3 class="form-table-title">追加手数料</h3>
<table class="form-table">
  <!-- BEGIN additionGroup:loop -->
  <tr>
    <th></th>
    <td>
      {additionId} {additionName}（¥{additionFee}[number_format])
    </td>
  </tr>
  <!-- END additionGroup:loop -->
</table>

<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_Confirm"
      value="入力内容の確認へ"
    />
  </div>
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="confirm" />
  <input type="hidden" name="error" value="reapply" />
  <input type="hidden" name="id" value="shoppingForm" />
</form>

<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_Submit"
      value="注文を確定する"
    />
  </div>
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="result" />
  <input type="hidden" name="error" value="confirm" />
  <input type="hidden" name="id" value="shoppingForm" />
</form>

        <!-- BEGIN_MODULE Payment_Select -->
        <ul>
          <!-- BEGIN payment:loop -->
          <li>
            <div
              class="acms-form-radio"
            >
              <input
                id="input-radio-payment-method-{block}"
                type="radio"
                name="payment-method"
                value="{block}"
                \{payment-method:checked#{block}\}
                <!-- BEGIN_IF [\{payment-method\}/em/_and_/{payment.i}/eq/1] -->
                checked="checked"
                <!-- END_IF -->
                data-validator="payment-method"
              />
              <label for="input-radio-payment-method-{block}">
                <i class="acms-ico-radio"></i>{name}<!-- BEGIN_IF [{commissionPaid}/gt/0] -->：手数料 ¥{commissionPaid}[number_format]<!-- END_IF -->
              </label>
              <!-- BEGIN description:veil -->
              <div>
                <!-- BEGIN_IF [{description}[delnl]/nem] -->
                <div>{description}[nl2br]</div>
                <!-- END_IF -->
                <!-- BEGIN_IF [{image@path}/nem] -->
                <img
                  src="%{MEDIA_ARCHIVES_DIR}{image@path}"
                  class="acms-img-responsive"
                  alt="{image@alt}"
                  width="{image@width}"
                  height="{image@height}"
                >
                <!-- END_IF -->
              </div>
              <!-- END description:veil -->
            </div>
          </li>
          <!-- END payment:loop -->
        </ul>
        <!-- END_MODULE Payment_Select -->
        <input type="hidden" name="field[]" value="payment-method" />
        <input type="hidden" name="payment-method:v#required" id="payment-method-v-required" />
        <div role="alert" aria-live="assertive">
          <div data-validator-label="payment-method-v-required" class="validator-result-\{payment-method:v#required\}">
            <p class="form-error-text">決済方法を選択してください</p>
          </div>
        </div>

<!-- BEGIN_MODULE Addition_Select -->
<!-- BEGIN addition:veil -->
<h3>追加手数料</h3>
<table>
  <tbody>
    <tr>
      <th></th>
      <td>
        <ul>
          <!-- BEGIN addition:loop -->
          <li>
            <div class="acms-form-checkbox">
              <input type="checkbox" name="addition[]" value="{id}" \{addition:checked#{id}\} id="input-checkbox-addition-{id}" />
              <label for="input-checkbox-addition-{id}">
                <i class="acms-ico-checkbox"></i>{name}（¥{fee}[number_format]）</label>
            </div>
          </li>
          <!-- END addition:loop -->
        </ul>
        <input type="hidden" name="field[]" value="addition" />
      </td>
    </tr>
  </tbody>
</table>
<!-- END addition:veil -->
<!-- END_MODULE Addition_Select -->

<input
  type="hidden"
  name="deliver-area"
  value="{deliver-pref}"
/>
<input type="hidden" name="field[]" value="deliver-area" />

<!-- BEGIN_MODULE ShoppingForm -->

<!-- BEGIN step#shoppingError -->
<section>
  <h2>購入エラーが発生しました。</h2>
  <p class="message">購入手続き中の商品に問題がある可能性があります。お手数ですが、はじめからやり直して下さい。</p>
  <div class="form-btn-wrap">
    <a href="%{BASE_URL}cart/" class="btn">購入フォームに戻る</a>
  </div>
</section>
<!-- END step#shoppingError -->

<!-- END_MODULE ShoppingForm -->

<!-- BEGIN_MODULE Admin_InjectTemplate id="%{PAYMENT_SERVICE}-js" -->
<!-- END_MODULE Admin_InjectTemplate -->

<div
  id="js-sq-card-container"
  data-square-three-d-secure="true"
  data-square-amount="3000"
  data-square-currency-code="JPY"
  data-square-intent="CHARGE"
  data-square-seller-keyed-in="false"
  data-square-customer-initiated="true"
  data-square-billing-contact-given-name="太郎"
  data-square-billing-contact-family-name="山田"
  data-square-billing-contact-email="info@example.com"
  data-square-billing-contact-phone="090-0123-4567"
  data-square-billing-contact-country-code="JP"
  data-square-billing-contact-postal-code="4500002"
  data-square-billing-contact-state="愛知県"
  data-square-billing-contact-city="名古屋市中村区"
  data-square-billing-contact-address-line1="モンマートビル5階"
  data-square-billing-contact-address-line2="名駅3丁目18-5"
>
  <!-- Squareのカード入力用コンポーネントが表示されます -->
</div>

3Dセキュア機能を有効にするため、 data-square-three-d-secure 属性の値に true を設定し、決済情報及び決済者情報を設定してください。決済者情報は必須ではありませんが、セキュリティのため、できるだけ多くの情報を設定してください。

data 属性についての説明は以下になります。

<script>  
  window.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector('#js-sq-card-container')) {
      acmsSquare.creditCard('#js-sq-card-container');
    }
  });
</script>

Square から取得した、クレジットカード識別情報は、「square-nonce」というフィールドに格納されます。このフィールドは JavaScript によって自動で追加されます。

<input type="hidden" name="square-nonce" value="取得したクレジットカード情報">
<input type="hidden" name="field[]" value="square-nonce">

不正なクレジットカード番号で決済が行われた場合など、クレジットカード決済でエラーとなることがあります。決済時にエラーが起きたことを表示できるようにするため、決済フォームでクレジットカード決済が失敗した場合、creditcard というフィールドの auth オプションがエラー判定されるようになっています。

そのため、決済フォームに、creditcard フィールドの auth オプションがエラー判定されたときのコードを書いておくと、クレジットカード決済が失敗した場合のエラーメッセージを表示可能です。以下はサンプルのソースコードです。

<div role="alert" aria-live="assertive">
  <div class="validator-result-{creditcard:v#auth}">
    <p class="form-error-text">クレジットカード認証に失敗しました。</p>
  </div>
</div>

<script>
  acmsSquare.creditCard('#js-sq-card-container', {
    submitterElementOrSelector: '#js-shoppingForm-submit'
    callbacks: {
      cardBrandChanged(event) {
        console.info(event)
      },
      errorClassAdded(event) {
        console.info(event)
      },
      errorClassRemoved(event) {
        console.info(event)
      },
      escape(event) {
        console.info(event)
      },
      focusClassAdded(event) {
        console.info(event)
      },
      focusClassRemoved(event) {
        console.info(event)
      },
      postalCodeChanged(event) {
        console.info(event)
      },
      submit(event) {
        console.info(event)
      },
    },
    focus: 'cardNumber', // or (focus) => { focus('cardNumber') }
    recalculateSize: (recalculateSize) => {
      document
        .querySelector('.js-recalculate-size-trigger')
        .addEventListener('change', () => {
            recalculateSize();
         });
    },
    squareCardOptions: {
      postalCode: '',
      includeInputLabels: true,
      style: {
         "input": {
           "color": "red",
         },
         "@media screen and (max-width: 600px)": {
           "input": {
             "fontSize": "12px",
           }
         }
       }
     },
  });
</script>

Square 用の JavaScriptライブラリ では以下のイベントを用意しています。イベントを活用することで、特定のアクションが発生した時に処理を挟み込めます。

window.addEventListener('acmsSquareTokenizeSuccessed', (event) => {
  // クレジットカード情報の取得に成功したとき
  console.info(event)
})

window.addEventListener('acmsSquareTokenizeFailed', (event) => {
  // クレジットカード情報の取得に失敗したとき
  console.info(event)
})

購入フォームにカスタムフィールドで square-note の値として、任意のメモを送信することで、Square のお取引一覧ページに表示されるメモを任意のテキストにカスタマイズできます。

<input type="hidden" name="square-note" value="ウェブサイト決済" />
<input type="hidden" name="field[]" value="square-note" />

<!-- BEGIN_MODULE Mypage -->
<input id="name" type="text" name="name" autocomplete="name" class="" value="{name}" placeholder="山田太郎"data-validator="name">
<input type="hidden" name="user[]" value="name">
<input type="hidden" name="name:v#required"> <!-- 必須項目 -->
<!-- BEGIN name:v#required -->
<p class="form-error-text">名前を入力してください</p>
<!-- END name:v#required -->
<!-- END_MODULE Mypage -->

<!-- BEGIN msg#error -->
<p class="alert-message">マイページの更新に失敗しました</p>
<!-- END msg#error -->

<!-- BEGIN msg#update -->
<p class="success-message">マイページの更新に成功しました</p>
<!-- END msg#update -->

MypageUpdate モジュールは、ユーザーの情報（基本設定・カスタム設定）の更新を行うためのモジュールになります。使い方は、他の POSTモジュールと同様に送信したいフォームの submit ボタン要素の name 属性の値に ACMS_POST_Mypage_Update を指定します。

<form action="" method="post">
  <!-- フォーム部品を読み込むためのinclude文 -->
  @include("/login/basic.html")
  <div class="form-btn-wrap">
    <button type="submit" class="btn" name="ACMS_POST_MypageUpdate">マイページ情報を更新する</button>
  </div>
</form>

<form action="" method="post" class="h-adr js-validator">
  <!-- マイページ更新時に空で保存されないようにする -->
  <input type="hidden" name="code" value="{code}">
  <input type="hidden" name="user[]" value="code">

  <input type="hidden" name="url" value="{url}">
  <input type="hidden" name="user[]" value="url">

  <input type="hidden" name="locale" value="{locale}">
  <input type="hidden" name="user[]" value="locale">
  
  <!-- 更新するフィールドは省略 -->
  <button type="submit" class="btn" name="ACMS_POST_MypageUpdate">
    <!--T-->保存する<!--/T-->
  </button>
</form>

消費税区分の設定は、注文内容の金額や convertToTax 校正オプションの計算などで利用されます。
消費税区分が外税の場合、エントリー（商品）のカスタムフィールド（item_price）で設定した販売価格は、消費税を含んでいないものとして扱われます。消費税区分を外税で使用する場合、商品価格の総額表示が義務付けられておりますので、商品価格を掲載する際は税込価格を表示する必要があることに注意してください。

こちらでは a-blog cms Ver.3.1.x のインストール方法について紹介します。

PHP 7.3.x - 8.3.x & MySQL 5.x - 8.0 の動作するウェブサーバーをご用意ください。

簡単にテストで試してみたいという方については、無料で30日間のお試し可能な a-blog cms インストール済みのレンタルサーバーサービスとして ablogcms.io を提供しておりますので、そちらもご活用ください。

ダウンロードページより新規インストールパッケージをダウンロードください。

新規インストールパッケージ ダウンロード

ZIPファイルを解凍すると ablogcms フォルダがありますので、ablogcms フォルダ自身はアップロードぜずに、ablogcms フォルダの中のファイルのみをサーバーの指定場所にアップロードしてください。

omake フォルダには、build・snippets 等が用意されていますので、必要に応じてご活用ください。

CMSの設置場所について

一般的には、ドキュメントルートに設置することが通常ですが、ディレクトリの中に設置することも可能です。またインストール後に、他のディレクトリに移すことも可能です。その場合、ファイルを移動するだけで問題なく動作します。

3.パーミッションの設定

PHP の動作モードによって設定が異なります。

共用サーバー

共用サーバーをご利用の場合には、一般的には CGIモードで動作していることが多く、この場合にはパーミッションの変更をする必要はありません。もし、インストーラーの画面で「パーミッションの変更が必要」だとメッセージが表示されるようであれば「専用サーバー / VPS など」と同様の設定を行ってください。

専用サーバー / VPS など

専用サーバーや VPS のようなサーバーについては、モジュールモードで PHP が動作していることが多いですので、読み書き可能な権限を設定します。

• config.server.php
• archives
• archives_rev
• media
• cache
• themes

パーミッションの設定については、サーバーのセキュリティに関わることになりますので、分かる方が自己責任で対応ください。

4.ファイル名の変更

アップロードしたファイルの中に htaccess.txt というファイルが、いくつかあります。このファイルを .htaccess というファイル名に変更してください。

• htaccess.txt
• archives/htaccess.txt
• archives_rev/htaccess.txt
• media/htaccess.txt
• cache/htaccess.txt
• private/htaccess.txt
• themes/htaccess.txt

また、htaccess.txt 以外に、以下の 3つのファイルも同様にドットをファイル名の前につけて、.txt を消してください。

• editorconfig.txt
• env.txt
• gitignore.txt

FTPソフトによっては、ドットで始まるファイルは初期設定では表示させないこともありますので、名前を変更した時点で見えなくなってしまうことがあります。

5.セットアップの開始

Webブラウザから、各ファイルをアップロードした URL にアクセスします。 最初に利用規約のページが表示されますので、ご利用規約をよくお読みのうえ、[同意してインストールを続ける]を押してください。

インストール画面が表示されます。事前準備を確認し必要な作業・情報確認をおこなってください。

セットアップページのメッセージに従って、セットアップを進めます。

5-1. 動作環境のチェック

3 4 の作業が完了しているかのチェックが行われます。

5-2. ドメインの設定

一般的には、インストール環境から自動的にドメインが編集されます。

5-3. データベースの設定

データベースの情報を設定します。以下情報を環境に合わせて設定ください。

照合順序について

照合順序は文字を並び替えや比較・検索するときのルールになります。 大文字と小文字の区別や、文字の並び順を指定します。

例えば「utf8(mb4)_general_ci」は、アルファベットの大文字小文字は区別しませんが他は全て区別します。「utf8(mb4)_unicode_ci」は、大文字小文字/全角半角を区別しないようになります。

これにより、検索などで「utf8(mb4)_unicode_ci」を使用すると、曖昧な検索ができるようになります。

比較表 区別する場合は「×」、区別せず同じ扱いになるのが「○」になります。

5-4. テーブルの作成

データベースの接続情報が正しければ、テーブルが作成されます。

5-5. ブログとユーザーの設定

初心者の方は「beginner テーマ」を、多くの機能を試したい方は「siteテーマ」か「UTSUWAテーマ」を選択されることをおすすめします。

6.セットアップの終了

セットアップを最後まで進め、「セットアップ完了」というメッセージが表示されたら、setup ディレクトリの名前を変更する事で全てインストール作業が完了となります。

以下の画面で（移動）ボタンをクリックすれば、自動で setup ディレクトリがリネームされます。

setup ディレクトリーを変更するまで他のページにはアクセスすることができません。 インストールが完了すると setup ディレクトリーはメンテナンス用のログイン画面に役割が変わります。

これで a-blog cms のインストールが完了しました。サイトにアクセスし、表示できることを確認しましょう。

管理ページにアクセスする際には URL の後に /login をつけてアクセスしてください。