仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー

2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー
1

2

仕様書から見る concrete5 サイトの作り方〜
WordPress サイト制作とこんなに異なるワークフロー
2015/2/19 (木) @ CPI x CSS Nite x 優クリエイト「After Dark」（19）
3

本日の目次
● 自己紹介
● 最初に
● WordPress と concrete5 のサイト要素の違い
● 作業ステップの比較
● concrete5 開発ステップ
● 仕様書を作ろう！
4

自己紹介
5

Katz Ueno (上野勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
コンクリートファイブジャパン株式会社
Chief Communciations Officer
http://concrete5.co.jp
名古屋で concrete5 CMS の普及
6

2009年 - concrete5
日本コミュニティを立ち上げました
concrete5-japan.org
7

全国各地に普及活動
青森・仙台・東京・千葉・静
岡・浜松・名古屋・京都・大
阪・奈良・広島・福岡でUG
が立ち上がる
詳細は
concrete5-japan.org/community/local/
8

共著の紹介
「concrete5 公式活用ガイドブック」
買ってねー
● マイナビ
● 3542円
● 書籍 & 電子書籍版
9

● 1980年三重県四日市市生まれ
● アメリカに留学→映画制作 →
雑誌編集 → Web に
● TOEIC 満点
10

concrete5 での構築事例
11

WordFes Nagoya 2014
副実行委員長
12

WordPress 公式プラグイン 2本開発
Ustream Status
Twitcasting Status
13

WordPress 事例
14

他にも様々な CMS の仕事の経験
● MovableType
● Mambot
● Joomla
● EC Cube
● Magento
● OpenPNE
15

今回のセミナー対象
16

今日のセミナーの対象について
• WordPress 構築経験有りな方
o デザイン、コーディングが理解できる
o WordPress テーマを自作したことがある
o カスタム投稿タイプやタクソノミーの知識がある
• concrete5 は使ったことがないが興味がある方
17

分かりやすい
コンセプトの違い
concrete5 x WordPress
18

WordPress
19

WordPress
= 左脳な人向け CMS
20

concrete5
21

concrete5
= 右脳な人向け CMS
22

左脳と右脳の違い？
コンテンツ入力時
23

左脳と右脳の違い？
コンテンツ入力時
● WordPress = 管理画面で入力する場所が決まっている
● concrete5 = 管理画面が無く自由に組み合わせる
24

左脳な人向け CMS - WordPress とは
● 更新する場所が決まっている
● = マニュアルが作りやすい
o 例:) 管理ページで、「ニュース」カスタム投稿タイプで、記事を作成
したら、ニュースの記事が作られる
● 固定したフォーマットのものを大量生産するのに適したCMS
● マニュアルや管理画面を作るのが大変だが、その後が楽
● 上手く行けば間違いなく確実にページの更新ができる
25

右脳な人向け CMS - concrete5 とは
● 管理画面とページを行き来しない
● 決められたフォーマットばかりのコンテンツ入力は苦手
● ページごとにちょっと違う変更を入れたい
● キャンペーンや特集サイトなど柔軟な表現力がほしい
● 「ブロック」を積み重ねるというパズルが苦手な人はとっつきにくい
26

右脳な人向け CMS - concrete5 とは
パズルが苦手な人?
● 例：ブログを作るには、下記のブロックをページに配置
o ページの中に設置するブロックは何を設置するか考えられるか
 「タイトル表示」ブロック
 「日付表示」ブロック
 「本文」ブロック
 「日付ナビ」ブロック
 「コメント」ブロック
● 上記組み合わせを考えれない人は concrete5 には向かない
27

2つの CMS の要素の違い
WordPress x concrete5
28

WordPress の要素
29

WordPress の要素
30

WordPress の要素
● ページ (タイトルと本文)
31

WordPress の要素
● カテゴリ、カスタム投稿タイプ
32

WordPress の要素
● ウィジェット
33

