4kaku design

マーケティングを勉強しているWebデザイナーのノート

a-blog cms Advent Calendar 2014の1日目は、a-blog cmsのver2.1から搭載された機能「カスタムユニット」の実例を3つ紹介させていただきます。

ちなみに、この内容は去る11月21日・22日に開催された合宿イベント「a-blog cms Training Camp 2014 Autumn」でも発表させていただきました。少しでも、カスタムユニット使ってみようかなーと思っていただければ幸いです。


カスタムユニットとは?


ヘッダー、フッター、ナビゲーションも完璧!でも(お客さんが一番見せたいであろう)メインコンテンツが入るエントリーは初期設定のままなので少し寂しい…というときに活躍するのが「カスタムユニット」です。



「カスタムフィールド」機能のメリットは、よく入力する情報を独自の入力フォームとして用意することで入力作業が便利になります。たとえば、同じ「12月1日」を表すにしても、エントリーを書く人によって「12/1」や「12月01日」など形式がばらばらになってしまうことが多いと思いますが、カスタムフィールドで月と日にちの入力欄を作っておくことで細かなヒューマンエラーを防ぐことができます。

しかし、従来のカスタムフィールドはエントリーの上か下に表示することができますが、エントリーの途中に入れ込むことはできませんでした。「カスタムユニット」機能を使えば、専用入力フォームであるカスタムフィールドをより自由に使うことができます。

実装方法などは以前のブログエントリーにまとめましたので、参考になれば幸いです。


今回ご紹介するカスタムユニット利用例



a-blog cms の初期テーマである「site2014」をベースに、架空のカルチャースクールのWebサイトを作りました。そのサイト内で3つの小ブログを作り、それぞれにカスタムユニットを設定しています。


「合格実績」用ユニット


Webサイト表示(include)サイド

ある程度a-blog cmsを使ったことのある方なら、spanタグやユニットグループを駆使すればカスタムユニットを使わなくても実装できそうなレイアウトです。しかしユーザーさんが頻繁に更新する可能性が高いコンテンツは、カスタムユニットを導入するとエンドユーザーさんにラクをしてもらえるのではないでしょうか。



<section class="clearfix resWrapper">
<!-- BEGIN resLabel:veil -->
<div class="resTitleWrapper">
    <h2 class="resTitle {resLabel}Bg">
        <!-- BEGIN resYear:veil --><span class="resYear"><span>{resYear}</span>年度</span><!-- END resYear:veil -->
        <!-- BEGIN resTitle:veil --><span class="resTitle">{resTitle}</span><!-- END resTitle:veil -->
        <span class="resText">合格おめでとう!</span>
    </h2>
</div>
<!-- END resLabel:veil -->
<!-- BEGIN resLicense001:veil -->
<div class="resList">
    <h3 class="resLicense">{resLicense001}</h3>
    <span class="resNumber">{resNumber001}<span class="resText">名</span></span>
</div><!-- END resLicense001:veil -->
/* 変数{resLicense020}まで繰り返しなので中略 */
</section>

データ入力(admin)サイド



