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