使いやすい編集画面を作ってみよう
この口座はa-blog cms Training Camp 2021 Autumnで行った内容です。
当日の内容がYouTubeに上がっているため、よければご覧ください。
下準備
管理画面側で読み込むCSSとJavaScriptファイルを作成して、エントリー編集画面に読み込んでおきましょう。
実践
使用テーマ直下に admin-asset 作成し、フォルダの中に field-edit.css と field-edit.js を作成しておきます。
1. 管理画面側編集ページでの読み込み
/使用テーマ/admin.htmlをひらき、 先程作成したcssとjsファイルを Touch_Edit の中で下記のように読み込みます。
@extends("/_layouts/admin.html")
@section("admin-css")
@parent
<!-- カスタムCSSを記述 -->
<!-- BEGIN_MODULE Touch_Edit -->
<link rel="stylesheet" href="/dest/admin.css">
<link rel="stylesheet" href="/admin-asset/field-edit.css">
<!-- END_MODULE Touch_Edit -->
@endsection
@section("admin-js")
@parent
<!-- カスタムJSを記述 -->
<script src="/dest/vendor.js" async></script>
<script src="/dest/admin.js" charset="UTF-8"></script>
<!-- BEGIN_MODULE Touch_Edit -->
<script src="/admin-asset/field-edit.js"></script>
<!-- END_MODULE Touch_Edit -->
@endsection
2. 表側編集ページでの読み込み
/使用テーマ/include/head/link.html をひらき、 作成したcssファイルを Touch_SessionWithContribution の中で下記のように読み込みます。
<!-- BEGIN_MODULE Touch_SessionWithContribution -->
<link rel="stylesheet" href="/css/acms-admin.min.css">
<link rel="stylesheet" href="/admin-asset/field-edit.css">
<!-- END_MODULE Touch_SessionWithContribution -->
/使用テーマ/include/head/js.html をひらき、 作成したjsファイルを Touch_SessionWithContribution の中で下記のように読み込みます。
<!-- BEGIN_MODULE Touch_SessionWithContribution --><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<script src="/admin-asset/field-edit.js"></script>
<!-- END_MODULE Touch_SessionWithContribution -->
これで下準備は完了です。
カスタムフィールドの必須解除ができるチェックボックスを実装してみよう
目標
実践
1. カスタムフィールドメーカーでコード生成
/使用テーマ/admin/entry/field.html を開いておきます。
カスタムフィールドメーカーで入力欄を生成します。
カスタムフィールドメーカー
https://developer.a-blogcms.jp/tools/custom-field.html
生成内容
カスタムフィールド
チェックボックス
タイトル : フィールド設定
フィールド : test_f1
項目名 : 必須解除
値 : onテキスト
タイトル : フィールドタイトル
フィールド : test_f2
オプション > 入力チェック > バリデータ：必須 [ フィールドタイトルが入力されていません ]
※今回はJavaScriptによるバリデートを使用するにチェックは入れないでください。
生成した入力用ソースをコピーして、あらかじめ開いておいた /使用テーマ/admin/entry/field.html に貼り付けます。
管理画面 > エントリー > エントリー作成 からエントリー作成画面を表示してフィールドが追加されたことを確認します。
保存ボタンを押してバリデータによってエラー表示されることも確認しておいてください。
2. スタイル調整
テーブルに見出しをつけます。
先程追加したフィールドテーブルの上に下記ソースを貼り付けてください。
<h2 class="acms-admin-admin-title2 acms-admin-margin-top-medium">必須切り替えテスト</h2>
必須ラベルをつけます。
「フィールドタイトル」の後ろ（thタグの中）に下記ソースを貼り付けてください。
<span class="acms-admin-label acms-admin-label-danger acms-admin-margin-left-mini js-test_f2_label">必須</span>
フィールドタイトルのテキストinputの長さを調整します。
フィールドタイトルのテキストinputのクラス acms-admin-form-width-full を acms-admin-form-width-large に書き換えてください。
エラー文の余白調整を調整します。
acms-admin-text-error に acms-admin-margin-top-mini クラスを追加してください。
エラー文にアイコンをつけます。
acms-admin-text-error 要素の中身を下記で置き換えてください。
<span class="acms-admin-icon acms-admin-icon-attention"></span><span class="acms-admin-align-middle">フィールドタイトルを入力してください</span>
スタイルが整ったかエントリー編集画面を再度確認します。
3. JSで必須解除する
エラー文のpタグに js-test_f2-error-text クラス を追加します。
/使用テーマ/admin-asset/field-edit.js に下記ソースを貼り付けてください。
document.addEventListener('DOMContentLoaded', function() {
// チェックボックスのinput要素を取得
var checkbox = document.getElementById('input-checkbox-test_f1-on');
// 必須バリデータ要素を取得
var checkHidden = document.getElementById('test_f2-v-required');
// 必須ラベル要素を取得
var label = document.querySelector('.js-test_f2_label');
// ページロード時にチェックボックスにチェックが入っていた場合はバリデータ無効化
if (checkbox.checked) {
checkHidden.disabled = true;
label.style.display = 'none';
}
// チェックボックスをON/OFFした時の処理
checkbox.addEventListener('change', function(event) {
var errorText = document.querySelector('.js-test_f2-error-text');
if (event.target.checked) {
// チェックした時はバリデータを無効化し、エラー文が出ていたら非表示にする
checkHidden.disabled = true;
label.style.display = 'none';
if (errorText) {
errorText.style.display = 'none';
}
} else {
// チェック外した時はバリデータを有効化し、エラー文非表示のスタイルを消す
checkHidden.disabled = false;
label.style.display = '';
if (errorText) {
errorText.style.display = '';
}
}
});
});動きの確認をしてください。
詳細設定の公開日時と掲載期限を抜き出してみよう
目標
実践
1. 公開日時と掲載期限の情報を入れるテーブルを用意
下記ソースを /使用テーマ/admin/entry/field.html に貼り付けます。
<h2 class="acms-admin-admin-title2 acms-admin-margin-top-medium">イベント情報</h2>
<table class="acms-admin-table-admin-edit"><tbody class="js-date-prepend"></tbody></table>
今貼り付けたソースには、すでにJSで制御する時に使用する js-date-prepend クラスがつけてあります。
h2タグ見出しもついていますが、不要な場合は削除してください。
2. 期限要素を移動させる
下記ソースを /使用テーマ/admin-asset/field-edit.js に追記してください。
document.addEventListener('DOMContentLoaded', function() {
// ~ 割愛 ~
ACMS.addListener("acmsDispatch", function() {
// 公開期間をカスタムフィールド内へ移動
var datePrepend = document.querySelector('.js-date-prepend');
var entryStartDateDisplay = document.getElementById('entry-start-date-display');
var entryEndDateDisplay = document.getElementById('entry-end-date-display');
// 所得したカスタムフィールドのテーブル要素の末尾に期限要素を追加していく
datePrepend.appendChild(entryStartDateDisplay);
datePrepend.appendChild(entryEndDateDisplay);
});
});
公開日時と掲載期限が移動するかエントリー編集画面を開いて確認します。
3. スタイル調整
期限入力欄が間延びしているので、詳細設定にあった時とおなじようなスタイルに調整します。
下記ソースを /使用テーマ/admin-asset/field-edit.css に貼り付けてください。
/* 公開日時と掲載期限をエントリーのカスタムフィールドに移動 */
.js-date-prepend .entryFormDateBlockWrap {
margin-right: 10px;
}
@media screen and (min-width: 480px) {
.js-date-prepend .entryFormDateBlockWrap{
display: inline-block;
}
.js-date-prepend .entryFormDateBlock {
display: inline-block;
width: 150px;
vertical-align: middle;
}
}
スタイルが整ったかエントリー編集画面を再度確認します。
カスタムフィールドグループにデフォルト値を入れておくには
目標
実践
1. カスタムフィールドメーカーでコード生成
/使用テーマ/admin/entry/field.html を開いておきます。
カスタムフィールドメーカーで入力欄を生成します。
カスタムフィールドメーカー
https://developer.a-blogcms.jp/tools/custom-field.html
生成内容
カスタムフィールドグループ
グループのタイトル : イベント情報
フィールド名 : group_test_f3
横向きレイアウトテキスト
タイトル : 見出し
フィールド : test_f3_item_titleテキストエリア
タイトル : テキスト
フィールド : test_f3_item_note
生成した入力用ソースをコピーして、あらかじめ開いておいた /使用テーマ/admin/entry/field.html に貼り付けます。
管理画面 > エントリー > エントリー作成 からエントリー作成画面を表示してフィールドが追加されたことを確認します。
2. デフォルト値用の入力欄を作成する
入力欄を設置します。
先ほど生成たコードの group_test_f3:loop 内をコピーして、:loop開始コメントの上に3回ペーストしてください。
タイトルをデフォルト値に書き換えます。
ペーストしたコード内 name="test_f3_item_title[]" 要素の value をそれぞれ「出演」「企画」「協賛」に置き換えてください。
テキストをデフォルト値に書き換えます。
ペーストしたコード内の textarea 要素の中身を全て「内容を書き換えてください。不要な場合は項目ごと削除してください。」に置き換えてください。
3. 新規エントリー作成時にのみデフォルト値が読み込まれるようにする
下記IF文でペーストしたコードを囲ってください。
<!-- BEGIN_IF [%{EID}{test_f3_item_title}{test_f3_item_note}[delnl]/em] -->
~ ここにデフォルト値を設定したフィールドが入ります。 ~
<!-- END_IF -->
管理画面 > エントリー > エントリー作成 からエントリー作成画面を表示して確認します。
デフォルト値がエントリー新規作成時にのみ読み込まれて、エントリー編集時/エントリー保存失敗時に不要なフィールドが増えないことを確認してください。
4. SetTemplateでテンプレートをスッキリさせる
デフォルト値が設定されている部分が冗長なのでSetTemplateを使いテンプレートの変数化をしていきます。 @include でも同様のことができので、どちらで対応してもOKです。
SetTemplate を用意します。 下記コードを /使用テーマ/admin/entry/field.html の上の方に貼り付けてください。
<!-- BEGIN_SetTemplate id="tpl_test_f3_item" -->
<!-- END_SetTemplate -->
デフォルト値設定しているtr要素の一つをコピーし、SetTemplateの中に貼り付けてください。
次に、SetTemplate 内の name="test_f3_item_title[]" 要素の value を {{tpl_item_title}} で置き換えます。
GET_Template を設置します。
<!-- BEGIN_IF [%{EID}/em/_and_/<!-- BEGIN_MODULE Admin_Messages -->{message}<!-- END_MODULE Admin_Messages -->/neq/failure] --> の中を下記で置き換えてください。
<!-- エントリー作成時のデフォルト設定 -->
<!-- GET_Template id="tpl_test_f3_item" tpl_item_title="出演" -->
<!-- GET_Template id="tpl_test_f3_item" tpl_item_title="企画" -->
<!-- GET_Template id="tpl_test_f3_item" tpl_item_title="協賛" -->
GET_Templateできているかエントリー新規作成して確認します。
5. スタイル調整
「イベント情報」見出しが2つある場合は削除してください。
theadは不要かと思いますので削除してください。
name="test_f3_item_title[]" が入っている td を th に変更してください。
必要であれば placeholder を入れてください。
テーブルがくっついて線が2重になっている場合は、/使用テーマ/admin-asset/field-edit.css に下記を追記してください。
.acms-admin-table-admin-edit + .acms-admin-table-admin-edit {
border-top: 0;
}
スタイルが整ったかエントリー編集画面を再度確認します。
6. テキストエリアを Lite Editor にする
js-lite-editor-field クラスを name="test_f3_item_note[]" 要素につけてください。
※ 表示側の解説は本記事でしていませんが、表示する時には校正オプションの[raw]が必要になります。
カスタムフィールド用の Lite Editor JS をカスタマイズします。
/使用テーマ/admin-asset/field-edit.js に下記を追記してください。
document.addEventListener('DOMContentLoaded', function() {
// ~ 割愛
ACMS.Ready(function() {
ACMS.Config.LiteEditorFieldConf.btnPosition = 'bottom';
ACMS.Config.LiteEditorFieldConf.classNames = {
LiteEditor: 'entryFormLiteEditor',
LiteEditorBtnGroup: 'acms-admin-btn-group acms-admin-btn-group-inline',
LiteEditorBtn: 'acms-admin-btn',
LiteEditorBtnActive: 'acms-admin-btn acms-admin-btn-active',
LiteEditorBtnClose: '',
LiteEditorTooltipInput: 'acms-admin-form-width-full'
};
ACMS.Config.LiteEditorFieldConf.btnOptions = [
{ label: 'リンク', tag: 'a', className: '', sampleText: 'リンクテキスト' },
{ label: '強調', tag: 'em', className: '', sampleText: ' ' },
{ label: '重要', tag: 'strong', className: '', sampleText: ' ' }
];
});
});
Lite Editor のスタイル調整もしておきます。
js-lite-editor-field の親要素に field-lite-editor-wrap クラスを付けてください。
次に、/使用テーマ/admin-asset/field-edit.css に下記を追記します。
.field-lite-editor-wrap .lite-editor-toolbox {
margin-top: 6px;
padding: 0;
background-color: transparent;
border: none;
border-radius: 0;
}
.field-lite-editor-wrap .lite-editor-btn-group-wrap {
padding-left: 0;
}
エントリーの編集ページが Lite Editor 化されているか確認します。
ユーザー情報をセレクトできるようにしてみよう
目標
実践
1. ユーザー追加
これからユーザー情報を表示させたいので、ユーザーがあまりいない場合はユーザー追加しておきましょう。 管理画面 > ユーザー の [ユーザー作成] から追加できます。 10件以上あると後から行うカスタマイズで変化がわかりやすいです。
2. カスタムフィールドメーカーでコード生成
/使用テーマ/admin/entry/field.html を開いておきます。
カスタムフィールドメーカーで入力欄を生成します。
カスタムフィールドメーカー
https://developer.a-blogcms.jp/tools/custom-field.html
生成内容
カスタムフィールドグループ
グループのタイトル : 担当者
フィールド名 : group_test_f4
横向きレイアウトセレクトボックス
タイトル : 担当者名
フィールド : test_f4_item_user
項目名 : 名前
値 : ユーザーID
生成した入力用ソースをコピーして、あらかじめ開いておいた /使用テーマ/admin/entry/field.html に貼り付けます。
エントリー編集画面を表示してフィールドが追加されたことを確認します。
3. User_Search モジュールを追加する
User_Search モジュールのスニペットと変数表を開きます。
ビルトインモジュール
https://developer.a-blogcms.jp/document/reference/built_in.html#entry-6
※ 他のUser系モジュールでも問題ないです。
スニペットから下記の必要なものをコピぺしていきます。
値が空になっていないoption要素を囲うように貼り付けてください。
- モジュールの開始と終了
- user:loopの開始と終了
変数表から下記の必要なものをコピぺしていきます。
値が空になっていないoption要素内に貼り付けます。
- ユーザーID ... valueに当たる部分に変数を中括弧で括って入れます。
- ユーザー名 ... option要素の表示テキストとして変数を中括弧で括って入れます。
4. User_Search内のエントリーフィールド値をエスケープする
group_test_f4:loop 内の option要素に中括弧が2重になっている部分があるので、その一番外側をエスケープします。
<option value="{id}" \{test_f4_item_user:selected#{id}\}>{name}</option>
5. User_Search モジュールにIDを設定
管理画面 > モジュールID を開きモジュールIDを作成します。
モジュール : User_Search
モジュールID : user_search_test
名前 : カスタマイズ講座用（ユーザー情報をセレクトできるようにしてみよう）
※ モジュールIDや名前はなんでもOKです。わかりやすいものにしてください。ブログID : ユーザーが登録されている（またはこれから登録する）ブログを選択
一度保存します。
表示設定を開き、表示件数や権限などを調整します。
※表示件数を10件以上にしておくとこの後に行うカスタマイズでの変化がわかりやすくなります。
作成したモジュールIDをコピーして、テンプレート側のモジュールに貼り付けます。
<!-- BEGIN_MODULE User_Search id="user_search_test" -->
エントリー編集画面を確認し、担当者のselectにユーザー情報が反映されていることを確認します。
6. ユーザーが増えても困らないようにする
現在ユーザー選択はただのselectボックスなのでユーザーが増えた場合に探すのが大変です。 こういう時は、select2.js の組み込みJSを入れておくと便利です。 ユーザーが10こ以上になるとテキスト検索がかけれるようになります。
担当者名のセレクトボックスに js-select2 クラスをつけておきましょう。
7. スタイル調整
value が空の option には「選択してください」を入れておくと親切かと思います。
担当者の見出しが上の要素とくっついている場合は、余白クラスをつけておきましょう。
<h2 class="acms-admin-admin-title2 acms-admin-margin-top-medium">担当者</h2>
おわり
お疲れ様でした。
今回は裏側の作り込み方や小技紹介をさせていただきました。
この記事をみて気になる項目がありましたら表側の実装にも挑戦してみてください。
