第4回concrete5京都勉強会のスライド資料です。 ターゲットを「WEBディレクター」「WEB系制作会社・代理店の営業さん」に設定し、 これからconcrete5に取り組むにあたって、「concrete5とは一体なんぞや？」 というところからconcret5の概要を解説しています。

1. 第4回concrete5京都勉強会
まだまだ遅くない！
基礎からガッチリ
使いこなそうconcrete5
株式会社翠灯舎 専務取締役 CTO
佐野譲

2. 自己紹介

3. 自己紹介
株式会社翠灯舎 専務取締役 CTO
佐野譲（さの ゆずる）
バリバリ手を動かすシステムディレクター的な立ち
位置。
PHPとJavaScriptがメインのお仕事。
ビールとソーセージが好きです。
CMSはconcrete5、WordPressがメイン。
concrete5は去年から触り始めました！
インテグレーションパートナーではございます
が、
まだまだconcrete5新人です！

4. ちょっとした自慢
concrete5開発元、
「PortlandLabs」
にお邪魔して超前衛的な話を
したり
ビールをご馳走になったり
しました！
concrete5の開発者は皆、
スーパーナイスガイです！

5. @sizenkainookite
https://www.facebook.com/yuzuru.sano

6. それでは、
よろしくお願いいたします

7. concrete5ってそもそも何？
※公式サイト（http://concrete5-japan.org）からたくさん引用します。

8. いわゆる「オープンソースCMS」です。

9. オープンソースCMSって？

10. いわゆる「オープンソース」の大きな特徴
・自由な再頒布が可能。
・ソースコードを入手することができる。
・再頒布において追加ライセンスを必要としない。
（= 再頒布が自由）
※もっと詳しく知りたい方はこちらで
http://www.opensource.jp/osd/osd-japanese.html

11. いわゆる「オープンソース」の大きな特徴
「オープンソース」の性質を持った
「CMS（コンテンツマネジメントシステム）」
=「オープンソースCMS」

12. オープンソースは、無償もしくは有償で、広
く一般にソフトウエアを公開・改造・再配布
を許可し、助け合いながらソフトウエア
を発展していこうという定義から成り立つ
ソフトウエアです。
いわゆる「オープンソース」の大きな特徴
「はじめにお読み下さい :: concrete5 Japan 日本語公式サイト」より
http://concrete5-japan.org/about/readmefirst1/

13. 利用するときに制限とかあるの？？

14. ソフトウェアには「ライセンス」という概念が存在する
CMSによって
ライセンス形態は様々・・・

15. concrete5は
「MIT ライセンス」
で公開されています。

16. 「以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル（以下
「ソフトウェア」）の複製を取得するすべての人に対し、ソフトウェアを無制
限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複
写、変更、結合、掲載、頒布、サブライセンス、および/または販売する権利、
およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含ま
れます。
上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重
要な部分に記載するものとします。
MITライセンスの和訳
「licenses/MIT_license - Open Source Group Japan Wiki - Open Source Group Japan - OSDN」より
https://osdn.jp/projects/opensource/wiki/licenses%2FMIT_license

17. さらに要約すると
・改変・再配布・商用利用・有料販売でも
自由に無料で使用できる
・利用にあたって
「著作権表示」と「MITライセンスの全文」を
記載する事が必要
※concrete5 名称とロゴの使用については扱いが異なります。
詳しくはこちら
http://concrete5-japan.org/about/use_of_concrete5_logo/

18. 要するに
利用に関して非常に制限が少ない！

19. どこで生まれたの？
どのように発展してきたの？

20. concrete5は、アメリカ・オレゴン州・ポートランドに在住する、Franz
Maruna と Andrew Embler 氏を中心にPorlandLabs Inc. にて開発が続けら
れています。
10年間、地元の広告代理店向けにウェブ制作のサービスを提供して行くうち、
クライアントにも手軽にホームページの更新が出来るようにと、前身である
「Concrete」CMSの開発をし、クライアント向けに提供していました。
しかし、彼らは特定のクライアント向けに、特定のCMSだけを作り続ける事
に対し限界を感じるようになり、オープンソース化への決意、2008年6月、
concrete5はオープンソースとしてリリースされました。
生い立ち
「開発元について :: concrete5 Japan 日本語公式サイト」より
http://concrete5-japan.org/about/about-concrete5-developers/

21. 生い立ち
「Concrete」CMSのバージョン「5」から
オープンソース化
故に
concrete5！

22. 日々発展していくCMS
オープンソースプロジェクトと
いうことで、
世界中の有志により日々開発
が続けられています。
https://github.com/concrete5/concrete5

