モジュールIDのカスタムフィールドを使ってみよう

エントリーのカスタムフィールドでは、専用の項目を自由に作成して用意することができます。登録もエントリーごとに行われます。同様に、モジュールIDにもカスタムフィールドを用意することができます。

作業場所

作業テーマ: simple2016
作業テンプレート:/themes/simple2016/top.html
作業URL: http://ドメイン/

ハンズオン内容

  • モジュールIDのカスタムフィールドでできることを知る
  • カスタムフィールド登録枠の作成
  • カスタムフィールドの表示

モジュールIDのカスタムフィールドでできることを知る


カスタムフィールド登録枠の作成


カスタムフィールドの表示


課題

ハンズオン課題1:モジュールのカスタムフィールド利用する(準備)

トップページ(top.html)に表示されている最新の採用情報エントリーの一覧を参考に、最新の物件情報エントリーの一覧を表示する
作業テンプレート:/themes/simple2016/top.html
作業テンプレート:/themes/simple2016/include/entry/topSummary2.html
topSummary.html を複製し topSummary2.html を用意します。

<!-- エントリーサマリー -->
<!-- #include file="/include/entry/topSummary.html" -->
<!-- #include file="/include/entry/topSummary2.html" -->

モジュールID:top_summary2 を作成します。条件設定では、物件情報以下のカテゴリーが表示されるようにします。カスタム設定にて「見出し」のカスタムフィールドにデータを設定して登録します。
topSummary2.html のテンプレートファイルに記載されているモジュールIDをtop_summary2に変更して保存します。

トップページにアクセスして物件情報のエントリーと、モジュールのカスタムフィールドに登録した値が表示されていることを確認します。



ハンズオン課題2:カスタムフィールドを作成する

課題1で作成したトップページ「採用情報」と「物件情報」にリード文用のカスタムフィールドを作成・追加します。

カスタムフィールドを用意する

リード文用のtextareaかinput type=text のカスタムフィールドを用意します。カスタムフィールドの記述はエントリーのカスタムフィールドを用意する時と同じ記述でカスタムフィールドメーカーを利用します。
作業テンプレート:/themes/simple2016/admin/module/field.html

テンプレートの編集ができましたら、モジュールIDの編集ページ、カスタム設定にてリード文用のカスタムフィールドに説明文を入力し登録をします。

カスタムフィールドを表示する

表示側テンプレートファイルに、カスタムフィールドを追加します。
説明文ですのでタイトルの次あたりに入れます。
作業テンプレート:/themes/simple2016/include/entry/topSummary.html
作業テンプレート:/themes/simple2016/include/entry/topSummary2.html

<!-- BEGIN moduleField --><!-- BEGIN leadtext:veil --><p>{leadtext}[escape|nl2br]</p><!-- END leadtext:veil --><!-- END moduleField -->

上記の例では、フィールド名をleadtextにしています



登録と表示側テンプレートの記述が正しく行われると、登録したカスタムフィールドが画面に表示され、確認できます。
top_summary2の見出しが「採用情報」になっていますので、「物件情報」に変更します。
採用情報(top_summary)、物件情報(top_summary2)のモジュールそれぞれに違う説明文を登録し、内容が表示されることを確認します。

ハンズオン課題3:表示内容を制御する



課題1,2同様にトップの「採用情報」及び「物件情報」を対象として、見出しの右にある”一覧”のリンクを制御する仕組みを用意します。

モジュールのカスタムフィールドに一覧へのリンクを表示するをチェックボックス(表示する、しないのラジオボタンでも可)を用意し、表示に登録されている時だけ一覧へのリンクが表示されるようにします。

エントリ一覧をページリロードなしで表示する

次のページをその場で表示する

a-blog cmsにはポストインクルードというAJAXを簡単に扱う為の仕組みがあります。 その仕組みを使ってページリロードなしにどんどんエントリーを表示してみます。

まずは、Entry_Bodyを使いボタンを押す事により次のページを引っ張ってきます。

実装方法

ビルトインモジュール

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

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

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

