2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content
を極める
2014/6/22 (日) 第35回 コンなご勉強会
@ ベースキャンプ名古屋
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
紹介
Katz (上野勝之)
コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzueno
Blog: ja.katzueno.com
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
● 直近イベントの紹介
o オープンソースカンファレンス名古屋
o 7/5 (土) @ 名古屋国際センター
 セミナー @ 10時
 ブース展示 10〜18時
 詳細はこちら
 ブースの手伝いも募集
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
● 定期イベントについて
o concrete5 の日
 自習 @ ベースキャンプ名古屋
 だいたい毎月第2水曜日(?)
 次回: 2014/7/16 (水) 今回は第3水曜日
o 勉強会
 セミナー形式 @ ベースキャンプ名古屋
 だいたい第4土曜日(?)
 次回:2014/7/26 (土)「会員サイトを作ろう」
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
● 参加方法
o Doorkeeper
 次回告知・参加表明は下記コミュニティーに
 concrete5nagoya.doorkeeper.jp
o Facebook Group
 勉強会までのいろんな議論はこちらに
 facebook.com/groups/concrete5nagoya/
コンなご
concrete5 名古屋 ユーザーグループ
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
本日のアジェンダ
● 20分:デモ環境の確認&自己紹介
● 10分:Designer Content の紹介
● 60分:ワークショップ:デモサイトで実際に制作
● 10分:Designer Content Pro の紹介
● 60分:ワークショップ:ゼロから作ろう!
● 30分:次回の会員サイトについて
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
本日のアジェンダ
● 20分:デモ環境の確認&自己紹介 [まずは!]
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
今日の内容
Designer Content について
「concrete5 公式活用ガイド
ブック」にも書いてありま
す!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● concrete5 で、PHP の知識がなくてもオリ
ジナルブロックを作成できるパッケージ
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 定型的な表現をしたい場合に最適
● 例)著作ブロック
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 例)著作ブロック
● 編集画面→
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 例)著作ブロック
● 編集画面→
● テキストフィールドで入力
するので、記事ブロックで
わざわざレイアウトを調整
する必要がない!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 他に考えられる用途
o 見出し専用ブロック
o レストランメニュー
o 製品紹介
o 定型レイアウト
o (勉強会参加者だけに実際のブロックを披露)
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● ブロック作成はHTML + CSS の知識は必要
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・
● ブロック作成はHTML + CSS の知識は必要
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● ブロック作成はHTML + CSS の知識は必要
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● ブロック作成はHTML + CSS の知識は必要
レイアウト調整のために、<div> や class を使っ
て囲んだりする必要があるので、それが分かる
知識が必要。コーディングが出来る友だちをつ
くろう!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 場合によってはPHP初級の知識が
必要な場合も
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 場合によってはPHP初級の知識が
必要な場合も
o セレクトボックスを使う場合
o 条件(例:画像がなかった場合)で表現を変えたい
場合
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 場合によってはPHP初級の知識が
必要な場合も
o → というか
PHPの初級レベルの知識が
あると最強!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● デモ:PHP初級レベルがあって、作った時
● 「セレクトボックス」
o ちょっと公開できません〜( ̄ー ̄)ニヤリ
o 画像と画像キャプション、テキストの回りこみを綺
麗にするブロックです
o 選択項目で、画像を左や右に回りこませれます
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない!
o 修正したい場合...
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない!
o 修正したい場合...
 1. 最初から作り直し
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない!
o 修正したい場合...
 1. 最初から作り直し
 2. 直接コードを書き直し
● デザインやコーディングの修正:FTPで直接行う
● それ以外:PHP 中級と concrete5 ブロック開発の知識が必
要
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない!
o 修正したい場合...
 1. 最初から作り直し
 2. 直接コードを書き直し
● デザインやコーディングの修正:FTPで直接行う
● それ以外:PHP 中級と concrete5 ブロック開発の知識が必
要
まあ、view.php の CSS とかHTML 修正をするのは簡単なので・・・。
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 一旦作ると構造を修正できない!
o 修正したい場合...
 1. 最初から作り直し
 2. 直接コードを書き直し
● デザインやコーディングの修正:FTPで直接行う
● それ以外:PHP 中級と concrete5 ブロック開発の知識が必
要
まあ、view.php の CSS とかHTML 修正をするのは簡単なので・・・。
まあ、なんとかなるべ
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 1要素 = 1ブロックなので、繰り返すコンテ
ンツは出来ない
o 例:スライドショー
o 例:レストラン価格表(リスト一覧)
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 便利だけど・・・
● 1要素 = 1ブロックなので、繰り返すコンテ
ンツは出来ない
o 例:スライドショー
o 例:レストラン価格表(リスト一覧)
DCP があるよ ( ̄ー ̄)ニヤリ
詳しくは後述
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content とは
● 注意!使わなくなった時
● アンインストールちゃんとやろう!
o きちんと concrete5 のシステムからアンインストー
ルしよう
o 場所:管理画面 - ブロックタイプ - 作ったブロック -
削除
o それから FTP でファイルを削除!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC (Designer Content) の基本
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC (Designer Content) の基本
● 仕組みを理解する
o STEP 1: 管理画面でブロックを作成
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC (Designer Content) の基本
● 仕組みを理解する
o STEP 1: 管理画面でブロックを作成
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC (Designer Content) の基本
● 仕組みを理解する
o STEP 2 (自動): /blocks/ にブロックが追加される
o STEP 3: あとは他のブロックと同じように追加・編
集ができる
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ
● 「concrete5 公式活用ガイドブック」
サンプルデータを使います
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ
● 「concrete5 公式活用ガイドブック」
サンプルデータを使います
o STEP 0: データを設定
 book.concrete5-japan.org からダウンロード
 ダウンロードページにある YouTube動画にした
