2018-12-09

更新の手間を軽くするためにカスタムユニットを使う

これは、a-blog cms Advent Calendar 2018 の９日目の記事です。

用途に応じて、オリジナルの入力欄が作れるカスタムユニット。なにか特別な投稿をするためだけのユニットなのかと勘違いしそうですが「編集時の手間を省き、見た目もわかりやすくする」という使い方をご紹介します。

a-blog cms のユニットは、テキスト<h2>,<h3>,<p>,<ul>...や画像<img>などHTMLの要素単位が基本。エントリーに必要なものを追加しながら、それぞれのオプションを設定し、コンテンツを組み立てます。

文章を書く
写真をアップ
表組みデータを挿入
地図を貼る　など

こういった編集作業の中で、「画像にテキストを回り込ませる」という、よく使われるレイアウトをカスタムユニット化します。左右指定の手間をはぶき、画像とテキストの位置関係もユニット内で表示。通常のユニットだけで表現できることも、カスタムユニットを活用することで、より更新しやすい環境を準備できます。

編集側のファイル（/admin/entry/unit/extend.html）

<!-- BEGIN custom_imgLtextR -->
<div class="c-unit clearfix">
  <div class="acms-col-sm-6">
    <div class="js-img_resize_cf">
      <!-- BEGIN_IF [{cunit-image@path}/nem] -->
      <img src="%{ARCHIVES_DIR}{cunit-image@path}" class="acms-admin-img-responsive js-img_resize_preview" style="width:1000px" alt="{cunit-image@alt}" />
      <input type="hidden" name="cunit-image{id}@old" value="{cunit-image@path}" />
      <div class="acms-admin-form-checkbox">
        <input type="checkbox" name="cunit-image{id}@edit" value="delete" id="input-checkbox-cunit-image{id}@edit" />
        <label for="input-checkbox-cunit-image{id}@edit"><i class="acms-admin-ico-checkbox"></i>削除</label>
      </div>
      <!-- ELSE -->
      <img src="%{ARCHIVES_DIR}{cunit-image@path}" class="acms-admin-img-responsive js-img_resize_preview" style="width:1000px;display:none" />
      <!-- END_IF -->
      <input type="file" name="cunit-image{id}" size="20" class="js-img_resize_input" />
      <div class="c-unit_field">
        <input type="text" name="cunit-image{id}@alt" value="{cunit-image@alt}" size="20" class="js-placeholder" title="画像キャプション（任意）" />
      </div>
      <input type="hidden" name="unit{id}[]" value="cunit-image{id}" />
      <input type="hidden" name="cunit-image{id}:extension" value="image" />
      <input type="hidden" name="cunit-image{id}@width" value="1000" />
      <input type="hidden" name="cunit-image{id}@filename" value="" />
    </div>
  </div>
  <div class="acms-col-sm-6">
    <div class="c-unit_field">
      <textarea name="cunit-heading{id}" class="acms-admin-form-width-full js-placeholder" title="見出し（改行可）">{cunit-heading}</textarea>
      <input type="hidden" name="unit{id}[]" value="cunit-heading{id}" />
    </div>
    <div class="c-unit_field">
      <textarea name="cunit-text{id}" class="acms-admin-form-width-full js-placeholder js-lite-editor-field" title="本文" rows="8">{cunit-text}</textarea>
      <input type="hidden" name="unit{id}[]" value="cunit-text{id}" />
    </div>
  </div>
</div>
<!-- END custom_imgLtextR -->

表示側のファイル（/include/unit/extend.html）

<!-- BEGIN unit#custom_imgLtextR -->
<div class="c-unit clearfix acms-clear">
  <div class="column-image-left js_notStyle acms-col-sm-6">
    <a href="%{ARCHIVES_DIR}{cunit-image@path}" class="js-smartphoto" data-caption="{cunit-image@alt}">
      <img src="%{ARCHIVES_DIR}{cunit-image@path}" alt="{cunit-image@alt}" class="acms-img-responsive" />
    </a>
    <!-- BEGIN cunit-image@alt:veil -->
    <p class="caption">{cunit-image@alt}</p>
    <!-- END cunit-image@alt:veil -->
  </div>
  <div class="acms-col-sm-6"><!-- BEGIN cunit-heading:veil -->
    <h3>{cunit-heading}[escape|nl2br]</h3><!-- END cunit-heading:veil --><!-- BEGIN cunit-text:veil -->
    <p>{cunit-text}[escape|nl2br]</p><!-- END cunit-text:veil -->
  </div>
</div>
<!-- END unit#custom_imgLtextR -->

上記のコードは、スタイルガイドをベースに作成しています。画像のサイズを変えたり、左右を入れ替えたりするなど、さまざまなバリエーションが考えられます。管理画面の設定方法は公式サイトを参照してください。

カスタムユニット | ユニット | ドキュメント | a-blog cms developer

a-blog cms developer

カスタムユニットを使えば、独自の内容に合わせたオリジナルのユニットを作成できます。カスタムフィールドでは、ユニットとユニットの間に挿入できませんが、カスタムユニットだと挿入でき...

a-blog cms は、ウェブサイトに必要なパーツがビルトインモジュールという形で揃っています。同じように、エントリー編集に必要な「配置パターン」をカスタムユニットで準備しておくと、強力なセールスポイントになると感じています。ちょっとしたニーズにもカスタマイズで応えられ、その柔軟度の高さが a-blog cms の素晴らしいところです。

ishikawa note

編集側のファイル（/admin/entry/unit/extend.html）

表示側のファイル（/include/unit/extend.html）