23. 日本のconcrete5を
とりまく環境

24. concrete5 Japan
concrete5の日本国内での商標管理、
日本語公式サイト運営、
パートナー制度やマッチング、
concrete5でのシステム開発
などなど
concrete5に関することは
何でも相談できる
総合窓口！
concrete5 Japan
http://concrete5-japan.org/community/calendar/

25. 公式フォーラム
初心者向け情報
トラブルシューティング
構築事例
バグ報告
などなど
皆優しい！
公式フォーラム
http://concrete5-japan.org/community/forums/

26. 各地の活発なコミュニティ活動
日本各地で定期・不定期的に活動。
勉強会を始めとしたイベント開催。
facebookグループ、
コミュニティーカレンダー
で動向をチェック！
コミュニティカレンダー
http://concrete5-japan.org/community/calendar/

27. インテグレートパートナー
日本語公式サイトで、
concrete5を使った
ウェブサイトの構築事例を持つ
プロフェッショナル
(Web制作会社やフリーランスの方)
を紹介。
会社概要や実績紹介など多数掲載！
concrete5の案件、
どこに相談したら良いんや・・・
とお悩みの際に是非御覧ください。

28. かくいう弊社も
インテグレートパートナーです！
株式会社翠灯舎 Suitosha Inc.
〒604-8226
京都市中京区西錦小路町263番地
NAUTICA BLDG.C102号室
TEL：075-744-6581
FAX：075-744-6582

29. マーケットプレイス

30. マーケットプレイス
公式で運用されている、
アドオンやテーマの販売・配布サイト
※アドオン・・・WordPressでいう「プラグイン」と捉えて下さい。

31. concrete5ならではのマーケットプレイス
厳しく審査されたものだけが
掲載されているので
安心して利用できる
有償アドオンのほとんどは
開発者からのサポート
を受けることができる

32. ちょっと休憩しましょう

33. ざっくりと
ページ更新の基本的な流れ
※画面デモは後ほど

34. ログイン
ログインはログイン画面から。

35. 編集開始
ログインするとそこはもう、
編集画面。
※ログイン後はサイトトップに遷移します。
編集ボタンをクリックで、
ページを表示したまま
ページ上で
編集開始。
管理バーが現れます。
これが編集ボタン

36. エリアとブロック
「ブロック」を
編集したい「エリア」に
ドラッグ＆ドロップで追加
してコンテンツを制作します。

37. エリアとブロック
「ブロック」は
「コンテンツの単位」
テキストを入れたり画像を入れたり等など、
機能単位のひとかたまりとも言える
「エリア」は「ブロックの入れ物」
外側から
ページ→エリア→ブロック
と操作が細分化していくイメージ
ブロック ブロック
ブロック ブロック
ページ
エリア

38. エリアとブロック
ブロック（=機能）を
積み上げて
コンテンツを
作る

39. concrete5と
他のCMSの違いって何？
※メリットとデメリットを交えつつお話します。

40. 直感的な操作で
ページを見たまま変更できる

41. 一番の大きな違いは
ページを見たまま編集できる。
ブロック（=機能）を
ドラッグ＆ドロップで追加するという
非常に直感的な操作で
サイトの更新が可能である。

42. （ちなみに）ブログツール系CMSの場合
ログイン
↓
管理画面
↓
管理画面内の記事一覧ページ
↓
WYSIWYGエディタで
記事追加・更新

43. ページ制作に必要な機能が
あらかじめ用意されている

44. 充実の機能ブロック
WYSIWYGエディタはもちろん
・テキストエリア
・画像
・ページ一覧出力
・ナビゲーション生成
さらに
・Googleマップ
・お問い合わせフォーム
・スライドショー
などなど。至れり尽くせり。

45. サイトの管理機能も充実している

46. サイトマップによる構造管理
ページ管理形式がいわゆる「一覧ページ」
ではなく、
「ツリー形式のサイトマップ」
サイトの構造を非常に把握しやすい。

47. 強力な権限管理機能
各ページ単位はもちろんのこと
「サイトマップツリー」
「エリア」
「ブロック」
に至るまで
詳細な閲覧/編集権限が設定可能
管理画面から
GUIで簡単に設定
できることも魅力的！

48. 一段階の承認フローを標準装備
コンテンツの編集、
ページの移動、削除などを行なった際に
いったん保留状態として、
権限を持ったユーザーが承認する
ことで
初めて変更が反映される仕組み。
承認権限を持つユーザーは、
却下することで
変更を差し戻すこともできる。

