a-blog cms カスタムフィールドのHTMLをインクルードする

この記事は、「a-blog cms Advent Calendar 2018」8日目の記事です。 今回はカスタムフィールドとインクルードの変数渡しについて書きたいと思います。
https://adventar.org/calendars/2948

a-blog cmsでカスタムフィールドはHTMLベースで書くことができて柔軟な作りになっていますが、HTMLであるため煩雑にもなりがちです。 新規作成の場合はカスタムフィールドメーカーという素敵なツールがあるので問題ないのですが、修正の場合が大変だったりします。

「数が増えました… 値が変わりました… 設置場所が変わりました…」など後から修正が入ることもしばしば… 毎回カスタムフィールドメーカーで作り直すのはちょっとしんどいですよね。 そこで新しいインクルードの書き方を使ってカスタムフィールドのコードを別ファイル化してみたいと思います。
https://developer.a-blogcms.jp/tools/

先に今回作成したインクルードの書き方から見てみましょう

例としてアイキャッチのテキストと画像をカスタムフィールドを作成するとします。 まずはテキスト部分のフィールドを作成しましょう。

@include("/include/field-parts/template/textarea.html", {"field": "eyecatch_text"})
<input type="hidden" name="field[]" value="eyecatch_text">

このようになりました。 本来であればこうなっているコードですね。

<textarea name="eyecatch_text" rows="5" class="acms-admin-form-width-large">{eyecatch_text}</textarea>
<input type="hidden" name="field[]" value="eyecatch_text">

ですが、これだけだと別ファイル化するメリットは少なそうです。

次に画像のカスタムフィールドを作成しましょう。 画像はドラッグ＆ドロップできるように標準で使われているjsを使いたいと思います。 では次は本来の書き方から見てみましょう。

<div class="js-img_resize_cf">
  <div class="js-drop_area" style="min-height: 100px;">
    <div class="acms-admin-drop-area-wrap">
      <div class="acms-admin-drop-area drag-n-drop-hover">
        <div class="acms-admin-drop-area-inner">
          <span class="acms-admin-icon acms-admin-icon-media acms-admin-drop-area-icon"></span>
          <p class="acms-admin-drop-area-text"><!--T-->ここにファイルをドロップ<!--/T--></p>
        </div>
      </div>
    </div>

    <div>
      <!-- BEGIN_IF [{eyecatch_img@path}/nem] -->
      <div><img src="%{ARCHIVES_DIR}{eyecatch_img@path}" width="600" class="js-img_resize_preview" style="width:300px;"></div>
      <input type="hidden" name="eyecatch_img@old" value="{eyecatch_img@path}">
      <!-- ELSE -->
      <div><img src="" class="js-img_resize_preview" style="width:300px;display:none;"></div>
      <!-- END_IF -->
      <div class="acms-admin-form-group">
        <input type="file" name="eyecatch_img" size="20" multiple="multiple" accept="image/*" id="input-img-eyecatch_img" class="js-img_resize_input acms-admin-hide-visually">
        <label for="input-img-eyecatch_img" class="acms-admin-btn-admin" style="cursor:pointer;"><i class="acms-admin-icon-config_export"></i>ファイル選択</label>
        <div class="acms-admin-form-checkbox">
          <input type="checkbox" name="eyecatch_img@edit" value="delete" id="input-img-eyecatch_img_delete">
          <label for="input-img-eyecatch_img_delete">
            <i class="acms-admin-ico-checkbox"></i>削除
          </label>
        </div>
      </div>
      <div>
        <br>画像の説明文:<br>
        <textarea name="eyecatch_img@alt" class="acms-admin-form-width-large">{eyecatch_img@alt}</textarea>
      </div>
    </div>
  </div>
</div>
<input type="hidden" name="field[]" value="eyecatch_img">
<input type="hidden" name="eyecatch_img:extension" value="image">
<input type="hidden" name="eyecatch_img@size" value="1400">
<input type="hidden" name="eyecatch_img@filename" value="">

ドラッグ＆ドロップまでいれるとこんな感じになります。 こちらを先ほどと同じく別ファイル化してインクルードしたものに置き換えて見ましょう。

@include("/include/field-parts/template/img.html", {"field": "eyecatch_img"})
<input type="hidden" name="field[]" value="eyecatch_img">
<input type="hidden" name="eyecatch_img:extension" value="image">
<input type="hidden" name="eyecatch_img@size" value="1400">
<input type="hidden" name="eyecatch_img@filename" value="">

おお！スッキリしましたね。

何をやっているかというと

別ファイル化したものにインクルード文から変数を渡しています。 そして、今回渡した変数はカスタムフィールド名ということになります。 カスタムフィールドのHTML部分はサイトを通して大きく変わらないと思いますので別ファイルで一括管理、hiddenの値はフィールドによって変わりそうですのでそのままとしています。
https://developer.a-blogcms.jp/document/template/include.html

後は作成したい箇所で@include + 変数で呼び出せばok。 これで設置場所が変更になった場合もHTMLのタグを意識せず移動出来るので楽になるのではないでしょうか。 HTMLに修正があっても一括して変更が可能ですのでサイト全体でコードに一貫性が保てメンテナンス性もあがりそうです。 サンプルをGitHubGistに置いていますので良かったらご覧ください。
https://gist.github.com/tamshow/c4eff24f6a2db43551e31ab46839938b

最近のバージョン（2.8〜でしょうか）は@extendsや@includeなど新たに追加された機能により今までと違った作り方もできるようになりました。 @extendsや@includeなどを使うと効率的に書けたり、メンテナンス性も優れたりと嬉しいですね！ この記事とは内容はが違いますが、このSetRenderedを使ったカスタマイズとかもぐっときました！
https://developer.a-blogcms.jp/blog/custom/chartjs_custom_unit.html

2.10からはサブカテゴリーの追加されるとのことですのでますます楽しみです^^ ではでは。

---