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

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

こんにちは。
弊社のサイトでも使用していますが、「ざっくりと数ヶ月のリソース情報をお知らせするカレンダー」を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つの変数が必要になります。

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

今回は、%{IS_NEXT_MONTH}と%{IS_MONTH_AFTER_NEXT}のグローバル変数を追加します。

これで3ヶ月分のグローバル変数が準備できました。
今月:%{n}
来月:%{IS_NEXT_MONTH}
再来月:%{IS_MONTH_AFTER_NEXT}


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

2,Module_Fieldの入力側(admin側)を作る

好きな場所にカスタムフィールドを呼び出したい場合は、Module_Fieldを利用するのが良いでしょう。

Module_Fieldを利用することで、ブログやカテゴリー、エントリーに依存しないカスタムフィールドを作成することができます。

サイトのロゴやアナリティクスコードなどを設定する場合、ブログのカスタムフィールドを利用する場合があると思いますが、それのモジュール版と思ってください。

なので、モジュールを設置できる場所であれば、だいたいどこでも利用可能です。


では、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 -->


関連するタグ

全 1 件中 1 〜 1 件目を表示

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから