concrete5 の超便利アドオン Designer Content を極める!
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,062 views

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

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

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

Statistics

Views

Total Views
1,062
Views on SlideShare
816
Embed Views
246

Actions

Likes
2
Downloads
2
Comments
0

10 Embeds 246

http://ja.katzueno.com 128
https://twitter.com 42
http://ounziw.com 42
https://cybozulive.com 17
http://feedly.com 7
http://www.slideee.com 6
http://s.deeeki.com 1
http://fr.alertize.com 1
http://www.feedspot.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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