グローバル変数、校正オプション、バリデータを作ってみよう


このハンズオンでは、標準で用意されているグローバル変数、校正オプション、バリデータで要件を満たせない場合に、自作する方法について取り扱っていきます。

グローバル変数の作成

Hook 機能を利用します。そのためには設定変更をする必要があります。config.server.php の HOOK_ENABLE を1にします。
作業ファイル:/config.server.php

define('HOOK_ENABLE', 1);

グローバル変数を作成するには extendsGlobalVars() 内に、記述を追加します。
下記の記述をしてある場合、%{key}とテンプレートに記述すると、var と表示されます。
作業ファイル:/php/ACMS/User/Hook.php

public function extendsGlobalVars(&$globalVars)
{
$globalVars->set('key', 'var');
}

課題

1時間前の年月日 %{UCHINA_DATE} と、1時間前の時分秒 %{UCHINA_TIME} を表示するグローバル変数を作成する。1時間前の年月日時分秒は下記のプログラムコードで生成できます。
参考:phpマニュアル date関数

date('Y-m-d H:i:s', strtotime('-1 hour'))

テンプレートに %{UCHINA_DATE} と %{UCHINA_TIME} を記載し、ブラウザで表示を確認します
次に、トップページで表示している新着情報では最新の5件を表示していますが、追加で終了日時(end)を1時間前までとします。登録したての最新の記事は表示されず、1時間後に表示されるようになります。

校正オプションの作成

校正オプションを作成するには、class ACMS_User_Corrector を編集します。既に開催されている[sample]の校正オプションを参考にします。
作業ファイル:/php/ACMS/User/Corrector.php

課題

テキスト内の特定の文字を太字にします

{title}[wordstrong] とする場合、ACMS_User_Corrector に次のようなfunction を用意します。
下記コードをコピペするか、sampleを複製して、function 名を変更する方法でも問題ありません。

public static function wordstrong($txt, $args = array())
{
 $before = array("テーマ", "Cookie");
 $after   = array("<strong>テーマ</strong>", "<strong>Cookie</strong>");
 return str_replace($before, $after, $txt);
}

校正オプションを適応する文字は $txt にあります。この $txt に特定の文字が含まれているかを検索して置換をします。

次に、トップページの新着情報タイトルに先ほど作成した校正オプションを追加します。この時、必ずescapeの校正オプションも併記します。
作業ファイル:/themes/simple2016/include/entry/topHeadline.html

{title}[escape|wordstrong]

バリデータの作成

フォームの入力値チェックであるバリデータを作成するには、ACMS_User_Validator を編集します。既に用意されているsampleのバリデータを参考にします。
作業ファイル:/php/ACMS/User/Validator.php
作業ファイル:/themes/simple2016/contact/form/input.html

課題

電話番号の入力値チェックとして、0から始まる場合はOKとし、それ以外はエラーとするバリデータを作成します。
sample を参考に下記のようなチェックプログラムを使用します。
参考:PHPのマニュアル strpos

return (strpos($val, '0') === 0);

テンプレート側でバリデータを使用するように追記します。

<input type="hidden" name="tel:v#phonenumber" value="">
<!-- BEGIN tel:validator#phonenumber -->
<p class="error-text"><span class="acms-icon acms-icon-attention"></span>電話番号を確認してください。</p>
<!-- END tel:validator#phonenumber -->

0で始まらない電話番号はエラーになりましたら成功です。
余力がある方は、電話番号は必須項目ではないので空の場合はエラーにならないようにします。

フォームの入力ステップを分割してみよう( 前編 )

入力ステップの分割

アンケートフォームや携帯用フォームなどで

アンケートのように入力項目が多くなりがちなフォームや、携帯など1度に表示させられる情報に限りがある場合、入力ステップを分割することがあります。


ファイルを開く

実習ファイル3

今回のチュートリアルでは、a-blog cmsのフォームで入力ステップを分割するための設定を紹介していきます。サンプルファイルも新しいものを用意しました。ダウンロードして、お使いのテスト環境に設置し、チュートリアルを進めてください。