PowerCMS X 3.5から搭載された、ブロックエディタ機能についてご紹介します。

1. ブロックエディタ機能
ComponentBlocks プラグイン
新規事業チーム 正木愉美

2. 自己紹介
• 正木愉美 [マサキユミ]
• 2013年入社
• 新規事業チーム
• PowerCMS X と伝えるウェブのチーム
• 主に導入前のご相談などのサポート
• 導入事例などの取材＆原稿担当

3. ウェブディレクター
以前の肩書は
PowerCMS 案件を担当していました

4. よくあるご相談 ①
リッチテキストエディタを
使ってもらうのは不安

5. よくあるご相談 ②
入力できる箇所を
ガチガチに制限したい

6. よくあるご相談 ③
でも、自由に入力したい
ページもある

7. 以前のPowerCMSでは、カスタムフィールドや
スニペットフィールドをたくさん作って、それを
組み合わせたひな型を量産
これまでは

8. PowerCMS X の場合は
「モデル」または
「フィールド機能」
※今後も、うまく組み合
わせて活用
これまでは

9. 1. 更新担当者にHTMLの知識がないことが多い
2. 逆にHTMLの知識があると、リッチテキスト
エディタで自由に装飾等ができてしまう
3. ウェブサイトのトーン＆マナーを維持したい
4. でも、いろいろなパターンのページが作れる
必要がある
どうして入力を制限？

10. ComponentBlocks プラグイン
設計済のHTML/CSSコンポーネントに対応した
入力フィールドを用意するためのブロックエディタ

11. ブロックエディタとは？
コンテンツの中身となる見出し、本文、
画像などのパーツを単独または複数組み
合わせて「ブロック」として登録し、そ
の組み合わせで各ページのコンテンツを
表現できるもの

13. リッチテキストエディタ
との違いは？
リッチテキストエディタが1つの入力欄な
のに対し、ブロックエディタは規定のブ
ロックを自由に上限なく、組み合わるこ
とができる。入力順でデータを出力する
のは、リッチテキストエディタと同じ。

15. ブロック作成の前に
どのような入力欄があれば、期待するコンテ
ンツを出力できるかを検討し、入力画面を設
計する
PowerCMS X では、モデル・フィールド・
コンポーネントブロックを適材適所で使い分
ける

16. 実際の画面で見てみましょう

17. • 運用する人たちにとってわかりやすい管理画面
を作ることができる
• 更新作業者は、入力ブロックを組み合わせるこ
とで一定の自由度があり、様々なページを作成
することができるため満足感がある
• 誰が作っても一定のルールに基づいた出力がで
き、ページのクオリティが安定する
ブロックエディタのメリット
ー 利用者側 ー

18. • ウェブサイトのトーン＆マナーだけでなく、
ウェブアクセシビリティの維持にも貢献
• 色を自由に指定できないので、コントラスト
比を確保できる
• リンクテキストや alt の入力が自然とできる
ようなUIを作ることもできる
ブロックエディタのメリット
ー 利用者側 ー

19. • 以前のようなカスタムフィールドやひな型の量
産が不要になった
• PowerCMS X のモデルの変更も不要
• 追加要望にも対応しやすい
• フィールド機能ではできなかった、異なるブ
ロックを好きな順序で追加可能
ブロックエディタのメリット
ー 構築者側 ー

20. • 非エンジニアにも管理画面の作成が可能
• 実装担当者は、ビュー作成に注力することが
できる
• ブロックエディタ自体の高度な作り込みも可
能なので、事前にエンジニアと一緒に設計し
て役割分担をしておくとよい
ブロックエディタのメリット
ー 構築者側 ー

21. モデルとフィールド、
ブロックの使い分け
まずは、モデル。これが主体。
• 一覧画面に表示できる
• 検索やフィルタ、ソート順に指定できる
• すべてのスコープで共通の値
• 入力欄の増減には対応できない

22. フィールドは、カスタムフィールドと同じ。
• 一覧画面には表示できない
• 読み出し専用
• スコープごとにフィールドが異なってもOK
• フラグ管理にも使える
（例：□ 外部リンクとして表示 ）
モデルとフィールド、
ブロックの使い分け

23. • リッチテキストエディタの代わりになるもの
• 規定のコンポーネントの組み合わせになるの
で、レイアウトの崩れを回避したりトンマナ
の維持が得意
・フラグ管理には不向き
モデルとフィールド、
ブロックの使い分け
コンポーネントブロックは、エディタ。

24. ComponentBlocks プラグインは、
非エンジニアでも、
入力画面を作成できる

25. 入力フィールドやモデルの設計、
とにかくCMSが好きな方は、
ぜひアルファサードへ！
https://alfasado.net/recruit/
管理画面の設計、楽しいよ！
最後に

26. ありがとうございました
技術的なご質問は、
PowerCMS X サポートまで！