concrete5 CMS での必須アドオン Designer Content の実践セミナーと Designer Content Pro のちょっとの解説。 2014/6/22 (日) に開催された第35回 コンなご (concrete5 名古屋ユーザーグループ) 勉強会のセミナー資料です。

1. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content
を極める
2014/6/22 (日) 第35回 コンなご勉強会
@ ベースキャンプ名古屋

2. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
紹介
Katz (上野勝之)
コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzueno
Blog: ja.katzueno.com

3. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ

4. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
● 直近イベントの紹介
o オープンソースカンファレンス名古屋
o 7/5 (土) @ 名古屋国際センター
 セミナー @ 10時
 ブース展示 10〜18時
 詳細はこちら
 ブースの手伝いも募集

5. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
● 定期イベントについて
o concrete5 の日
 自習 @ ベースキャンプ名古屋
 だいたい毎月第2水曜日(?)
 次回： 2014/7/16 (水) 今回は第3水曜日
o 勉強会
 セミナー形式 @ ベースキャンプ名古屋
 だいたい第4土曜日(?)
 次回：2014/7/26 (土)「会員サイトを作ろう」

6. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
● 参加方法
o Doorkeeper
 次回告知・参加表明は下記コミュニティーに
 concrete5nagoya.doorkeeper.jp
o Facebook Group
 勉強会までのいろんな議論はこちらに
 facebook.com/groups/concrete5nagoya/
コンなご
concrete5 名古屋 ユーザーグループ

7. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
本日のアジェンダ
● 20分：デモ環境の確認＆自己紹介
● 10分：Designer Content の紹介
● 60分：ワークショップ：デモサイトで実際に制作
● 10分：Designer Content Pro の紹介
● 60分：ワークショップ：ゼロから作ろう！
● 30分：次回の会員サイトについて

8. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
本日のアジェンダ
● 20分：デモ環境の確認＆自己紹介 [まずは！]

9. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
今日の内容
Designer Content について
「concrete5 公式活用ガイド
ブック」にも書いてありま
す！

10. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● concrete5 で、PHP の知識がなくてもオリ
ジナルブロックを作成できるパッケージ

11. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 定型的な表現をしたい場合に最適
● 例）著作ブロック

12. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 例）著作ブロック
● 編集画面→

13. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 例）著作ブロック
● 編集画面→
● テキストフィールドで入力
するので、記事ブロックで
わざわざレイアウトを調整
する必要がない！

14. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 他に考えられる用途
o 見出し専用ブロック
o レストランメニュー
o 製品紹介
o 定型レイアウト
o (勉強会参加者だけに実際のブロックを披露)

15. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● ブロック作成はHTML + CSS の知識は必要

16. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・
● ブロック作成はHTML + CSS の知識は必要

17. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● ブロック作成はHTML + CSS の知識は必要

18. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● ブロック作成はHTML + CSS の知識は必要
レイアウト調整のために、<div> や class を使っ
て囲んだりする必要があるので、それが分かる
知識が必要。コーディングが出来る友だちをつ
くろう！

19. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 場合によってはPHP初級の知識が
必要な場合も

20. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 場合によってはPHP初級の知識が
必要な場合も
o セレクトボックスを使う場合
o 条件（例：画像がなかった場合）で表現を変えたい
場合

21. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 場合によってはPHP初級の知識が
必要な場合も
o → というか
PHPの初級レベルの知識が
あると最強！

22. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● デモ：PHP初級レベルがあって、作った時
● 「セレクトボックス」
o ちょっと公開できません〜(￣ー￣)ﾆﾔﾘ
o 画像と画像キャプション、テキストの回りこみを綺
麗にするブロックです
o 選択項目で、画像を左や右に回りこませれます

23. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない！
o 修正したい場合...

24. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない！
o 修正したい場合...
 1. 最初から作り直し

25. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない！
o 修正したい場合...
 1. 最初から作り直し
 2. 直接コードを書き直し
● デザインやコーディングの修正：FTPで直接行う
● それ以外：PHP 中級と concrete5 ブロック開発の知識が必
要

26. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない！
o 修正したい場合...
 1. 最初から作り直し
 2. 直接コードを書き直し
● デザインやコーディングの修正：FTPで直接行う
● それ以外：PHP 中級と concrete5 ブロック開発の知識が必
要
まあ、view.php の CSS とかHTML 修正をするのは簡単なので・・・。

27. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない！
o 修正したい場合...
 1. 最初から作り直し
 2. 直接コードを書き直し
● デザインやコーディングの修正：FTPで直接行う
● それ以外：PHP 中級と concrete5 ブロック開発の知識が必
要
まあ、view.php の CSS とかHTML 修正をするのは簡単なので・・・。
まあ、なんとかなるべ

28. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 1要素 = 1ブロックなので、繰り返すコンテ
ンツは出来ない
o 例：スライドショー
o 例：レストラン価格表（リスト一覧）

29. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 1要素 = 1ブロックなので、繰り返すコンテ
ンツは出来ない
o 例：スライドショー
o 例：レストラン価格表（リスト一覧）
DCP があるよ (￣ー￣)ﾆﾔﾘ
詳しくは後述

30. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 注意！使わなくなった時
● アンインストールちゃんとやろう！
o きちんと concrete5 のシステムからアンインストー
ルしよう
o 場所：管理画面 - ブロックタイプ - 作ったブロック -
削除
o それから FTP でファイルを削除！

31. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC (Designer Content) の基本

32. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC (Designer Content) の基本
● 仕組みを理解する
o STEP 1: 管理画面でブロックを作成

33. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC (Designer Content) の基本
● 仕組みを理解する
o STEP 1: 管理画面でブロックを作成

34. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC (Designer Content) の基本
● 仕組みを理解する
o STEP 2 (自動): /blocks/ にブロックが追加される
o STEP 3: あとは他のブロックと同じように追加・編
集ができる

35. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ

36. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ
● 「concrete5 公式活用ガイドブック」
サンプルデータを使います

37. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ
● 「concrete5 公式活用ガイドブック」
サンプルデータを使います
o STEP 0: データを設定
 book.concrete5-japan.org からダウンロード
 ダウンロードページにある YouTube動画にした
がってテストサイトを実装
 Designer Content をインストール
o 勉強会参加者はデータを提供

38. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ
● 「concrete5 公式活用ガイドブック」
サンプルデータを使います
o STEP1: 既存のデモ用ブロック「ランチメニュー
用」DCブロックを試してみよう

39. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ
● 「concrete5 公式活用ガイドブック」
サンプルデータを使います
o STEP2: 自分で作ってみよう！
 コーディングサンプルから「ランチメニュー
用」ブロックを自分で作成して見よう
 [/mockup/lunch.html] の81-91行目を DC ブロッ
クに当てはめてみよう！

40. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
おつかれさまでした〜:15分休憩

41. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro の紹介

42. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版

43. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版

44. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
o http://www.concrete5.org/marketplace/addons/desig
ner-content-pro/

45. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
o http://www.concrete5.org/marketplace/addons/desig
ner-content-pro/
o $50 の有料ブロック

46. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
o http://www.concrete5.org/marketplace/addons/desig
ner-content-pro/
o $50 の有料ブロック
o 繰り返しコンテンツに最適

47. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
o http://www.concrete5.org/marketplace/addons/desig
ner-content-pro/
o $50 の有料ブロック
o 繰り返しコンテンツに最適
o あとから構造の修正編集ができる！

48. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の使える用途
o 要素が繰り返されるもの
 構造が複雑なスライドショー
 レストランのメニュー価格表
 製品・サービスの仕様表
 リンクリスト

49. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の使える用途
o デモ

50. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の注意 (DC と比べると)
o 作られるデータの場所に注意
 2箇所でファイルが作られる
● /blocks/
● /packages/designer_content_pro_blocks/blocks/
o ファイルをバックアップする時は、Package フォルダの
ファイルも忘れずに！

51. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の注意 (DC と比べると)
o view.php の編集が必要
 DC は管理画面で view.php をある程度作成可能
 ただし DCP は view.php をゼロから設計が必要
 HTML+CSS の知識は必要

52. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の注意 (DC と比べると)
o view.php の編集が必要
 DC は管理画面で view.php をある程度作成可能
 ただし DCP は view.php をゼロから設計が必要
 HTML+CSS の知識は必要
でも、マスターすると
ハマるよ！

53. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の使える用途
o 詳しくは Hissy の説明を
 Designer Content Proアドオンの紹介
 Designer Content Pro フロントエンドAPI 邦訳
 Designer Content Proで作るナビゲーションブ
ロック

54. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
一回ゼロから作ってみる？
DC or DCP

55. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
ゼロから作ってみよう
● 身近な事例で作ってみよう
o 設計
 要素
 DC or DCP?
o コーディング
o 実装

56. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
ゼロから作ってみよう
● Thinking time!

57. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
おつカレー様でした

58. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
今日の内容
Designer Content について
「concrete5 公式活用ガイド
ブック」にも書いてありま
す！
(DCP は Hissy のブログ記事
参照)

59. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
次回：会員サイトを作ろう

60. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
会員サイトを作ろう
● 範囲が広すぎるので、次回の会員サイトの
テーマと仕様を決めたい
o 会社の製品サポートサイト？
o イントラサイト？
o コミュニティサイト？

61. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ

62. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
● 直近イベントの紹介
o オープンソースカンファレンス名古屋
o 7/5 (土) @ 名古屋国際センター
 セミナー @ 10時
 ブース展示 10〜18時
 詳細はこちら
 ブースの手伝いも募集

63. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
● 定期イベントについて
o concrete5 の日
 自習 @ ベースキャンプ名古屋
 だいたい毎月第2水曜日(?)
 次回： 2014/7/16 (水) 今回は第3水曜日
o 勉強会
 セミナー形式 @ ベースキャンプ名古屋
 だいたい第4土曜日(?)
 次回：2014/7/26 (土)「会員サイトを作ろう」

64. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
● 参加方法
o Doorkeeper
 次回告知・参加表明は下記コミュニティーに
 concrete5nagoya.doorkeeper.jp
o Facebook Group
 勉強会までのいろんな議論はこちらに
 facebook.com/groups/concrete5nagoya/
コンなご
concrete5 名古屋 ユーザーグループ

65. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
おわり：おつカレー

66. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
紹介
Katz (上野勝之)
コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzueno
Blog: ja.katzueno.com