オープンソースCMS concrete5を使ったウェブサイト構築について

1. Copyright Concrete5 Japan, Inc. All Rights Reserved.
CONCRETE5って何？
オープンソースCMS concrete5を使ったウェブサイト構築について

2. Copyright Concrete5 Japan, Inc. All Rights Reserved.
CONCRETE5って何？
• 拡張性と操作性に特化したオープンソースCMS
• 高度なウェブサイト管理機能を、マウス操作でかんた
んに
• サイト内の編集したいページで「編集モード」に切り
替え、その場で編集
• マーケットプレイスから追加機能をカンタンに入手
2

3. Copyright Concrete5 Japan, Inc. All Rights Reserved.
CONCRETE5の魅力
• Free! 利用者の自由
とにかく、好きなようにカスタマイズして、好きなよ
うに拡張できることが開発方針の根幹になっている
• Speed! 開発が早い
歴史がある割に、枯れたCMSという印象ではなく、現
在進行形でガツガツ進化している
• Community! コミュニティが面白い
concrete5のエコシステムをみんなで盛り上げようと
いう機運
3

4. Copyright Concrete5 Japan, Inc. All Rights Reserved.
デザイナーへのおすすめポイント
• テーマの作成は超カンタン
• デザインカスタマイズで覚えることが少ない（学習コ
ストが低い）
• デザインカスタマイズの自由度が高い
• 日本語フォーラムでサポート、勉強会も
4

5. Copyright Concrete5 Japan, Inc. All Rights Reserved.
開発者へのおすすめポイント
• フロントエンド：jQuery, Twitter Bootstrap
• バックエンド：PHP(Zend Libraries), MySQL(ADOdb
データベース抽象化レイヤー)
• 拡張可能なデータオブジェクトモデル、ビルト・イ
ン・ヘルパークラス
• カスタマイズ容易なオーバーライドシステム
5

6. Copyright Concrete5 Japan, Inc. All Rights Reserved.
制作会社へのおすすめポイント
• 早く形になる
• 手離れが良い
• あとからの変更に強い設計
• ウィザードインストール、1クリックアップデート
6

7. Copyright Concrete5 Japan, Inc. All Rights Reserved.
CONCRETE5の歴史
• 2003 concrete CMS v.1 広告代理店からの依頼
更新者は90人。デザインと機能にこだわるサイト。全
米CMからの大量のアクセス
→「簡単、柔軟、強固」をキーワードに全く新しい
CMSを開発
• 2008 concrete5 オープンソース化
• 2009 concrete5 日本語版リリース
7

8. Copyright Concrete5 Japan, Inc. All Rights Reserved.
動作要件
• PHP5.3
• PHPモジュール: CURL, zip, mcrypt, openssl, GD (with
freetype), mysql, mbstring
• PHP Safe Mode Off
• MySQL 5.x
8

9. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ライセンス
• MITライセンス
制限の最も少ないライセンスのひとつ
• マーケットプレイスから入手できるテーマやアドオン
は異なるライセンス（開発者が選べる）
9

10. Copyright Concrete5 Japan, Inc. All Rights Reserved.
デモ：編集モード
10
• ツールバー
• ブロックの編集
• ブロックの追加
• レイアウトの追加
• デザインツール

11. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ページとは
• concrete5でのページとは、いわゆる「ページ」
• ページはそれぞれに固有のURLを持つ
• まずページがあり、その中にコンテンツ（ブロック）
を並べていく
• 違う考え方のCMS=ブログ
まず記事があり、記事ページ、アーカイブページなど
が自動で生成される
11

12. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ページの構成要素
12
Page (Collection)
PageType
Area Global
AreaBlock Stack
Block
Block
Block
Block
Block

13. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ページタイプ
13
Page (Collection)
PageType
Area Global
AreaBlock Stack
Block
Block
Block
Block
Block

14. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ページタイプとは
14
• 他のCMSでいう「テンプレート」に近い考え方
• ページ内にどんなエリアがあるのかを指定
• エリア内にどんなブロックがデフォルトで存在するの
かを指定

15. Copyright Concrete5 Japan, Inc. All Rights Reserved.
エリア
15
Page (Collection)
PageType
Area Global
AreaBlock Stack
Block
Block
Block
Block
Block

16. Copyright Concrete5 Japan, Inc. All Rights Reserved.
エリアとは
16
• ページ内にブロックを追加するための領域
• レイアウトを追加して分割することも可能

17. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ブロック
17
Page (Collection)
PageType
Area Global
AreaBlock Stack
Block
Block
Block
Block
Block

18. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ブロックとは
18
• エリア内に追加できるconcrete5の機能
• 様々なブロックタイプ
• 記事（WYSIWYGエディタ）
• ページリスト（ページの一覧、新着順など）
• オートナビ（様々なナビゲーション）

19. Copyright Concrete5 Japan, Inc. All Rights Reserved.
スタック
19
Page (Collection)
PageType
Area Global
AreaBlock Stack
Block
Block
Block
Block
Block

20. Copyright Concrete5 Japan, Inc. All Rights Reserved.
スタックとは
20
• ブロックを内包した特殊なブロック
• スタックはページからは独立してバージョン管理さ
れており、独立した権限を持つ
• 同じスタックを複数ページに配置すると、中身が同
期する
• 複数ページで共通のパーツ（例えばサイドバー）を
作るのに使う

21. Copyright Concrete5 Japan, Inc. All Rights Reserved.
グローバルエリア
21
Page (Collection)
PageType
Area Global
AreaBlock Stack
Block
Block
Block
Block
Block

22. Copyright Concrete5 Japan, Inc. All Rights Reserved.
グローバルエリアとは
22
• 全ページで中身が共通のエリア
• それ以外は通常のエリアと同じ
• ページから独立してバージョン・権限設定を持つ
• 管理画面のスタックのページから編集できる

23. Copyright Concrete5 Japan, Inc. All Rights Reserved.
全ての構成要素に権限設定可能
23
Page (Collection)
PageType
Area Global
AreaBlock Stack
Block
Block
Block
Block
Block
Permission
Permission
Permission
Permission
Permission
Permission

24. Copyright Concrete5 Japan, Inc. All Rights Reserved.
その他の要素
24
Page
Single Page
User File
Attribute

25. Copyright Concrete5 Japan, Inc. All Rights Reserved.
デザインカスタマイズ
25

26. Copyright Concrete5 Japan, Inc. All Rights Reserved.
テーマの作り方
• テーマで規定するものは「エリア」
• HTML中のどの部分が編集可能かを指定
<?php
$a = new Area('Sidebar');
$a->display($c);
?>
• 非常にカンタン
26

27. Copyright Concrete5 Japan, Inc. All Rights Reserved.
テーマを作っても中身がスカスカ…
• エリアを指定しただけでは、その中に何のブロックも
ない。ブログ型CMSに慣れた人は戸惑います
• そもそも、テーマがコンテンツを規定すべき「ではな
い」という思想
• 機能とテーマを分離できるので再利用性が高いし、バ
ージョンアップの際にテーマ由来で動かなくなるとい
うこともない
27

28. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ブロックテンプレート
• ブロックごとにカスタマイズ（表示=Viewも、機能
=Controllerもカスタマイズ可能）
• テンプレートはブロックフォルダ内の view.php
• view.phpを複製してカスタマイズ、templatesフォルダ
に置くことで自由にテンプレートが増やせる
28

29. Copyright Concrete5 Japan, Inc. All Rights Reserved.
テンプレートタグはどこに…？
• テンプレートタグはありません
• ブロックテンプレートをカスタマイズするには多少の
PHPの知識が必要
• ただし、処理は書いてない（処理はcontroller.php）の
で、壊れることはない、安心して
• ブロックで見るべきことはブロック内で完結。調べる
ことが少なくてすむし、作業も効率的
29

30. Copyright Concrete5 Japan, Inc. All Rights Reserved.
あらゆるブロックはテンプレートを持つ
• ブログ型CMSの困る点…テーマのテンプレートは、テ
ンプレートタグで書ける
• 追加機能（プラグインetc）のデザインカスタマイズは
どうなる？
• デザインが再現できないからプラグインの使用を諦め
る（それってどうなの？）
30

31. Copyright Concrete5 Japan, Inc. All Rights Reserved.
テンプレートタグがないからこそ
• あらゆるブロックはテンプレートを持っていて、カス
タムテンプレートを作成できる。テンプレートはシン
プルなPHP
• マーケットプレイスからダウンロードした追加機能で
も、全て同様
• 純粋に機能で選び、デザインカスタマイズは自由にな
る（これがMVCの恩恵）
31

32. Copyright Concrete5 Japan, Inc. All Rights Reserved.
開発
32

