「今いるページ / 全ページ数」を表示させるページャーのカスタマイズ


標準のページャーの設定では、上記の画像のように 1 2 3 4 のように表示され、今いるページのスタイルが違うような表示になるようになっています。先日サポートで、これを 1 / 4 と表示させたいという相談があり、その対応が簡単に思いつかなかったのでブログに書き残しておきます。

Entry_Summary のコンフィグ 初期設定



利用できる変数を考える

表示させる 1 / 4 は「現在表示しているページ / 全ページ数」ということになります。

「現在表示しているページ」については、Entry_Summary の変数にはありませんが、グローバル変数に %{PAGE} というものが用意されていますので、これを利用ください。



問題は「全ページ数」です。Entry_Summary の変数表に以下のような {lastPage} という設定があります。これがページ数が少ない時に初期の設定では表示ができない仕様になっております。これを強制的に表示するための設定するための「前後に表示するページ数」に -1 を設定することで目的の動きになります。

カスタマイズ設定

Entry_Summary のコンフィグ設定



テンプレートへの記述

<p class="acms-text-center">%{PAGE} / {lastPage}</p>

これで当初の目的である 1 / 4 が表示可能になります。


GETモジュールのID化

独自に開発したGETモジュールも、標準のビルドインモジュールと同様にモジュールID化する事ができます。ここでは、モジュールID化の仕方と、モジュールID化によってどのような動作になるかみていきます。

モジュールID化できるようにする

まずモジュールID化に対応するため、モジュールID作成時に独自モジュールを選択できるようにします。

ご利用のテーマに以下のファイルを作成し、セレクト要素を記述します。

  • /themes/ご利用テーマ/admin/module/select.user.html
