Validatorの拡張について

Acms\Custom\Validatorクラス（extension/acms/Validator.php）を拡張する事でフォームのバリデーターに独自のバリデーターを使用する事が可能になります。標準のバリデーターにないものを利用したい場合にご利用ください。

テンプレート上の指定との対応

<input type="text" name="hoge" value="{var}">
<input type="hidden" name="field[]" value="hoge"> 
<input type="hidden" name="hoge#sample" value="cms">

<!-- BEGIN hoge:validator#sample -->
<p class="acms-admin-text-error">cmsという文字列が含まれていません。</p>
<!-- END hoge:validator#sample -->

テンプレート上にフォームオプション名と、Acms\Custom\Validator 内で拡張するメソッド名を同一にします。 メソッドの引数にはそのフィールドの入力値（$val）と、フォームオプションの値（$arg）が入ってきます。

<?php

namespace Acms\Custom;

/**
 * extension/acms/Validator.php
 *
 * バリデーターにユーザー定義のメソッドを追加します
 * ユーザー定義のメソッドが優先されます。
 */
class Validator
{
    /**
     * sample
     * バリデーターのサンプルメソッド
     *
     * @param  string $val - その変数の値
     * @param  string $arg - <input type="hidden" name="var:v#sample" value="ここの値">
     * @return boolean     - 入力が正しい場合は "ture" そうでない場合は "false" を返す
     */
    function sample($val, $arg)
    {
        // name="var:v#sample" value="cms" で指定した
        // 文字列が含まれていなかったらエラーを出す
        return (strpos($val, $arg) !== false);
    }
}

入力が正しければ true、正しくなければ false を return してください。

ランディングページテーマ（lp@site2018）の使い方

[キャプチャ]ランディングページテーマ

Ver.2.8.0より、あたらしくランディングページテーマ（lp@site2018）を追加しました。

ランディングページテーマの大きな特徴としては、以下の3つです。

  • ランディングページでよく使いそうな拡張ユニットを数多く用意していること
  • 背景色別ユニットグループの実装
  • カスタムユニットのフィールドグループのサンプルを同梱

ランディングページや1カラムのテンプレートを作成する際に、カスタマイズのベースとしてご活用ください。

それでは、実際の使い方について解説します。

インストールデータをインポートする

ランディングページテーマは、CMSをインストールした際に選択できないようになっています。ですが、機能を把握するためにもデータがないと困るかと思いますので、外部URLでインストールデータを用意しております。以下、インストールデータをインポートする手順になります。

  1. このテーマのインストールデータですが、インストーラーには用意していません。こちらのリンクより、インストールデータをダウンロードしてください。
  2. このテーマはsite2018の子ブログとして作られることを前提にデータを作っています。 site2018をインストールしたブログに子ブログを作り、1でダウンロードしたファイルを/private/import/フォルダにzipファイルのまま設置してください。
  3. 管理画面＞ブログの順に移動し、エクスポート・インポートタブをクリックします
  4. /private/import/フォルダに設置したファイルをセレクトメニューから選択してインポートしてください。
  5. 管理画面左のバーに設置されている「サイトを表示」ボタンからサイトを表示して、データが入っているを確認してください。

テーマについて

このテーマは、site2018テーマを継承したテーマです。lp@site2018を使用する際は、themesフォルダからsite2018を削除しないでください。

テーマの継承については詳しくは以下のドキュメントをご覧ください。

テーマフォルダ直下のテンプレート

entry.html

詳細ページのテンプレートです。

template.yaml

lp@site2018テーマを選択したときに、テンプレートをまとめて設定できるファイルです。使用するかどうかは管理画面＞コンフィグ＞テーマ設定 にて変更できます。

thanks.html

ユニットで挿入できるフォームの終了画面です。

フォルダ構成

admin

lp@site2018テーマオリジナルの管理画面のテンプレートが入ったフォルダ。 lp@site2018テーマでは主に以下のテンプレートが入っています。

  • カスタムフィールド（エントリー）
  • 拡張ユニット

css

lp@site2018テーマで使っているCSSが入ったフォルダです。

form

カスタムユニット「フォーム」で使用するフォルダです。

images

lp@site2018テーマで使っている画像が入ったフォルダです

include

lp@site2018テーマ内のインクルードしているテンプレートをまとめたフォルダです。

js

lp@site2018テーマで使っているJavaScriptが入ったフォルダです。

scss

lp@site2018テーマで使っているSCSSファイルが入っているフォルダです。 このscssフォルダに入っているSCSSファイルをコンパイルしてCSSを出力しています。

a-blog cmsの基本機能

カスタムフィールド

