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

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

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

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

テンプレートエンジン - 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メソッドをお勧めします。

Ver. 2.10.22 をダウンロード

a-blog cms Ver. 2.8.31 をリリース

本日2018年08月28日にフィックスバージョンのVer. 2.8.31をリリースしました。下記の修正が行われております。

Ver. 2.8.31 修正箇所一覧

CMS-4217 LiteEditorで入力モード切り替え時に内容が消えてしまう場合がある問題を修正
CMS-4215 check-seo のテンプレートにfacebookデバッガーへのリンクを追加
CMS-4216 カスタムフィールドメーカーでカスタムフィールドグループのソースコード出力の改善
CMS-4220 クイックサーチを無効にするオプション（config.js: quickSearchFeature）及び、呼び出しコマンドの変更機能（config.js: quickSearchCommand）を用意

修正箇所詳細

以下、説明が必要な修正内容になります。

LiteEditorで入力モード切り替え時に内容が消えてしまう場合がある問題を修正

例えば、下のセレクトボックスより「ソース」から「マークダウン」などに入力モードを切り替えると、今までのLiteEditorだと入力した内容が消えてしまっていました。今回は入力モードを切り替えても入力状態が消えないように改良されています。

CMS-4215 check-seo のテンプレートにfacebookデバッガーへのリンクを追加

SEOの情報をチェックするためのテンプレートに「Facebookで確認」のリンクを追加しています。これにより書いた記事をFacebookにシェアした時にどのように表示されるか、Facebookデバッガーより確認しやすくなりました。

カスタムフィールドメーカーでカスタムフィールドグループのソースコード出力の改善

クイックサーチを無効にするオプション（config.js: quickSearchFeature）及び、呼び出しコマンドの変更機能（config.js: quickSearchCommand）を用意

Ver.2.8より実装されたクイックサーチですが、制作の都合上「⌘K, Ctrl + k」でのクイックサーチ表示をしたくないケースもあります。そのため今回は以下のようにJavaScriptをかけば、クイックサーチを無効にしたり、コマンドの種類を変えたりすることができるように対応しました。

ACMS.Ready(function(){
  ACMS.Config.quickSearchFeature = false; // クイックサーチを無効に
  ACMS.Config.quickSearchCommand =  ['command + b', 'ctrl + b']; 
  //クイックサーチ起動コマンドを「command + b」もしくは「ctrl + b」に変更
});

以上、Ver. 2.8.31での修正内容になります。