モジュール

目次

モジュールの基本

モジュールとは?

a-blog cms では、ブラウザ上から更新できる部分には、モジュールと呼ばれるパーツが表示用テンプレートのHTMLファイルに貼り付けられています。
a-blog cmsでは多くのモジュールがありますが、このモジュールがa-blog cmsに登録した様々なデータを表示することでサイトを構成するパーツとなっています。
どのようなモジュールがあるのかを知る事が、a-blog cms のカスタマイズの上達の近道です。同梱テーマのsite2015のトップページでは、以下のようなモジュールが使われています。理解を深めるためには、テンプレートファイルでどのように記述されているか確認してみてください。


siteテーマにどんなモジュールが使われているか


モジュールは大きく分けると、テンプレートを組み立てるためのGETモジュール、サーバーにデータを送信するためのPOSTモジュールがあります。
GETモジュールには、ビルトインモジュール・フィールドモジュール・タッチモジュールの3種類のモジュールがあります。
POSTモジュールにはPOST_2GETモジュール・ダウンロードモジュールという2種類のモジュールがあります。
それぞれの用途については後述します。

モジュールはテンプレートにいくつでも貼り付けできます。ですが、たくさんのモジュールが動作すると、それだけ実行する時間がかかることも覚えておいてください。例えば0.1秒で動くモジュールが100個テンプレートに貼ってあると、ページの表示には10秒かかる事になります。モジュールの貼り過ぎには注意しましょう。
なお、a-blog cmsでは、標準搭載のキャッシュ機能で最初の表示に10秒かかるページも、2回目以降はキャッシュ機能により瞬時に表示できますので、ご安心ください。

ビルトインモジュール

基本的にモジュールと言えば、このビルトインモジュールの事になります。多くはエントリー系の情報を表示させるモジュールで、カテゴリー、ナビゲーション、バナー、トピックパス等、サイト制作にはいろいろなビルトインモジュールを利用することになります。

<!-- BEGIN_MODULE Entry_List -->
<div>
<!--#include file="/admin/module/setting.html"-->
<ul>
	<!-- BEGIN entry:loop -->
	<li><a href="{url}">{title}</a></li>
	<!-- END entry:loop -->
</ul>
</div>
<!-- END_MODULE Entry_List -->

<!-- BEGIN_MODULE モジュール名 --> から <!-- END_MODULE モジュール名 --> を1つのモジュールとして動作します。モジュールの中にモジュールを書く事もでき、モジュールの実行順としては、内側のモジュールが実行され、その後に外側のモジュールが動作するようになっています。

各種ビルトインモジュールの機能や変数表・スニペットについてはリファレンス内のビルトインモジュールのページをご覧ください。

フィールドモジュール

登録したカスタムフィールドのデータを表示させるためのモジュールです。
カスタムフィールドは、基本的に対応するカスタムフィールドのモジュール内に記述する必要があります。

<!-- BEGIN_MODULE Category_Field -->
	<!-- BEGIN headimage:veil -->
		<img src="{headimage@path}" width="" height="" />
	<!-- END headimage:veil -->
<!-- END_MODULE Category_Field -->

例外として、ビルトインモジュール内で利用ができるカスタムフィールドもあります。

各種フィールドモジュールの機能や変数表・スニペットについてはリファレンス内のフィールドモジュールのページをご覧ください。

タッチモジュール

様々な条件で表示をコントロールしたい

タッチモジュールは、様々な条件によって動作(表示)するモジュールで、ページ(テンプレート)がその条件にあてはまる時だけ表示されます。
以下の例では、Touch_Login というモジュールを使うことで、ログインしている状態の場合のみユーザー名を表示します。ログインしていない状態では何も表示されません。

<!-- BEGIN_MODULE Touch_Login -->
    <!-- BEGIN_MODULE Admin_ActionMenu -->
    <p>ユーザー名:{name}</p>
    <!-- END_MODULE Admin_ActionMenu -->
<!-- END_MODULE Touch_Login -->

表示ページによって「トップページ」「一覧ページ」の場合や、ユーザーの権限によって「管理者」「編集者」「投稿者」で別の内容を表示したりという使い方が考えられます。

タッチモジュールは大きく3つに分けられ、条件に合致する場合に動作するタッチモジュール、条件に合致しない場合に動作するNot系タッチモジュール、Facebookページに関連して動作するFacebook系タッチモジュールがあります。
各タッチモジュールの役割を越える複雑な条件はIFブロックを使うことで実現できます。