がってテストサイトを実装
 Designer Content をインストール
o 勉強会参加者はデータを提供
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ
● 「concrete5 公式活用ガイドブック」
サンプルデータを使います
o STEP1: 既存のデモ用ブロック「ランチメニュー
用」DCブロックを試してみよう
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
DC: 実際にやってみようぜ
● 「concrete5 公式活用ガイドブック」
サンプルデータを使います
o STEP2: 自分で作ってみよう!
 コーディングサンプルから「ランチメニュー
用」ブロックを自分で作成して見よう
 [/mockup/lunch.html] の81-91行目を DC ブロッ
クに当てはめてみよう!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
おつかれさまでした〜:15分休憩
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro の紹介
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
o http://www.concrete5.org/marketplace/addons/desig
ner-content-pro/
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
o http://www.concrete5.org/marketplace/addons/desig
ner-content-pro/
o $50 の有料ブロック
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
o http://www.concrete5.org/marketplace/addons/desig
ner-content-pro/
o $50 の有料ブロック
o 繰り返しコンテンツに最適
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● Designer Content のプロ版
o http://www.concrete5.org/marketplace/addons/desig
ner-content-pro/
o $50 の有料ブロック
o 繰り返しコンテンツに最適
o あとから構造の修正編集ができる!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の使える用途
o 要素が繰り返されるもの
 構造が複雑なスライドショー
 レストランのメニュー価格表
 製品・サービスの仕様表
 リンクリスト
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の使える用途
o デモ
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の注意 (DC と比べると)
o 作られるデータの場所に注意
 2箇所でファイルが作られる
● /blocks/
● /packages/designer_content_pro_blocks/blocks/
o ファイルをバックアップする時は、Package フォルダの
ファイルも忘れずに!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の注意 (DC と比べると)
o view.php の編集が必要
 DC は管理画面で view.php をある程度作成可能
 ただし DCP は view.php をゼロから設計が必要
 HTML+CSS の知識は必要
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の注意 (DC と比べると)
o view.php の編集が必要
 DC は管理画面で view.php をある程度作成可能
 ただし DCP は view.php をゼロから設計が必要
 HTML+CSS の知識は必要
でも、マスターすると
ハマるよ!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
Designer Content Pro とは
● DCP の使える用途
o 詳しくは Hissy の説明を
 Designer Content Proアドオンの紹介
 Designer Content Pro フロントエンドAPI 邦訳
 Designer Content Proで作るナビゲーションブ
ロック
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
一回ゼロから作ってみる?
DC or DCP
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
ゼロから作ってみよう
● 身近な事例で作ってみよう
o 設計
 要素
 DC or DCP?
o コーディング
o 実装
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
ゼロから作ってみよう
● Thinking time!
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
おつカレー様でした
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
今日の内容
Designer Content について
「concrete5 公式活用ガイド
ブック」にも書いてありま
す!
(DCP は Hissy のブログ記事
参照)
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
次回:会員サイトを作ろう
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
会員サイトを作ろう
● 範囲が広すぎるので、次回の会員サイトの
テーマと仕様を決めたい
o 会社の製品サポートサイト?
o イントラサイト?
o コミュニティサイト?
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
● 直近イベントの紹介
o オープンソースカンファレンス名古屋
o 7/5 (土) @ 名古屋国際センター
 セミナー @ 10時
 ブース展示 10〜18時
 詳細はこちら
 ブースの手伝いも募集
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
コンなご
concrete5 名古屋 ユーザーグループ
● 定期イベントについて
o concrete5 の日
 自習 @ ベースキャンプ名古屋
 だいたい毎月第2水曜日(?)
 次回: 2014/7/16 (水) 今回は第3水曜日
o 勉強会
 セミナー形式 @ ベースキャンプ名古屋
 だいたい第4土曜日(?)
 次回:2014/7/26 (土)「会員サイトを作ろう」
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
● 参加方法
o Doorkeeper
 次回告知・参加表明は下記コミュニティーに
 concrete5nagoya.doorkeeper.jp
o Facebook Group
 勉強会までのいろんな議論はこちらに
 facebook.com/groups/concrete5nagoya/
コンなご
concrete5 名古屋 ユーザーグループ
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
おわり:おつカレー
2014.6.22 (日) 第35回 コンなご勉強会 「デザイナーコンテンツを極める」
紹介
Katz (上野勝之)
コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzueno
Blog: ja.katzueno.com

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
  • 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