site2015 のテーマでは、カスタムフィールドのサンプルコンテンツとして、不動産の物件情報のコンテンツを用意しています。 物件情報のエントリーについては全て同じフォーマットでページを用意し、特定の項目での検索もできるようになっています。

大きなメインのイメージのほかに、3枚の小さな画像が用意されています。

今回は、このサブイメージを4枚にするカスタマイズから、画像のカスタムフィールドとテキストのカスタムフィールドを追加する方法を紹介していきます。

今回はエントリーのカスタムフィールドを変更します。a-blog cms のカスタムフィールドについては、テーマの中にある管理ページのHTMLファイルのフォームを追加修正していきます。今回修正するファイル /themes/site2015/admin/entry/realestate.html を開きます。

このファイルの中には、メイン画像から地図までのカスタムフィールドのフォームのHTMLが書かれています。本来は、3つのサブイメージのエリアに4つ目を追加した方がいいかと思いますが、練習という事で、最後に追加分のHTMLを用意します。

https://developer.a-blogcms.jp/tools/ もしくは、サイトの管理ページのコンフィグの画面にフォームのHTMLを書くためのツールが用意されています。

今回は、画像とキャプションを追加しますので、それぞれの情報を入力し（生成）ボタンを押す事で、ページの下に HTML のフォームが自動生成されます。

<h3> ハンズオン追加分 </h3>

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>画像4</th>
    <td>
      <!-- BEGIN subPhoto4@path:veil -->
      <img src="%{ARCHIVES_DIR}{subPhoto4@path}"/>
      <input type="hidden" name="subPhoto4@old" value="{subPhoto4@path}" /><br />
      <label class="acms-admin-form-checkbox">
        <input type="checkbox" name="subPhoto4@edit" value="delete" />
        <i class="acms-admin-ico-checkbox"></i> 削除
      </label>
      <!-- END subPhoto4@path:veil -->
      <input type="file" name="subPhoto4" size="20" /><br />
      <input type="hidden" name="field[]" value="subPhoto4" />
      <input type="hidden" name="subPhoto4:extension" value="image" />
      <input type="hidden" name="subPhoto4@size" value="276" />
      <input type="hidden" name="subPhoto4@filename" value="" />
    </td>
  </tr>
  <tr>
    <th>キャプション4</th>
    <td>
      <input type="text" name="subCaption4" value="{subCaption4}" class="acms-admin-form-width-full"/>
      <input type="hidden" name="field[]" value="subCaption4" />
    </td>
  </tr>
</table>

/themes/site2015/admin/entry/realestate.html のどこかに上記の HTML を貼り付けます。せっかくですので、他に自分なりに セレクト や チェックボックス を追加してみてもいいかもしれません。このページのコードをコピーしないで、カスタムフィールドメーカーで生成したコードをコピペしてください。

物件情報のエントリーを変更ボタンをクリックしてフォームを表示してみてください。 追加する位置にもよりますが、以下のようにフォームが表示されるようになります。

ここで保存したデータは表示の設定が終わっていませんので、今の段階では表示させる事はできません。再度（変更）ボタンをクリックして保存できているかを再チェックしてみてください。

今回は物件情報の表示部分の変更になりますので、/themes/site2015/realestate/entry.html が詳細ページのテンプレートファイルになりますが、その中で物件情報を変更しているコンテンツとしては、以下の /include/parts/realestate.html のファイルをインクルードしています。（一度 entry.html をご確認ください）

<!--#include file="/include/parts/realestate.html" -->

realestate.html を修正し、他の3つのサブイメージと同様な以下のコードを追加します。

<!-- BEGIN mainPhotoBox:veil -->
<div class="acms-col-md-4">
  <!-- BEGIN subPhoto4:veil -->
  <div class="column-image-left">
    <a href="%{HTTP_ROOT}archives/{subPhoto4@largePath}" rel="prettyPhoto[custom]">
<img class="columnImage" src="%{ARCHIVES_DIR}{subPhoto4@path}" alt="" width="{subPhoto4@x}" height="{subPhoto4@y}" />
    </a>
  <!-- BEGIN subCaption4:veil --><p class="caption">{subCaption4}</p><!-- END subCaption4:veil -->
  </div>
  <!-- END subPhoto4:veil -->
</div>
<!-- END mainPhotoBox:veil -->

