あさぎブログ


PDFファイルをサイト上で運用する場合は、a-blog cms の「メディア機能」を使います。今回はこのメディア機能を少し便利にするカスタマイズをご紹介します。

このエントリーは「 a-blog cms Advent Calendar 2017 」の13日目の記事です。


メディア機能を有効にする


a-blog cms の「メディア機能」は画像やPDFを一括管理するための機能です。この機能は初期状態で利用できません。管理画面で「メディア機能」をオンにする必要があります。

メディアユニット | ユニット | ドキュメント | a-blog cms developer


管理ページ>機能設定 >基本 にチェックボックスがあります


これで、a-blog cms の管理画面の左側サイドバーに「メディア管理」が追加されました。ここからPDFなどのファイルをアップロードすることができます。


メディア管理に移動するためのボタンを設置


管理画面サイドバーからも移動できますが、PDFを頻繁にアップロードする場合はもっと楽に運用ができるようにしたいものです。今回はアクションボックスに「PDFアップロード」というボタンを追加します。


左上に「PDFアップロード」ボタン


テンプレートのカスタマイズ

アクションボックスをカスタマイズするためのHTMLテンプレートファイルは /system/admin/action.html です。systemテーマを直接カスタマイズするとアップデート時に上書きされてしまうので、現在使っているテーマ内のadminディレクトリにaction.htmlを複製しましょう。

action.htmlの任意の場所に、下記のソースを追加します。4行目の value="media_index" でメディア管理の一覧ページを指定しています。

<form action="" method="post" class="acms-admin-inline-btn">
	<input type="submit" name="ACMS_POST_2GET" value="PDFアップロード"  class="acms-admin-btn-admin"/>
	<input type="hidden" name="admin" value="media_index" />
	<input type="hidden" name="bid" value="%{BID}" />
</form>

PDFをタイトルで絞り込む


メディア管理にアップロードしたPDFファイルが増えてくると、目的のファイルを探すのが大変になります。そこで、インクリメンタルサーチ(incremental search) を使って即座にキーワードごとに対象を絞り込めるようにカスタマイズしました。


「ファイル名で絞り込む」フィールドにキーワードを入力すると…


ファイル名に「sample」が含まれたPDFファイルを絞り込めました


テンプレートのカスタマイズ

メディア管理の一覧画面をカスタマイズするためのHTMLテンプレートファイルは /system/admin/media/index.html です。前述の action.html と同様に、現在使っているテーマ内のadminディレクトリに複製しましょう。

キーワード絞り込み用の入力欄を追加するコードは以下の通りです。既存の .acms-admn-filter 内の任意の場所に、4〜7行目の .acms-form を追記します。(6行目の .acms-admin-form-width-3quarters はinputの幅を指定するクラスです)

<div class="acms-admin-filter">
	<form action="" method="post" class="filter form-inline acms-admin-form">
		(中略)
		<div class="acms-form">
			ファイル名で絞り込む:
	  		<input type="text" class="acms-admin-form-width-3quarters js-search-box" placeholder="キーワード">
		</div>
	</form>
</div>

これで絞り込むための検索フォームができました。次は、絞り込まれる側のテーブルに必要なクラス「js-incremental-search」を追加します。

tableタグのクラスの末尾に .js-incremental-search を、trタグに .js-search-element を追加しました。これでカスタマイズは以上です。

<table role="presentation" class="adminTable acms-admin-table-admin acms-admin-table-heading acms-admin-table-hover js-incremental-search">
	<tr class="js-search-element">
		<!-- ここにテーブルのHTML -->
	</tr>
</table>

このカスタマイズの注意点


このカスタマイズの弱点としては、現在表示されているPDFファイルしか絞り込めないことです。デフォルトは20件表示なのでそれ以上のファイルがある場合、あらかじめ50件、100件表示にしてファイル名を読み込んでおく必要があります。ここはもう少しスマートに改良したいところです。


PDFを活用してより快適なサイト運用を!


a-blog cms に限らず、CMSを導入したケースではPDFファイルのアップロードは少なくなってきた印象です。ただ、社内報や内部資料、掲示用のお知らせなどでPDFを作っている場合は、せっかくなら活用しましょう!というご提案をよくします。今回のカスタマイズは、その工程を少しでも簡単にしたくて考えたものです。(実装にあたり、開発元・アップルップルの森田さんにアドバイスをいただきました!ありがとうございます!)

a-blog cms Advent Calendar 2017 」は明日以降も続いていきます。今年はヘビーユーザーさんのTips記事が多いので楽しみにしています。