WordPress の要素
● カスタムフィールド、カスタムタクソノミー
34

WordPress の要素
● プラグイン
35

WordPress の要素
● プラグイン
● テーマ
36

concrete5 の要素
37

concrete5 の要素
● ブロック (全く新しいコンセプト)
38

concrete5 の要素
● ブロック (全く新しいコンセプト)
o ページの中に配置する
o 記事ブロック、画像ブロック、
スライドショーブロック等
o レゴブロックのように積み重ねていきます
39

concrete5 の要素
● ページタイプ (全く新しいコンセプト)
40

concrete5 の要素
o (強引に比較するなら) カスタム投稿タイプ
o ページの種類を決めるもの
o よく作ってるページタイプの例：
トップ、汎用一覧、汎用詳細、ニュース一覧、ニュ
ース詳細、製品一覧、製品詳細
41

concrete5 の要素
o サイトのページを整理しやすくするため
o デフォルトで設置するブロックを決められる
o 例）ニュース詳細ページタイプ
 → タイトル、本文用記事ブロック
o 例）製品紹介ページタイプ
 → 画像、仕様テーブル用記事ブロック
42

concrete5 の要素
● テーマ
o ページの枠
o ブロックを設置する「エリア」の位置を決める
o 昔のウェブな方へは：Dreamweaver + Contribute の
DW 部分が concrete5 になったような感じ
o ページテンプレートはサイトマップ上で自由に使え
ます。特定のカテゴリーやカスタム投稿タイプのみ
でしか使えないという不自由さはありません
43

concrete5 の要素
● 他にも WordPress には無い機能がデフォルトで搭載
o ページ属性
o 会員管理
o 権限
o 承認フロー
プラグインを探さなくて良い！
44

WordPress と concrete5
の構築ステップ比較
45

WordPress 構築ステップ
46

47

1. サイトマップ作成
48

2. プラグイン作成 or インストール
49

3. デザイン or テンプレート購入
50

4. コーディング
51

5. テーマ作成
52

5. テーマ作成
6. テーマ修正
53

5. テーマ作成
6. テーマ修正
7. function.php 追加 and/or 修正
54

5. テーマ作成
6. テーマ修正
7. function.php 追加 and/or 修正
8. コンテンツ流し込み
55

concrete5 構築ステップ
56

57

58

59

3. アドオンインストール
60

61

5. テーマ作成
62

5. テーマ作成
6. ページ属性作成
63

5. テーマ作成
7. ページタイプ作成
64

5. テーマ作成
8. カスタムテンプレート作成
65

5. テーマ作成
8. カスタムテンプレート作成
9. コンテンツ流し込み
66

詳細の紹介
WordPress 経験者向けの concrete5 サイト作成方法
67

concrete5 構築ステップの詳細の目的
68

● concrete5 構築ステップを学ぼう
69

● 学べば concrete5 の仕様書を設計できる！
70

● concrete5 仕様書テンプレート
http://bit.ly/c5spectemplates
71

● concrete5 仕様書テンプレート
● Katz が実際に仕事で使っているテンプレート
● マスターすれば仕事ができる！
72

仕様書テンプレートを作るSTEP
ノウハウを大公開！
73

STEP1:
サイト企画 & ページタイプを決める
74

STEP1: サイト企画 & ページタイプ
CMS だったとしても、静的HTMLサイトでも決めないといけない基本！
● サイトマップ
● 中身のコンテンツ
本当は一番重要だけど、割愛します。詳しくはディレクションや企画の勉強会で！
CMS 上でのサイトマップではなく、一般的なサイトの企画やディレクションです
75

サイトマップを決めてから
● サイトマップを元に、
concrete5 で作成するページタイプを決める
76

サイトマップを決めてから
● サイトマップを元に、
concrete5 で作成するページタイプを決める
77

STEP2:
デザイン
78