こんな感じに出るようになったかと思います。インストール時には、キャプション 1 〜 3 が登録されていませんでしたので、今回登録してみました。1枚画像が下にあるのを横に並べたいという事であれば、class="acms-col-md-4" となっているところを、class="acms-col-md-3" にする事になります。

これで目的のカスタマイズは完成した事になります。このように、a-blog cms ではフォームの項目を自由に HTML で定義する事でカスタムフィールドの実装ができます。 HTML が触れるという事は、JavaScript で機能を追加する事もできるという事なので、郵便番号を入力して住所を自動で設定するような事も管理ページ内に実装する事もできる事になります。

登録と表示ができましたが、次にこれらの情報を検索する事についても少し紹介しておきます。物件情報の一覧ページにはカスタムフィールドの検索機能が用意されています。

このフォームも自動で用意されるものではありません。更新用のカスタムフィールドのように準備する事になりますが /themes/site2015/include/parts/map.html の中に記述されていますので参考にご覧になってみてください。Field_Search というモジュールで囲まれていますが、基本的には管理ページ内のカスタムフィールドのフォームと同様に書きます。

<input type="submit" name="ACMS_POST_2GET" value="検索">

検索フォームの submit ボタンの name を ACMS_POST_2GET とする事で、POST された情報から URL を生成され、例えば、最寄駅が「あの駅」で、家賃が「50,000円以上」とすると

/realestate/field/station/あの駅/_and_/price/gte/50000/

のように変換されます。 a-blog cms では、URL をどう組み立てるかで表示させる内容を制御できるようになります。今回はとくに、これをやってみましょう！という事は書きませんが、何か検索項目を追加してみるといった事にもチャレンジしてみましょう。

指定したところに HTML を追加したら出るようになった。という事で終わってしまうと、新しく何かをしようと思ったときに対応できませんので、どうして、このファイルに追加したのかを最後に説明しておきます。

今回は、エントリーのカスタムフィールドを追加しました。 一般的にはカスタムフィールドを追加する際には以下のファイルを編集する事になります。

そして、その field.html の中は以下のように書かれています。

<!-- SEOの設定 -->
<!--#include file="/admin/entry/seo.html" -->

<!-- ピックアップの設定 -->
<!--#include file="/admin/entry/pickup.html" -->

<!-- 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}" -->

このファイルに追記する事で、全てのエントリーにフォームを追加する事はできますが、今回は物件情報の realestate というカテゴリーコードの時にだけ出てくるようにするために、コード別フィールドを追加するためのインクルード文を活用しています。

%{CCD} が realestate に置き換えられて、realestate.html が表示されるようになるという事です。もしくは %{CID} のようにすると 8 のような数字になるので、category%{CID}.html のところで category8.html を準備しておいても同様の動作になります。

CID を利用するか CCD を利用するかは、そのテーマの利用のされ方によります。CID はインストールした環境によっては、開発時と本番時で違ってきてしまう可能性があり、CCD はユーザーが後から書き換えられてしまう可能性があります。どちらが正解という事ではありませんので、どう運用されるところだからという事を考えて実装をしていきましょう。

SmartReleaseとは

レンタルサーバ会社のCPI（株式会社 KDDI ウェブコミュニケーションズ）が提供しているサーバツールで、シェアードプランACE01に標準装備されています。以下のような特徴があります。

• 自動バックアップ
• テストサーバと公開サーバがあり同期も簡単に
• バックアップ、リストアが簡単に

a-blog cmsではACE01サーバ用に専用パッケージを作っている事もあり、ご利用されている方も多いと思います。そこで今回はSmartReleaseでの運用の一例をご紹介したいと思います。

• レイアウトモジュールの設置
• レイアウト機能で使用するモジュールのテンプレートを作成する

• 新しくカラムを使用するためにモードを追加する

• 作業テーマ： simple2016

• 作業テンプレート：/themes/simple2016/layout.html

• 作業URL： http://ドメイン/layout.html

• レイアウト機能 | a-blog cms 制作者向け情報

ハンズオン課題1：レイアウトモジュールを設置する

/themes/simple2016/ に、top.htmlを複製してlayout.html というHTMLファイルを作成してください。ヘッダー、フッターのソースコードは残し、メインカラムの代わりにレイアウトモジュール編集ボタン、レイアウトモジュールのスニペットを貼り付けてください（具体的には、1行目〜25行目、72行目〜80行目を残してください）。その際に、id=""には、お好きなID名を記入してください。

