jQuery
ablogcms

a-blog cmsのエントリー基本項目を「edit.html」を編集せずカスタマイズする

24f3f46370df583fc0f2324f853e13f1.jpg

a-blog cmsのエントリー作成時に、先頭に表示される基本の入力項目は、以下のテンプレートを参照しています。

/themes/system/admin/entry/edit.html

基本項目をカスタマイズしたい場合、「/admin/entry/edit.html」を製作中のテーマに複製すればよいのですが、このテンプレートは影響範囲が広く、今後のバージョンアップなどを考えると、ちょっとした変更での複製は避けたいところです。

jQueryで動的にフォームを書き換える方法をご紹介します。

基本形

作成中のテーマに、以下のファイルを作成します。すでにfield_foot.htmlを作成している場合は、そのファイルをテキストエディタで開いてください。
head要素ではなく、field_foot.htmlに記述する理由は、のちほど補足します。

/admin/entry/field_foot.html

ファイルの先頭に以下のコードを記述してください。
スクリプトの先頭で、フォームとカテゴリー情報を前もって取得しています。a-blog cmsは、ページの表示が完了してから処理したい場合、「$(function()」ではなく「ACMS.Ready(function()」となることに注意してください。

acms_admin_entry_edit_01.js
<script>
ACMS.Ready(function() {
    var f = $('form#entryForm');
    var current_rccd = '%{RCCD}';
    var current_ccd = '%{CCD}';
    var current_cname = '%{CATEGORY_NAME}';
    var current_eid = '%{EID}';

// ここにスクリプトを書きます

});
</script>

投稿時の初期ステータスを「公開」にする

5dc8b3433d39d88cdb02bc24ac93b34b.jpg

a-blog cmsは管理画面から「新規エントリー作成時のステータス」を設定できないため、必ず「下書き」が選択されます。これを「公開」に変更します。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。

acms_admin_entry_edit_02.js
// デフォルトのステータスを「公開」にする
$('select[name="status"]', f).val('open');

タグ欄を非表示にする

タグ欄を非表示にします。CSSの「nth-child」でもできそうに思えますが、バージョンアップ後も変更される可能性が少ない「name属性の値」から直上のtr要素を解析した方が確実です。
もしもフォームがtable要素ではなくなったとしても、parentsの引数を変更するだけで修正できます。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。

acms_admin_entry_edit_03.js
// タグ欄を非表示にする
$('input[name="tag"]', f).closest('tr')
    .css({
        display: 'none'
    });

カテゴリーを変更不可にする

87087cd636e51bb2c3fb86d4a65be6fd.jpg

通常はプルダウンとなっているカテゴリーを、変更できないようにします。カテゴリーによって入力項目を変更することがあるa-blog cmsでは、かなり便利なカスタマイズです。

td要素の内容を、「display:none」を指定したdiv要素でラップしてから、現在のカテゴリー名を赤文字で表示します。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。

acms_admin_entry_edit_04.js
// カテゴリーを変更不可にする
if(current_cname == '') {
    current_label = "指定なし";
} else {
    current_label = current_cname;
}
$('select[name="category_id"]', f).closest('td')
    .wrapInner('<div style="display: none;"></div>')
    .append('<span class="acms-admin-text-danger">' + current_label + '</span>');

特定カテゴリーのときだけタイトル欄を変える

5a288911660cabb5dc96d61e6e0b86e9.jpg

タイトル欄を、異なる目的で利用することがあります。例えば「スタッフ紹介」などのコンテンツでは、「氏名」として扱うことが多いです。その場合はやはり、ラベルを変更したり、氏名の書き方を統一するよう促したいものです。

入力項目の「直上のtd要素」の「兄弟のth要素」を解析できれば、ラベルを変更できます。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。
カテゴリーのコード名が「staff」のときだけ見出しが「氏名」となり、入力欄が短くなり、プレースホルダーが表示されます。

acms_admin_entry_edit_05.js
// 特定カテゴリーのときだけタイトル欄を変える
if(current_ccd == 'staff') {
    $('input[name="title"]', f)
        .css({
            maxWidth: '10em'
        })
        .attr('placeholder', '山田 太郎')
        .closest('td')
        .siblings('th')
            .text('氏名');
}

ツールチップを追加する

投稿画面にも、管理メニューと同様にツールチップを追加することができます。詳細設定の「インデキシング」は名前だけでは機能がわかりにくいので、説明文を付与してみます。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。

acms_admin_entry_edit_06.js
// インデキシングの後に説明文を追加する
$('input[name="indexing"]', f).closest('tr').find('th').append('<i class="acms-admin-icon-tooltip js-acms-tooltip acms-admin-margin-left-mini" data-acms-tooltip="チェックを外すと、このエントリーは一覧ページに表示されない「隠しページ」となります。"></i>');

「acms-admin-margin-left-mini」は管理画面用フレームワークの隠しクラスです。左が5px空きます。また、ツールチップは、JavaScriptで追加した要素でも自動的に生成されます。

新規作成時のタイトルを自動入力する

83278144474b7dcd022f550b9191ea4c.jpg

エントリータイトルの入力は必須となっていますが、作成するコンテンツによっては、タイトルが重要でないことがあります。その場合に、カテゴリーと投稿日時をもとに、タイトルを自動で入力します。

エントリーの新規作成時は「エントリーIDが未定=%{EID}が空」となっていることを利用しています。テスト投稿の時だけ有効にすると、いちいち「あああ」などと書かなくていいので楽です。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。

acms_admin_entry_edit_07.js
// 新規作成時のタイトルを自動入力する
if(current_cname == '') {
    current_label = '';
} else {
    current_label = current_cname + ':';
}
if(current_eid == ''){
    var now = new Date();
    var timestamp = '';
    timestamp =
        now.getFullYear()
        + '-' + ('0' + (now.getMonth() + 1)).slice(-2)
        + '-' + ('0' + now.getDate()).slice(-2)
        + ' ' + ('0' + now.getHours()).slice(-2)
        + ':' + ('0' + now.getMinutes()).slice(-2)
        + ':' + ('0' + now.getSeconds()).slice(-2);

    $('input[name="title"]', f).val(current_label + timestamp);
}

補足

「css」メソッドの改行を詰めていない理由

詰めると「{}(波カッコ)」がa-blog cmsの変数として評価されてしまうのを防ぐためです。通常は波カッコの前に都度「\(半角バックスラッシュ)」を入れるとエスケープされますが、ここではできないようです。

なぜfield_foot.htmlにスクリプトを書くのか

a-blog cmsでは、カスタムフィールドを追加する場合は、必ず「field.html」か「field_foot.html」を編集します。
「field.html」は基本設定の直後、「field_foot.html」はユニット編集の終了後に呼び出されます。

どちらに書いても動作には問題ありませんが、「field_foot.html」は入力項目のHTMLよりも後に呼び出され、かつ、a-blog cmsの初期テーマでは使用されていないため、このようなスクリプトの追加に向いています。

head要素のテンプレートに書くと、編集画面のときだけ有効にする条件分岐が必要となります。また、入力項目のテンプレートから離れているので、どこをカスタマイズして表示を変更したのか、あとでわかりにくくなってしまいます。
このため当記事では、処理的な正しさより可読性を優先しています。

どうしても気になる場合は、どのテンプレートを編集する必要があるかを、コメントとして残しておくようにしましょう。

acms_comment_sample.html
<!-- BEGIN_MODULE sample:veil -->
=============================================
jQueryによるフォーム項目修正
/include/head/js.html を参照
=============================================
<!-- END_MODULE sample:veil -->

<!-- BEGIN adminEntryEdit -->
<div class="acms-box-medium">
    <!--#include file="/admin/entry/edit.html"-->
    <!--#include file="/admin/entry/add.html"-->
</div>
<!-- END adminEntryEdit -->