STEP2: デザイン
● サイトをデザインする
● 枠 - エリア - ブロックを意識してデザインする
79

STEP2: デザイン
● サイトをデザインする
● 枠 - エリア - ブロックを意識してデザインする
80

STEP3:
アドオンインストール
81

STEP3: アドオンインストール
きちんとセキュリティチェックなどの審査されたアドオンをマーケットプレイ
スからインストール
Katz おすすめのアドオン (仕事でほぼ全てのサイトで使ってる)
● Designer Content
● Designer Content Pro
● Manual Nav
● Internationalization
● Page List Plus
● Tomoac Form
● Formidable
● Where is my block
82

STEP4:
コーディング
83

STEP4: コーディング
● テーマ - エリア - ブロックという
枠を考えたコーディングを心がける
(CSS のクラス付、HTML 構造を考える)
● コーディングガイドラインを作成し公開します (宣言)
84

WordPress 経験者が concrete5 サイトのコーディングに心がけること
85

WordPress 経験者が concrete5 サイトのコーディングに心がけること
● 編集ツールバーが上部に表示されたりするので、ページ全体を1つの
wrapper クラスで囲む
● z-indexは 5 以降を使用する
● クラスの接頭語に「ccm-」を使用しない
→ 管理画面系で使っているクラスです
● CSS で id を使わない
● ファイルのアップロード位置に依存したコーディングをしない
86

【続】WordPress 経験者が concrete5 サイトのコーディングに心がけること
● 繰り返し要素を考慮する
(CSS のクラス名で section-1, section-2 など、特別な順番が必要なクラス
名付けを極力しない)
● jQuery や Bootstrap を使用する時は concrete5 が使用しているものに合わ
せたほうがいいかも
● 使用 jQueryバージョン
○ concrete5.6.3 は 1.7.2
○ concrete5.7.3 は 1.11.1
● 使用 Bootstrap バージョン
○ concrete5.6.3 は 2.0.3
○ concrete5.7.3 は 3.1.1
87

● <body> タグ
o ページ毎に別々 class を付けない。（やってもトップページのみ）→
ブロックが特定のページにしか使えなくなるのでブロックのリサイク
ルがしづらくなります。
o position 指定をしない
88

● 記事ブロック部分
o TinyMCE か Redactor という JS ライブラリを使用して入力するので
場合、極力、記事部分のタグにクラスを付けなくても装飾されるよう
にタイポグラフィー系のCSSを設定する (h, p, a, table, blockquote, i,
b, strong, and etc)
o よくやる手：
「.wygiwys h1」のように親クラスを作って、書くタイポグラフィー
系のタグに CSS を割り当てる
89

STEP5:
concrete5 テーマの作成
90

STEP5: concrete5 テーマの作成
● 詳細はクイックリファレンスを参照
● テーマはページ (HTML) の枠
● ページの中で、どこが編集可能な領域である
「エリア」なのかを指定
91

テーマの設置先
● テーマフォルダに自分のテーマを作成
o 5.6系は /themes/[テーマハンドル]/
o 5.7系は /application/themes/[テーマハンドル]/
※ 配布用のパッケージテーマは別の場所に配置
92

最低限必要なファイル
1. description.txt
2. thumbnail.png
3. default.php
4. view.php (5.7 より必須)
93

1. description.txt
WordPress の style.css の冒頭部分のようなもの。
UTF-8 のエンコーディングで作成。
● 1行目：テーマのタイトル
● 2行目：テーマの説明
94

2. thumbnail.png
テーマ一覧で使用するPNG画像
● 5.6.x 以前は 120x90ピクセル
● 5.7.x 以降は 360x270ピクセル
95

3. default.php
● WordPress でいう「index.php」
● HTMLコーディングに、数行の PHP 文を入れるだけで完成。
● WP Query や Loop などを書く必要は一切無し
96

default.php で必要最低限覚えるコード
覚えなきゃいけないPHPコードは
97