レイアウトモジュールのスニペット

<!-- BEGIN_MODULE Layout id="" -->
<!-- BEGIN display -->
<!--#include file="/include/layout.html" -->
<!-- END display -->

<!-- BEGIN edit -->
<div class="acms-container">
<!--#include file="/admin/layout/edit.html"-->
</div>
<!-- END edit -->
<!-- END_MODULE Layout -->

レイアウトモジュールの編集ボタン

<!--#include file="/admin/layout/action.html"-->

完成イメージ

レイアウト機能でモジュールを表示するには、使用するモジュールのテンプレートを用意する必要があります。

レイアウト機能用のテンプレートを作成する

レイアウト機能用のモジュールを作成するには、すでにシステムで指定されているルールに沿ってフォルダ名で作成します。たとえば、以下のように作成します。

例） /include/module/template/Entry_Summary（モジュール名）/

レイアウトモジュールで使用したいモジュールのテンプレートを用意する方法は複数あります。

固定テンプレートとは、あるモジュールIDのときはテンプレートをユーザに選択させたくないときに使用するテンプレートのことです。以下のディレクトリにテンプレートを設置することで固定テンプレートが作成できます。

例）/include/module/template/Entry_Summary/モジュールID名.html

選択テンプレートとは、モジュールIDに対して、テンプレートをユーザに選択させたいときに使用するテンプレートのことです。以下のディレクトリにテンプレートを設置することで選択テンプレートが作成できます。

例）/include/module/template/Entry_Summary/任意の名前.html

固定テンプレートもご紹介しましたが、このハンズオンでは、選択テンプレートでHTMLファイルを作成してください。

• レイアウト機能用モジュールのテンプレート作成方法 | レイアウト機能 | ドキュメント | a-blog cms 制作者向け情報

HTMLファイル内には、1テンプレートにつき、1つのビルトインモジュールのスニペットを記述します。

例）Entry_Summary（エントリーサマリー）を使う場合のHTML

<!-- BEGIN_MODULE Entry_Summary -->
<!-- BEGIN entry_summary:veil -->
<section class="module-section">
  <!--#include file="/admin/module/setting.html"-->
  <div class="module-header clearfix">
    <h2 class="module-heading"><!-- BEGIN_IF [<!-- BEGIN moduleField -->{module_heading}<!-- END moduleField -->/nem] --><!-- BEGIN moduleField -->{module_heading}<!-- END moduleField --><!-- ELSE -->%{CATEGORY_NAME}<!-- END_IF --></h2>
  </div>
  <ul class="summary-default">
    <!-- BEGIN unit:loop -->
    <!-- BEGIN entry:loop -->
    <li class="summary-default-entry js-autoheight-r js-biggerlink {entry:loop.class}">
      <div class="acms-summary">
        <div class="summary-default-entry-image-wrap acms-summary-image">
          <!-- BEGIN image:veil -->
          <img src="%{ROOT_DIR}{path}[resizeImg(120,120)]" width="120" height="120" alt=""><!-- END image:veil --><!-- BEGIN noimage -->
          <img src="/images/noImage.png" width="120" height="120" alt="" />
          <!-- END noimage -->

        </div>
        <div class="acms-summary-body">
          <p class="summary-title acms-summary-heading"><a href="{url}">{title}</a></p>
          <p class="summary-detail">{summary}[trim(500, '...')]</p>
        </div>
      </div>
    </li><!-- END entry:loop --><!-- END unit:loop -->
    <hr class="clearHidden" />
  </ul>
  <!-- ページャー -->
  <!-- #include file="/include/parts/pager.html" -->
</section>
<!-- END entry_summary:veil -->
<!-- END_MODULE Entry_Summary -->

テンプレート作成しても、使用したいモジュールIDを作成しなければモジュール選択画面に表示されません。「ハンズオン課題1：レイアウトモジュールを設置する」で作成した「レイアウト」ボタンをクリックして、サイドバーの「モージュル」ラベルをドラッグアンドドロップし、左上の「モジュール」ボタンをクリックして、新しくモジュールIDを作成してください。「レイアウト/ユニット」というチェックボックスにチェックがついているのを確認してください。