49. コンテンツのバージョン管理とロールバック機能
コメント付きで変更履歴を保存
することができる。
過去のバージョンに戻すこともできる。
万が一の更新ミスにも安心！

50. コンテンツのバージョン管理とロールバック機能
さらにバージョンを比較することもできる。

51. 多言語対応サポート！
一つの言語をベースに
多言語サイトを制作することがで
きます。
例えばサイトを丸ごと
日本語⇆英語でミラーリング、
新規に
英語で制作したページと
対応するページを
日本語エリアにコピー
して関連付けたりなどなど

52. 多言語対応サポート！
サイトインターフェースの翻訳機能で
管理画面の多言語化もサポート！

53. デメリットは？

54. デメリットは？
自由さ故にコンテンツに収集がつかなくなる可能性
→基本的なサイトの設計、
ページレイアウトの方向性など
運用ルールの整備は必要
→ディレクターの腕の見せ所！

55. デメリットは？
多機能さ故に
全ての機能を短期間で理解してもらうことは難しい
→サイトに合わせたドキュメントの用意、
少しずつ更新可能な範囲を増やしていくなど、
対応方法は色々
→ディレクターの腕の見せ所！

56. デメリットは？
まだまだ無料テーマが少ない
→もう少し手軽にいろんなデザインが
試せるようになるといいなぁ
→開発者の腕の見せ所！

57. Sakan
日本発のテーマ制作が進行してます
https://github.com/concrete5japan/sakan

58. デメリットは？
ググった際に日本語の情報、
特にトラブルシューティングに関する情報が比較的
少ない印象
→とはいえ、フォーラム内の情報は充実しているし
レスポンスも速くて温かい印象。
制作に関する情報も日々増えている。

59. どんなお客さん、
どんなWEBサイトに向いているの？

60. 前提として

61. concrete5は汎用CMSです。
汎用というのは、わかりやすく言うと「何にでも使える」ということです。な
ので、カンタンに言うと「何でも作れますよー」という事になります。
ブログでも、ECサイトでも、SNSでも、Webベースの業務システムも作れます。
でもこれではこの質問に答えた事にはなりません。
また、私たちは「何でもconcrete5で作る」という事はオススメしていません。
前提として
「concrete5はどんなWebサイトに向いているか？」より
http://concrete5.co.jp/ja/blog/whats-best-for-concrete5/

62. どんなサイトに向いているのか

63. どんなサイトに向いているのか
WEBサイトを定型化できない内容で
更新する頻度が高いサイト
いわゆる「固定ページ」をどんどん追加・更新したい
（でも、wysiwygエディタだけでは制作できない…）
→ 都度Web制作会社に依頼する手間を省きたい！
→ 制作∼公開までのスピードを上げたい！

64. どんなサイトに向いているのか
複数グループ、複数ユーザーが運営に関わるサイト
「このページはあの部署だけに更新させる」
「上長承認を得たページのみを公開する」
といった運用が可能。
組織構成を現実に近い形で
サイト管理機構に反映できる可能性が高い。

65. どんなサイトに向いているのか
情報の掲載期限・閲覧可能対象を
しっかり管理したいサイト
・期間限定のキャンペーンページ
・社内向け情報ページ
→「誰」に向けて「いつ」公開するのか、
担当者レベルで管理できる

66. 凄く端的にいうと
WEBサイトの運用を
超頑張りたいお客さん
には
非常に向いている

67. 逆に向いていないサイトって何？

68. 逆に向いていないサイトって何？
向いてないサイト
構築できないサイト
は
無いといえば無い

69. 強いて挙げるなら
WEBサイトの更新を
あまり頑張らなくてよいサイト
には
機能過多になってしまう
という意味で向いていない。
かもしれない。

70. 強いて挙げるなら
具体的には・・・
・お知らせを月に一度数行更新するだけのサイト
・固定ページは特に更新せず、ブログベースで更新するサイト
ブログベースのサイトであれば、
ブログアプリケーションを使ったほうが運用しやすい。
「書くこと」に特化して発展しているから。
・とりあえずwysiwygエディタさえあれば事足りるサイト

71. 結局は
お客さんにハマるかどうか！

72. 発生する作業や
見積のポイントは？
※オリジナルデザインで一般的なコーポレートサイトを新規制作する場合
※金額は各社様々なので弊社の具体的な金額は挙げません

73. 超大まかにはこんなフェーズが想定される
サイト構成＆機能策定
基礎デザイン＆基礎コーディング
機能カスタマイズ
サイト設定

