レベル8フィールドの入力項目をカスタマイズする ②テキスト+画像

カスタムフィールド

カスタムフィールドメーカー

目標

「物件情報」カテゴリー内エントリー「物件情報1」に4枚目のサブイメージを表示しましょう。

解説使用テーマbeginner2019
作業エントリー/realestate/entry-9.html

Before

After

目次

  1. カスタムフィールドメーカーを使って入力欄を作成する
  2. 入力内容をサイト側に表示する
  3. カスタムフィールドのフォームを追加する場所についての解説

カスタムフィールドメーカーを使って入力欄を作成する

今回のハンズオンでは、カスタムフィールドメーカーを使って下図のように画像とキャプションの入力欄を設置します。

画像とキャプションの入力欄

まずは以下の手順でカスタムフィールドメーカーに移動しましょう。

  1. [管理ページ] をクリックする
  2. メニュー内 [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリックする
  3. ガイドライン/ツール内 [カスタムフィールドメーカー] をクリックする
カスタムフィールドメーカー

作業場所はエントリーのカスタムフィールドになるので、作成モードはデフォルトのまま「カスタムフィールド」に設定しておきます。

まずは画像について、入力欄の種類・タイトル・フィールド・ツールチップを以下のように入力し、一度 [生成] ボタンをクリックしてください。

入力欄の種類画像
タイトルサブイメージ4
フィールドsub_photo04
選べるメディアのタイプを選択画像のみ
カスタムフィールドメーカー

画像については、タイトルやフィールドの他に4種類の画像サイズが設定できます。サイズを詳細に設定することで、例えばクリックで拡大画像を表示したい場合や、SNSでリンクを共有した際に正方形のOGP画像を表示したい場合など、あらゆる条件に合わせて出力する画像のサイズを調整することができます。

今回は、デスクトップ画面では276pxの幅で表示し、画像をクリックした際には幅1716pxで表示される仕様に設定します。

続けて同じような要領でテキストについて以下のように入力し、再度[生成]ボタンをクリックします。2つ以上のカスタムフィールドを設ける場合は、項目ごとにソースを生成することで、新しいソースが続けて追加されます。

入力欄の種類テキスト
タイトルキャプション
フィールドsub_caption04
カスタムフィールドメーカー

全体として以下のような入力用HTMLソースが生成できました。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>サブイメージ4</th>
    <td class="js-media-field">
      <div class="js-droparea" data-thumbnail="{sub_photo04@thumbnail}" data-type="image" data-thumbnail-type="{sub_photo04@type}" data-width="200px" data-height="200px"></div>
      <p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>
      <div class="acms-admin-margin-top-mini">
        <button type="button" class="js-insert acms-admin-btn" data-type="image">メディアを選択</button>
      </div>
      <input type="hidden" name="sub_photo04" value="{sub_photo04}" class="js-value" />
      <input type="hidden" name="field[]" value="sub_photo04" />
      <input type="hidden" name="sub_photo04:extension" value="media" />
    </td>
  </tr>
  <tr>
    <th>キャプション</th>
    <td>
      <input type="text" name="sub_caption04" value="{sub_caption04}" class="acms-admin-form-width-full" />
      <input type="hidden" name="field[]" value="sub_caption04" />
    </td>
  </tr>
</table>

次に、生成したソースを管理画面側のテンプレートに貼り付けてきます。今回はエントリーにカスタムフィールドを追加するので、エントリーフォルダ内の field.html を開きましょう。

/admin/entry/field.html

<!-- 共通の設定 -->
@include("/admin/entry/field-common.html")

<!-- SEOの設定 -->
@include("/admin/entry/field-seo.html")

<!-- ピックアップの設定 -->
@include("/admin/entry/field-pickup.html")

<!-- コード別フィールドの表示 -->
@include("/admin/entry/ccd/%{CCD}.html")
@include("/admin/entry/ecd/%{ECD}")

前回のチュートリアル（フィールドの入力項目をカスタマイズする①テキストのみ）と違い、エントリーの field.html では一部グローバル変数を利用してインクルード元のパスが表記されています。このようにすることで、a-blog cmsでは全てのエントリー作成画面に表示するカスタムフィールドと、それぞれの条件下でのみ表示するカスタムフィールドを分けています。上の例では、「SEOの設定」と「ピックアップの設定」は全てのエントリー作成画面で表示されますが、「コード別フィールドの表示」は記載のある条件下でなければ表示されません。

コード別フィールドの表示で使われているグローバル変数%{CCD}はカテゴリーコードを指しています。実際にパスに従ってccdフォルダを開いてみると、 realestate.html というファイルが確認できます。

adminのディレクトリ構造

realestate は物件情報のカテゴリーコードなので、@include("/admin/entry/ccd/%{CCD}.html")の表記によって、物件情報のエントリー作成画面のみ、ここに設置されている realestate.html が読み込まれているということになります。

それでは、作業場所になる realestate.html を開いて、サブイメージ3の入力用ソースの下部(85行目)に先ほど生成したソースを貼り付けましょう。

<div class="acms-admin-col-md-4 acms-admin-margin-bottom-medium js-media-field">
	<h4>サブイメージ3</h4>
　　　<!-- 省略 -->
</div>

<!-- ここに生成したソースを貼り付け -->

作業後に既存エントリー「物件情報1」（ /realestate/entry-9.html ）の管理画面を開いてみると、新設したサブイメージとキャプションの入力欄が確認できました。

物件情報1の管理画面

ちなみに、サブイメージ1〜3のスタイルに習って入力欄を調整した場合は、以下のようなソースになります。

<div class="acms-admin-col-md-4 acms-admin-margin-bottom-medium js-img_resize_cf">
	<h3><label for="input-img-sub_photo04">サブイメージ4</label></h3>
	<!-- BEGIN_IF [{sub_photo04@path}/em] -->
	<img src="" style="display:none;width:276px;" class="acms-admin-img-responsive js-img_resize_preview">
	<!-- END_IF -->
	<!-- BEGIN sub_photo04@path:veil -->
	<img src="%{ARCHIVES_DIR}{sub_photo04@path}" style="width:276px;" class="acms-admin-img-responsive js-img_resize_preview">
	<input type="hidden" name="sub_photo04@old" value="{sub_photo04@path}"><br>
	<div class="acms-admin-form-checkbox">
		<input type="checkbox" name="sub_photo04@edit" value="delete" id="input-checkbox-sub_photo04">
		<label for="input-checkbox-sub_photo04" class="acms-admin-form-checkbox">
			<i class="acms-admin-ico-checkbox"></i> 削除
		</label>
	</div>
	<!-- END sub_photo04@path:veil -->
	<input type="file" name="sub_photo04" id="input-img-sub_photo04" class="js-img_resize_input acms-admin-margin-bottom-small"><br>
	<input type="hidden" name="field[]" value="sub_photo04">
	<input type="hidden" name="sub_photo04:extension" value="image">
	<input type="hidden" name="sub_photo04@size" value="276">
	<input type="hidden" name="sub_photo04@largeWidth" value="1716">
	<input type="hidden" name="sub_photo04@filename" value="">
	<input type="text" name="sub_caption04" value="{sub_caption04}" placeholder="キャプション" class="acms-admin-form-width-full">
	<input type="hidden" name="field[]" value="sub_caption04">
</div>
物件情報1の管理画面

入力内容をサイト側に表示する

ここからは、下図のように入力内容をサイト側に表示していきます。

4枚目のサブイメージ

前回のチュートリアル（フィールドの入力項目をカスタマイズする①テキストのみ）同様、事前準備として、先ほど新設したカスタムフィールドにサブイメージとキャプションを入力しておきます。同時に、既存のサブイメージ1〜3のキャプションにもテキストを入れて統一しましょう。

最終的にはここで入力した値がサイトに表示されることで、システムが正常に動作しているかどうか判断します。

サブイメージのカスタムフィールド

それでは以下のパスに従って _entry.html を開き、今回作業するテンプレートのインクルード元を調べます。

/realestate/_entry.html
(25-26行目)

<!-- エントリーボディ（各カスタムフィールド表示） -->
@include("/include/entry/body-realestate.html")


↓

/include/entry/body-realestate.html
(26-27行目)
<!-- カスタムフィールドの読み込み -->
@include("/include/entry/field.html")


↓

/include/entry/field.html
(1行目)
@include("/include/field/entry/ccd/%{CCD}.html")

%{CCD} はカテゴリーコードに置き換わるグローバル変数です。
今回編集しているカテゴリーのコードは realestate なので、%{CCD} を realestate に置き換えてファイルを辿ります。

/include/field/entry/ccd/realestate.html

これで編集するべきファイルにたどり着くことができました。

/include/field/entry/ccd/realestate.html  内では、サブイメージ3の出力ソース(23-41行目)以下に新しいソースを追記していきます。

<!-- BEGIN sub_photoBox03:veil -->
　　<!-- 省略 -->
<!-- END sub_photoBox03:veil -->

<!-- ここに出力用ソースを記述 -->

まずは既存のスタイルと合わせるため、まずはサブイメージ3のソースをそのまま記述箇所にコピー＆ペーストしましょう。

<!-- BEGIN sub_photo03:veil -->
<div class="acms-col-md-4">
	<div class="column-image-left">
		<a href="%{MEDIA_ARCHIVES_DIR}{sub_photo03@path}" data-rel="SmartPhoto[custom]">
			<img class="columnImage" src="%{MEDIA_ARCHIVES_DIR}{sub_photo03@path}[resizeImg(260)]" alt="サブ物件写真：クリックして拡大画像を表示する" width="{sub_photo03@x}" height="{sub_photo03@y}" />
		</a>
		<!-- BEGIN sub_caption03:veil --><p class="caption">{sub_caption03}</p><!-- END sub_caption03:veil -->
	</div>
</div>
<!-- END sub_photo03:veil -->

これを型として、変数などの値が {sub_photo03} となっている箇所を {sub_photo04} に差し替えます。また {sub_caption03} とある部分や、veil ブロックのラベルなども同様に書き換えていきましょう。作業後は、以下のような出力ソースになります。

<!-- BEGIN sub_photo04:veil -->
<div class="acms-col-md-4">
	<div class="column-image-left">
		<a href="%{MEDIA_ARCHIVES_DIR}{sub_photo04@path}" data-rel="SmartPhoto[custom]">
			<img class="columnImage" src="%{MEDIA_ARCHIVES_DIR}{sub_photo04@path}[resizeImg(260)]" alt="サブ物件写真：クリックして拡大画像を表示する" width="{sub_photo04@x}" height="{sub_photo04@y}" />
		</a>
		<!-- BEGIN sub_caption04:veil --><p class="caption">{sub_caption04}</p><!-- END sub_caption04:veil -->
	</div>
</div>
<!-- END sub_photo04:veil -->

以上でテンプレートの作業は完了です。サイトに入力内容が表示されていることを確認しましょう。

サブイメージ

現状はサブイメージ4のみ一段下に落ちて表示されていますが、これはCSSフレームワークでclass="acms-col-md-4" と設定されている部分をclass="acms-col-md-3"と書き換えることで１列に収めることができます。

sub_photo01〜sub_photo04までの出力枠のclass="acms-col-md-4" と書かれている箇所(計4個所)をclass="acms-col-md-3"に書き換えます。

サブイメージ

以上で課題が達成できました。

カスタムフィールドのフォームを追加する場所についての解説

前回のチュートリアル（フィールドの入力項目をカスタマイズする①テキストのみ）と今回のチュートリアルを以ってカスタムフィールドの学習は終了です。最後に記述場所とパスの表記についておさらいします。

一般的には、カスタムフィールドを追加する際にはそれぞれの場所につき以下のファイルを編集する事になります。

エントリー/themes/(使用テーマ)/admin/entry/field.html
カテゴリー/themes/(使用テーマ)/admin/category/field.html
ブログ/themes/(使用テーマ)/admin/blog/field.html
ユーザー/themes/(使用テーマ)/admin/user/field.html
モジュール/themes/(使用テーマ)/admin/module/field.html

またそれぞれの field.html 内で読み込むテンプレートの条件を変えるには、先述カテゴリーコードでテンプレートファイルを指定したように、コードで指定する方法の他、ID別で記述する方法もあります。

<!-- ID別フィールドの表示 -->
<!--#include file="/admin/entry/blog%{BID}.html" -->
<!--#include file="/admin/entry/category%{CID}.html" -->
 
<!-- コード別フィールドの表示 -->
<!--#include file="/admin/entry/%{CCD}.html" -->
<!--#include file="/admin/entry/%{ECD}" -->

グローバル変数 %{BID} はブログIDを、%{CID} はカテゴリーIDを指し、ここには該当の数字が読み込まれます。それぞれのIDはコンテンツ作成時にa-blog cmsによって予め定められており、管理画面から確認することができます。

カテゴリーコード

このID別の記述方法で同じように物件情報カテゴリー特有のカスタムフィールドを設ける場合は、管理画面で物件情報のカテゴリーIDが4であることを確認し、インクルード元に category4.html を用意すれば、コード別の記述の場合と同様に動作します。

ID別の記述方法が適切かコード別の記述方法が適切かは、そのテーマの運用のされ方で判断します。IDはカテゴリーやブログを作成すると自動で付加されるため、基本的にユーザー/サイト制作者が自由にIDをつけることはできません。一方、コードは管理画面上で自由に設定できます。しかし、ユーザーが間違えて書き換えてしまう危険性もあります。実際にサイトを制作する際には、それぞれの記述のメリットやデメリットなどを考慮し、より最適な方法で実装していきましょう。

以上でレベル8は終了です
次のチュートリアルへ進みましょう