入力項目の追加

入力側に追加するときの記述について

フォームの入力フォームはフォームステップ:初期(step)とフォームステップ:修正・エラー(step#reapply)の2カ所に記述されています。フォームの項目を追加するにはこの2つのステップに追加してください。フォームの項目はカスタムフィールドで作られています。カスタムフィールドについてはカスタムフィールドのページをご覧ください。

例えばsite2014テーマでは /themes/site2014/contact/form/input.html にフォームの項目が記述されています。site2014テーマのフォームステップ:初期(step)とフォームステップ:修正・エラー(step#reapply)は input.html とインクルードしているため項目を追加するときはこのファイルを編集すれば2ステップに反映されます。
以下は site2014テーマが /themes/site2014/contact/form/input.html を読み込んでいるソースの一部です。

<!-- BEGIN_MODULE Form -->
<!-- BEGIN step -->
<!-- フォームステップ:初期 -->
<form action="?step=reapply" method="post" class="acms-form">		
	<!--#include file="/contact/form/input.html"-->

	<input type="hidden" name="step" value="confirm" />
	<input type="hidden" name="id" value="contactForm" />
	<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ" class="acms-btn" />
</form>
<!-- END step -->
	

<!-- BEGIN step#reapply -->
<!-- フォームステップ:修正・エラー -->
<form action="?step=reapply" method="post" class="acms-form">	
	<!--#include file="/contact/form/input.html"-->
	
	<input type="hidden" name="step" value="confirm" />
	<input type="hidden" name="id" value="contactForm" />
	<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ" class="acms-btn" />

</form>
<!-- END step#reapply -->

site2014テーマを使ってフォームの項目を追加してみましょう。 /themes/site2014/contact/form/input.html に資料請求するかどうかの項目を追加します。以下のソースを追加してください。

<tr>
	<th>資料請求</th>
	<td>
		<label class="acms-form-radio">
		<input type="radio" name="request" value="資料請求する"{request:checked#資料請求する} /><i class="acms-ico-radio"></i>資料請求する</label>
		<label class="acms-form-radio">
		<input type="radio" name="request" value="資料請求しない"{request:checked#資料請求しない} /><i class="acms-ico-radio"></i>資料請求しない</label>
		<input type="hidden" name="field[]" value="request" />
	</td>
</tr>

site2014テーマのお問い合わせフォームに資料請求を追加するかどうかのフォームを追加できました。


a-blog cmsのフォームでは修正画面に戻っても入力したデータが保持されています。inputタグにカスタムフィールドの変数が書いてないとデータは保持されません。

<!-- ○ データが保持される -->
<input type="radio" name="request" value="on"{request:checked#on} /><i class="acms-ico-radio"></i>資料請求する</label>

<!-- × データが保持されない -->
<input type="radio" name="request" value="on" /><i class="acms-ico-radio"></i>資料請求する</label>

出力側に追加するときの記述について

確認画面(step#confirm)と完了画面(step#result)で追加した項目を出力する用のソースを追加します。
今度はsite2014テーマのお問い合わせフォームの /themes/site2014/contact/form/confirm.html に以下のHTMLを追加してください。

<tr>
	<th>資料請求</th>
	<td>
		{request}
	</td>
</tr>

確認画面にいくと資料請求の項目が追加されています。


メールのテンプレートに追加

項目を追加したらメールのテンプレートにも追加が必要です。フォームには管理者宛と一般宛の本文のメールテンプレートが2つあります。この2つに項目を追加してください。

site2014テーマでは以下が管理者宛と一般宛の本文のメールテンプレートになります。
/themes/site2014/contact/form/body.txt
/themes/site2014/contact/form/adminbody.txt

adminbody.txtのテンプレートに資料請求の項目を追加した例になります。

{name} 様 よりお問い合わせがありました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

受付日時:%{Y}年%{n}月%{j}日 %{H}:%{i}:%{s}

■お問い合わせ

会社名    : {company}
お名前    : {name}
メールアドレス: {email}
お電話番号  : {phone}
ご住所    : 〒{zip} {pref_code} {address}

資料請求: {request}

お問い合わせ種類: {description}
お問い合わせ内容:
{inquiry}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

静的書き出しをしてみよう [Pro版以上]

ブログの静的書き出し

ブログの静的書き出し

Ver. 2.8.0 より プロ版以上になりますが、ブログを静的なHTMLに書き出す機能が追加されます。静的に書き出すことによりパフォーマンスやセキュリティ面で有利になります。ハンズオン的な内容ではありませんが、どのように書き出せらるか体験してみましょう。

静的書き出しの仕様

  • アーカイブ(画像、ファイル)の書き出し
  • テーマのテンプレートの書き出し(ランディングページなど)
  • ドメインの書き換え(設定したドメインに書き換えます)
  • リンク、パスの書き換え(書き出し先設定に合わせて自動的に書き換えます)
  • CSSのURL属性の書き換え(画像パスなどを自動的に調整します)
  • トップ、インデックス、エントリーの書き出し(カテゴリートップも含む)
  • カテゴリー毎のページの作成
  • カテゴリー毎のアーカイブの作成(日付による絞り込み表示)

H: a-starter-kitを使ってスムーズに開発環境を整えよう!

このハンズオンでは、アップルップルが受託案件を始めるときに使用しているスターターキット「 a-starter-kit」の使い方と解説をします。 このスターターキットを使うと、ウェブサイト制作で使用する a-blog cms 用のテンプレートがあらかじめ用意されており、またCSS, JavaScriptのビルド環境が整っていますので、すぐにコードを書きはじめられます。

このハンズオンは、各自のローカル環境での作業をお願いします。

スターターキットでできること

下記のようなことが出来るようになります。最初は覚えることは多いですがSass(SCSS)やECMA Script6 でコードを書けると作業効率も上がりコードの保守もしやすくなります。ぜひ導入してみましょう。

  • Sass(SCSS)のビルド & Minify(ファイル圧縮)
  • JavaScriptの トランスパイル(ECMA Script6 以降の文法サポート)& Minify(ファイル圧縮)
  • 各種カスタムフィールドを含むスタートテンプレートの用意

事前準備

ローカル環境

a-blog cms のローカル環境が必要です。MAMPやXAMPP、Dockerなどお好きな環境をお使いのマシンに用意してください。

Node.js

このスターターキットを動かすためには、開発するマシンに Node.js がインストールされている必要があります。インストールをしていない方は、まず公式サイトより Node.js をインストールしてください。

2つインストールボタンが並んでいますが、今回は推奨版をインストールしましょう。インストールできたら、ターミナル(またはコマンドライン)を開き、以下のコマンドでNode.jsが入っているか確認してください。

$ node -v

※このとき、実際に入力するのは「node -v」です。「$」はコマンドではないので気をつけてください。

2018年5月15日現在は推奨版が8.11.1なので、画面には「v8.11.1」と表示されるはずです。

ディレクトリ・ファイルの説明

各ディレクトリ・ファイルの役割になります。覚える必要はありませんが、役割を覚えるとスターターキットのカスタマイズに役立ちます。(一部、不可視ファイル(名前がドットからが始まるファイル)がありますので、パソコンの設定を不可視ファイルを表示できるようにすることをおすすめします。MacではFinder上で⌘ + Shift + .(ドット)を実行すると表示できます。)



ディレクトリ・ファイル 説明
themes a-blog cms のテーマ開発のベースとなるテンプレート群
.csscomb.json CSSプロパティを並び替える設定ファイル
.editorconfig エディターで文字コードやインデント、改行コードを揃えるための設定ファイル
.eslintrc JavaScriptの構文チェックで使われる設定ファイル
.gitignore Gitで管理するときに、Gitに含めたくないファイルを定義したファイル
.node-version 複数人開発でnodeのバージョンを揃えるためのファイル
gulpfile.js gulpの設定ファイル。このスターターキットでは、CSSのビルドを担当する。
package.json スターターキットに必要なライブラリが記述してあるファイル。またビルド用のコマンドが記述されている。
webpack.config.js Webpackの設定ファイル。このスターターキットでは主にJavaScriptのビルドを担当する。

スターターキットの設置

ここからは、実際に手を動かして、スターターキットの使い方を説明します。

a-blog cms の動作環境

まず最初にa-blog cmsが動いているローカル環境を用意します。すでに動いている環境があれば、その環境でも大丈夫です。環境がない場合はa-blog cmsを新規インストールしましょう。


新規インストールパッケージの構成に、 htaccess.txt が .htaccess へ変更された状態

a-blog cms をインストールし、動作する状態になったときのフォルダ・ファイル状態


キットの設置

https://github.com/appleple/a-starter-kitClone or download から zipファイルをダウンロードし、a-blog cms が動作しているローカル環境のドキュメントルートに解凍してファイルを設置しましょう。

※ 不可視ファイル(ドットから始まるファイル)がいくつかありますので、忘れずに設置しましょう。

themesディレクトリは上書きしないようにしましょう。


a-starter-kit-masterフォルダがa-blog cmsがインストールされたルートディレクトリに設置されている状態

スターターキットの設置状態


テーマディレクトリの設定

初期状態では、themesディレクトリ内には root というテーマが入っています。テーマ名はそのままでもいいですが、実際に変更してみましょう。 ここでは例として、 custom というテーマ名にします。

themes/rootthemes/custom に変更します。

次に、package.json をエディタで開き編集します。

"config": {
    "local": "http://example.com/", 
    "theme": "custom"
  },
  • local: ローカルで表示するURLを設定します
  • theme: 監視したいテーマディレクトリ名(ここでは先ほど変更したディレクトリ名「custom」)を設定

新しくできたテーマを a-blog cms の管理画面のテーマ設定(⌘K/Ctrl+kで「テーマ設定」を検索)から設定しましょう。 これでテーマ名の変更は完了です。

スターターキットの初期処理

スターターキットを動かすためには、様々なNode.jsのライブラリをインストールする必要があります。これらのライブラリのインストールは Node.jsの npm というパッケージ管理ツールを使うため、npmが全て自動で行ってくれます。

処理のコマンド実行

ターミナル(Windowsの場合はコマンドライン)を開き、package.json が設置されているディレクトリに移動します。

例: MacでMAMPのローカル環境の場合

$ cd /Applications/MAMP/htdocs

※ 「cd」の後には半角スペースが入っています。ファイルのパスがわからない場合は、「cd 」を入力したあとにフォルダをドラッグ&ドロップするとパスを取得してくれます

移動したら以下のコマンドを実行します。

$ npm install

これで必要なライブラリを、npm(パッケージ管理ツール) がインストールしてくれます。インストールには少し時間がかかるので待ちましょう。

開発で使う2つのコマンド

ここまでが、a-blog cms の開発環境の準備になります。実際にファイルを作業するときは、これから紹介する2つのコマンドのみ実行すれば開発ができるようになります。

開発時のコマンド

開発時には下記のコマンドを実行します。 package.json があるディレクトリにcdコマンドで移動し、実行してください。

$ npm run start

このコマンドを実行すると、以下のことが実行されます。

  • 設定したテーマ以下のファイル更新の監視
  • ファイルを更新すると、CSS, JavaScriptを自動ビルド
  • BrowserSyncによりブラウザでタブが一つ開き、ファイル変更のたびに自動リロード

ファイルを更新するたびに、ブラウザが自動でリロードして、変更が反映されているはずです。

またCSS、JavaScriptの編集ファイルは以下になります。このファイルを編集すると、自動的にビルドが走り、複数のファイルを1ファイルにまとめて書き出されます。



タイプ 編集ファイル 書き出し先
CSS themes/root/src/scss/以下 themes/root/dest/bundle.min.css
JavaScript themes/root/src/js/以下 themes/root/dest/bundle.js

デプロイ時のコマンド

今までは、開発用のコマンドで自動でビルドが走ったり、JavaScriptもMinifyされず開発しやすい状態でした。ただ本番などのサーバー反映時には、プロダクション用のビルドを行う必要があります。そのコマンドが以下になります。

$ npm run build

開発用のコマンドは差分ビルドなので、早くビルドされていましたが、プロダクション用ビルドは少し時間がかかります。本番反映時にはこのコマンドを実行して作成されたファイルを適用してください。

色々触ってみよう!

以上でこのハンズオンは終了しますが、色々なファイルを触ってみてどのように動くか確認してみましょう。わからないところがあれば是非スタッフに聞いてください。

バリデーター&コンバーター

入力された値のチェックと変換

a-blog cmsのフォームには、入力された値のチェックや変換といった、フォームオプションと呼ばれる機能があります。

バリデーター入力された値を指定した条件でチェックします(必須チェックなど)
コンバーター入力された値を指定した形式に変換します(全角→半角など)

バリデーター

[年代]の項目を必須入力にしてみましょう。

チェック機能の実装

まず、その項目が必須入力であるというチェック機能を実装します。
必須入力(required)の設定を加えたサンプルコード

<dt>年代</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代" />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代" />30〜40代</label>
<label><input type="radio" name="age" value="50代以上" />50代以上</label>
<input type="hidden" name="field[]" value="age" />
<input type="hidden" name="age:validator#required" />
</dd>

7行目が必須項目のチェックとして、追加された記述です。この記述を、入力画面( step )と、再入力画面( step#reapply )の両方に追記してください。

<input type="hidden" name="[対象の項目名]:validator#[オプション名]" />

チェック対象のフォーム項目のname属性を指定し、最後にオプション名を指定します。チェック用のオプションは複数用意されています。ここでは、サンプルテンプレートに使用されているものだけ、ご紹介します。

required必須項目が入力されているかチェックするオプションです
maxLength文字数の上限を設定するオプションです
emailメールアドレスの書式として正しいかをチェックするオプションです

他のオプションについては、リファレンス:フォームオプションをご覧ください。

画像、ファイルの場合の必須チェック

フォームにおけるファイル、画像アップの入力項目に対して、チェック機能(バリデーション)の必須チェックを使う場合の記述方法を補足します。

<input type="hidden" name="photo:v#required" />

上記の方法では、ファイルを添付していても、エラーになってしまいます。そこで下記のように記述してください。この記述方法で必須チェックが有効になります。

<input type="hidden" name="photo@path:v#required" />

エラー表示の実装

チェック機能を実装したら、今度はエラーが返ってきた時の表示を実装します。
エラー表示のブロックを加えたサンプルコード

<dt>年代</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代" />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代" />30〜40代</label>
<label><input type="radio" name="age" value="50代以上" />50代以上</label>
<input type="hidden" name="field[]" value="age" />
<input type="hidden" name="age:validator#required" />
<!-- BEGIN age:validator --><p>この項目は必須入力です</p><!-- END age:validator -->
</dd>

8行目にサンプルテンプレートの他の項目と同じようにエラー表示のブロックが加わりました。このブロック内は、指定された項目についてのエラーがあったときだけ表示されます。

<!-- BEGIN [対象の項目名]:validator --><p>[エラーメッセージ]</p><!-- END [対象の項目名]:validator -->

エラーメッセージは自由に設定できるので、他の項目のエラーメッセージも、その項目につけられたバリデーターの内容に合わせて書き換えてみましょう。また、実際に入力をしてエラー表示の動作を確認してみましょう。

コンバーター

それでは次に、メールアドレスの欄に入力された値に全角英数字が含まれていた場合に、半角英数字に変換する機能を実装します。

コンバーターを実装する前に、メールアドレスの欄に全角英数字を含めてメールアドレスを入力してみましょう。バリデーターのエラーが表示されたのではないでしょうか? これは、全角英数字が含まれている時点で、メールアドレスとして不適合であるためにエラーが表示されている状態です。

全角英数字を半角英数字に変換するサンプルコード

<dt>メールアドレス</dt>
<dd>
<input type="text" name="address" value="{address}" />
<input type="hidden" name="field[]" value="address" />
<input type="hidden" name="address:validator#email" />
<input type="hidden" name="address:converter" value="a" />
</dd>

6行目がコンバーターの記述です。この記述を、入力画面( step )と、再入力画面( step#reapply )の両方に追記してください。

<input type="hidden" name="[対象の項目名]:converter" value="[変換オプション]" />

変換オプションはPHPのmb_convert_kana関数に準拠します。

記述し終わったら、改めてメールアドレスの欄に全角英数字を含めてメールアドレスを入力して動作を確認してみましょう。正しく実装できていれば、今度はエラーが表示されず、全角で入力した部分も半角に変換されているのではないでしょうか?

この機能を利用すれば、郵便番号や電話番号はもちろん、住所などの数字も半角、または全角に統一することができます。エンドユーザーに半角や全角といった入力の指定を求めずに、適切な形で情報を得ることができます。

ファイル、画像の必須チェック

フォームにおけるファイル、画像アップの入力項目に対して、チェック機能(バリデーション)の必須チェックを使う場合の記述方法を補足します。

通常の書き方で必須チェックを記述すると下記のようになります。

<input type="hidden" name="photo:v#required" />

上記の方法では、ファイルを添付していても、必須チェックを行ってくれません。そこで下記のように記述してください。この記述方法で必須チェックが有効になります。

<input type="hidden" name="photo@path:v#required" />

C: ポストインクルードを使ってページ遷移しないカスタムフィールド検索を実装する

今回は、カスタムフィールドの検索結果を別ページとして移動させず、その場で表示される方法を紹介します。

このハンズオンで使っている機能

  • カスタムフィールド
  • ポストインクルード

少しJavaScriptを書くことになります。JavaScriptで複雑なことはしないため、HTMLとJavaScriptの基礎な知識があれば大丈夫です。

デフォルト設定

このハンズオンでは「site2018」テーマをベースとして進めています。他のテーマをお使いの方はテーマ名やファイル名などが異なることがあるかと思いますので、気になる方は「site2018」テーマへ変更してください。

手順

検索結果をポストインクルードで表示する

http://ドメイン/realestate/にアクセスすると、すでに物件情報のカスタムフィールドが完成しています。実際にはカスタムフィールド検索の仕組みを作らなければいけませんが、今回は現状のカスタムフィールドに記述を追記してカスタマイズします。

検索結果を表示しようとすると、通常ではページが遷移しますが今回はポストインクルードを使って検索結果をそのページのまま、指定した場所に表示しましょう。


キャプチャ:物件情報のページの一部。物件情報を検索するフォーム、そのフォームの検索結果を表示する一覧を使用します。

今回使用する物件情報のページの一部

検索結果を表示する場所を指定する

まずは、/realestate/index.htmlのファイルを開き、検索結果を表示したい部分をdiv要素で囲み(ここでは@include("/include/entry/summary_custom.html"))、id属性を適用してください。今回はすでに物件情報が表示されている一覧と同じ場所に検索内容が差し代わったように見せたいので、インクルード文をdiv要素で囲んでいます。

以下のサンプルコードではdiv要素に「searchResult」というid属性を適用します。

<div id="searchResult">
  @include("/include/entry/summary_custom.html")
</div>

form要素に追記する内容

次に、form要素に追記します。テンプレートは /include/parts/map.html を編集します。

以下の内容をform要素の開始タグに適用します。



class属性 js-post_include
target属性 #searchResult

js-post_include」を指定することにより、ポストインクルードを使用するエリアを指定しています。target属性には、中身を置き換えたいHTMLコンテンツのid属性を指定します。先ほどの「 検索結果を表示する場所を指定する」のステップでdiv要素に適用したid属性と同じ値を指定します。

また、form要素内に以下の2行を追記します。

<input type="hidden" name="tpl" value="include/entry/summary_custom.html">
<input type="hidden" name="ACMS_POST_2GET">

tplにinclude/entry/summary_custom.htmlと指定することにより、検索結果の表示テンプレートとして使われます。(ちなみに、tplは「template(テンプレート)」の意味です)

最終的なソースコードは以下のようになります。

<form action="/" method="post" class="acms-form js-post_include" role="search" aria-label="検索フォーム" target="#searchResult">
  <table class="realestate-search js-select">
    ...
  </table>

  <input type="hidden" name="tpl" value="include/entry/summary_custom.html" />
  <input type="hidden" name="ACMS_POST_2GET">
</form>

JavaScriptを記述してポストインクルードを動かす

準備がそろってきたので、つぎはJavaScriptを記述します。外部ファイルにして読み込んでも大丈夫ですし、script要素を使っても大丈夫です。

以下のJavaScriptをページ内に記述してください。

ACMS.Ready(function(){
});

ACMS.Readyメソッドの中でJavaScriptを実行すると、config.jsが読みこまれた後に記述したJavaScriptが実行されます。組み込みJSをご使用の際はACMS.Readyメソッドを使うようにしてください(今回使用するポストインクルードも組み込みJSの1つです)。

詳しくは、以下のページをご覧ください。

次に、ポストインクルードの設定をします。config.jsが読み込まれた後に実行したいため、先ほど記述したACMS.Readyメソッドの中に書いてください。

ACMS.Config.postIncludeMethod = 'swap'; // target属性で指定した場所の「中身」を置き換えます
ACMS.Config.postIncludeEffectSpeed = "slow"; // 中身を置き換えた際にゆっくり表示します

今回はページ遷移せずに検索結果を表示したいので、コンテンツの中身を置き換える「postIncludeMethod」を使用しています(置き換えたい中身の指定は、次の「form要素に追記する内容」のステップで解説します)。

上記で使用しているのは以上の2つの設定となりますが、そのほかにも設定があります。詳しくは以下のページをご覧ください。

最終的には以下のような記述になります。

ACMS.Ready(function(){
  ACMS.Config.postIncludeMethod = 'swap';
  ACMS.Config.postIncludeEffectSpeed = "slow"; 
});

http://ドメイン/realestate/ へアクセスし、セレクトメニューで駅名を選択し「検索」ボタンをクリックするとページ遷移することなくその場で検索結果が表示されるはずです。


キャプチャ:「この駅」で絞り込んだとき、物件情報3のエントリーのみ表示される

「この駅」で絞り込んだときの表示結果

送信ボタンを押さなくても検索を実行する

ラジオボタンが選択されたら検索結果が表示されるようにしてみましょう。今回は表示順を変更するラジオボタンを新しく設置します。

table要素の閉じタグの後に以下のソースコードを追記してください。テンプレートは /include/parts/map.html を編集します。 `

並び替える

<input type="radio" id="search-new" name="order" class="acms-admin-btn-radio" value="datetime-desc">
<label for="search-new"><span class="acms-hide-visually">新着順に変更する</span>▲</label>

<input type="radio" id="search-old" name="order" class="acms-admin-btn-radio" value="datetime-asc">
<label for="search-old"><span class="acms-hide-visually">投稿順に変更する</span>▼</label>

`

スタイルも少し調整しましょう。以下のスタイル要素を追記してください。テンプレートは、同じく /include/parts/map.html を編集します。

<style>
	.radio-group {
		float: right;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.radio-group-label {
		float: left;
		margin: 10px;
	}
	.radio-group-inputs {
		float: right;
	}
</style>

すると、物件情報のページに以下のようなラジオボタンが表示されるはずです。


キャプチャ:ラジオボタンが追加されている

検索フォームの直下に表示順を変更するラジオボタンが追加されている

つぎに、外部ファイルまたはscript要素内に以下の記述を追記します。

$(function(){
  $( 'input[name="order"]:radio' ).change( function() {
    $('.js-post').submit();
  });
});

.js-postは、form要素にclass属性を適用します。以下のようになります。

<form action="/" method="post" class="acms-form js-post js-post_include" role="search" aria-label="検索フォーム" target="#searchResult">

現在、ラジオボタンをクリックしてみても何も変化はないはずです。JavaScriptで渡したURLコンテキストをモジュールが読み取っていないからです。URLコンテキストの引数が優先されるように、モジュールIDの設定を変更します。

モジュールID「news_summary」(⌘K/Ctrl +kで「news_summary」を検索)のページへ移動し、「条件設定」タブの画面にある「表示順(order)」のチェックボックスをオンにして、設定を保存します。


「表示順(order)」のチェックボックスがオンになっている

モジュールID「news_summary」の表示設定の画面の一部

ウェブサイト表示画面へ戻り、ラジオボタンをクリックしてみましょう。表示順が昇順・降順に変更するはずです。


キャプチャ:検索結果が投稿順に変更している

ラジオボタンクリック後、物件情報1のエントリーが最初の1件目になっている

最後に

これで、検索とポストインクルードのハンズオンは以上となります。

今回はカスタムフィールド検索結果をその場で表示する方法をご紹介しました。そのほかにも、もっとみるボタンを押すと続きのコンテンツが表示されるようなカスタマイズもポストインクルードで実装できます。Unit_Listというモジュールを使った例になりますが、カスタマイズが気になる方は以下の記事をご参考にしてください。