33. Copyright Concrete5 Japan, Inc. All Rights Reserved.
MVC設計
33
• ページ内の全ての要素がMVC
• ブロックはブロック単位でMVCを持つ
• 他の要素に気を使わずに開発ができる
• ビューは見やすく適当に作っておけばデザイナーでも
カスタマイズ可能

34. Copyright Concrete5 Japan, Inc. All Rights Reserved.
モデル
• concrete5で扱うもの
• 権限、エリア、属性、ブロック、ファイル、ユーザ
ー、ページ、ページリスト、ジョブ etc.
34

35. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ライブラリー
• 関連する一連の機能を提供する
• Backup, Cache, Events, Database, FileImporter etc.
• Zend, ADODB などを外部ライブラリーとして利用
35

36. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ヘルパー
• 共通の機能のための小規模なライブラリー
• HTML, Form, Validation etc.
$form = Loader::helper('form');
print $form->select('favoriteFruit', array('p' => 'Pears',
'a' => 'Apples', 'o' => 'Oranges'), 'a');
36

37. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ツール
• スペルチェック、オートコンプリート、要素の読み込
みなど、主にAjaxで使う
• 複雑な編集UIを持つため、Ajaxのサンプルは豊富
37

38. Copyright Concrete5 Japan, Inc. All Rights Reserved.
オーバーライド
• コア領域（concreteディレクトリー）のファイル
/concrete/js/jquery.js
• ユーザー領域（ルートディレクトリー）のファイルで
上書き可能
/js/jquery.js
38

39. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ブロックタイプの開発
• データベース構造はXMLで指定、インストール時に自
動でSQLが発行される
• コントローラーがデータベースとのつなぎをうまくや
ってくれる（フレームワーク的な良さ）
• 編集画面はBootstrapでキレイに
39

40. Copyright Concrete5 Japan, Inc. All Rights Reserved.
シングルページ
• ログインページや会員登録ページなど、ページ単体で
機能を持つもの（通常のページは中に入るブロックが
分離されているため、特定の機能を持たない）
• URLルーティング
40

41. Copyright Concrete5 Japan, Inc. All Rights Reserved.
TWITTER BOOTSTRAP
• UIに全面的に Bootstrap, from Twitter を採用
• Interfaceヘルパーを経由して呼び出し
• デザインに悩まなくていい
• ユーザーも各デベロッパーの機能の操作に統一感があ
ってうれしい
41

42. Copyright Concrete5 Japan, Inc. All Rights Reserved.
よくある質問
42

43. Copyright Concrete5 Japan, Inc. All Rights Reserved.
どんなサイトに向いているのか
• マーケティングを意識したサイト（トップページのコ
ンテンツをひんぱんに入れ替える）
• 公開認証フローが必須なサイト
• 権限機能が豊富なので、会員サイトに向いている
（B2Bのウェブサイトでよく要望に上がる）
• その他、カスタマイズの容易さを活かして勤怠管理シ
ステムなど、色々作ってる人がいます
43

44. Copyright Concrete5 Japan, Inc. All Rights Reserved.
どんなサイトに向いていないのか
• ブログ
• メディアサイト（記事を書くということに注力するな
らブログがいいし、詳細な権限設定も不要）
44

45. Copyright Concrete5 Japan, Inc. All Rights Reserved.
WORDPRESSとの違い
45
• ブログ型CMSは、単一のアプリケーションである
→記事詳細、記事アーカイブ、コメント、検索etc
• ブログ型CMSは、アプリケーションを拡張すると考え
ると分かりやすい
→商品詳細、商品アーカイブ、レビュー、検索etc

46. Copyright Concrete5 Japan, Inc. All Rights Reserved.
WORDPRESSとの違い
• ページ単位でデザインにこだわりたい = 個人的に、こ
のニーズを「(ウェブ)ページ管理システム（PMS）」
と呼んでいます
• PMSをお求めなら、concrete5の方が断然良い
• concrete5が苦手なのは１つの記事が２つのURLで見
れるというしくみ→ページがあってはじめてその中に
コンテンツを入れるという考え方にあわない
46

47. Copyright Concrete5 Japan, Inc. All Rights Reserved.
WORDPRESSとの違い
• ページか、投稿か、それが問題
• その他に、ページ単位での履歴管理の正確さや、詳細
な権限設定、高機能なファイルマネージャーなども
concrete5が選ばれる要素です
47

