フィールドの入力項目をカスタマイズする ①テキストのみ

目標


ブログのカスタムフィールドにメールアドレスを入力する欄を設置し、フッターに表示させましょう。


解説使用テーマbeginner

Before

After

目次

  1. カスタムフィールドメーカーを使って入力欄を作成する
  2. 入力された値をフッターに表示する

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


まずはブログのカスタムフィールド内にメールアドレスの入力欄を設置します。a-blog cmsでは、カスタムフィールドメーカーを使うことで簡単に各種入力欄を作成することができます。



カスタムフィールドメーカー
新設するカスタムフィールドのHTMLソースをブラウザ上で生成するツールを、カスタムフィールドメーカーといいます。カスタムフィールドメーカーでは、カスタムフィールドだけでなく、カスタムフィールドグループ・カスタムユニット・カスタムユニット(フィールドグループ)の計4種類を作成することができます。カスタムフィールドメーカーについての詳細は カスタムフィールドメーカーについて | カスタムフィールド | ドキュメント | a-blog cms developer をご参照ください。

今回のハンズオンでは、カスタムフィールドメーカーを使って下図のようにメールアドレスの入力欄を作成していきます。


メールアドレスの入力欄

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


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

クイックサーチで「カスタムフィールドメーカー」と検索しても開くことができます。


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

今回はブログのカスタムフィールドに入力欄を新設するので、作成モードはデフォルトのまま「カスタムフィールド」に設定しておきます。入力欄の種類・タイトル・フィールド・ツールチップについて以下のように入力し、[生成] ボタンをクリックしてください。


入力欄の種類テキスト
タイトルメールアドレス
フィールドmail_address
ツールチップメールアドレスを入力します。


このフィールドで入力された英数字 mail_address が新設する入力欄の変数になります。またツールチップは説明文の設定になるので、カスタムフィールドを作成するにあたっての必須項目ではありません。

以上の作業で、下記のような入力用ソースが生成されます。


<table class="acms-admin-table-admin-edit">
  <tr>
    <th>メールアドレス
      <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i>
    </th>
    <td>
      <input type="text" name="mail_address" value="{mail_address}" class="acms-admin-form-width-full" />
      <input type="hidden" name="field[]" value="mail_address" />
    </td>
  </tr>
</table>

次に、生成した入力用HTMLソースを貼り付けるテンプレートを開きます。a-blog cmsでは、管理画面のテンプレートは「admin」というフォルダで管理しています。



a-blog cmsでは、admin内に「blog」「category」「entry」などフィールド別のファイルを用意して、それぞれが内包する field.html へ複数のテンプレートをインクルードしています。まずは以下のディレクトリへ移動し、field.html を開きましょう。


/admin/blog/field.html


<!-- サイト設定 基本 -->
@include("/admin/blog/field-base.html")

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

<!-- OGPの設定 -->
@include("/admin/blog/field-ogp.html")

<!-- 会社情報 -->
@include("/admin/blog/field-info.html")

<!-- SNSアカウントの設定 -->
@include("/admin/blog/field-sns.html")

<!-- アナリティクスの設定 -->
@include("/admin/blog/field-analytics.html")

<!-- Search Consoleの設定 -->
@include("/admin/blog/field-search-console.html")

今回のハンズオンでは「会社情報」の項目内に入力欄を設置するので、field.html 内にインクルードされている会社情報のパスを参考に、作業するテンプレート field-info.html を開きます。そしてこのテンプレート内の文末に、先ほど生成したHTMLソースをコピー&ペーストします。


/admin/blog/field-info.html


<table class="acms-admin-table-admin-edit">
  <tr>
    <th>メールアドレス
      <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i>
    </th>
    <td>
      <input type="text" name="mail_address" value="{mail_address}" class="acms-admin-form-width-full" />
      <input type="hidden" name="field[]" value="mail_address" />
    </td>
  </tr>
</table>

作業後は、ブログ管理画面内[カスタム設定]からメールアドレスの入力欄が新設されていることを確認しましょう。



現在はカスタムフィールドから生成したソースをそのまま使用しているので、幅などのスタイルが他の入力欄と異なっています。最後に仕上げとして、設置した入力欄のスタイルを既存のものに合わせて調節しましょう。生成したソースの変数を残しつつ、HTML属性を既存のものに習って差し替えていくと、以下のようになります。


  <tr>
    <th>メールアドレス
      <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i>
    </th>
    <td>
      <input type="text" name="mail_address" value="{mail_address}" class="acms-admin-form-width-large" />
      <input type="hidden" name="field[]" value="mail_address" />
    </td>
  </tr>