layout.htmlに戻り、「レイアウト」ボタンをクリックして、サイドバーよりモジュールを追加してください。選択し、Entry_Summaryが表示されたら完成です。

ハンズオン課題3：新しくカラムを使用するためにモードを追加する

レイアウト編集画面に移動すると表示されるサイドバーでは、レイアウトモジュール内で使用するグリッドのカラム数が選択できるようになっています。このセクションではグリッドを新しく作ります。

まずは、/themes/system/admin/layout/parts.htmlをコピーし、/themes/simple2016/admin/layout/parts.htmlへ複製します。

さらに、複製したテンプレートに以下のスニペットを追加します。

レイアウト編集ページ側のスニペット

<!-- BEGIN type#col6-6_bg -->
<div class="js-acms_layout-unit acms-admin-layout-unit clearfix">
  <div class="js-acms_layout_edit_box acms-admin-layout-edit-box">
    <span class="acms-admin-layout-label-name">{blockLabel}</span>
    <div class="acms-admin-inline acms-admin-float-right">
      <button class="js-acms_layout_delete_unit acms-admin-btn-unstyled acms-admin-layout-control-btn acms-admin-icon-delete"><span class="acms-admin-hide-visually">削除</span></button>
    </div>
  </div>
  <div class="acms-admin-layout-contents acms-admin-col-md-6">
    <div class="js-acms_layout_contents acms-admin-layout-contents-inner" data-col="1">
      <!-- COL#1 -->
    </div>
  </div>
  <div class="acms-admin-layout-contents acms-admin-col-md-6">
    <div class="js-acms_layout_contents acms-admin-layout-contents-inner" data-col="2">
      <!-- COL#2 -->
    </div>
  </div>
</div>
<!-- END type#col6-6_bg -->

さらに、/themes/system/include/layout.htmlを複製し、/themes/simple2016/include/layout.htmlへリネームします。

さらに、複製したテンプレートに以下のスニペットを追加します。

Webサイト表示側のスニペット

Webサイト表示側のスニペットでは、<!-- BEGIN block:loop -->と<!-- END block:loop -->の間に記述してください。

<!-- BEGIN type#col6-6_bg -->
<div class="layout-bg"><!-- ※新しく追加しました -->
  <div class="acms-container sp-container">
    <div class="acms-grid">
      <div class="acms-col-md-6">
        <!-- COL#1 -->
      </div>
      <div class="acms-col-md-6">
        <!-- COL#2 -->
      </div>
    </div>
  </div>
</div><!-- ※新しく追加しました -->
<!-- END type#col6-6_bg -->

※上記のコードでは、あらかじめ用意しているテンプレートと違う点はブロック名と、class属性を適用しているdiv要素を追加しています。

テンプレートに上記ブロックを追記したら、上記テンプレートで指定したcol6-6_bgに対応するモードを管理画面から追加する必要があります。

管理画面に移動したら、［コンフィグ］→［編集設定］の順に移動し、「レイアウト追加ボタン」の見出しまでスクロールします。

上記でテンプレートに追加したcol6-6_bgに対応したモードを管理画面で追加してください。追加後、グリッドがサイドバーから選べるようになっていて、背景色がグレーのカラムが作成できたら完成です。

Ver.2.6.1から新しくModule_Field（モジュールフィールド）というフィールドモジュールができました。この回では、Module_Fieldを使って、レイアウトモジュール内に、緊急時のアラートを表示してみましょう。

以下のスニペットを使ってレイアウトモジュールで使用できるModule_Fieldのテンプレートを作成してください。

<!-- BEGIN_MODULE Module_Field -->
  <p class="acms-alert acms-alert-danger">{alert_message}</p>
<!-- END_MODULE Module_Field -->

この記事の最後に次のバージョンで提供する予定のBootstrapテーマを配布しています。実際にご利用する前にこのテーマがどういう構成なのかをご紹介します。

サンプルページ

BootstrapテーマではBootstrapのサイトで公開されているサンプルページをa-blog cmsとして使えるものを6つご用意いたしました。 サンプルページは6つありますが、そのうちの１つはログイン画面となっておりますので正確には5つの中からお選びいただき、自由にカスタマイズしてご利用いただけます。

実際にご利用いただくには、お好きなサンプルページのディレクトリを一つ上の階層に置いてください。