覚えなきゃいけないPHPコードは
11行だけ！ (しかもほぼコピペのみ)
98

1. セキュリティ対策用PHP (コピペ)
PHP全てのファイルに最初に記述する。
おまじないコード。コピペのみ。
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
99

2. テーマパス
テーマフォルダを自動的に書きだすPHP文。テーマで使うCSSファイルや画像
ファイルをテーマフォルダ内に保存して読み込むときに使う。
<?php echo $this->getThemePath(); ?>
100

2. テーマパス使い方の例
<link rel="stylesheet"
href="<?php echo $this->getThemePath(); ?>/main.css">
101

3. headタグ (コピペ)
WordPress でいうところの <?php wp_head(); ?>で<head> の中に配置。テ
ーマの CSS や JS ファイルを読み込む前に設置
<?php Loader::element('header_required'); ?>
102

4. エリアを指定
ブロックを自由に設置できるエリアを指定します。
<?php
$a = new Area('【エリアの名前】');
$a->display($c);
?>
103

5. グローバルエリアを指定
サイト全体に同じブロックを設置できるグローバルエリアを指定します。
<?php
$a = new GlobalArea(‘【グローバルエリアの名前】');
$a->display();
?>
104

エリアとグローバルエリアの注意点
同じ名前でエリア名とグローバルエリア名を作らない。不具合の元になりま
す！
105

6. フッターエリアを指定
いわいる <?php wp_footer(); ?>
<?php Loader::element('footer_required'); ?>
106

4. view.php
● 「シングルページ」という concrete5 のシステム関連ページで使うための
テーマファイル
● 例：ログイン、404、403 ページ等
107

view.php で必要最低限覚えるコード
7. ログイン等のページ (シングルページ)
メインエリアと同等部分の宣言を、エリアではなくて下記の命令を入れる
<?php
Loader::element('system_errors', array('error' =>
$error));
print $innerContent;
?>
108

たった11行の PHP コードを
覚えるだけで、concrete5
テーマが作れます
簡単でしょ？
ただレスポンシブ対応で、CSS や JS との
バッティングに気をつけないと行けないです
109

おまけ：知ってて得すること
A. 追加のテンプレートファイルを作成する
ページテンプレート (5.6 ではページタイプ)の半角英数字と同じ名前の半角英
数字のファイルを作成してテーマを出し分け
例
home.php
news.php
あとは、コーディングを調整して出力するレイアウトを変えるだけ。
110

B. 共通の部分を別でテンプレートファイルとして分離する
WordPress における
concrete5 では、<?php $this->inc(‘○○○’);?> を使います。
テーマフォルダの中に「elements」というフォルダを作ってその中に入れるのが慣習
header.php を読み込むための <?php get_header(); ?>
footer.php を読み込むための <?php get_footer(); ?>
111

B. 共通の部分を別でテンプレートファイルとして分離する
例：
ファイル保存場所テーマ上
/[themeフォルダ]/elements/header.php <?php $this->inc('elements/header.php');?>
/[themeフォルダ]/elements/footer.php <?php $this->inc('elements/footer.php');?>
112

テーマ作成時に参考になるブログなど
WordPress のように、PHPを使いこなしてページ名や、ページ属性を直接表
示させたりする方法もあります。
• 【完全保存版】 concrete5 テーマスニペット集
• concrete5のテーマからページ関連の情報を取得するサンプル
• concrete5の各属性タイプの情報を表示するコード集
• concrete5の選択属性の値ごとに違うclassを割り当てたい (5.6.3~)
113

STEP6:
ページ属性の作成
114

STEP6: ページ属性の作成
• WordPress でいういわいるカスタムフィールドやカスタムタクソノミー
• concrete5 はカスタムフィールドのプラグインが存在しません
• というか WordPress のプラグイン機能が既に本体に実装。
• どのプラグインを使うのか迷わなくて済む！
• チェック、テキスト、複数行テキスト、ファイル、画像、選択肢、日付が
選べます
• 例：
イベント告知ページの、イベント種別やイベント開催日、OGP画像など
115

STEP7:
管理画面でページタイプを作成
116

STEP7: 管理画面でページタイプを作成
• 管理画面より、ページタイプを作成します。
手順
1. ページタイプを作成
2. デフォルトで使用するページ属性を選択
3. 「デフォルト」で設置するブロックを設置
4. 仕様書に各ページタイプの各エリアやグローバルエリアやスタックに設置
予定なブロックを書き込んでいく
117

STEP7: 管理画面でページタイプを作成
• 管理画面より、ページタイプを作成します。
手順
1. ページタイプを作成
2. デフォルトで使用するページ属性を選択
3. 「デフォルト」で設置するブロックを設置
4. 仕様書に各ページタイプの各エリアやグローバルエリアやスタックに設置
予定なブロックを書き込んでいく
118

STEP8:
ブロックの
カスタムテンプレートを作成
119

STEP8: ブロックのカスタムテンプレート作成
ブロックのカスタムテンプレートを作ります。
Designer Content でカスタムブロックをすごく簡単に作成できますが、今回は割愛。
120

カスタムテンプレートとは
WordPress では Loop や WP_Query() をカスタマイズしていくような認識。
concrete5 のブロックが出力するコーディングを簡単にカスタマイズしオプシ
ョンを増やしていける方法です。
例：
ニュース一覧用のページリストブロックに日付の属性を加える
グローバルナビ用のオートナビブロックに独自のクラスを加える
121

カスタムテンプレート作成方法
チュートリアル：
ブロック修正の仕方とカスタムテンプレートの仕組み
122

1. ブロックの表示部分を司る View ファイルを元のブロックからコピー
o /concrete/blocks/[ブロック]/view.php
2. カスタムテンプレートを作成
o [5.6 の場合] /blocks/[ブロック]/templates/[任意の名前].php
o [5.7 から] /application/blocks/[ブロック]/tempates/[任意の名前].php
123

3. カスタムテンプレートの中身を編集
• PHP 初級程度の知識が必要
• 場合によってはHTMLの知識のみで改変可能
124

変哲もない <ul><li> な
ナビゲーションに
クラスを付けて
ナビゲーションっぽく
表示する例
125

テーマ作成時に参考になるブログなど（再掲）
WordPress のように、PHPを使いこなしてページ名や、ページ属性を直接表
示させたりする方法もあります。
• 【完全保存版】 concrete5 テーマスニペット集
• concrete5のテーマからページ関連の情報を取得するサンプル
• concrete5の各属性タイプの情報を表示するコード集
• concrete5の選択属性の値ごとに違うclassを割り当てたい (5.6.3~)
126

仕様書サンプル
実際のサンプルサイトと仕様書
127

• 2/8 (日) CMS Sunday CMS プロレス Shibuya WGP
128

129

http://dogen.concrete5japan.net
130

• 仕様書テンプレート
日々最新版に更新していきます！
• 道玄坂大学仕様書
https://drive.google.com/open?id=19vit0DOB1XmVLzhUrodK4RtAU8Jpiea3mJ
Gicfa_GlM&authuser=0
(リンクがあとで変わるかも)
131

いろいろ参考文献
132

いろいろ参考文献
• 一番分かりやすいWordPressとconcrete5のカスタマイズ
方法の違い
• 2015年注目の concrete5 関連スライド資料
• 5.6か、5.7か。それが問題だ〜2015年、これから
concrete5を始める皆さんへ〜
133

134

Content Management is Human Rights
135

ありがとうございました
コンクリートファイブジャパン株式会社
info@concrete5.co.jp
03-4513-8599
136

仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー

Similar to 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー (17)

More from Katz Ueno

More from Katz Ueno (20)