各種タッチモジュールの機能や変数表・スニペットについてはリファレンス内のタッチモジュールのページをご覧ください。

POST_2GET

パラメータを指定してリダイレクト

パラメータをPOSTで送信する事により、パラメーターに沿ったURLを組み立ててリダイレクトする事ができます。

以下の例では、bid=1(news)cid=3(economy)を指定して http://sample.com/news/economy/ にリダイレクトします。

<!-- ボタンを押すと /news/economy/ にリダイレクトされる -->
<form action="" method="post">
  <input type="hidden" name="bid" value="1">
  <input type="hidden" name="cid" value="3">
  <input type="submit" name="ACMS_POST_2GET" value="経済ニュースに移動">
</form>

パラメータをhiddenで指定して、submitのname属性ACMS_POST_2GET を指定する事により動くようになります。パラメータには acmsパス が利用できます。

POST_2GETの例

<!-- ID を指定 IDに沿ったURLが生成されます。 -->
<input type="hidden" name="bid" value="1">
<input type="hidden" name="aid" value="1">
<input type="hidden" name="uid" value="1">
<input type="hidden" name="cid" value="1">
<input type="hidden" name="eid" value="1">
<input type="hidden" name="cmid" value="1">
<input type="hidden" name="tdid" value="1">

<!-- キーワードを指定 -->
<input type="text" name="keyword" value="%{KEYWORD}">

<!-- タグを指定 -->
<input type="hidden" name="tag" value="aaa">

<!-- フィールドを指定 -->
<input type="hidden" name="hoge" value="aaa">
<input type="hidden" name="field[]" value="hoge">

<!-- 表示順を指定 -->
<input type="hidden" name="order" value="datetime-asc"> <!-- 日時 ( 昇順 ) -->
<input type="hidden" name="order" value="datetime-desc"> <!-- 日時 ( 降順 ) -->
<input type="hidden" name="order" value="code-asc"> <!-- ファイル名 ( 昇順 ) -->
<input type="hidden" name="order" value="code-desc"> <!-- ファイル名 ( 降順 ) -->
<input type="hidden" name="order" value="id-asc"> <!-- ID ( 昇順 ) -->
<input type="hidden" name="order" value="id-desc"> <!-- ID ( 降順 ) -->
<input type="hidden" name="order" value="sort-asc"> <!-- 表示順 ( 昇順 ) -->
<input type="hidden" name="order" value="sort-desc"> <!-- 表示順 ( 降順 ) -->
<input type="hidden" name="order" value="field-asc"> <!-- フィールド ( 昇順 ) -->
<input type="hidden" name="order" value="field-desc"> <!-- フィールド ( 降順 ) -->
<input type="hidden" name="order" value="intfield-asc"> <!-- 数値フィールド ( 昇順 )	 -->
<input type="hidden" name="order" value="intfield-desc"> <!-- 数値フィールド ( 降順 ) -->
<input type="hidden" name="order" value="random"> <!-- ランダム -->

<!-- テンプレートを指定 -->
<input type="hidden" name="tpl" value="/include/sample.html">

<!-- ページを指定 -->
<input type="hidden" name="page" value="3">

<!-- 表示数を指定 -->
<input type="hidden" name="limit" value="50">

<!-- 期間を指定 -->
<input type="hidden" name="start" value="2014-01-01">
<input type="hidden" name="span" value="span">
<input type="hidden" name="end" value="2015-12-31">

<!-- 日付を指定 -->
<input type="hidden" name="date" value="2015-12">

<!-- クエリストリングを指定 ?key1=aaa&key2=bbb-->
<input type="hidden" name="key1" value="aaa">
<input type="hidden" name="key2" value="bbb">
<input type="hidden" name="query[]" value="key1">
<input type="hidden" name="query[]" value="key2">

フィールドの指定にはもっと細かい指定ができますので、カスタムフィールドの検索 を参考ください。

ダウンロードモジュール

ダウンロードモジュールとは、任意のファイルをダウンロードできるようにするモジュールです。a-blog cmsのデータベースに格納されているデータを取り出して任意の形式のファイルに出力し、そのファイルをダウンロードできるようにします。

出力するファイルは、CSVやXML形式など任意の形式で作成でき、モジュールやグローバル変数などを記述してカスタマイズが可能です。

このダウンロードモジュールはv1.3.1より利用できます。

