ブロックエディタ機能
ComponentBlocks プラグイン
新規事業チーム 正木愉美
自己紹介
• 正木愉美 [マサキユミ]
• 2013年入社
• 新規事業チーム
• PowerCMS X と伝えるウェブのチーム
• 主に導入前のご相談などのサポート
• 導入事例などの取材&原稿担当
ウェブディレクター
以前の肩書は
PowerCMS 案件を担当していました
よくあるご相談 ①
リッチテキストエディタを
使ってもらうのは不安
よくあるご相談 ②
入力できる箇所を
ガチガチに制限したい
よくあるご相談 ③
でも、自由に入力したい
ページもある
以前のPowerCMSでは、カスタムフィールドや
スニペットフィールドをたくさん作って、それを
組み合わせたひな型を量産
これまでは
PowerCMS X の場合は
「モデル」または
「フィールド機能」
※今後も、うまく組み合
わせて活用
これまでは
1. 更新担当者にHTMLの知識がないことが多い
2. 逆にHTMLの知識があると、リッチテキスト
エディタで自由に装飾等ができてしまう
3. ウェブサイトのトーン&マナーを維持したい
4. でも、いろいろなパターンのページが作れる
必要がある
どうして入力を制限?
ComponentBlocks プラグイン
設計済のHTML/CSSコンポーネントに対応した
入力フィールドを用意するためのブロックエディタ
ブロックエディタとは?
コンテンツの中身となる見出し、本文、
画像などのパーツを単独または複数組み
合わせて「ブロック」として登録し、そ
の組み合わせで各ページのコンテンツを
表現できるもの
リッチテキストエディタ
との違いは?
リッチテキストエディタが1つの入力欄な
のに対し、ブロックエディタは規定のブ
ロックを自由に上限なく、組み合わるこ
とができる。入力順でデータを出力する
のは、リッチテキストエディタと同じ。
ブロック作成の前に
どのような入力欄があれば、期待するコンテ
ンツを出力できるかを検討し、入力画面を設
計する
PowerCMS X では、モデル・フィールド・
コンポーネントブロックを適材適所で使い分
ける
実際の画面で見てみましょう
• 運用する人たちにとってわかりやすい管理画面
を作ることができる
• 更新作業者は、入力ブロックを組み合わせるこ
とで一定の自由度があり、様々なページを作成
することができるため満足感がある
• 誰が作っても一定のルールに基づいた出力がで
き、ページのクオリティが安定する
ブロックエディタのメリット
ー 利用者側 ー
• ウェブサイトのトーン&マナーだけでなく、
ウェブアクセシビリティの維持にも貢献
• 色を自由に指定できないので、コントラスト
比を確保できる
• リンクテキストや alt の入力が自然とできる
ようなUIを作ることもできる
ブロックエディタのメリット
ー 利用者側 ー
• 以前のようなカスタムフィールドやひな型の量
産が不要になった
• PowerCMS X のモデルの変更も不要
• 追加要望にも対応しやすい
• フィールド機能ではできなかった、異なるブ
ロックを好きな順序で追加可能
ブロックエディタのメリット
ー 構築者側 ー
• 非エンジニアにも管理画面の作成が可能
• 実装担当者は、ビュー作成に注力することが
できる
• ブロックエディタ自体の高度な作り込みも可
能なので、事前にエンジニアと一緒に設計し
て役割分担をしておくとよい
ブロックエディタのメリット
ー 構築者側 ー
モデルとフィールド、
ブロックの使い分け
まずは、モデル。これが主体。
• 一覧画面に表示できる
• 検索やフィルタ、ソート順に指定できる
• すべてのスコープで共通の値
• 入力欄の増減には対応できない
フィールドは、カスタムフィールドと同じ。
• 一覧画面には表示できない
• 読み出し専用
• スコープごとにフィールドが異なってもOK
• フラグ管理にも使える
(例:□ 外部リンクとして表示 )
モデルとフィールド、
ブロックの使い分け
• リッチテキストエディタの代わりになるもの
• 規定のコンポーネントの組み合わせになるの
で、レイアウトの崩れを回避したりトンマナ
の維持が得意
・フラグ管理には不向き
モデルとフィールド、
ブロックの使い分け
コンポーネントブロックは、エディタ。
ComponentBlocks プラグインは、
非エンジニアでも、
入力画面を作成できる
入力フィールドやモデルの設計、
とにかくCMSが好きな方は、
ぜひアルファサードへ!
https://alfasado.net/recruit/
管理画面の設計、楽しいよ!
最後に
ありがとうございました
技術的なご質問は、
PowerCMS X サポートまで!

ブロックエディタ機能 ComponentBlocks プラグイン