More Related Content Similar to concrete5 の超便利アドオン Designer Content を極める! (20) concrete5 の超便利アドオン Designer Content を極める!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
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分:次回の会員サイトについて
9. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
今日の内容
Designer Content について
「concrete5 公式活用ガイド
ブック」にも書いてありま
す!
10. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● concrete5 で、PHP の知識がなくてもオリ
ジナルブロックを作成できるパッケージ
11. 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 でファイルを削除!
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: あとは他のブロックと同じように追加・編
集ができる
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 ブロッ
クに当てはめてみよう!
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 要素が繰り返されるもの
構造が複雑なスライドショー
レストランのメニュー価格表
製品・サービスの仕様表
リンクリスト
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で作るナビゲーションブ
ロック
55. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
ゼロから作ってみよう
● 身近な事例で作ってみよう
o 設計
要素
DC or DCP?
o コーディング
o 実装
58. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
今日の内容
Designer Content について
「concrete5 公式活用ガイド
ブック」にも書いてありま
す!
(DCP は Hissy のブログ記事
参照)
60. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
会員サイトを作ろう
● 範囲が広すぎるので、次回の会員サイトの
テーマと仕様を決めたい
o 会社の製品サポートサイト?
o イントラサイト?
o コミュニティサイト?
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 名古屋 ユーザーグループ
66. 2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
紹介
Katz (上野勝之)
コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzueno
Blog: ja.katzueno.com