任意の形式のファイルをダウンロードできるようにする

1. ダウンロードするファイルのテンプレートを用意する

ダウンロードさせたいファイルのテンプレートを作成します。CSVやXMLなど任意のテキスト形式のテンプレートファイルを作成できます。テンプレートですので、モジュールやグローバル変数を記述できます。

例として以下のようなCSVファイルを作成するとします。これは、ユーザープロフィールモジュールを使用して、ユーザーの情報の一覧をCSV形式のファイルに出力する場合の例です。

<!-- BEGIN_MODULE User_Profile --><!-- BEGIN user:loop -->"{name}[escquot]","{mail}[escquot]"<!-- END user:loop --><!-- END_MODULE User_Profile -->

CSV形式では、ダブルクォーテーションで囲まれた中にダブルクォーテーションが含まれている時のために、ダブルクォーテーションをエスケープする校正オプション[escquot]を指定しています。(CSVの仕様につきましては、他のWebサイトを参照してください。)

上記のソースを記述したら、ファイル名を「user.csv」として保存します。ここでは例として「csv」というディレクトリを作成し、/csv/user.csv とします。

2. ダウンロードするボタンを作成する

次に、ファイルをダウンロードするためのフォームボタンを作成します。テンプレートの任意の場所にフォームボタンを設置できます。手順1で作成したCSVファイルをダウンロードする場合は、以下のようなソースを記述します。

<form action="ユーザーリスト.csv" method="post">
    <input type="hidden" name="bid" value="%{BID}" />
    <input type="hidden" name="tpl" value="csv/user.csv" />
    <input type="hidden" name="charset" value="Shift_JIS" />
    <input type="submit" name="ACMS_POST_Download" value="CSVをダウンロード" />
</form>

1行目(必須):<form action="ダウンロードするファイル名" method="post">

フォームボタンを押してダウンロードするファイルのファイル名を、拡張子含めて記述します。

2行目(必須):<input type="hidden" name="bid" value="%{BID}" />

出力するデータ内容のブログを指定します。

3行目(必須):<input type="hidden" name="tpl" value="テンプレートファイル名" />

ダウンロードするファイル名を、拡張子含めて記述します。

4行目:<input type="hidden" name="charset" value="文字コード名" />

ダウンロードするファイルの文字コードを指定します。ダウンロードするファイルが生成される時に、この部分で指定した文字コードに変換されてファイルが生成されます。文字コードを指定しない場合は、ダウンロードするファイルのテンプレートで出力された文字コードとなります。

5行目(必須):<input type="submit" name="ACMS_POST_Download" value="ボタンのラベル" />

ファイルをダウンロードするボタンです。ACMS_POST_Downloadというモジュールを動作させてダウンロードする記述です。

これで、ボタンを押すとaction属性で指定したファイル名のファイルがダウンロードされるようになります。

ユーザーの情報など個人情報に関わるものや機密性のあるデータを取り扱う場合には、管理ページに記述したり、Touch_SessionWithAdministrationモジュールを使用するなどして、管理者のみがダウンロードできるような配慮も可能です。

変数表とスニペット

モジュールの記述のための情報

モジュールには出力する内容によって様々なものがあるため、全く何もない状態からテンプレート上に正確に記述していくのは大変です。そこで、a-blog cmsではこの制作者向け情報サイトや、a-blog cmsの管理ページ内にも該当モジュール内で使用できる変数表、基本的な記述方法となるスニペットを用意しています。


カスタマイズ管理>コンフィグ

カスタマイズ管理>コンフィグ


a-blog cmsの管理ページで左側メニュー内、カスタマイズ管理>コンフィグへ進むと、各モジュールの設定への一覧がありますが、各モジュールの右側に変数表とスニペットへのリンクがあります。
この各リンクから、それぞれ変数表、スニペットが別ウィンドウで開きます。


変数表


Entry_Bodyモジュールの変数表

Entry_Bodyモジュールの変数表


各モジュールの変数表では、どのブロック内にどのような変数を表示させることができるかをまとめています。
いずれも白背景の二重線で囲まれた部分が変数名となっており、モジュール内の各ブロックで使えることを表しています。変数の具体的な内容は表中に日本語で補足しています。


スニペット


Entry_Bodyモジュールのスニペット

Entry_Bodyモジュールのスニペット


