A: ポストインクルードで読み込んできたコンテンツにMasonryレイアウトを適応する

a-blog cmsにはACMS.addListener という特定のイベントに対して処理を挟み込めるAPIが用意されています。 このAPIを使うことにより、エントリーのユニットの追加時やカスタムフィールドグループの項目を増やした時など特定のタイミングで任意の処理を挟み込むことができます。 例えば、ポストインクルードで読み込んで来たコンテンツに対してウェブフォントを適応したいというケースなどにも有効です。 下は、ウェブフォントのサービスであるFONTPLUSをポストインクルード時に再実行する処理のサンプルになります。

ACMS.addListener("acmsAfterPostInclude", function() {
  FONTPLUS.reload();
});

ACMS..addListenerに用意されているイベント

今回はこのAPIを利用してポストインクルードが実行された後にそのコンテンツに対してMasonryレイアウトを適応してみましょう。 Masonryレイアウトとはアイテムがタイル状に引き詰められたレイアウトで、以下のMasonryというJavaScriptライブラリを使用することで実装可能です。

課題

site2018テーマのお知らせページでMasonryレイアウトを利用した一覧ページを作ってみましょう。ただし「もっと読み込む」ボタンが押されたタイミングで次のページのエントリーサマリーを読み込み、そのコンテンツに再びMasonryレイアウトを適応するものとします。

※デフォルトでお知らせに登録されているエントリー数はあまり多くないので、ハンズオンのために20件ほど増やしておくことをオススメします。

1. リソースの読み込み

まず、Masonryレイアウトに必要な下の2つのJavaScriptを読み込みます。

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

2. themes/site2018/news/index.html の書き換え

@include("/include/entry/body.html")となっている箇所を下のようなソースコードに書き換えます。この部分にMasonryレイアウトが適応されることになります。

<div class="acms-grid js-masonry">
  @include("/include/entry/masonry.html")
</div>

3. ポストインクルードで読み込むテンプレートの記述

themes/site2018/include/entry/masonry.html を作成し、以下のようなHTMLを記述します。先ほどのMasonryレイアウトの中に実際に入ってくるエントリーサマリーを記述しています。今回、モジュールIDをnews_summaryとしています。

<!-- BEGIN_MODULE Entry_Summary id="news_summary" -->
  <!-- BEGIN unit:loop -->
  <!-- BEGIN entry:loop -->
  <div class="acms-col-4">
    <a href="{url}" class="acms-thumbnail">
      <!-- BEGIN image:veil -->
      <img src="%{ROOT_DIR}{path}" alt="{alt}">
      <!-- END image:veil -->
      <!-- BEGIN noimage -->
      <img src="/images/default/noimage.gif" alt="">
      <!-- END noimage -->
      <h3>{title}</h3>
      <p>{summary}</p>
    </a>
  </div>
  <!-- END entry:loop -->
  <!-- END unit:loop -->
  <!-- BEGIN forwardLink -->
  <form action="%{ROOT_BLOG_URL}" method="post" class="js-post_include acms-col-4">
    <input type="hidden" name="tpl" value="/include/entry/masonry.html" />
    <input type="hidden" name="page" value="{forwardPage}" />
    <input type="submit" name="ACMS_POST_2GET" value="もっと読み込む" class="acms-btn"/>
  </form>
  <!-- END forwardLink -->
<!-- END_MODULE Entry_Summary -->

4. JavaScriptの適応

以下のようなJavaScriptを記述して、ポストインクルード実行後に読み込んだコンテンツに対して、再びMasonryレイアウトが適応されるようにします。

var msnry = new Masonry('.js-masonry');
imagesLoaded('.js-masonry', function () {
  msnry.layout();
});
ACMS.addListener('acmsAfterPostInclude', function (e) {
  imagesLoaded('.js-masonry', function () {
    msnry.destroy();
    msnry = new Masonry('.js-masonry');
    msnry.layout();
  });
});

5. モジュールIDの作成

先ほどthemes/site2018/include/entry/masonry.html に記述したモジュールID news_summary を管理画面から作成しましょう。管理画面 > モジュールID よりモジュールIDを新規作成していただけます。この際に下の図のように、カテゴリーIDとページの引数にチェックをつけておきましょう。これでポストインクルード実行の際に、次のページのエントリーサマリーを読み込んで表示することができます。

ハンズオンは以上です。ポストインクルードで読み込んだコンテンツに対してJavaScriptを適応したいケースは多いと思います。今後ぜひ、ACMS.addListenerを活用してみてください。