【a-blog cms】ポストインクルードでもっと見るボタンを実装する

現在絶賛リニューアル開発中の自分のブログでポストインクルードを活用した "もっと見るボタン" を実装したので、その実装方法について備忘録としてまとめます。

ポストインクルードとは

まず、簡単にポストインクルードについて説明します。

ポストインクルードとはフォームでポストするとAjaxという技術を使用してjQueryでリクエストを送って、返ってきたレスポンスを表示できるa-blog cmsの標準機能です。ポストインクルードを使用することでページのリロードなしにデータを引っ張ってきて表示させることができます。

使い方は簡単で「POST_2GETモジュール」のフォームを用意して、form タグのクラスに js-post_includeを指定するだけです。js-post_include をクラスに指定したフォームを送信すると、勝手にリクエストを送ってデータを表示してくれます。
target属性にセレクターを指定すると、指定したセレクターの要素自身or中身を置き換えます。

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
  <input type="text" name="keyword" value="" size="15" />
  <input type="hidden" name="tpl" value="include/searchResultSample.html" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

もっと見るボタンの実装

ポストインクルードの概要がわかったところで、実際にもっと見るボタンの実装方法の説明に移りたいと思います。まずは該当のソースコードを見てみましょう。
ファイルは /include/parts/article.html と /include/entry/summary.html です。

まずは、 /include/parts/article.html から↓

<!-- BEGIN_MODULE Entry_Summary id="summary_index" -->
  <!-- BEGIN unit:loop -->
  <!-- BEGIN entry:loop -->
  <article class="c-article">
    <a href="{url}" class="c-article__link">
      <div class="c-article__img-wrap">
        <!-- BEGIN image:veil -->
        <img
          src="%{ROOT_DIR}{path}[resizeImg(374, 197)]"
          alt="{alt}"
          width="{imgX}"
          height="{imgY}"
          class="c-article__img acms-img-responsive js-lazy-load"
        ><!-- END image:veil -->
      </div>
      <div class="c-article__title-wrap">
        <h3 class="c-article__title">{title}</h3>
      </div>
    </a>
    <!-- BEGIN tag:veil -->
    <div class="c-article__tag-group">
      <!-- BEGIN tag:loop -->
      <a href="{url}" class="c-article__tag">{name}</a>
      <!-- END tag:loop -->
    </div><!-- END tag:veil -->
    <div class="c-article__foot">
      <time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}/{date#m}/{date#d}</time>
    </div>
  </article>
  <!-- END entry:loop -->
  <!-- END unit:loop -->

  <!-- BEGIN pager:veil -->
  <!-- BEGIN forwardLink: veil --><!-- BEGIN forwardLink -->
  <form action="" method="post" class="p-more-btn__wrap js-post_include">
    <input type="hidden" name="tpl" value="/include/parts/article.html" />
    <input type="hidden" name="bid" value="%{BID}" />
    <input type="hidden" name="page" value="{forwardPage}" />
    <button type="submit" name="ACMS_POST_2GET" class="c-btn-primary p-more-btn">
      <i class="fas fa-plus"></i>
      もっと見る
    </button>
  </form><!-- END forwardLink --><!-- END forwardLink: veil -->
  <!-- END pager:veil -->

<!-- END_MODULE Entry_Summary id="summary_index" -->

次に /include/entry/sumary.html↓
このテンプレートで /include/parts/article.html をインクルードしています。

<!-- BEGIN_MODULE Entry_Summary id="summary_index" -->
<!-- BEGIN notFound -->
<p>ただいまページを準備しております。もうしばらくお待ちください。</p>
<!-- END notFound -->

@include("/admin/module/setting.html")

<div class="c-articles-container">
  @include("/include/parts/article.html")
</div>

<!-- END_MODULE Entry_Summary -->

すこし詳しく説明します。
<input type="hidden" name="page" value="{forwardPage}" /> Entry_Summaryの中で使用できる変数である {forwardPage} を name 属性に page を指定した input タグの value 属性の値に指定してあげることで次ページのデータをポストインクルードで引っ張ってくることができるようになります。また、ポストインクルードを起動するために js-post_include クラスを設定するタグは tpl で指定したテンプレート先のファイルに含める必要があります。呼び出しもとのファイル（上記のソースコードでは/include/entry/sumary.html）に含めてしまうと、永遠に2ページめの情報をポストインクルードで引っ張ってくるようになってしまいます。

また、注意する点としましては、上記のソースコードで言う c-articles-container といった要素のラッパーに CSS Grid や Flexbox などで2列、3列に要素を並べるようにしている場合です。ポストインクルードの使用上取得した情報のテンプレートに置き換えることしかできず、追加することができないため、もっと見るボタンを c-articles-container の子要素にする必要があります。子要素になるためGridやFlexboxの影響でスタイルの調整がうまく行かない場合があります。

今回の場合は、 c-articles-container に display: grid を指定していたため、ボタンの配置がグリッドに巻き込まれてしまいました。そこで活躍したのが CSS Grid の CSS プロパティである、grid-column です。grid-column に snan カラム数 を指定することでグリッド〇個分という指定をすることができるため、横1列分の数値を指定して、 もっと見るボタンが c-articles-container の一番下に固定して配置できるようになりました。
scss ファイルの記述としては以下のとおりです。

.p-more-btn__wrap {
  grid-column: span 2;
}

まとめ

ポストインクルードを初めて使用しましたが、簡単にAjaxが利用できてとても便利だと感じました。他にもボタンを押さずともポストインクルードを使用できる js-post_include-ready や 無限スクロールを簡単に実装できる js-post_include-bottom などもあるようで、機会があれば試してみたいなと感じました。それでは！

---