デベロッパーサイトのカスタムフィールドメーカーを改良しました。
従来のカスタムフィールドメーカーから生成されたソースコードだと、カスタムフィールドグループの際に、下の画像のように項目が横に積まれてしまい入力欄が狭くなってしまう問題がありました。
そこで今回は縦向きレイアウトに対応しました。縦向きレイアウトだと、下記の画像のように先ほどと同じ項目数ですが、入力欄が狭くなりません。
スイッチトグルで従来の横向きレイアウトか、新しい縦向きレイアウトか選択できるようにしています！ ぜひご活用ください！
ここまで、ブロックの制御の仕方や変数の追加の仕方などを説明してきましたが、Ver. 2.6.1で追加された render メソッドを利用するともっと簡単にテンプレートエンジンを扱うことができます。
まずは、今まで説明してきたやり方とrenderメソッドを使ったサンプルで同じものを出力してみて、どう違うか比較してみましょう。
<!-- 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();
}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メソッドに渡す引数は、連想配列 もしくは オブジェクト に対応しています。
$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>ループ回数 - 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メソッドをお勧めします。
本日2018年08月28日にフィックスバージョンのVer. 2.8.31をリリースしました。下記の修正が行われております。
以下、説明が必要な修正内容になります。
例えば、下のセレクトボックスより「ソース」から「マークダウン」などに入力モードを切り替えると、今までのLiteEditorだと入力した内容が消えてしまっていました。今回は入力モードを切り替えても入力状態が消えないように改良されています。
SEOの情報をチェックするためのテンプレートに「Facebookで確認」のリンクを追加しています。これにより書いた記事をFacebookにシェアした時にどのように表示されるか、Facebookデバッガーより確認しやすくなりました。
従来のカスタムフィールドメーカーから生成されたソースコードだと、カスタムフィールドグループの際に、下の画像のように項目が横に積まれてしまい入力欄が狭くなってしまう問題がありました。
そこで今回は縦向きレイアウトに対応しました。縦向きレイアウトだと、下記の画像のように先ほどと同じ項目数ですが、入力欄が狭くなりません。
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での修正内容になります。
テキストユニットは、最も使われると思われる通常のテキスト「本文」をはじめ、様々な形式のテキストを登録するユニットです。
テキストユニットでは、プルダウンメニューから様々な種類のテキストを選択できます。管理ページから種類を追加もできますが、ここでは基本的な内容について説明します。
site2016の本文ユニットのプルダウンメニューを展開したところ
p要素でマークアップされる本文テキストです。ユニット内で改行がされた場合は、br要素で改行されます。段落を追加する(次のp要素をマークアップする)場合は、もう一つテキストユニットを作成し「本文」を選択してください。
h要素でマークアップされる見出しテキストです。a-blog cmsに同梱されているテーマではエントリのタイトルをh1要素としているため、見出し大はh2としてマークアップされます。中、小は同じくh3、h4要素となります。
ul,li要素でマークアップされる標準的なリストです。ユニット内の1行ごとにli要素としてマークアップされます。
ol,li要素でマークアップされる番号付きのリストです。ユニット内の1行ごとにli要素としてマークアップされます。
dl,dt,dd要素でマークアップされる記述リストです。ユニット内の1行ごとにdtまたはdd要素としてマークアップされます。 dt要素としてマークアップする場合には、行の先頭に#を追加します。
table,tr,th,td要素でマークアップされる記述リストです。ユニット内の1行ごとにtr要素としてマークアップされます。 1行中のテキストは「,」で区切ることでtf要素としてマークアップされます。 1行中の「,」で区切られたテキストをth要素としてマークアップする場合には、そのテキストの先頭に#を追加します。 テーブル記述の詳細につきましては、a-blog cmsのマニュアルをご確認ください。
pre要素でマークアップされる整形済みテキストです。ラベルにもあるように、HTMLなどのソースコードをエントリ内に表示する場合に使用します。
blockquote要素でマークアップされる引用テキストです。 ユニット内のテキスト全体がblockquote要素としてマークアップされます。cite要素には対応していません。
HTMLなどのソースコードがそのまま記述できるユニットです。ユニット内には自由に記述ができますが、ソースコードの記述に誤りがあった場合にはエントリの表示に影響を及ぼす場合がありますのでご注意ください。
マークダウン形式で情報の入力ができるユニットです。マークダウン記法の詳細につきましては、a-blog cmsのマニュアルをご確認ください。
WYSIWYG(ウィジウィグ)は、編集画面での見た目と表示画面での見た目が同じとなる技術で、a-blog cmsではTrumbowygというエディタを使用しています。Microsoft Wordなどの入力に近い感覚で、文字の装飾や画像の追加が行えます。
Trumbowyg を活用したWYSIWYGエディタ
テキストユニットの配置には「おまかせ」「全体」があります。
該当するテキストの前で画像ユニットなどに「右」「左」といった配置指定が行われていた場合、該当するテキストを回り込み表示させます。
該当するテキストを表示する前に、CSSによるfloatを解除します。その結果、回り込み表示することなく全幅でテキストが表示されます。
配置の「おまかせ」「全体」の表示例
a-blog cms Ver.2.8.0 より新しくテキストエリアが生まれ変わりました。今までは「リンク」や「強調」を挿入した際にHTMLタグが直接見えてしまう形になっていましたが、Ver.2.8.0より「リンク」や「強調」などが視覚的にわかりやすくなっています。
a-blog cmsではデフォルトで、「リンク」「強調」「重要」のボタンが用意されていますが、カスタマイズすれば、新たにボタンを追加することができます。下記のように、ACMS.Ready内で、ACMS.Config.LiteEditorConf.btnOptionsに挿入したいボタンの設定をpushするだけです。
ACMS.Ready(function(){
ACMS.Config.LiteEditorConf.btnOptions.push({
label: 'アンダーライン',
tag: 'u',
className: '',
sampleText: ''
});
});また、デフォルトで用意されている「リンク」「強調」「重要」のボタングループを削除した上で、一からボタングループを設置する場合には以下のように、ACMS.Config.LiteEditorConf.btnOptions に直接、値を配列として代入してください。
ACMS.Ready(function(){
ACMS.Config.LiteEditorConf.btnOptions = [{
label: '赤',
tag: 'span',
className: 'red',
sampleText: '赤色のテキスト'
},
{
label: '大',
tag: 'span',
className: 'big',
sampleText: '大きいテキスト'
}];
});| label | ボタンのラベルを設定できます。 |
|---|---|
| tag | ボタンが押された際に挿入されるタグを設定できます。 |
| className | 挿入されたタグに対して付与できるクラスを設定できます。 |
| sampleText | 何もテキストが選択されていない場合に挿入されるデフォルトのテキストを設定できます。 |
ただ、長く運営しているサイトでは互換性の都合上、以前のテキストユニットをそのまま利用したいというケースもあるかもしれません。その場合は下記のようにJavaScriptより、新しいテキストユニットの機能をOffにすることができます。
ACMS.Ready(function(){
ACMS.Config.LiteEditorFeature = false;
});