2014.6.22 ( 日 ) 第 35 回 コンなご勉強会 「デザイナーコンテンツを極める」

Designer Contentを極める

2014/6/22 ( 日 ) 第 35 回 コンなご勉強会@ ベースキャンプ名古屋

2014.6.22 ( 日 ) 第 35 回 コンなご勉強会 「デザイナーコンテンツを極める」

紹介

Katz ( 上野勝之 )コンクリートファイブジャパン株式会社

取締役 Chief Communications Officer

TW: @katzuenoBlog: 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: @katzuenoBlog: ja.katzueno.com