ブログ

  • サイトの設定（site2018からの継承）
  • SEOの設定（site2018からの継承）
  • OGPの設定（site2018からの継承）
  • 会社情報（site2018からの継承）
  • SNSアカウントの情報（site2018からの継承）
  • scriptタグ（site2018からの継承）
  • アクセス解析（site2018からの継承）
  • Search Console（site2018からの継承）

カテゴリー

  • SEOの設定（site2018からの継承）
  • ページタイトルの設定（site2018からの継承）

エントリー

  • 表示設定
  • 色の設定

モジュール

  • 見出しの設定（site2018からの継承）

カスタマイズについて

カスタムユニットの拡張

  • 背景画像
  • メディアレイアウト
  • ご注文フォーム
  • スプリットレイアウト
  • アコーディオン
  • お客様の声
  • 特徴
  • よくある質問
  • SNSシェアボタン
[キャプチャ]背景画像

背景画像

[キャプチャ]メディアレイアウト

メディアレイアウト

[キャプチャ]ご注文フォーム

ご注文フォーム

[キャプチャ]スプリットレイアウト

スプリットレイアウト

[キャプチャ]アコーディオン

アコーディオン

[キャプチャ]お客様の声

お客様の声

[キャプチャ]特徴

特徴

[キャプチャ]よくある質問

よくある質問

[キャプチャ]SNSシェアボタン

SNSシェアボタン

編集画面

ユニットグループの背景色や、見出しやリード文、本文の文字色を指定するために、カラーピッカーを使用しています。エントリーのカスタムフィールドとして用意しています。

カラーピッカーのプラグイン

  • jQuery MiniColorsというjQueryプラグインを使用しています。使用方法に着いてはjQuery MiniColorsの公式サイトをご覧ください。
  • jQuery MiniColors

編集画面専用のJS・CSSの読み込み

  • 編集画面専用のJS・CSSの読み込みは、/include/head/edit.htmlで行なっています。
カラーピッカーはエントリーのカスタムフィールドで使用できます

カラーピッカーの使用場所

パーツの表示設定

以下のパーツがエントリーごとに表示・非表示を設定できるようになっています。

  • ヘッダー
  • ページタイトル
  • トピックパス
  • お問い合わせ情報
  • フッター

チェックをつければ各パーツが表示されます。

ランディングページテーマの解説は以上となります。それでは、みなさまのカスタマイズのご参考に役立てればと思います。

テンプレート変数表

SetTemplateを使う事でインクルードファイル数が減り共通化できるようになり、テンプレートの管理がしやすくなります。ただ、せっかくSet_Templateでテンプレートを変数化しても、どのようなテンプレートが用意されているか分からないと使いづらいものになってしまいます。

ここでは、テンプレートの変数表を作成する事を学び、より開発しやすい環境を整えましょう。

Docコメントの書き方

SetTemplateに特定の書き方でHTMLコメントを書く事により、動的に変数表を作成する事が可能になります。 SetTemplateを使う場合は、以下のようなコメントを書くようにしましょう。

<!--@doc
 # 自由にコメントを書けます。
 # コメントは複数行書けます。
 # 
 # @id template_id
 # @param hoge | パラメーター説明文1
 # @param fuga | パラメーター説明文2
 # @author 作った人
 # @create 2016/04/12 
-->
<!-- BEGIN_SetTemplate id="template_id"  -->
...
<!-- END_SetTemplate -->

「<!--@doc」 からはじまり、そのテンプレートを説明するコメントを複数行書く事ができます。 また、@から始まる特定の書き方をする事により、変数表の情報をより詳しくする事ができます。（@idは必須項目です）

変数表の表示

テンプレート変数表ページを作っていきます。以下の手順で行います。

  1. テンプレートの作成 自分のテーマに適応なファイル名でテンプレートを作成します（e.g varstable.htmlなど）
  2. テンプレートに動的に変数表を作成するモジュールを貼り付け。以下コード参照。
  3. 変数表に表示したいSetTemplateの定義がされたファイルを読み込む。
<!-- BEGIN_MODULE Template_VarsTable -->

<!-- 表示したいSetTemplateの定義がされたファイルを読み込み -->
<!-- #include file="/vars/all.html" -->

<!-- 変数表のテンプレートをsystemテーマから読み込み -->
<!-- #include file="/admin/template/vars-table.html"-->

<!-- END_MODULE Template_VarsTable -->

ここまで出来たらブラウザで作成したテンプレートにアクセスすると以下のように変数表が表示されるようになります。変数表を作る事によりテンプレートのパーツが整理され複数人のチーム開発でも大変役に立ちます。是非活用しましょう。

テンプレート変数表

テンプレート変数表