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

3,146 views
2,984 views

Published on

concrete5 CMS での必須アドオン Designer Content の実践セミナーと Designer Content Pro のちょっとの解説。

2014/6/22 (日) に開催された第35回 コンなご (concrete5 名古屋ユーザーグループ) 勉強会のセミナー資料です。

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,146
On SlideShare
0
From Embeds
0
Number of Embeds
587
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

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

×