【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 から↓ `html 

<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>


<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>


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

ただいまページを準備しております。もうしばらくお待ちください。

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

@include("/include/parts/article.html") 

すこし詳しく説明します。  
`<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 などもあるようで、機会があれば試してみたいなと感じました。それでは！