スニペットとは、よく使用するコードをまとめたデータです。各モジュールの出力に必要なコードがスニペットとして用意してありますので、必要に応じてコピー&ペーストや独自に変更を加えてお使いください。

独自のテンプレートを作成する場合には、元になるHTMLファイルにこれら各モジュールのスニペットを貼り付けて、必要な形に整形していくという流れを取るとスムーズに制作できるでしょう。


Dreamweaverにスニペットを追加する


a-blog cmsのパッケージには「omake」フォルダ内にDreamweaverで使用する拡張機能ファイルをご用意しています。Dreamweaverのスニペットパネルにa-blog cmsで使用する各モジュールのスニペットを追加するファイルとなります。この拡張機能を使うことで、Dreamweaver上で1クリック(ドラッグ&ドロップ)でスニペットを追加できるようになります。管理ページ内のデータと合わせて是非ご利用ください。「omake」フォルダの内容、使用方法につきましては、a-blog cmsに同梱されている新規インストールマニュアル内の「omakeフォルダについて」をご覧ください。

各種モジュールの設定

ブログ単位でモジュールの表示を制御する

a-blog cmsでは、様々な情報を表示するのに適した各モジュールがありますが、さらにその表示を制御するために各モジュールのコンフィグ(=設定)があります。管理ページ内の左側メニューのカスタマイズ管理 > コンフィグ から各モジュールを含めた設定への一覧があります。各モジュール名から設定画面へリンクしています。



ブログ内で共通した設定を行うには


各モジュールの管理画面では、表示順や件数など、モジュールごとに表示に関する設定ができるようになっています。各設定項目についての詳しい内容は、項目右にある[?]リンクをご確認ください。



同一モジュールで別の設定をしたい場合には


これらの設定は該当ブログ内で使用されるモジュール全てに適用されます。しかし、同じモジュールを使う場合でも、必ずしも同じ表示をしたいとは限りません。また、個別のカテゴリーだけ、といったように表示の設定ではなく条件の設定がしたい場合もあります。このような場合には、モジュールの設定とは別に固有のIDを付与したモジュールであるモジュールIDをご利用ください。モジュールIDについては、このドキュメント内のモジュールIDのページで解説しています。

関連エントリー機能

任意の記事に関連した情報のエントリーを表示する機能として、登録されているタグの一致数に応じて関連記事を表示するタグリレーショナル(Entry_TagRelational)というモジュールがあります。
a-blog cms Ver.2.6.0からは(Admin_Entry_Autocomplete)モジュールが追加されています。エントリーの登録・編集時に、関連するエントリーを検索し、紐付け登録をします。より柔軟な関連記事登録が可能になります。



登録されたエントリーは下記のピンクの線で囲まれたハンドルを掴んでドラッグアンドドロップすることで表示順を変更することも可能です。また、右の確認ボタンを押すことで、実際にそのエントリーのページに移動して内容を確認することもできます。



紐づけられたエントリーはテンプレートをカスタマイズすることで下の図のように表示することが可能です



関連エントリー機能の使い方

この機能を使用するためにはテンプレート側のカスタマイズおよび管理画面の設定が必要になってきます。

関連エントリー機能を有効にする

関連エントリー機能を使用可能にするために、 管理画面 > コンフィグ > 編集設定 より下の図のように 関連エントリー のチェックボックスにチェックを入れます。



オートコンプリートのモジュールIDを作成

オートコンプリート(Admin_Entry_Autocomplete)モジュールは下の図のようにキーワードを入力し、そのキーワードを含むエントリーを絞り込み登録するためのモジュールです。



オートコンプリート(Admin_Entry_Autocomplete)モジュールはデフォルトでブログに登録された記事全体を検索できるようになっています。検索する記事をカテゴリーやカスタムフィールドなどで絞り込みたい場合はモジュールIDの作成が必要になってきます。

モジュールID作成時の注意事項

モジュールID化した場合は、URLコンテキストのキーワードにチェックをつけてください。チェックがない場合は絞り込まれません。デフォルトではキーワードにチェックがつかないため、/js/config.js を以下のように設定が必要です。

// 860行目付近
'Admin_Entry_Autocomplete' : ['bid', 'uid', 'cid', 'keyword', 'tag', 'field_', 'start', 'end'],

しかしながら、/js/config.js を直接編集するとアップデート時に設定が消してしまうおそれがあるため、お使いのテーマファイルの /themes/お使いのテーマ/admin/module/field.html にファイルを設置して以下のように記述します。組み込みJSについて詳しくは、 読み込みが必要なJavascriptファイル をご覧ください。

