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

## 2019-05-17追記

**Ver.2.10から、エントリーの基本項目の表示、ラベルの変更は管理ページから可能になりました。**
ブログごと、カテゴリーごとで設定可能です。「コンフィグ＞編集設定」を参照ください。

![24f3f46370df583fc0f2324f853e13f1.jpg](https://qiita-image-store.s3.amazonaws.com/0/21117/20733d6f-dd6f-72fc-5ba7-31879e6c58fe.jpeg)

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()**」となることに注意してください。

```javascript: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](https://qiita-image-store.s3.amazonaws.com/0/21117/5778d0ce-b0db-e439-8c42-dcc6e62777bb.jpeg)

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

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

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

## タグ欄を非表示にする

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

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

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

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

![87087cd636e51bb2c3fb86d4a65be6fd.jpg](https://qiita-image-store.s3.amazonaws.com/0/21117/bbdc483e-b654-50ab-b010-546b5d80b7d0.jpeg)

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

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

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

```javascript: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](https://qiita-image-store.s3.amazonaws.com/0/21117/c30fb40f-1e99-5a2f-547f-cc126a9e9951.jpeg)

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

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

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

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

## ツールチップを追加する

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

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

```javascript: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](https://qiita-image-store.s3.amazonaws.com/0/21117/b0cf2c8e-c971-854d-3899-3d68b9129615.jpeg)

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

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

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

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

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

```html: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 -->
```