また、メールアドレスは「会社情報」に含まれる情報なので、会社情報の <table>タグ内に移動させ、他の項目と記述を揃えます。


<table class="adminTable acms-admin-table-admin-edit">
<!-- 省略 -->
	<tr>
		<th><label for="input-text-tel_time">メールアドレス</label><i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i></th>
		<td>
		  <input type="text" name="mail_address" value="{mail_address}" class="acms-admin-form-width-large" />
		  <input type="hidden" name="field[]" value="mail_address" />
		</td>
	</tr>
  <tr>
</table>


これで入力欄のスタイル調整が完了しました。


入力された値をフッターに表示する


ここからは、下図のように設置した入力欄の値をフッターに表示していきます。



まずは事前準備として、先ほど新設したカスタムフィールドにメールアドレスを入力しておきます。最終的にはここで入力した値がサイトに表示されることで、システムが正常に動作しているかどうか判断します。


メールアドレスの入力欄

メールアドレスinfo@exapmple.com

それでは、出力情報を記載するテンプレート footer.html を開きましょう。footer.html は、_top.html などフッターが表示されているファイルにインクルードされています。ファイル場所はインクルード文を確認しながら辿りましょう。


<!-- フッター -->
@include("/include/footer.html")

footer.html を開くと、2行目から30行目にかけてソースがBlog_Fieldモジュールで囲まれているのが確認できます。


<!-- BEGIN_MODULE Blog_Field -->
省略
<!-- END_MODULE Blog_Field -->

a-blog cmsはブログのカスタムフィールドで使用される変数を、このBlog_Fieldモジュールを使って読み取ります。したがって、新しい出力ソースはこの表記の内部に追記していきます。


また今回のハンズオンには該当しませんが、ブログのカスタムフィールドで使用する変数を読み取るもう1つの条件として、Entry_Body や Entry_Summary モジュール内の blogField ブロックも使うことができます。これらについて詳しく知りたい場合は、カスタムフィールド | ドキュメント | a-blog cms developer をご覧ください。


次に現在フッターに表示されている会社情報のソースを確認します。


<!-- BEGIN company_name:veil --><dt class="company-name">{company_name}</dt><!-- END company_name:veil -->
<!-- BEGIN zip:veil --><dd class="company-detail">〒{zip}</dd><!-- END zip:veil -->
<!-- BEGIN address:veil --><dd class="company-detail">{address}</dd><!-- END address:veil -->
<!-- BEGIN tel:veil --><dd class="company-detail">TEL : <a href="tel:{tel}">{tel}</a></dd><!-- END tel:veil -->

ここでは <!-- BEGIN zip:veil --> などの veil ブロックが使用されています。


veilブロック
a-blog cmsでは、変数を用いた要素を veil ブロックで囲むことで、囲んだ部分に変数が入力されていない場合はブラウザ表示時にブロックごと要素を削除することができます。値が空になっている要素を読み込まないようにすることで表示内容の最適化に繋がります。

今回はこの会社情報内の電話番号以下に、メールアドレスの出力ソースを追記していきます。既存の「<!-- BEGIN tel:veil -->〜<!-- END tel:veil -->」などをコピー&ペーストし、貼り付けたソースの値や変数をメールアドレスの値や変数に書きかえましょう。


<!-- BEGIN mail_address:veil --><dd class="company-detail">MAIL : {mail_address}</dd><!-- END mail_address:veil -->

会社概要の出力ソースの全体像は以下のようになります。


<!-- BEGIN company_name:veil --><dt class="company-name">{company_name}</dt><!-- END company_name:veil -->
<!-- BEGIN zip:veil --><dd class="company-detail">〒{zip}</dd><!-- END zip:veil -->
<!-- BEGIN address:veil --><dd class="company-detail">{address}</dd><!-- END address:veil -->
<!-- BEGIN tel:veil --><dd class="company-detail">TEL : <a href="tel:{tel}">{tel}</a></dd><!-- END tel:veil -->
<!-- BEGIN mail_address:veil --><dd class="company-detail">MAIL : {mail_address}</dd><!-- END mail_address:veil -->

以上でテンプレートの作業は完了です。サイトのフッター部分に入力したメールアドレスが表示されていることを確認しましょう。


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

目標


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


解説使用テーマbeginner
作業エントリー/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 というファイルが確認できます。



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〜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〜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"と書き換えることで1列に収めることができます。

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をつけることはできません。一方、コードは管理画面上で自由に設定できます。しかし、ユーザーが間違えて書き換えてしまう危険性もあります。実際にサイトを制作する際には、それぞれの記述のメリットやデメリットなどを考慮し、より最適な方法で実装していきましょう。