48. Copyright Concrete5 Japan, Inc. All Rights Reserved.
スケジュール公開機能はある？
48
• ブログの予約投稿的な機能はないが、スケジュール公
開機能はある
• ゲストの表示権限を期限指定することで任意の日時か
ら任意の日時の間だけ公開することが可能
• ブロック単位で公開のスケジュール指定ができるの
で、特定の期間のみ表示されるバナーを作れる

49. Copyright Concrete5 Japan, Inc. All Rights Reserved.
会員サイトは作れる？
• 会員登録機能が標準搭載
• プロフィール項目を任意に増やせる
• 確認メールのURLをクリックする認証、管理者の手動
認証、認証なしを選べる
• フレンド、プライベートメッセージ機能が標準搭載
• 次期バージョンからはFacebookログインなど会員機
能が強化
49

50. Copyright Concrete5 Japan, Inc. All Rights Reserved.
事例
• ケンブリッジ大学
• バンクーバー水族館
• MINI UK（BMV）
• AT&T
• フィリピン航空
• TOPCON
• Genco
• など
50

51. Copyright Concrete5 Japan, Inc. All Rights Reserved.
国内事例
• とるナビ（バンプレス
ト）
• 交通新聞社
• 筑波学院大学
• 東京基督教大学
• 篠栗町社会福祉協議会
• 羽島市医師会
• CSS Nite in AOMORI
• その他企業、自治体な
ど…
51

52. Copyright Concrete5 Japan, Inc. All Rights Reserved.
コンテンツの移行
• WordPressからのインポートスクリプトが公開されて
いる
• それ以外のCMSからのインポートの場合は、これを参
考に自作
52

53. Copyright Concrete5 Japan, Inc. All Rights Reserved.
マーケットシェアは？
• W3Techsの調査 = 0.2% (2013-06-18)
WordPress 58%
Joomla 10.4%
Drupal 6.3%
Typo3 1.6%
ExpressionEngine 0.9%
Tumblr 0.3%
Movable Type 0.3%
XOOPS 0.2%
eZ Publish 0.2%
Plone 0.1%
TypePad 0.1%
Sitecore CMS 0.1%
Google Sites 0.1%
53

54. Copyright Concrete5 Japan, Inc. All Rights Reserved.
SEOはどうなってるの？
• 内部構造の問題
• サイトマップを変更しやすく、リダイレクトも自動で
行なってくれるのは、SEOを意識した運用にはありが
たい
• メタタグの一括設定ツールなど
54

55. Copyright Concrete5 Japan, Inc. All Rights Reserved.
おすすめのアドオンは？
• Designer Content = デザイナーでも独自のブロックを
GUIで作れる
• Tomoac Form 5 = 日本人開発者が作ったフォームブロ
ック。日本の郵便番号や確認画面対応など、国内事情
に対応
• Whale Nivo Slider = 高機能な画像スライダー。このよ
うなUIパーツはたくさんあります
55

56. Copyright Concrete5 Japan, Inc. All Rights Reserved.
おすすめサイト
• 山野井研究室 http://www.yamanoi.org/
• tomoのconcrete5 http://concrete5.tomo.ac/
• concrete5 Guide http://c5.coral.jp/
56

57. Copyright Concrete5 Japan, Inc. All Rights Reserved.
おすすめブログ
• デザインワークスオンサイド http://www.onside.com/
• XROSS CUBE http://d.hatena.ne.jp/xross-cube/
• notnil creation weblog http://notnil-creative.com/blog/
• コンクリートファイブログ http://wordpress.go-
designing.com/
57

58. Copyright Concrete5 Japan, Inc. All Rights Reserved.
おすすめ動画
• 週間concrete5 http://www.ustream.tv/channel/
concrete5japan
• 下北沢concrete5部 http://new.livestream.com/
shimokitazawa-osscafe/concrete5
58

59. Copyright Concrete5 Japan, Inc. All Rights Reserved.
日本語プロジェクトチームとは？
• concrete5のインターフェースの日本語訳、日本語で
使用する際のバグフィクスなどを行ったconcrete5日
本語版をリリース・メンテナンスしている有志のあつ
まり。
• オープンソースSNS MyNETS の開発チーム「Usagi
Project」が母体
• concrete5日本語公式サイトも有志で運営
59

