初めてでもok : )『concrete5』でサイトを作ろう！
DESCRIPTION
EC-CUBE×concrete5合同勉強会in広島でお話した内容です。TRANSCRIPT
初めてでも OK :)『 concrete5 』でサイトを作ろう！
EC-CUBE×cocrete5 合同勉強会 in 広島
04/14/2023 concrete5 in HIROSHIMA 1
このセッションについて
レベルは非常にやさしいです。初めての方でもカンタン！ CMS 「 concrete5 」についてと、ちょっと頑張れば作れるテーマの作り方についてご説明いたします。
04/14/2023 concrete5 in HIROSHIMA 2
自己紹介
神守 由理子（かみもり・ゆりこ）
もともとは美容関係に務めてました。3 年前、職業訓練卒業。普段は Web ショップに掲載する写真を加工したり Web サイトの制作などを自宅で行っています。
04/14/2023 concrete5 in HIROSHIMA 3
アクティビティ
Windows Phone ハンズオン広島concrete5 in HIROSHIMAWindows 女子部CSS Nite in HIROSHIMA 実行委員「ヒロハタ」アシスタント・メンバー
04/14/2023 concrete5 in HIROSHIMA 4
本日のゴール
おじいちゃんでもできる！？concrete5 サイトの作り方のご紹介します。
04/14/2023 concrete5 in HIROSHIMA 5
他の地方の勉強会でおじいちゃんが concrete5 をいたく気に入り、自力でサイトを作ったそうです。。。。
すごくないですか？
04/14/2023 concrete5 in HIROSHIMA 6
concrete5 って？
CMS 「 concrete5 」について軽く説明します。
04/14/2023 concrete5 in HIROSHIMA 7
concrete5 って？
無償で使えるアメリカ生まれのサーバインストール型のオープンソースのコンテンツマネージメントシステム。
http://concrete5-japan.org/
バージョン 5.6.3.1 … おすすめ
バージョン 5.7.0.3 … 最新版！
04/14/2023 concrete5 in HIROSHIMA 8
concrete5 って？
自由に利用できる！ 好きなようにカスタマイズ＆拡張可能できるのが 開発方針の根幹。
開発が早い 現在進行形で進化中。
コミュニティが本当におもしろい
毎週木曜にUSTREM 配信
04/14/2023 concrete5 in HIROSHIMA 9
必要な環境
PHP5.3
PHP モジュール : CURL, zip, mcrypt, openssl, GD (withfreetype), mysql, mbstring
PHP Safe Mode Off
MySQL 5.x04/14/2023 concrete5 in HIROSHIMA 10
ご注意
一般的に普及しているブログ型 CMS と違う
04/14/2023 concrete5 in HIROSHIMA 11
記事が主役。記事ページ、アーカイブページなどが自動で生成。
ページが主役。その中にコンテンツ（ブロック）を並べていく
concrete5 でできること
見たまま編集
ドラッグ＆ドロップでレイアウト変更
HTML や CSS の知識がなくても直感的に Web ページを作成することができます。
04/14/2023 concrete5 in HIROSHIMA 12
concrete5 で作りたいサイト
複数で管理するサイト
トップコンテンツが頻繁に変わるサイト
一見面倒なサイトが作れます。
04/14/2023 concrete5 in HIROSHIMA 13
一見は百聞に如かず
04/14/2023 concrete5 in HIROSHIMA 14
デモしてみます
ツールバー
ブロックの編集
ブロックの追加
レイアウトの追加
デザインツール04/14/2023 concrete5 in HIROSHIMA 15
とっても気に入っている機能 その 1
権限設定でタスクを割り振れる
04/14/2023 concrete5 in HIROSHIMA 16
チェックして公開 それぞれの担当箇所の編集
とっても気に入っている機能 その 2
期間公開設定
04/14/2023 concrete5 in HIROSHIMA 17
サマーセール 8/10～ 12
期間のみ表示できる
とっても気に入っている機能 その 3
ページのバージョン管理
04/14/2023 concrete5 in HIROSHIMA 18
前作ったページと比べられる !
concrete5 の構造
concrete5 はページがあって編集可能なエリアの中にブロック（コンテンツ）を追加していきます。
04/14/2023 concrete5 in HIROSHIMA 19
04/14/2023 concrete5 in HIROSHIMA 20
ブロック
テキストや画像お問い合わせフォームゲストページパンくずナビページリスト… etc
ページ内に配置できるブロックの数に制限はありません04/14/2023 concrete5 in HIROSHIMA 21
マーケットプレイス
テーマやブロックなどアドオンを入手できる。有償、無償があります。（ライセンスに注意）
04/14/2023 concrete5 in HIROSHIMA 22
まとめると…
既存のテーマでも、 concrete5 の編集機能を使えばある程度デザインを作りこむことができます。
04/14/2023 concrete5 in HIROSHIMA 23
自分でテーマを作りたい方へ…
04/14/2023 concrete5 in HIROSHIMA 24
テーマを作ってみた
Bootstrap でつくってみました
04/14/2023 concrete5 in HIROSHIMA 25
テーマを作るのに必要なもの
HTML と CSS の知識があれば難しいことはほぼ必要ありません。あとはテーマ名を決めるテキスト（ description.txt ）とサムネイル画像(thumbnail.png) があれば OK 。
04/14/2023 concrete5 in HIROSHIMA 26
html を分解
header.phpdefault.phpfooter.php
04/14/2023 concrete5 in HIROSHIMA 27
変わらない部分
変わらない部分
コンテンツコロコロ変わる部分
cocnrete5 化するのに必要な 1文
下記の１文を最初に追加するだけ。
04/14/2023 concrete5 in HIROSHIMA 28
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
ヘッダー部分
04/14/2023 concrete5 in HIROSHIMA 29
<?php defined('C5_EXECUTE') or die("Access Denied."); ?> <!DOCTYPE html> ・ ・ ・ <?php Loader::element('header_required'); ?> </head>
header.php
フッター部分
04/14/2023 concrete5 in HIROSHIMA 30
<?php defined('C5_EXECUTE') or die("Access Denied."); ?> ・ ・ ・ <?php Loader::element('footer required'); ?> </body> </html>
header.php
コンテンツ部分
04/14/2023 concrete5 in HIROSHIMA 31
<?php defined('C5_EXECUTE') or die("Access Denied."); $this->inc('elements/header.php'); ?> ・ ・ ・ <?php $this->inc('elements/footer.php'); ?>
default.php
パスの修正
images/logo.png ↓<?php echo $this->getThemePath()?>/
images/logo.png
04/14/2023 concrete5 in HIROSHIMA 32
今回は手抜きしました…
04/14/2023 concrete5 in HIROSHIMA 33
http://getbootstrap.com/
Bootstrap サンプルをテーマ化
BootstrapDLBootstrap ページのサンプルソースをコピペふつう 3 つに分ける php を 1個にまとめまし
た。
04/14/2023 concrete5 in HIROSHIMA 34
ご注意
javascript のバッティングに気を付ける<title> タグは削除する
04/14/2023 concrete5 in HIROSHIMA 35
Bootstrap便利
Bootstrap とはウェブサイトや Web アプリケーションを作成するフリーソフトウェアツール集である。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素や JavaScript 用拡張などが HTML 及び CSS ベースのデザインテンプレートとして用意されている。レスポンシブ対応の上ブラウザーによるレイアウト崩れに強い。04/14/2023 concrete5 in HIROSHIMA 36
【コンポーネンツの一覧】
http://getbootstrap.com/components/04/14/2023 concrete5 in HIROSHIMA 37
よく使うタブ式ナビとかそろってます。
Bootstrap で使えるアイコンが便利
http://dev.styler.jp/bootstrap-plus.html
04/14/2023 concrete5 in HIROSHIMA 38
04/14/2023 concrete5 in HIROSHIMA 39
http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.csshttp://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/
bootstrap-glyphicons.css
追加のアイコンは別途 css が必要
エリアを追加
04/14/2023 concrete5 in HIROSHIMA 40
<?php $a = new Area('Sidebar'); $a->display($c);?>
ブロックが追加できるようになる
とってもカンタン
覚えておくと便利
04/14/2023 concrete5 in HIROSHIMA 41
$a = new GlobalArea('【グローバルエリア名】 '); $a->display();
$a = new Area('Sidebar'); $a->setBlockLimit(n);//ブロックの数を n個までに制限
$a->display($c);
$a = new Area('【エリア名】 '); if ($c->isEditMode() | $a->getTotalBlocksInArea($c) > 0) { $a->display($c); }
ブロックをカスタマイズしたい
04/14/2023 concrete5 in HIROSHIMA 42
カスタムテンプレートを作るview.php を複製してカスタマイズ、templatesフォルダに置くだけ。
ブロックテンプレートをカスタマイズするには多少の PHP の知識が必要です。
おススメリンク
04/14/2023 concrete5 in HIROSHIMA 43
http://ja.katzueno.com/2014/05/3104/スニペット集（アルケミスタの住人）
http://concrete5.tomo.ac/tomo の concrete5
http://www.onside.com/デザインワークスオンサイド
ご清聴ありがとうございました。
concrete5 in HIROSHIMA
04/14/2023 concrete5 in HIROSHIMA 44