concrete5 公式活用ガイドブック

サンプルデータダウンロード&サポートページ

このエントリーをはてなブックマークに追加

このページは、書籍『concrete5 公式活用ガイドブック』の購入者を対象としたページです。Chapter 04「オリジナルデザインのサイトを作る」で使用するサンプルサイトのデータをダウンロードできるほか、書籍の補足情報を掲載していきます。

直感的に操作できるオープンソースCMS
「concrete5」の基本、活用からカスタマイズ、運用まで徹底解説

concrete5(コンクリートファイブ)はオープンソースのコンテンツ管理システム(CMS)で、編集の自由度の高さや使いやすさ、デザインカスタマイズの容易さ、機能拡張の柔軟さなどが注目され、ユーザー数を伸ばし続けています。
本書はconcrete5のコミュニティメンバーが執筆した、初の日本語公式書籍となります。

concrete5をこれから使い始める方や興味のある方だけでなく、すでにお使いのデザイナーや開発者の方にも役立つよう、章ごとにテーマを決めて、解説を行っています。

『concrete5 公式活用ガイドブック』Chapter 04では、こちらのHTMLモックアップをconcrete5のサイトとして制作する方法を解説しています。

HTMLモックアップ

HTML, CSS, Javascriptで制作したサイトの雛形です。

見る

concrete5サイト

モックアップを元にテーマとカスタムテンプレートを作成し、コンテンツを登録したサンプルウェブサイトです。

見る

HTMLモックアップとconcrete5のサンプルサイトで使用しているデータの全てを、書籍を購入した方でなくても自由にダウンロードすることができます。ソースコードがどのようにカスタマイズされているのかについてはぜひ書籍の解説をご覧ください。

GitHubからダウンロードする

データの解説