74. サイト構成＆機能策定
サイト構成＆機能策定
いわゆるディレクション
この段階でクライアントの要望を
なるべく細かくconcrete5制作担当に伝えられると、
概算見積と最終見積の乖離を防ぐことができる(気がする)。
(可能であれば)打ち合わせに同行してもらうのも良い。

75. 基礎デザイン＆基礎コーディング
デザイン＆コーディング
・基本デザイン
・基本コーディング
コーディングデータのテーマ化
・各種ページレイアウトの登録
concrete5内でページレイアウトを選択できるように
レイアウト毎にテンプレートを作って登録する。
※ページテンプレート自体が機能を持つケースは少ないので、
テーマ化自体はサクサク進行する印象

76. 機能カスタマイズ（よくある工程）
ページ属性の登録と出力部分
・いわゆる「カスタムフィールド」
- 登録項目の用意
- 出力部分のコーディング(※1)
ブロック調整
・ブロックの基本的な見た目をデザインに合わせて調整する
・カスタムテンプレートの追加(※2)
※1 ブロックでも出力ができる。テンプレートに直接埋め込んで使用したい時にはコーディングが必要
※2 ブロックで登録したデータを使って見た目を自由にカスタマイズできる機能、要phpコーディング。

77. 機能カスタマイズ（よくある工程）
アドオンの購入
・高機能なアドオンはほとんど有料(※1)
- 購入費の見積を忘れずに。
※1 USドルでの価格設定なのでレートにより変動の可能性があることに注意

78. 機能カスタマイズ（たまにある工程）
・オリジナルブロック開発
・既存ブロックの機能そのものをカスタマイズ
・アドオンのカスタマイズ
・アドオンの新規開発
・各種サイト管理機能のカスタマイズ
上記には多くの場合、
concrete5に関する専門的な知識が必要。
「こんな機能実現できるの・・・？」と迷った時は
concrete5 Japanや
お近くのインテグレートパートナーへ相談してみましょう！

79. サイト設定
各種権限の定義・設定
ユーザーの登録＆権限設定
複雑な権限グループを設定したり、
大量のユーザー登録が必要な場合
コンテンツの登録
旧サイトから大量ページを移行しなければならない場合とか
基本機能でページを制作することはできるので、
クライアントに登録を任せることで調整する
という選択肢も

80. 他には・・・
サーバー
ドメイン
操作マニュアル
保守（アップデート対応・バックアップとか）

81. 使ってみる！
使ってみた！編

82. 動作環境

83. concrete5のダウンロードと使用には費用がかかり
ませんが、サーバー上で走るソフトウエアのため、
使用するためには対応するホスティングプロバイダー
と契約をする必要があります。それぞれの機能のバー
ジョン等の詳細は、各ホスティング会社にお問い合
わせ下さい。
concrete5の使用条件
「concrete5の使用条件」より
http://concrete5-japan.org/about/requirement/

84. concrete5の使用条件
concrete5.7とそれ以降のバージョンの
concrete5 を使用するには下記の条件が必要です。
・PHP 5.3.3 以降(実際の所はPHP 5.4.x∼推奨で・・・)
・PHP モジュール: CURL, zip, mcrypt, openssl, GD(要freetype), mysql,
mbstring, iconv (Zend Locale用に必要)
・PHP 設定
- post_max_upload_filesize = 20
- post_max_size = 20
- php memory limitは 128MB
(アップグレードなどの作業時にはより多くのメモリが必要な場合もあります)
・PHP セーフモード Off
・MySQL 5.1.5 もしくはそれ以降.(実際の所は5.6.x∼推奨で・・・)
・MySQL Innodb テーブルサポート.
・Apache/IIS (Apacheを推奨)
「concrete5の使用条件」より
http://concrete5-japan.org/about/requirement/

85. concrete5の使用条件
先のページの要件を満たしてさえいれば
・専用サーバー
・各種レンタルサーバー
・XAMPP
・MAMP
・Vagrant
などなど、様々な環境で動作します。

86. これは必ず確認しておきましょう
最新のブラウザー
Internet Explorer 10∼
Firefox最新版
Chrome最新版
Safari最新版
をお使いください。

87. これは必ず確認しておきましょう
IE6 8は非対応です！
※編集できません

88. 画面デモ

89. 年末年始のお休みに
触ってみよう
concrete5

90. さいごまでお付き合いいただきまして
ありがとうございました！
株式会社翠灯舎 Suitosha Inc.
〒604-8226
京都市中京区西錦小路町263番地
NAUTICA BLDG.C102号室
TEL：075-744-6581
FAX：075-744-6582