空き状況のカレンダーを作成する

こんにちは。
弊社のサイトでも使用していますが、「ざっくりと数ヶ月のリソース情報をお知らせするカレンダー」をa-blog cmsで実装する方法について解説したいと思います。

サンプルコードは記事の最後に貼り付けていますので、ぜひ参考にしてください。

仕様

まず仕様から始めていきたいと思います。以下の内容を考えてみました。

• 現在の月を含め3ヶ月分を表示する。
• 毎月更新するので、簡単に更新できるようにする。
• 「◎○△×」の4段階を選べるようにする。
• トップページで表示する。

考え中

ふむふむ、要点として3ヶ月表示するというのと、4段階選べる必要があるようです。


「3ヶ月表示」から考えてみましょう。グローバル変数をみてみるとします。
みたところ、今月以外の表示はなさそうですね。

次に、「4段階選べる必要がある」というのは、カスタムフィールドでしょうか。
「1〜12ヶ月」を作るのは面倒な気がしますが、入力内容自体はシンプルなセレクトボックスで作れそうです。

「トップページで利用したい、簡単に更新したい」ということで
カテゴリーやエントリーには依存しない独立したフィールドがよさそうです。
そうなるとブログのフィールドが良さそうですが、ブログのフィールドだと範囲が大きすぎる気がします。

ということで、ざっくりとグローバル変数を拡張してModule_Fieldを利用すると実現できそうだなと思いました。
繰り返しそうな記述はインクルードで分割するとしましょう。

次の3つの工程で解説を行います。

1. グローバル変数を作る
2. Module_Fieldの入力側（admin側）を作る
3. Module_Fieldの表示側（include側）を作る

解説

1,グローバル変数を作る

現在の月を含めて3ヶ月分を表示するという仕様から、今月、来月、再来月の3つの変数が必要になります。

今月はグローバル変数の「1」で取得可能ですが、来月、再来月がとれません。まずはグローバル変数を拡張しましょう。

今回は、2と3のグローバル変数を追加します。

これで３ヶ月分のグローバル変数が準備できました。
今月：1
来月：2
再来月：3

グローバル変数の作り方 | 合宿 | ブログ | 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_month1
来月：type1_month2
再来月：type1_month3

現在が7月の場合「month1」は「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>
	
</div>

<!-- /admin/module/resources_calender_table.html -->

<table class="adminTable acms-admin-table-admin-edit">
	<tr>
		<th>1月</th>
		<th>2月</th>
...
	</tr>
	<tr>
		
		
...
	</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/module/Module_Field/resources_calender.html -->


<!-- BEGIN_MODULE Module_Field id="{{module_id}}" -->
    <div>
        

            <h2>リソース空き状況</h2>
            <!-- BEGIN resources_desc:veil -->
            <p>{resources_desc}[nl2br|raw]</p>
            <!-- END resources_desc:veil -->

            <table>
                <thead>
                <tr>
                    <th></th>
                    <th>1月</th>
                    <th>2月</th>
                    <th>3月</th>
                </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>

    </div>
<!-- END_MODULE Module_Field -->

<!--include/module/Module_Field/resources_calender_table.html  -->

<tr>
    <th>{{name}}</th>
    <td>
        
    </td>
    <td>
        
    </td>
    <td>
        
    </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 -->