ダウンロードされたzipファイルの内容の解説です。

  concrete5 concrete5で構築したサイト(http://book.concrete5-japan.org/concrete5/)のデータです。実際に運用しているサイトのデータ構造がどうなっているかご覧いただけます。
  blocks このフォルダはユーザー領域のため、コアの設定を上書き・追加しています。ユーザー領域については176ページ参照
  autonav 「オートナビ」ブロック
  templates
breadcrumbs.php パンくずナビゲーション用のカスタムテンプレート
global_nav.php グローバルナビゲーション用のカスタムテンプレート
link_list.php フッターなどで使用する横並びのナビゲーション用のカスタムテンプレート
  date_nav 「日付ナビ」ブロック
view.php テーマに合わせてデフォルトテンプレートをオーバーライドしています。
  google_map 「Googleマップ」ブロック
  templates
  small 小さめの地図を表示するカスタムテンプレート
view.css
view.php
  lunch_menu Designer Contentで作成したブロックタイプです。206ページ参照
  page_list 「ページリスト」ブロック
  templates
menu_item_list.php メニューページで使用しているカスタムテンプレート
news_list.php 「ホーム」ページや「ニュース」ページで使用しているニュースの一覧表示用のカスタムテンプレート
  search 「検索」ブロック
  templates
header.php ヘッダーに置く用のカスタムテンプレート
  slideshow 「スライドショー」ブロック
view.php テーマに合わせてデフォルトテンプレートをオーバーライドしています。
  tags 「タグ」ブロック
view.php テーマに合わせてデフォルトテンプレートをオーバーライドしています。
  concrete5 concrete5のコア領域です。このフォルダの中はカスタマイズしません。コア領域については176ページ参照
※ すでにインストール済みのconcrete5でサンプルデータを試したい場合は、このフォルダをアップロードする必要はありません。
  config 設定ファイルを格納するフォルダです。サンプルサイトでは特にカスタマイズしていません。
  controllers ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  css ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  elements ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  helpers ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  jobs ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  js ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  languages 言語ファイルを格納するフォルダです。
  libraries ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  mail ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  models ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  packages マーケットプレイスからダウンロードしたアドオンやテーマが格納されるフォルダです。
  designer_content サンプルサイトでは、Designer Contentアドオン以外は使用していません。
  themes テーマファイルを格納するフォルダです。
  olive_sample 書籍で紹介しているサンプルサイトのテーマのフォルダです。
  elements テーマで使用する共通パーツを格納するフォルダです。
footer.php フッター用の共通パーツです。
header.php ヘッダー用の共通パーツです。
header_home.php home.phpから呼び出している、「ホーム」ページタイプ専用のヘッダーパーツです。
  images テーマで使用する画像を格納しているフォルダです。
  javascripts テーマで使用するJavascriptを格納しているフォルダです。
  stylesheets テーマで使用するCSSを格納しているフォルダです。
blog_entry.php ブログ記事用のテンプレートです。
default.php デフォルトのテンプレートです。
description.txt テーマ名と説明が記載された設定ファイルです。
home.php 「ホーム」ページ用のテンプレートです。
left_sidebar.php 左側にサイドバーのあるテンプレートです。
main.css テーマの主なスタイルシートファイルです。
main.js テーマの主なJavascriptファイルです。
thumbnail.png 管理画面の「テーマ」ページで表示されるサムネイル画像です。
view.php シングルページで使われるテンプレートです。
  tools ユーザー領域のフォルダです。サンプルサイトでは特にカスタマイズしていません。
  updates concrete5をバージョンアップした際に、新しいバージョンのconcrete5コアファイルが格納されるフォルダです。
  concrete5.6.2.1.ja 書籍の執筆中にバージョン5.6.2.1日本語版がリリースされてアップデートしたため、このフォルダができています。concrete5のアップデート方法
  concrete5.6.3.1.ja_updater 書籍の出版後にバージョン5.6.3.1日本語版がリリースされてアップデートしたため、このフォルダができています。
INSTALL
LICENSE.TXT MITライセンスです。
humans.txt
index.php
robots.txt
  mockup concrete5のサイトにする前の、HTMLで作成したコーディングデータ(モックアップ)です。このHTMLをもとに、concrete5をデザインカスタマイズしていく方法を書籍で解説しています。
  images テーマで使用する画像を格納しているフォルダです。
  javascripts テーマで使用するJavascriptを格納しているフォルダです。
  stylesheets テーマで使用するCSSを格納しているフォルダです。
blog.html ブログ記事の一覧ページ
blog_post.html ブログ記事の詳細ページ
contact.html 「お問い合わせ」ページ
dummy.jpg
humans.txt
index.html 「ホーム」ページ
lunch.html 「メニュー」の詳細ページ
main.css
main.js
menu.html 「メニュー」の一覧ページ
news.html 「ニュース」の一覧ページ
olive.html レストランの紹介ページ
README.md GitHubリポジトリ用の説明ファイルです。
cover.png このサポートページ用の画像です。
index.html このサポートページです。
style.css このサポートページ用のスタイルシートファイルです。

誤記

  • P.007 concrete5の事例の筑波学院大学は出版後WordPressでリニューアルされましたのでconcrete5の事例ではなくなりました。最新の事例は公式サイトショーケースをご覧ください。
  • P.024 XAMPPのバージョン1.8.3では書籍で紹介している設定ではうまくインストールができないことがあるようです。公式サイトのXAMPPのインストールをご覧ください。
  • P.145 のテーマのファイル構成に themes/olive_sample/elements/global_nav.php というファイルが記載されていますが、開発中に一時的に作成したものの最終的に削除したファイルでした。ダウンロードデータや本の解説には含まれていないファイルです。

concrete5のバージョンアップに伴う変更

concrete5 5.6.3.1日本語版の紹介 - 書籍で紹介しているバージョン5.6.2.1からの変更内容を紹介しています。

書籍では紙面というメディアの関係上伝えきれなかった内容を補足する動画をアップしていきます。

サンプルサイトのコンテンツ登録デモ

本書で作成したテーマを適用したサイトにコンテンツを登録し、デザインを再現していく手順のデモ動画です。

concrete5/concreteディレクトリ内のconcrete5のソースコードの著作権はConcrete CMS Inc.が有し、MITライセンスで公開されています。mockupディレクトリならびにconcrete5/themesディレクトリ内ではフロントエンドフレームワークとしてFoundationを使用しています。Foundationの著作権はZURB, inc.が有し、MITライセンスで公開されています。その他jQuery等の外部ライブラリもそれぞれのライセンスで公開されています。

上記に該当しないソースコードは、下記作者が著作権を有し、同じくMITライセンスで公開しています。ただし、レポジトリ内の写真素材は全てコンクリートファイブジャパン株式会社が使用ライセンスを取得し、『concrete5公式活用ガイドブック』の解説のために配布しています。書籍のチュートリアルを実践する以外の目的での使用、複製、再配布を禁じます。

作者

書籍の目次にTipsのページ数が記載されていなくて不便だと思ったので、一覧を作成しました。

No. Name Page
Tips01-01-001 concrete5の事例 007
Tips01-02-001 データベースの文字セット 008
Tips01-02-002 文字コードを確認する 011
Tips01-02-003 セキュリティー対策 016
Tips01-04-001 PHP5.3以前がインストールされている場合 026
Tips01-04-002 画面が文字化けしている場合 027
Tips02-03-001 ブロックの並び順を変更する 055
Tips02-03-002 オートナビに関連するページ属性 061
Column03-10-001 マーケットプレイスのカテゴリーの意味 133
Columns03-10-002 おすすめアドオン 134
Columns03-10-003 おすすめスマートフォン対応テーマ 136
Tips04-02-001 カスタマイズ可能なテーマを作成する
GitHub上のcustomizable-themeブランチでカスタマイズ機能に対応させた場合のサンプルデータを公開しています。
169
Tips04-02-002 テーマの作成に知っておくと便利なコードスニペット集 171
Tips04-03-001 コメントアウト 180
Tips04-03-002 ページ付けインターフェースのカスタマイズ 185
Tips04-03-003 日付の書式の指定方法 188
Exercise04-03-001 スライドショーのテンプレート 189
Tips04-03-004 エディタのスタイルをテーマに合わせる 203
Tips04-03-005 テーマにautonavを直接埋め込む 204
Tips04-03-006 ブロックテンプレートのカスタマイズに知っておくと便利なコードスニペット集 205
Tips05-01-001 キャッシュのクリア 210
Tips05-01-002 管理者以外のグループに管理画面へのアクセス権限を与えたい 218
Tips05-01-003 特定のグループにページタイプのデフォルトの編集権限を与えたい 219
Tips05-04-001 開発環境からサイトの公開時に公開用のサーバーに移設する際に気をつけること 247
Tips06-01-001 ソースコードでよく見る変数について 277

Copyright © concrete5 Japan Users Group. Photo by erix!, on Flickr