A: ポストインクルードで読み込んできたコンテンツにMasonryレイアウトを適応する
a-blog cmsにはACMS.addListener という特定のイベントに対して処理を挟み込めるAPIが用意されています。
このAPIを使うことにより、エントリーのユニットの追加時やカスタムフィールドグループの項目を増やした時など特定のタイミングで任意の処理を挟み込むことができます。
例えば、ポストインクルードで読み込んで来たコンテンツに対してウェブフォントを適応したいというケースなどにも有効です。
下は、ウェブフォントのサービスであるFONTPLUSをポストインクルード時に再実行する処理のサンプルになります。
ACMS.addListener("acmsAfterPostInclude", function() {
FONTPLUS.reload();
});ACMS..addListenerに用意されているイベント
| イベント名 | 実行タイミング |
|---|---|
| acmsReady | 組み込みJSが実行できるタイミングで発火するイベント |
| acmsAdminReady | 管理画面用の組み込みJSが実行出来る段階で発火するイベント |
| acmsDispatch | 組み込みJSのディスパッチが終わった段階で発火するイベント |
| acmsAddUnit | エントリーの編集画面にてユニットが追加された際に発火するイベント |
| acmsAfterPostInclude | ポストインクルードが完了したタイミングで発火するイベント |
| acmsAdminDelayedContents | ダイアログや、タブなど後から表示されるコンテンツが表示されるタイミングで発火するイベントです。 |
今回はこのAPIを利用してポストインクルードが実行された後にそのコンテンツに対してMasonryレイアウトを適応してみましょう。 Masonryレイアウトとはアイテムがタイル状に引き詰められたレイアウトで、以下のMasonryというJavaScriptライブラリを使用することで実装可能です。
Masonry
課題
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を活用してみてください。