<script type="text/javascript">
    ACMS.Ready(function(){
    	ACMS.Config.Admin.argGuidance.Admin_Entry_Autocomplete = ['bid', 'uid', 'cid', 'keyword', 'tag', 'field_', 'start', 'end'];
    })
</script>


モジュールIDを作成する場合にはモジュールから下の図のようにオートコンプリート(Admin_Entry_Autocomplete)を選択します。また引数を指定することでエントリーを絞り込む範囲を制限することができます。例えばカテゴリーの引数に1を指定するとカテゴリーが1のエントリーの中から記事を検索し登録することができます。



テンプレートの記述

/system/ajax/edit/autocomplete.jsonを使用中のテーマの同一の階層にコピーします。その後、下のソースのように作成したモジュールIDをテンプレートに新たに追記してください。

<!-- BEGIN_MODULE Admin_Entry_Autocomplete id="設定したモジュールID" -->[<!-- BEGIN entry:loop -->
    \{
    	"label": "<!-- BEGIN categoryField -->({fieldCategoryName})<!-- END categoryField -->{title}",
    	"value": "<!-- BEGIN categoryField -->({fieldCategoryName})<!-- END categoryField -->{title}",
    	"title": "{title}",
    	"id": {eid},
    	"url": "{url}",
    	"datetime": "{date#Y}/{date#m}/{date#d} {date#H}:{date#i}",
    	"categoryName": "<!-- BEGIN categoryField -->{fieldCategoryName}<!-- END categoryField -->"
    \}<!-- BEGIN glue -->, <!-- END glue --><!-- END entry:loop -->
]<!-- END_MODULE Admin_Entry_Autocomplete -->

エントリーサマリーのモジュールIDを作成

次に関連記事を表示するためのエントリーサマリーのモジュールIDを作成します。その際、関連エントリー一覧を表示できるように下の図のようにチェックを入れてください。



チェックを入れることで従来通りのテンプレートで登録された記事一覧を表示することができます。また、モジュールIDの引数の設定をしなくても登録したエントリー一覧はエントリーサマリーのモジュールIDにて表示されます。ただし登録したエントリー一覧はエントリーの詳細ページのみでしか表示されませんので、注意が必要です。

位置情報を使って記事を絞り込むEntry_GeoList

エントリーの記事を一覧で表示する場合、現状だとid順や日付順などで表示する事はできていました。しかし昨今スマフォの利用率が増えてきており、GPSなどの位置情報を使って近くの情報を表示するような需要は増えてきていると思います。

そこで、Ver. 2.7.0より位置情報による記事の絞り込み、並び替えができるようになりました。ここでは、記事に位置情報を付加して記事詳細ページで近くの記事を出す事と、ブラウザから位置情報取得して、現在位置から近くの記事を表示する事を行います。

注意事項