<optgroup label="独自モジュール">
	<option value="Sample"{name:selected#Sample}>独自モジュール(Sample)</option>
</optgroup>

以下の仕様でセレクト要素を記述してください。

  • 値: GETモジュールの呼び出しと同じ値
  • 変数: {name:selected#セレクトの値}

この実装を行う事でモジュールIDの作成ができるようになります。

モジュールIDの作成

モジュールIDの作成ができるようになったので、モジュールIDを作成してみます。以下画像のように作成できると思います。


独自モジュールのID作成画面

独自モジュールのID作成画面


モジュールID化でのコンテキスト情報の取得

モジュールID化した時のコンテキスト情報の取得について解説します。モジュールID化する前は、以下のコードを書く事により、そのページの情報を取得できていました。

var $_scope = array(
  'bid' => 'global',
  'cid' => 'global',
  'eid' => 'global',
);

function get()
{
  $string[] = 'Global Vars';
  $string[] .= "BID = $this->bid";
  $string[] .= "CID = $this->cid";
  $string[] .= "EID = $this->eid";

  return nl2br(implode("\r\n", $string));
}

しかし、モジュールID化したモジュールを利用すると $this->cid や $this->eid で、そのページのコンテキスト情報を取得できなくなります。(bidだけはモジュールID化しても取得できます。)

モジュールID化したモジュールを利用すると、そのままではコンテキスト情報は取得できない。

<!-- BEGIN_MODULE Sample id="sample" --><!--END_MODULE Sample -->

ではどのようにURLコンテキスト情報を取得するかというとモジュールID管理画面で取得したい情報の引数項目にチェックをつけます。これによりURLコンテキストの情報を取得できるようになります。


引数の設定画面

引数の設定画面


これでプログラム側で、以下のようにURLコンテキスト情報を取得できるようになりました。

$string[] = 'Global Vars';
$string[] .= "BID = $this->bid";
$string[] .= "CID = $this->cid";
$string[] .= "EID = $this->eid";

return nl2br(implode("\r\n", $string));

ここまで、$this->cid や $this->eid はURLコンテキスト情報(つまりURLの情報)を取得すると説明してきましたが、モジュールID化する事により、そうでなくなる場合があります。以下の設定画面をみてください。


引数の設定画面2

引数の設定画面2


この場合、表示しているURLが別のカテゴリーや、トップページなどカテゴリー情報がない場合でも、常に $this->cid はお知らせのカテゴリーIDを返すようになります。このようにモジュールID化するとモジュールIDの設定により取得してくる情報は変わるようになります。

モジュールID化時のコンテキスト情報の取得まとめ

引数チェック固定値$this->cid などのプロパティ
ありなしURLの情報を取得
なしありモジュールIDで設定した固定値を取得
ありありURLに該当の情報があればURLの情報を取得。ない場合は固定値を取得

モジュールIDの設定と関係なく表示ページのURLコンテキストが取得したい場合は、定数を利用します。

項目定数
ブログIDBID
ユーザーIDUID
カテゴリーIDCID
エントリーIDEID
キーワードKEYWORD
タグTAG
フィールドFIELD
日時検索のスタートSTART
日付検索のエンドEND
ページ番号PAGE
並び順ORDER

カスタムフィールドメーカーを改良しました。

デベロッパーサイトのカスタムフィールドメーカーを改良しました。

従来のカスタムフィールドメーカーから生成されたソースコードだと、カスタムフィールドグループの際に、下の画像のように項目が横に積まれてしまい入力欄が狭くなってしまう問題がありました。



そこで今回は縦向きレイアウトに対応しました。縦向きレイアウトだと、下記の画像のように先ほどと同じ項目数ですが、入力欄が狭くなりません。



スイッチトグルで従来の横向きレイアウトか、新しい縦向きレイアウトか選択できるようにしています! ぜひご活用ください!


テンプレートエンジン - 3(render method)

ここまで、ブロックの制御の仕方や変数の追加の仕方などを説明してきましたが、Ver. 2.6.1で追加された render メソッドを利用するともっと簡単にテンプレートエンジンを扱うことができます。

まずは、今まで説明してきたやり方とrenderメソッドを使ったサンプルで同じものを出力してみて、どう違うか比較してみましょう。

出力するテンプレート(HTML)

<!-- BEGIN_MODULE Sample -->
<!-- BEGIN message -->
ブロックの表示
<!-- END message -->

<!-- BEGIN message2 -->
<p>{msg}</p>
<!-- END message2 -->  

<p>件数: {count}件</p>

<ul>
  <!-- BEGIN data:loop -->
  <li>{id}: {name}</li>
  <!-- END data:loop -->
</ul>
<!-- END_MODULE Sample -->

今までの方法

function get()
{
  $Tpl = new Template($this->tpl, new ACMS_Corrector());

  $data = [
    [
      'id' => 'aaa',
      'name' => '山田太郎',
    ],
    [
      'id' => 'bbb',
      'name' => '鈴木次郎',
    ],
    [
      'id' => 'ccc',
      'name' => '佐藤三郎',
    ],
  ];

  foreach ( $data as $i => $line ) {
    $line['data.i'] = ++$i;
    $Tpl->add('data:loop', $line);
  }

  $Tpl->add('message');
  $Tpl->add('message2', [
    'msg' => 'ブロック内の変数',
  ]);

  $Tpl->add(null, [
    'count' => count($data),
  ]);

  return $Tpl->get();
}

renderメソッドを使った方法

function get()
{
  $Tpl = new Template($this->tpl, new ACMS_Corrector());

  $data = [
    [
      'id' => 'aaa',
      'name' => '山田太郎',
    ],
    [
      'id' => 'bbb',
      'name' => '鈴木次郎',
    ],
    [
      'id' => 'ccc',
      'name' => '佐藤三郎',
    ],
  ];

  $obj = [
    'data' => $data,
    'count' => count($data),
    'message' => (object)[],
    'message2' => [
      'msg' => 'ブロック内の変数',
    ]
  ];

  return $Tpl->render($obj);
}

どうでしょうか? 今までのやり方は、その都度テンプレートを組み立てていくイメージですが、renderメソッドはデータの組み立てに集中し最後にrenderメソッドに渡すイメージです。

これにより、a-blog cms独特なテンプレートエンジンのルールを覚えなくても、データを連想配列または、オブジェクトで用意するだけで簡単に実装ができるようになります。

render 仕様

それでは render メソッドの詳しい仕様を見ていきましょう。

引数

まず、renderメソッドに渡す引数は、連想配列 もしくは オブジェクト に対応しています。

連想配列形式

$data = [
  'hoge1' => 'value1',
  'hoge2' => 'value2',
];

return $Tpl->render($data);

オブジェクト形式

$data = new stdClass();

$data->hoge1 = 'value1';
$data->hoge2 = 'value2';

return $Tpl->render($data);

変数

変数になるデータは連想配列の値、もしくはオブジェクトのプロパティの値が、配列、オブジェクトでないスカラー型の場合に変数になります。 注意点として、論理値(boolean)は 1 or 0 に変換されて表示されますのでお気をつけください。

変数になるデータ形式表示
論理値 (boolean)1 or 0
整数 (integer)そのまま
浮動小数点数 (float, double も同じ)そのまま
文字列 (string)そのまま

ブロック

ブロックは、連想配列の値、もしくはオブジェクトのプロパティの値が、連想配列またはオブジェクトの場合にブロックになります。

その値が空のオブジェクトや連想配列の場合は、ブロックのみの出力になり、データ(連想配列やプロパティ)がある場合は、そのブロック内で変数が利用できます。

<!-- 例1 変数をもったブロックの出力(連想配列の場合) -->
<!-- BEGIN hoge -->{val}<!-- END hoge -->
$data = [
  'hoge' => [
    'val' => 'value',
  ]
];

<!-- 例2 空のブロック出力(オブジェクトの場合)-->
<!-- BEGIN hoge -->hoge<!-- END hoge -->
$data = new stdClass();
$data->hoge = new stdClass();

ループブロック

ループブロックは、連想配列の値もしくはオブジェクトのプロパティの値が、配列の場合にループブロックになります。連想配列でない ところに注意してください。

また、ループブロック名は、 連想配列のkey名:loop になります。

$data = [
  [
    'id' => 'aaa',
    'name' => '山田太郎',
  ],
  [
    'id' => 'bbb',
    'name' => '鈴木次郎',
  ],
  [
    'id' => 'ccc',
    'name' => '佐藤三郎',
  ],
];

return $Tpl->render(['data' => $data]);

// html
<!-- BEGIN data:loop -->
<li>{id}: {name}</li>
<!-- END data:loop -->

上の例では配列の中身が連想配列だったので、そのまま連想配列が変数として利用できました。では、配列の中身がスカラー型だった場合はどうでしょうか。

$data = ['山田太郎', '鈴木次郎',  '佐藤三郎'];

return $Tpl->render(['data' => $data]);

// html
<!-- BEGIN data:loop -->
<li>{data}</li>
<!-- END data:loop -->

この場合は、上記のコードのように連想配列のkey名がそのままループ内の変数として利用できます。

特殊なブロック、変数

さらにループブロック内では、自動的に生成される特殊なブロックと変数を利用できます。

添字変数

ループ内で {連想配列のkey名.i} という変数が使えるようになります。これは、ループ回数を出力するものになります。

$data = ['山田太郎', '鈴木次郎',  '佐藤三郎'];

return $Tpl->render(['data' => $data]);

// html
<!-- BEGIN data:loop -->
<li>{data.i}:{data}</li>
<!-- END data:loop -->

// 結果
<li>1:山田太郎</li>
<li>2:鈴木次郎</li>
<li>3:佐藤三郎</li>
glueブロック

ループ回数 - 1回出力される glueブロックも出力されるようになります。ブロック名は 連想配列のkey名:glue です。使いどころとしては配列をカンマでつなげたい場合などに利用できます。

$data = ['山田太郎', '鈴木次郎',  '佐藤三郎'];

return $Tpl->render(['data' => $data]);

// html
<!-- BEGIN data:loop -->
  <!-- BEGIN data:glue -->, <!-- END data:glue -->{data}
<!-- END data:loop -->

// 結果
山田太郎, 鈴木次郎,  佐藤三郎

Ver. 2.6.1以上をご利用の場合は、renderメソッドで独自モジュールを作っていくほうが、簡潔に記述できますのでrederメソッドをお勧めします。