カレンダー表示の月送りをページ遷移せずに実装

※当ページのリンクには広告が含まれています


こちらは a-blog cms Advent Calender 2017の18日目の記事になります。

a-blog cmsでは、カレンダーで予定や記事リンクを表示させるモジュールがいくつかあります。
「この日書いた記事」をブログ等で表示させることはもちろん、店舗などの営業日のお知らせやイベントなどのスケジュールを掲載することもあると思います。

その時、「次の月、前の月を見たいな」と思ってリンクをクリックすると、通常ならページごと遷移するようになっていますが、今回は、これをページ遷移せずに月送りできるカスタマイズをご紹介します。a-blog cmsの「ポストインクルード」という機能を使いました。

サンプル

カレンダー月送りサンプル
「前月」「次月」をクリックすると、ページ遷移せずにカレンダーが切り替わるようになっています。

1.テンプレートHTMLファイルを作成

まず、カレンダーモジュール自体を記述するHTMLファイルを作成します。
今回は「/sample/calendar/tpl_cal.html」としましょう。

作成したファイルに以下のコードを貼り付けてください。モジュールID設定やCSS表示の設定は適宜行っておきます。

<div id="jsChangeContents">	
<!-- BEGIN_MODULE Plugin_Schedule  id="schedule_sample" --><!-- BEGIN unit:loop -->
<div class="unit"><!-- BEGIN month:loop -->
<p class="acms-text-center"><a href="{url}"><strong>{year}年 {month}月</strong></a></p>

<!-- BEGIN monthly -->
<div class="acms-text-center cal-btn-wrap">
<form action="" method="post" class="js-post_include cal-btn" target="#jsChangeContents">
<input type="hidden" name="tpl" value="/sample/calendar/tpl_cal.html" />
<input type="hidden" name="date" value="{prevUrl}[split('/', 6)]/{prevUrl}[split('/', 7)]">
<input type="hidden" name="bid" value="%{BID}" />
<input type="submit" name="ACMS_POST_2GET" value="前月" />
</form>

<form action="" method="post" class="js-post_include  cal-btn" target="#jsChangeContents">
<input type="hidden" name="tpl" value="/sample/calendar/tpl_cal.html" />
<input type="hidden" name="date" value="{nextUrl}[split('/', 6)]/{nextUrl}[split('/', 7)]">
<input type="hidden" name="bid" value="%{BID}" />
<input type="submit" name="ACMS_POST_2GET" value="次月" />
</form>
</div>
<!-- END monthly -->
	<div class="month">
		<table class="{mode} otoya">
		<tr style="display:none;">
			<th>{w#0}</th>
			<th>{w#1}</th>
			<th>{w#2}</th>
			<th>{w#3}</th>
			<th>{w#4}</th>
			<th>{w#5}</th>
			<th>{w#6}</th>
		</tr>
		<!-- BEGIN week:loop -->
			<tr class="week{weekRowNo}">
				<!-- BEGIN day:loop -->
					<td class="day{weekNo}<!-- BEGIN dayClass:veil --> {dayClass}<!-- END dayClass:veil -->">
						<!-- BEGIN day:veil -->
						<div class="week"><strong>{day} </strong><small>({week})</small></div>
						<div class="item">
						{dayLabel}
						{dayItem}
						</div>
						<!-- END day:veil -->
					</td>
				<!-- END day:loop -->
			</tr><!-- END week:loop -->
		</table>
	</div><!-- END month:loop -->
</div><!-- END unit:loop -->
<!-- END_MODULE Plugin_Schedule -->
</div>

各コードについて詳しく説明していきます。

ページ送り部分をポストインクルードに書き換え

上記のソースの6〜22行目は、通常は以下のコードが書かれています。それをポストインクルードの記述に書き換えました。
ポストインクルードについてはこちらをご覧ください。

<!-- BEGIN monthly --><p><a href="{prevUrl}">≪前月</a> | <a href="{nextUrl}">次月≫</a></p><!-- END monthly -->

ポストインクルード設定:テンプレートHTMLファイルを指定

<input type="hidden" name="tpl" value="/sample/calendar/tpl_cal.html" />

ここで、作成したHTMLファイルのパスを指定します。

ポストインクルード設定:前月や次月の月を抽出

ポストインクルードで年月を指定する際は、name属性を「date」として、年月を指定します。

通常、ポストインクルード無しの場合は {prevUrl} や {nextUrl} がリンク先URLとして指定されており、 「https://aogiri.net/sample/schedule/schedule.html/2018/01/」という文字列が格納されています。

しかし、ポストインクルードの指定で欲しいのは「/2018/01」の文字のみです。
そこで、以下のように校正オプションを使って必要な文字のみを取り出します。

<input type="hidden" name="date" value="{prevUrl}[split('/', 6)]/{prevUrl}[split('/', 7)]">

このとき、6や7は設置したURLの階層により異なるので、適宜設定してください。

ポストインクルード設定:周りをdivで囲み、IDを指定

作成したHTMLファイルの一番外側をdivで囲み、任意のIDを指定します(サンプルではjsChangeContents)。 このIDは、

<form action="" method="post" class="js-post_include  cal-btn" target="#jsChangeContents">

のtarget属性と同じものを指定してください。
このdivで囲ったエリアが、まるっと書き換わるようになります。

2.読み込み元HTMLファイルから作成したファイルを読み込む

カレンダーを読み込みたいHTMLファイル(今回は/sample/calendar/calendar.html)から、1で作成したファイルをインクルードします。

<!--#include file="/sample/calendar/tpl_cal.html" -->

これで、https://aogiri.net/sample/calendar/calendar.htmlにアクセスすると、ページ遷移しないカレンダーが表示されるようになりました。

サンプルページでは、スケジュールプラグインの他にカレンダーモジュールのサンプルも掲載しています。
こちらも考え方は全く同じで、ページ送り部分をポストインクルードに変え、外側をdivで囲うことにより実現させています。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

a-blog cmsで、PR付きの検索結果を実装する

a-blog cmsでサイト構築時・公開時に確認しておきたいチェックリスト 2018年版

a-blog cmsで、特定のファイルを会員限定で閲覧できる機能を作ってみました

a-blog cms Training Camp 2016 OKINAWA に参加しました

a-blog cmsのファイルアイコンにFont Awesomeを使ってみる

a-blog cms Training Camp 2015 Springに参加しました!

レスポンシブと最適化のいいとこどりができる?a-blog cmsでできる、マルチデバイス対応

Webridge Meeting SP17 で a-blog cmsのマルチデバイス対応についてお話しました

a-blog cmsでサイトを作成した際の、制作時・公開時・納品後のチェックリスト

a-blog cms 勉強会 in 高松 2012/07

ウェブ解析士マスター /上級SNSマネージャー/ a-blog cmsエバンジェリスト

香川県生まれ。1998年からウェブ制作に取り組む。制作会社にて企業・ECサイトのデザイン、ディレクション、CMS構築等を担当後、2015年7月に独立。

デジタルマーケティング・ウェブコンサルティング、UI、UX設計を主軸に戦略から考えるウェブサイト設計・構築を行う。

趣味は和太鼓演奏。香川県三豊市で活動する「和太鼓集団 響屋」メンバー。実家の桃農家も手伝う兼業農家。

最新記事

カテゴリー

アーカイブ

ハッシュタグ

【初心者向けから応用まで】
GA4を学ぶならこの本がオススメ