60. Copyright Concrete5 Japan, Inc. All Rights Reserved.
コンクリートファイブジャパン株式会社とは？
• アメリカ開発元公認の、主に日本国内の企業向けのサ
ポートを提供する会社
• concrete5日本語プロジェクトの中心メンバーがあつ
まり、2012年に設立
• concrete5を有力なオープンソースCMSの候補として
育て、ウェブ制作者に役立ててもらい、ウェブコミュ
ニティに貢献するのが使命
• 詳細は公式サイトへ！
60

61. Copyright Concrete5 Japan, Inc. All Rights Reserved.
収益モデルは？
• concrete5を中心としたエコシステム
• 公式マーケットプレイス経由で全世界のconcrete5サ
イトに販売されるテーマやアドオンの売上の一部が開
発元の収益に
• concrete5のVIPサポート
• ホスティング
61

62. Copyright Concrete5 Japan, Inc. All Rights Reserved.
CONCRETE5を使った
ウェブサイト制作
62
（あくまでひとつのやりかたです）

63. Copyright Concrete5 Japan, Inc. All Rights Reserved.
設計
63
• サイトマップを大まかに考えます
• 各ページにどんなブロックを配置するか分かる程度の
ワイヤーフレームを作ります
• ワイヤーフレームは、ページタイプをいくつ作るべき
かの考え方の基礎になります

64. Copyright Concrete5 Japan, Inc. All Rights Reserved.
CMS組み込み
• ワイトマップとワイヤーフレームを参考に、サイトを
作り始めます
• ブロックも並べていきます
• マーケットプレイスから購入する予定のアドオンがあ
れば、この段階で購入して試してみます
• CSSフレームワークベースのシンプルなテーマがやり
やすいです
64

65. Copyright Concrete5 Japan, Inc. All Rights Reserved.
デザイン
• そのままインブラウザデザインを行なっていくのがベ
ストかもしれませんが…
• デザインカンプを作ることも多いです。CMSに組み込
み終わっているので、それを参考にデザインしていき
ます
65

66. Copyright Concrete5 Japan, Inc. All Rights Reserved.
デザイン反映
• デザインカンプをもとにコーディングします
• テーマとブロックテンプレートに落としこんでいきま
す
66

67. Copyright Concrete5 Japan, Inc. All Rights Reserved.
機能実装
• 要件が決まっていれば、デザイン前に機能実装はスタ
ートできます
• デザイン後に作成したブロックのテンプレートを作り
ます
• そううまく行かないことももちろんあります
67

68. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ページタイプのセットアップ
• できあがったコンテンツをベースに、ページタイプの
デフォルトを設定します。この作業をしないと、新し
くページを作った時に更地状態
• 必要であればコンポーザーの設定も行います
68

69. Copyright Concrete5 Japan, Inc. All Rights Reserved.
コンテンツ登録作業
• ページタイプのセットアップが終われば、クライアン
トと協力してコンテンツを登録していきます
• 実際には、機能開発やデザインカスタマイズと並行し
て行うこともよくあります
69

70. Copyright Concrete5 Japan, Inc. All Rights Reserved.
権限設定、キャッシュ設定
• 最後に運用を想定した権限設定を行います。
concrete5ではデフォルトでは管理者権限しかありま
せん。それ以外は自分で設計します
• 要件定義に権限に関する項目があれば、かなり最初の
段階で権限設定をどうするか考えておくほうがいいで
しょう
• concrete5はそこそこ重いアプリケーションなので、
キャッシュ設定も忘れずに
70

71. Copyright Concrete5 Japan, Inc. All Rights Reserved.
ポイントは
• デザインと機能が分離されているので並行作業がしや
すい
• ディレクターのできること、やるべきことが多い（ペ
ージタイプの設計、ページタイプのデフォルト設定、
権限設定など）
• プログラムなしで要素の最適な並びを検討できるのは
クライアントとの打ち合わせに便利
71

72. Copyright Concrete5 Japan, Inc. All Rights Reserved.
見積もり
72

73. Copyright Concrete5 Japan, Inc. All Rights Reserved.
どこに費用がかかるか
73
• デザイン = 普通
• コーディング = 普通
• テーマ化 = すぐ
• テンプレート作成 = 楽
• ページタイプのセットア
ップ = 結構時間がかかる
• 権限設定 = かなり大変
• アップデート = カスタマ
イズ（オーバーライド）
箇所があれば要検証

74. Copyright Concrete5 Japan, Inc. All Rights Reserved.
分かりやすい見積もり
• ページタイプ数でカウント
設計、デザイン、デザイン適用、権限設定…
• ブロック数でカウント
追加開発するもの
74