狠狠撸

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

紹介
Katz (上野勝之)
コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzueno
Blog: ja.katzueno.com

コンなご
concrete5 名古屋ユーザーグループ

コンなご
● 直近イベントの紹介
o オープンソースカンファレンス名古屋
o 7/5 (土) @ 名古屋国際センター
? セミナー @ 10時
? ブース展示 10?18時
? 詳細はこちら
? ブースの手伝いも募集

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

● 参加方法
o Doorkeeper
? 次回告知?参加表明は下記コミュニティーに
? concrete5nagoya.doorkeeper.jp
o Facebook Group
? 勉強会までのいろんな議論はこちらに
? facebook.com/groups/concrete5nagoya/
コンなご

本日のアジェンダ
● 20分：デモ環境の確認＆自己紹介
● 10分：Designer Content の紹介
● 60分：ワークショップ：デモサイトで実際に制作
● 10分：Designer Content Pro の紹介
● 60分：ワークショップ：ゼロから作ろう！
● 30分：次回の会員サイトについて

本日のアジェンダ
● 20分：デモ環境の確認＆自己紹介 [まずは！]

今日の内容
Designer Content について
「concrete5 公式活用ガイド
ブック」にも書いてありま
す！

Designer Content とは
● concrete5 で、PHP の知識がなくてもオリ
ジナルブロックを作成できるパッケージ

● 定型的な表現をしたい場合に最適
● 例）著作ブロック

● 編集画面→

● 編集画面→
● テキストフィールドで入力
するので、記事ブロックで
わざわざレイアウトを調整
する必要がない！

● 他に考えられる用途
o 見出し専用ブロック
o レストランメニュー
o 製品紹介
o 定型レイアウト
o (勉強会参加者だけに実際のブロックを披露)

● 便利だけど???
● ブロック作成はHTML + CSS の知識は必要

● 便利だけど??

レイアウト調整のために、<div> や class を使っ
て囲んだりする必要があるので、それが分かる
知識が必要。コーディングが出来る友だちをつ
くろう！

● 場合によってはPHP初級の知識が
必要な場合も

必要な場合も
o セレクトボックスを使う場合
o 条件（例：画像がなかった場合）で表現を変えたい
場合

必要な場合も
o → というか
PHPの初級レベルの知識が
あると最強！

● デモ：PHP初級レベルがあって、作った時
● 「セレクトボックス」
o ちょっと公開できません?(￣ー￣)???
o 画像と画像キャプション、テキストの回りこみを綺
麗にするブロックです
o 選択項目で、画像を左や右に回りこませれます

● 一旦作ると構造を修正できない！
o 修正したい場合...

? 1. 最初から作り直し

? 2. 直接コードを書き直し
● デザインやコーディングの修正：FTPで直接行う
● それ以外：PHP 中級と concrete5 ブロック開発の知識が必
要

要
まあ、view.php の CSS とかHTML 修正をするのは簡単なので???。

要
まあ、view.php の CSS とかHTML 修正をするのは簡単なので???。
まあ、なんとかなるべ

● 1要素 = 1ブロックなので、繰り返すコンテ
ンツは出来ない
o 例：スライドショー
o 例：レストラン価格表（リスト一覧）

● 1要素 = 1ブロックなので、繰り返すコンテ
ンツは出来ない
o 例：スライドショー
o 例：レストラン価格表（リスト一覧）
DCP があるよ (￣ー￣)???
詳しくは後述

● 注意！使わなくなった時
● アンインストールちゃんとやろう！
o きちんと concrete5 のシステムからアンインストー
ルしよう
o 場所：管理画面 - ブロックタイプ - 作ったブロック -
削除
o それから FTP でファイルを削除！

DC (Designer Content) の基本

● 仕組みを理解する
o STEP 1: 管理画面でブロックを作成

● 仕組みを理解する
o STEP 2 (自動): /blocks/ にブロックが追加される
o STEP 3: あとは他のブロックと同じように追加?編
集ができる

DC: 実際にやってみようぜ

● 「concrete5 公式活用ガイドブック」
サンプルデータを使います

o STEP 0: データを設定
? book.concrete5-japan.org からダウンロード
? ダウンロードページにある YouTube動画にした
がってテストサイトを実装
? Designer Content をインストール
o 勉強会参加者はデータを提供

o STEP1: 既存のデモ用ブロック「ランチメニュー
用」DCブロックを試してみよう

o STEP2: 自分で作ってみよう！
? コーディングサンプルから「ランチメニュー
用」ブロックを自分で作成して見よう
? [/mockup/lunch.html] の81-91行目を DC ブロッ
クに当てはめてみよう！

おつかれさまでした?:15分休憩

Designer Content Pro の紹介

Designer Content Pro とは
● Designer Content のプロ版

o http://www.concrete5.org/marketplace/addons/desig
ner-content-pro/

ner-content-pro/
o $50 の有料ブロック

ner-content-pro/
o 繰り返しコンテンツに最適

ner-content-pro/
o 繰り返しコンテンツに最適
o あとから構造の修正編集ができる！

● DCP の使える用途
o 要素が繰り返されるもの
? 構造が複雑なスライドショー
? レストランのメニュー価格表
? 製品?サービスの仕様表
? リンクリスト

o デモ

● DCP の注意 (DC と比べると)
o 作られるデータの場所に注意
? 2箇所でファイルが作られる
● /blocks/
● /packages/designer_content_pro_blocks/blocks/
o ファイルをバックアップする時は、Package フォルダの
ファイルも忘れずに！

o view.php の編集が必要
? DC は管理画面で view.php をある程度作成可能
? ただし DCP は view.php をゼロから設計が必要
? HTML+CSS の知識は必要

o view.php の編集が必要
? DC は管理画面で view.php をある程度作成可能
? ただし DCP は view.php をゼロから設計が必要
? HTML+CSS の知識は必要
でも、マスターすると
ハマるよ！

o 詳しくは Hissy の説明を
? Designer Content Proアドオンの紹介
? Designer Content Pro フロントエンドAPI 邦訳
? Designer Content Proで作るナビゲーションブ
ロック

一回ゼロから作ってみる？
DC or DCP

ゼロから作ってみよう
● 身近な事例で作ってみよう
o 設計
? 要素
? DC or DCP?
o コーディング
o 実装

ゼロから作ってみよう
● Thinking time!

おつカレー様でした

今日の内容
Designer Content について
「concrete5 公式活用ガイド
ブック」にも書いてありま
す！
(DCP は Hissy のブログ記事
参照)

次回：会員サイトを作ろう

会員サイトを作ろう
● 範囲が広すぎるので、次回の会員サイトの
テーマと仕様を決めたい
o 会社の製品サポートサイト？
o イントラサイト？
o コミュニティサイト？

おわり：おつカレー

狠狠撸

concrete5 の超便利アドオン Designer Content を極める！

More Related Content

What's hot (20)

Similar to concrete5 の超便利アドオン Designer Content を極める！ (19)

More from Katz Ueno (20)

concrete5 の超便利アドオン Designer Content を極める！