こんにちは。
弊社のサイトでも使用していますが、「ざっくりと数ヶ月のリソース情報をお知らせするカレンダー」をa-blog cmsで実装する方法について解説したいと思います。
サンプルコードは記事の最後に貼り付けていますので、ぜひ参考にしてください。
仕様
まず仕様から始めていきたいと思います。以下の内容を考えてみました。
- 現在の月を含め3ヶ月分を表示する。
- 毎月更新するので、簡単に更新できるようにする。
- 「◎○△×」の4段階を選べるようにする。
- トップページで表示する。
考え中
ふむふむ、要点として3ヶ月表示するというのと、4段階選べる必要があるようです。
「3ヶ月表示」から考えてみましょう。グローバル変数をみてみるとします。
みたところ、今月以外の表示はなさそうですね。
次に、「4段階選べる必要がある」というのは、カスタムフィールドでしょうか。
「1〜12ヶ月」を作るのは面倒な気がしますが、入力内容自体はシンプルなセレクトボックスで作れそうです。
「トップページで利用したい、簡単に更新したい」ということで
カテゴリーやエントリーには依存しない独立したフィールドがよさそうです。
そうなるとブログのフィールドが良さそうですが、ブログのフィールドだと範囲が大きすぎる気がします。
ということで、ざっくりとグローバル変数を拡張してModule_Fieldを利用すると実現できそうだなと思いました。
繰り返しそうな記述はインクルードで分割するとしましょう。
次の3つの工程で解説を行います。
- グローバル変数を作る
- Module_Fieldの入力側（admin側）を作る
- Module_Fieldの表示側（include側）を作る
解説
1,グローバル変数を作る
現在の月を含めて3ヶ月分を表示するという仕様から、今月、来月、再来月の3つの変数が必要になります。
今月はグローバル変数の「%{n}」で取得可能ですが、来月、再来月がとれません。まずはグローバル変数を拡張しましょう。
今回は、%{IS_NEXT_MONTH}と%{IS_MONTH_AFTER_NEXT}のグローバル変数を追加します。
これで３ヶ月分のグローバル変数が準備できました。
今月：%{n}
来月：%{IS_NEXT_MONTH}
再来月：%{IS_MONTH_AFTER_NEXT}
グローバル変数の作り方 | 合宿 | ブログ | a-blog cms developer
a-blog cms developer
※この記事の内容は2015年11月に開催された a-blog cms Training Camp 2015 Autumn の中で行われたグローバル変数の作り方講座の内容です。 グローバル変数 グローバル変数は、テンプレートに...
サンプルコードは記事の最後に貼り付けていますので参考にしてください。
2,Module_Fieldの入力側（admin側）を作る
好きな場所にカスタムフィールドを呼び出したい場合は、Module_Fieldを利用するのが良いでしょう。
Module_Fieldを利用することで、ブログやカテゴリー、エントリーに依存しないカスタムフィールドを作成することができます。
サイトのロゴやアナリティクスコードなどを設定する場合、ブログのカスタムフィールドを利用する場合があると思いますが、それのモジュール版と思ってください。
なので、モジュールを設置できる場所であれば、だいたいどこでも利用可能です。
フィールドモジュール | リファレンス | ドキュメント | a-blog cms developer
a-blog cms developer
フィールドモジュールは、デフォルトで用意されている変数とカスタムフィールドのデータを出力するモジュールです。表示するフィールドの情報は、指定していればモジュールIDまたはctx、指定...
では、Module_FieldのモジュールIDを作成しましょう。今回は「MF_resources_calender」としています。
次に、入力フィールドを作成します。以下のように、モジュール名のファイルを作成し、入力フィールドを追加します。
必要なものは「id-MF_resources_calender.html」だけですが、インクルード用のファイルを分割しています。
admin/module/id-MF_resources_calender.html
admin/module/resources_calender_table.html（インクルード用）
admin/module/resources_calender_cell.html（インクルード用）
ここでは「type1_month1, type1_month2, type1_month3 , ...」といったフィールドを用意しました。
typeには「お菓子、イラスト、デザイン、HTML/CSS」などの項目が入り、monthには「1、2、3、4、... 12」と12ヶ月が入ります。
サンプルコードは記事の最後に貼り付けていますので参考にしてください。
3,Module_Fieldの表示側（include側）を作る
入力側（admin側）ができたので表示側（include側）を作成します。
実際に「◎○△×」の4段階を表示する側になります。
表示側のファイル置き場はどこでもいいのですが、今回はinclude/module/Module_Field/resources_calender.htmlとしました。
次のファイルを作成します。
include/module/Module_Field/resources_calender.html
include/module/Module_Field/resources_calender_table.html
include/module/Module_Field/resources_calender_cell.html
ここで最初に作ったグローバル変数を利用します。
type1_month1といったフィールドを用意していますので表示側は今月を含む3ヶ月を呼び出します。
今月：type1_month%{n}
来月：type1_month%{IS_NEXT_MONTH}
再来月：type1_month%{IS_MONTH_AFTER_NEXT}
現在が7月の場合「month%{n}」は「month7」となります。
これで今月、来月、再来月のフィールドが表示できました。
作成後、表示したい箇所に読み込ませます。
今回はトップページに表示したいので_top.html で読み込みます。
サンプルコードは記事の最後に貼り付けていますので参考にしてください。
以上で「ざっくりと数ヶ月のリソース情報をお知らせするカレンダー」のモジュールを作成できたと思います。
これで更新も楽ちんですね！
コード
グローバル変数の拡張
extension/acms/Hook.phpのextendsGlobalVarsに追加
//来月
$globalVars->set('IS_NEXT_MONTH',date('n', strtotime('+1 month')));
//再来月
$globalVars->set('IS_MONTH_AFTER_NEXT',date('n', strtotime('+2 month')));入力フィールドを追加（admin側）
次のファイルを作成
admin/module/id-MF_resources_calender.html
admin/module/resources_calender_table.html
admin/module/resources_calender_cell.html
<!-- /admin/module/id-MF_resources_calender.html -->
<table class="adminTable acms-admin-table-admin-edit">
<tr>
<th><label for="input-text-resources_desc">リード文</label></th>
<td>
<textarea name="resources_desc" rows="5" id="input-text-resources_desc" style="width:80%;">{resources_desc}</textarea>
<input type="hidden" name="field[]" value="resources_desc" />
</td>
</tr>
</table>
<div>
<h3>お菓子</h3>
@include("/admin/module/resources_calender_table.html", {"type": "1"})
</div>
<!-- /admin/module/resources_calender_table.html -->
<table class="adminTable acms-admin-table-admin-edit">
<tr>
<th>1月</th>
<th>2月</th>
...
</tr>
<tr>
@include("/admin/module/resources_calender_cell.html", {"type": "{{type}}","month": "1" })
@include("/admin/module/resources_calender_cell.html", {"type": "{{type}}","month": "2" })
...
</tr>
</table><!-- /admin/module/resources_calender_cell.html -->
<td>
<select name="type{{type}}_month{{month}}" class="acms-admin-form-width-full">
<option value=""></option>
<option value="1" {type{{type}}_month{{month}}:selected#1}>◎余裕あります</option>
<option value="2" {type{{type}}_month{{month}}:selected#2}>○調整できます</option>
<option value="3" {type{{type}}_month{{month}}:selected#3}>△ご相談ください</option>
<option value="4" {type{{type}}_month{{month}}:selected#4}>xご相談ください</option>
</select>
<input type="hidden" name="field[]" value="type{{type}}_month{{month}}" />
</td>
表示フィールドを追加（include側）
<!-- _top.html -->
@include("/include/module/Module_Field/resources_calender.html", {"module_id": "MF_resources_calender"})
<!-- include/module/Module_Field/resources_calender.html -->
<!-- BEGIN_MODULE Module_Field id="{{module_id}}" -->
<div>
@include("/include/edit/module-custom.html", {"hash": "#acms_box3"})
<h2>リソース空き状況</h2>
<!-- BEGIN resources_desc:veil -->
<p>{resources_desc}[nl2br|raw]</p>
<!-- END resources_desc:veil -->
<table>
<thead>
<tr>
<th></th>
<th>%{n}月</th>
<th>%{IS_NEXT_MONTH}月</th>
<th>%{IS_MONTH_AFTER_NEXT}月</th>
</tr>
</thead>
<tbody>
@include("/include/module/Module_Field/resources_calender_cell.html", {"name": "お菓子","type": "1" })
</tbody>
</table>
</div>
<!-- END_MODULE Module_Field -->
<!--include/module/Module_Field/resources_calender_table.html -->
<tr>
<th>{{name}}</th>
<td>
@include("/include/module/Module_Field/resources_calender_cell.html", {"type": "{{type}}","month": "%{n}" })
</td>
<td>
@include("/include/module/Module_Field/resources_calender_cell.html", {"type": "{{type}}","month": "%{IS_NEXT_MONTH}" })
</td>
<td>
@include("/include/module/Module_Field/resources_calender_cell.html", {"type": "{{type}}","month": "%{IS_MONTH_AFTER_NEXT}" })
</td>
</tr><!-- include/module/Module_Field/resources_calender_cell.html -->
<!-- BEGIN_IF [{type{{type}}_month{{month}}}/eq/1] -->
◎：余裕あります
<!-- ELSE_IF [{type{{type}}_month{{month}}}/eq/2] -->
○：調整できます
<!-- ELSE_IF [{type{{type}}_month{{month}}}/eq/3] -->
△：ご相談ください
<!-- ELSE -->
×：ご相談ください
<!-- END_IF -->
関連するタグ
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
