concrete5活用セミナー　事例を除いた公開版資料

1. コンテンツ管理に自由をもたらす
オープンソースCMS concrete5
コンクリートファイブジャパン株式会社
菱川拓郎

2. レジュメ
• concrete5の編集モード
• concrete5を構成する要素
• concrete5における権限の概念
• concrete5をベースにした開発手法
• concrete5を運用するインフラ構成

3. concrete5の編集モード
• concrete5の代名詞とも言えるのが、サイトを見たまま編
集でき、ブロックをドラッグ＆ドロップで積み上げていく
「編集モード」
• ブラウザの進化に伴い実装が容易になったことで近年では
珍しくなくなった
• 10年以上の歴史の中で、concrete5はブロック型CMSに特
有のバージョン管理やキャッシュの難しさを克服してきた
• デモ実演

4. 編集モードのメリット
• HTML/CSSを全く書かない
• ドラッグ＆ドロップで並び替えるから、間違ったHTML
を書くことによる表示崩れが起きない
• レスポンシブに対応したレイアウトもGUIで作成でき
る
• 担当者の違いによるばらつきが起きない
• テンプレートの変更もGUIで行える

5. 編集モードのデメリット
• テキストと１つのサムネイル画像、程度のシンプル
なコンテンツを作るには、かえって手間がかかる
• コンポーザーフォーム機能で、編集モードを使わ
ないシンプルな入力フォームを作成可能
• 「ブロック」という単位に設計が縛られる
• 機能設計段階で、少しコツが必要になる

6. ファイルバージョン
ページバージョン
ページ
エリア
concrete5を構成する要素
ブロック ブロック
ブロック
ファイル
ユーザー
属性

7. ファイルバージョン
ページバージョン
ページ
エリア
concrete5を構成する要素
ブロック ブロック
ブロック
ファイル
ユーザー
属性
!!
!
!
!
!
!
すべての要素に
権限の設定が可能

8. 各要素の独立性が高く、拡張可能
• 「ブロック」という独立性の高い要素を最小単位とすることで、
堅牢な運用が可能になる
• １つのWYSIWYGエディタをいじくってカスタマイズする
CMSでは、すぐにバージョンアップが困難になる
• ページ、ファイル、ユーザーの３大要素をGUIから自由に拡張
できる設計の「属性」
• あらゆる要素に適用可能な設計の「権限」
• concrete5をベースに拡張する際にも利用できる

9. concrete5における権限の概念
タスク
ページを編集
ワークフロー
アクセス
エンティティ
ページを承認
ファイルを追加
ページを表示
ユーザーを検索
タスクを保留して
承認後に遅延実行
グループ
ユーザー
グループセット
グループの
組み合わせ

10. concrete5をベースにした開発手法

11. シンプルなWebサイト構築
サイト設計＆デザイン
ブロック＆エリア設計
HTMLコーディング
テーマ作成
ブロックテンプ
レート作成
1.5∼3ヶ月

12. プロトタイピング開発
大まかなサイト設計
編集モードでプロトタイプサイトを作成
HTMLコーディング
テーマ作成
ブロックテンプレート
作成
1∼3ヶ月
+ユーザーテスト
コア機能の開発
デザイン
1∼3ヶ月
デベロッ
パーはサイトのキー機能
をブロックとして開発
ブロックはドラッグ＆ドロッ
プで配置
社内ユーザーによる
運用テストを経た精度の高い
デザインが行える

13. アジャイル開発
企画 設計
実装テスト
企画 設計
実装テスト
ブロックA ブロックB
開発者は、独立性の高いミニ
アプリケーションとして
個々の機能の設計・実装が可能
テストは社内ユーザーが
ドラッグ＆ドロップで実施できる

14. concrete5を運用するインフラ構成
• 基本：Linux + Apache + MySQL + PHP
• Nginx, Azureでも動作させることは可能
• PHPの中間コードキャッシュ（APC等）が非常に
重要 → 共有サーバーはちょっと辛い
• 内蔵のフルページキャッシュ機能を使えばDB負荷
を大幅に軽減

15. concrete5を運用するインフラ構成
• CDN
• 負荷分散
• 編集サーバーの隔離
• 可用性の確保
※あくまで一例
Internet
ELB
Amazon EC2 Amazon EC2
MySQL
standby (Multi-AZ)
MySQL
mastar
オリジナルとして参照
↓
Cloudfrontにキャッシング
オリジナルとして参照
↓
Cloudfrontにキャッシング
Amazon S3
画像をS3へアップロード
Amazon EC2
Amazon
CloudFront www.hogehoge.comimg.hogehoge.com
画像アップ用バケット
Cloudfrontオリジナル用
PHPが実行される組

16. コンクリートファイブジャパン株式会社は、
concrete5のコアコミッターを中心とした技術力、
CMS案件の豊富な経験、
インフラからデザインまで幅広いパートナーシップで
成果につながるCMS導入をお手伝いします
concrete5.co.jp