最近のブラウザは、位置情報(Geolocation API)を利用するために、SSL/TLS(https://)が必須になってきています。

Entry_GeoListの使い方

まずは、エントリー詳細ページで近くのエントリーを引っ張ってくる事をしてみます。この実装は、物件を扱うようなページで、物件詳細ページで近くの物件も表示するような場合に有効です。

位置情報の設定を利用可能にする

エントリーに位置情報を登録するためには各ブログの編集設定で位置情報の利用を有効にする必要があります。管理ページ > コンフィグ > 編集設定より位置情報の利用を有効化します。



有効化すればエントリーの編集画面で下の図のように「位置情報」を登録するためのセクションが出現します。



モジュールIDの設定

ここでは、Entry_GeoListを使って、「見ている記事に地理的に近い記事一覧を表示」する方法と「GPS情報をもとに現在地に近い記事一覧を表示」する方法をご紹介します。どちらもモジュールIDの作成が必要です。 管理ページ > モジュールID の モジュールID作成ボタン を押してモジュールIDを新規作成します。ここでは以下のようにモジュールでEntry_GeoListを設定にします。

見ている記事に地理的に近い記事一覧を表示

位置情報を登録したエントリーの一覧を表示します。ここでは見ている記事に地理的に近い順の記事一覧を表示します。 エントリーIDの引数にチェックを入れることで各詳細ページで、その記事の近くの位置に登録されているエントリーリストを表示できます。



モジュールIDの表示設定

位置オプションの設定にて 基準点 をURLコンテキストを参照に設定してください。 この基準点の設定は、現在のエントリーの位置情報をもとにするか、URLのクエリの値をもとにするか選択しています。今回は記事詳細ページに地理的に近い記事を探してくるので、「URLコンテキスト」を参照にしています。

テンプレートの設定

モジュールIDの準備ができたので、次はテンプレート側の設定です。 管理ページ > コンフィグ > エントリー位置リストのスニペット をコピーしてエントリー詳細ページのテンプレートを貼ります。モジュールIDの指定を忘れないようにしましょう。こちらが、エントリー位置リストのスニペットになります。 Entry_GeoListのスニペット

GPS情報をもとに現在地に近い記事一覧を表示

先ほど行ったカスタマイズでは、現在表示している記事をもとに近くの記事を引っ張ってきました。このカスタマイズを少し変更して、現在いる場所(GPS情報)からの近くの記事を引っ張ってくる事をしてみたいと思います。

ポストインクルードのテンプレート作成

次にポストインクルード用のformを作成してください。js-post_include-readyが設定されているform要素に対して、「data-geo="true"」 を追加すれば組み込みJSが自動で位置情報を取得して、ポストインクルードが動作します。 この際に、form内にある「name="tpl"」のinput要素には、先ほど作成したEntry_GeoListのスニペットが記述されたHTMLのテーマ内のパスを指定します。

<h2>位置情報</h2>
<form action="" method="post" class="js-post_include-ready" data-geo="true">
  <input type="hidden" name="bid" value="1">
  <input type="hidden" name="tpl" value="/include/geo.html">
  <input type="hidden" name="ACMS_POST_2GET" value="send">
</form>

モジュールIDの表示設定

先ほどのポストインクルードにより、URLのクエリストリングに、緯度経度の情報が入っていますので、モジュールIDの設定の基準点を「URLコンテキストを参照」から「URLクエリストリングを参照(?lat=xxx&lng=xxx)」に変更してください。これでモジュールは、エントリー基準ではなくURLの情報から基準点をとってくるようになります。



実際に確認してみてください。現在の位置をもとに近い順でエントリーを引張てきている事がわかると思います。 注意: 最近のブラウザはhttpsでないと位置情報を取得できなくなっています。

JSONを使って専用モジュールを作ってみよう

a-blog cms ではビルドインモジュール(Entry_BodyやCategory_List...)と呼ばれる最初から入っているモジュールを使って動的にコンテンツを出力していきます。一般的なサイトを作るうえでは、ビルドインモジュールがあればそこまで困らないのですが、a-blog cmsで管理していないデータを出力したり、特殊な絞り込みをしたい場合は、PHPを書いて専用モジュールを開発する必要がありました。

そこで、Ver. 2.7.0 から導入される新しいビルドインモジュール Json_2Tpl を使う事でJSONさえ用意できれば、PHPを1行も書かずに思い通りのモジュールを作る事ができるようになります。

また、JSONがインターフェイスとなるので外部サービスとの連携もしやすくなります。

基礎編

まずは、モジュールIDの作成を行います。 管理ページ > モジュールID の モジュールID作成ボタン を押してモジュールIDを新規作成します。ここでは以下のような設定にしましょう。

  • モジュール: Json_2Tpl
  • id: sampleJson2Tpl
  • 名前: Json_2Tplの練習

モジュールID作成画面

モジュールID作成画面


出力をしたいJSONファイルを用意します。自分でJSONファイルを書く、外部サービスのJSONファイルを読む混むなどをするのですが、まずは練習用に以下のJSONファイルを使います。

http://ablogcms.io/sample.json

商品の一覧を出力しているJSONファイルです。これをa-blog cmsのテンプレートで出力してみましょう。

{
    "items": [
        {
            "id": "001",
            "name": "商品A",
            "color": "red",
    "size": ["S", "M", "L"],
            "price": {
                "tax_included": 108,
                "without_tax": 100
            }
        },
       ...
}

練習用のJSONファイルを、先ほど作成したモジュールIDに設定してみましょう。先ほど作成したモジュールIDの設定画面に移動します。表示設定のタブに移動して JSONファイル の入力欄に http://ablogcms.io/sample.json を入力しましょう。

Json_2Tplのモジュール設定には以下のものがあります。

  • キャッシュタイム: JSONファイルをキャッシュする時間を設定します。
  • JSONファイル: データもとであるJSONファイルを指定します。URLもしくはパスで指定できます。(Ver.2.7.7よりグローバル変数もパスの指定に利用できるようになりました)

Json_2TplモジュールID設定画面

Json_2TplモジュールID設定画面


モジュールの準備ができたので、実際にテンプレートに出力をしてみましょう。まずはモジュールブロックを書きます。 idは先ほど作成したモジュールIDのものを指定ください。

<!-- BEGIN_MODULE Json_2Tpl id="sampleJson2Tpl" -->
<h2>商品</h2>

<!-- END_MODULE Json_2Tpl -->

JSON

次に実際にデータを表示していくのですが、その前にJSONファイルについてちょっと学んでおきましょう。

JSONは 名前/値のペア の集まりで構成されています。: の前にあるのが名前です。また、{ } で囲まれている部分をオブジェクトと呼びます。様々なデータを持っているセットと考えていただければ大丈夫です。次に [ ] で囲まれている部分が配列になります。データを複数持つことができます。これらは互いに入れ子にする事ができるようになっています。

ではサンプルのデータを見ながら、どのようなデータになっているか見てみましょう。

{
    "items": [
        {
            "id": "001",
            "name": "商品A",
            "color": "red",
    "size": ["S", "M", "L"],
            "price": {
                "tax_included": 108,
                "without_tax": 100
            }
        },
       ...
}

まず、 items ですが、: のあとは [ になっていますので、Itemsは配列とわかります。配列の中身ですが、{ } で囲まれているのでオブジェクトを複数持っている事がわかります。

オブジェクトの中身ですが、id, name, color は文字列の値になっていますが、 price{ } で囲まれているのでオブジェクトです。そのオブジェクトの中身は 数値の値になっています。

JSON -> a-blog cmsテンプレート

これを踏まえてa-blog cmsのテンプレートを作っていきます。以下のようなルールがあります。

ここでのサンプルのコードは一部分を表示しているだけになります。全体のコード(動作するコード)は下のほうにあります。

配列の場合は、ループブロックで表現されます。ループブロックとは <!-- BEGIN 名前:loop --> という形のブロックになります。

ループブロックの中では、** glueブロック <!-- 名前:glue -->** も利用できるようになります。glueブロックは ループ回数 - 1回 出力されるブロックになります。カンマで区切りたい場合などに利用すると便利です。

特殊な変数として {名前.i} という変数も利用できます。これは現在の配列番号を出力できます。

また配列の中身が、値の場合は(ここでゆうsize)配列の名前(ラベル)がそのまま変数名としても使えます。

<!-- BEGIN items:loop -->
{items.i}
<!-- BEGIN items:glue -->, <!-- END items:glue -->
...
<!-- END items:loop -->

<!-- BEGIN size:loop -->
<!-- BEGIN size:glue -->, <!-- END size:loop -->
{size.i} : {size}
<!-- END size:loop -->

名前(ラベル)がついたオブジェクト(例: "price": { ... })の場合は、ブロックで表現できます。ブロックとは <!-- BEGIN 名前 --> の形のブロックです。

<!-- BEGIN price -->
...
<!-- END price -->

名前(ラベル)のあとが値の場合、変数として出力できます。変数は {名前} で表現されます。 もちろんこの変数には校正オプションも利用できます。

{id}
{name}
{color}
{tax_included}[number_format]
など
  • 配列 -> ループブロック(例 <!-- BEGIN items:loop -->)
  • 名前(ラベル)がついたオブジェクト -> ブロック(例: <!-- BEGIN price -->)
  • 名前(ラベル)のあとが配列でもオブジェクトでもない値 -> 変数(例: {color})

では以上のルールにしたがって練習用JSONのすべての値を出力してみましょう。以下のようなテンプレートになれば正解です。

<!-- BEGIN_MODULE Json_2Tpl id="sampleJson2Tpl" -->
<h2>商品</h2>
<ul>
    <!-- BEGIN items:loop -->
    <li>
        {items.i}: {id}: {name}<br>
        color: {color}<br>
        size: <!-- BEGIN size:loop --><!-- BEGIN size:glue -->, <!-- END size:glue -->{size}<!-- END size:loop --><br>
        <!-- BEGIN price -->
            税込: {tax_included}円
            税別: {without_tax}円
        <!-- END price -->
    </li>
    <!-- END items:loop -->
</ul>
<!-- END_MODULE Json_2Tpl -->

表示結果

表示結果