<h3>見出し</h3>
<table class="adminTable acms-table-admin-edit customTable">
    <tr>
        <th>タイトルラベル</th>
        <th>年度</th>
        <th>タイトル</th>
        <th></th>
    </tr>
    <tr>
        <td>
            <select name="resLabel{id}">
                <option value=""></option>
                <option value="shuku"{resLabel:selected#shuku}>祝</option>
                <option value="sokuho"{resLabel:selected#sokuho}>速報</option>
            </select>
            <input type="hidden" name="unit{id}[]" value="resLabel{id}" />
        </td>
        <td>
            <input type="text" name="resYear{id}" value="{resYear}" size="6" placeholder="ex)2014" />
            <input type="hidden" name="unit{id}[]" value="resYear{id}" />
        </td>
        <td>
            <input type="text" name="resTitle{id}" value="{resTitle}" size="20" placeholder="ex)帰国生大学入試" />
            <input type="hidden" name="unit{id}[]" value="resTitle{id}" />
        </td>
        <td><strong>合格おめでとう!</strong></td>
    </tr>
</table>
<h3>合格資格/合格者数</h3>
<table class="adminTable acms-table-admin-edit customTable">
<tr>
    <th>合格資格</th>
    <th>人数</th>
    <th>合格資格</th>
    <th>人数</th>
</tr>
<tr>
    <td>
        <input type="text" name="resSchool001{id}" value="{resSchool001}" size="30" placeholder="(例)◯◯検定" />
        <input type="hidden" name="unit{id}[]" value="resSchool001{id}" />
    </td>
    <td>
        <input type="text" name="resNumber001{id}" value="{resNumber001}" size="2" placeholder="ex)3" />名
        <input type="hidden" name="unit{id}[]" value="resNumber001{id}" />
    </td>
    <td>
        <input type="text" name="resSchool002{id}" value="{resSchool002}" size="30" placeholder="(例)◯◯検定" />
        <input type="hidden" name="unit{id}[]" value="resSchool002{id}" />
    </td>
    <td>
        <input type="text" name="resNumber002{id}" value="{resNumber002}" size="2" placeholder="ex)3" />名
        <input type="hidden" name="unit{id}[]" value="resNumber002{id}" />
    </td>
</tr>
/* 変数{resLicense020}まで繰り返しなので中略 */
</table>

「卒業生の声」用ユニット


Webサイト表示(include)サイド

ECサイトの商品紹介など、写真をたくさん載せたいシーンで活躍しそうなユニットです。(実は以前の記事で作ったエントリーの改良版です)



<div class="row voiceUnit clearfix">
  <div class="large-12 columns">
    <ul class="js-bxslider">
      <!-- BEGIN sliderImg1:veil -->
      <li><img src="%{ARCHIVES_DIR}{sliderImg1@path}" width="620"></li><!-- END sliderImg1:veil -->
      <!-- BEGIN sliderImg2:veil -->
      <li><img src="%{ARCHIVES_DIR}{sliderImg2@path}" width="620"></li><!-- END sliderImg2:veil -->
    </ul>
  </div>
  <div class="acms-col-6">
    <table>
      <tr><th>受講期間</th><td>{period}</td></tr>
      <tr><th>受講コース</th><td>{course}</td></tr>
      <tr><th>入学の目的</th><td>{purpose}</td></tr>
    </table>
  </div>
  <div class="acms-col-6">
    <p>{notes}[nl2br]</p>
  </div>
</div>

データ入力(admin)サイド



<table class="acms-table-admin custom">
 <tr>
    <th>スライダー画像1</th>
    <td>
        <img src="%{ARCHIVES_DIR}{sliderImg1@path}" width="100" />
        <input type="hidden" name="sliderImg1{id}@old" value="{sliderImg1@path}" /><br />
        <label class="acms-form-checkbox">
            <i class="acms-ico-checkbox"></i><input type="checkbox" name="sliderImg1{id}@edit" value="delete" /> 削除
        </label>
        <input type="file" name="sliderImg1{id}" size="20" />
        <input type="hidden" name="unit{id}[]" value="sliderImg1{id}" />
        <input type="hidden" name="sliderImg1{id}:extension" value="image" />
        <input type="hidden" name="sliderImg1{id}@size" value="880" />
        <input type="hidden" name="sliderImg1{id}@filename" value="" />
    </td>
</tr>
/* スライダー2は1と同様なので中略 */
<tr>
    <th>受講期間</th>
    <td>
        <input type="text" name="period{id}" value="{period}" placeholder="(例) 約6ヶ月" />
        <input type="hidden" name="unit{id}[]" value="period{id}" />
    </td>
  </tr>
  <tr>
    <th>受講コース</th>
    <td>
        <input type="text" name="course{id}" value="{course}" placeholder="(例) 秘書検定コース" />
        <input type="hidden" name="unit{id}[]" value="course{id}" />
    </td>
  </tr>
  <tr>
    <th>目的</th>
    <td>
        <input type="text" name="purpose{id}" value="{purpose}" placeholder="(例) 就職のため" />
        <input type="hidden" name="unit{id}[]" value="purpose{id}" />
    </td>
  </tr>
  <tr>
    </td>
        <th>詳細説明</th>
        <td>
            <textarea name="notes{id}" rows="4">{notes}</textarea>
            <input type="hidden" name="unit{id}[]" value="notes{id}" />
    </td>
  </tr>
</table>

「科目紹介」用ユニット


Webサイト表示(include)サイド


自前のjQueryカスタマイズも使えます。ということでタブを使ったカスタムユニットのサンプルを。マークダウン記法を使えば、見出しやリスト、テキストリンクも付けられます。
jQueryコード、CSSは以下のブログに掲載されているものを使わせていただきました。ありがとうございます。



<ul class="courseTab">
  <li class="selected"><a href="#tab1">{name01}</a></li>
  <li><a href="#tab2">{name02}</a></li>
  <li><a href="#tab3">{name03}</a></li>
  <li><a href="#tab4">{name04}</a></li>
</ul>
<section class="courseDetail">
  <div id="tab1" class="tabbox">
    <!-- BEGIN detail01:veil -->
    {detail01}[escape|markdown()]<!-- END detail01:veil -->
  </div>
  <div id="tab2" class="tabbox">
    <!-- BEGIN detail02:veil -->
    {detail02}[escape|markdown()]<!-- END detail02:veil -->
  </div>
  <div id="tab3" class="tabbox">
    <!-- BEGIN detail03:veil -->
    {detail03}[escape|markdown()]<!-- END detail03:veil -->
  </div>
  <div id="tab4" class="tabbox">
    <!-- BEGIN detail04:veil -->
    {detail04}[escape|markdown()]<!-- END detail04:veil -->
  </div>
</section>

データ入力(admin)サイド



<table class="acms-table-admin custom">
<tr>
    <th>教科名01</th>
    <td>
        <input type="text" name="name01{id}" value="{name01}" />
        <input type="hidden" name="unit{id}[]" value="name01{id}" />
    </td>
</tr>
<tr>
    <th>詳細01</th>
    <td>
        <textarea name="detail01{id}" rows="4">{detail01}</textarea>
        <input type="hidden" name="unit{id}[]" value="detail01{id}" />
    </td>
</tr>
/* 以下繰り返し */
</table>

弊社では大活躍のカスタムユニットですが、合宿であまり使われていないことがわかりました。ぜひぜひ新機能を使っていただきたいと思い、Advent Calendar のブログエントリーとしてご紹介しました。ユニットグループやユニット拡張に自信のないノンプログラマさんでも気軽に使える機能だと思いますので、ぜひ一度ご活用ください。(そして素敵な使い方をお教えいただければ嬉しいです)

「a-blog cms Advent Calendar 2014」、明日のご担当は株式会社データファームの勝又さんです!個人的にも気になる内容なので楽しみにしています!