はじめての concrete5 – インストール & テーマ制作の第一歩篇

chipper

12年前

以前から興味はあったのですが、なかなか手をつけていなかった concrete5。
数回だけ勉強会にも参加させてもらったりしたのですが、『やっぱり実際に作ってみないとよくわからないよね。』ということを実感しましたので、前回の勉強会前に簡単なページを実際に作ってみて、ちょっと疑問に思ったことを2、3質問させていただきました。
それまでは、何を質問していいかもわからないくらいだったので、1歩目は踏み出せたかなと…

で、復習 & 勉強のために架空の和菓子屋さんサイトを作ってみることにしました。（何故、和菓子屋？という理由は聞かないでくださいませ…）
今は理解していると思うのですが、制作時にはエリアとブロックの違いもよくわかっていなかったり、『スタックて何？』というような超初心者が html ファイルから concrete5 のテーマを制作しましたので、『それは間違ってるよ。』とか『このやり方の方が簡単だよ。』ということもあるかと思いますが、そこは超初心者ということでお許しを…

架空の和菓子屋さんサイトのデザイン案

こんな感じのデザインを一旦通常の html で制作。
そこから『concrete5 オリジナルテーマのつくり方』を参考に concrete5 のオリジナルテーマに変換していくという方法で制作してみました。
ディレクトリーの構造がちょっと特殊な気がしますが、上記のページを見ながらだとそれほど難しくはないような気がします。
今回のデザインは、concrete5 をインストールするとデフォルトで有効になっている『Greek Yogurt』と同じような、よくある『ヘッダー』『フッター』『メイン』『サイドバー』というレイアウトにしてます。
最初から凝ったレイアウトのテーマを作るというような無茶は控えようと… 🙂

concrete5 のインストール

インストール前に動作環境の確認やデータベースの設定は『インストール準備 :: concrete5 Japan 日本語公式サイト』をご覧ください。
concrete5 Japan 日本語公式サイトからダウンロードしたファイルを解凍後、サーバーに転送（今回はローカル環境）して適当な名前に変更。
ローカル環境では時間はかかりませんが、ファイルの数が多いのでサーバーによっては少々時間がかかることがあるかも知れません。
転送が終わったら、ブラウザーから先ほどアップロードしたサーバーにアクセスすると自動的にインストール可能かどうかチェックしてくれます。

インストール時のシステムチェック

問題がなければこのように表示されますので、インストールを続けるをクリック。

インストール時のエラー表示

サーバーによってはこのようなエラーを表示することがあるかも知れませんが、その場合は『ヘルプ :: concrete5 Japan 日本語公式サイト』を見れば解決策が掲載されているかも知れません。
それでも解決できなければ『コミュニティー :: concrete5 Japan 日本語公式サイト』に質問すれば、丁寧に教えてくれると思います。

エラーがなければ『インストールを続ける』をクリックして『インストール作業 :: concrete5 Japan 日本語公式サイト』ページに書いてあるように淡々と作業を続けるとあっという間にインストールは完了します。

インストール時に選択するサンプルデータは、『ブログ付きサンプルデータ』を選んだ方がいいです。

ブログ付きサンプルデータを選びましょう 😀

最初、『空白サイト』の方がクリーンなインストールができるのかと思ってインストールしてみたのですが、その後テーマを制作している時にフォーラムに書いてあるように記述しても動作しなかったことがあったので、『ブログ付きサンプルデータ』を再インストールしました。
インストール画面には、『concrete5の操作に慣れた方は「Blank (空白) 」を、そうでない方は「スタンダード (Standard Website) 」か「ブログ (Blog) 」を選ぶことをお勧めします。』と書いてあるのにね。
そうでない私が、『空白サイト』を選択するのが間違っていました、すみません。

ということで、初心者の方はデフォルトでチェックの入っている『ブログ付きサンプルデータ』を選んだ方が無難だと思います。

インストール画面には、「Blank (空白) 」、「スタンダード (Standard Website) 」、「ブログ (Blog) 」と、3つの選択肢があるように書いてありますが、現在のバージョンでは『空白サイト』と『ブログ付きサンプルデータ』の2つしか選択できないみたい…

テーマ制作・前半

次は、いよいよテーマ制作です。
上記の『テーマのつくり方 :: concrete5 Japan 日本語公式サイト』を参考にデフォルトでインストールされているテーマをコピーして作業開始。
今回は『concrete5をインストールしたディレクトリ / concrete / themes / 』から『Greek Yogurt』を『concrete5をインストールしたディレクトリ / themes / 』にコピーして『Hoge Theme』という名称に変更しました。
テーマ設定用ファイルを作り、『default.php』というテンプレートファイルを作成していきます。
今回用意した html ファイル（index.html）の構成は、

index.html ファイルの構成

となっていますので、ヘッダー等の該当箇所のアウトラインだけを残し、html タグを消去。

[html]
<!DOCTYPE html>
<html dir=”ltr” lang=”ja”>
<head>
<meta charset=”UTF-8″ />
<title>総本家　國芳庵 :: 創業天保年間　京菓子司　京都修学院離宮前</title>
<link rel=”stylesheet” type=”text/css” href=”./css/responsiveslides.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”style.css” />
<!–[if lt IE 9]>
<script src=”./js/html5.js” type=”text/javascript”></script>
<![endif]–>
<script src=”./js/jquery-1.7.1.min.js”></script>
</head>
<body class=”home”>
<div id=”container”>
<header id=”global-header”>

</header><!– end header –>

</div><!– #primary –>

</div><!– #secondary –>
</div><!– end contents –>
<footer id=”global-footer”>

</footer><!– end footer –>
</div><!– end container –>
<script src=”./js/jquery.localscroll-1.2.7-min.js”></script>
<script src=”./js/jquery.scrollTo-1.4.2-min.js”></script>
<script src=”./js/responsiveslides.min.js”></script>
<script src=”./js/script.js”></script>
</body>
</html>
[/html]

その html タグを消去した箇所に concrete5 のエリアを設定。
このあたりは、Dreamweaver でテンプレートを作っていく作業に似ているかも知れません。

<div id=”contents”>
<div id=”primary”>
<?php
$a = new Area(‘Main’);
$a->display($c);
?>
</div><!– #primary –>

<div id=”secondary”>
<?php
$a = new Area(‘Sidebar’);
$a->display($c);
?>
</div><!– #secondary –>
</div><!– end contents –>
<footer id=”global-footer”>
<?php
$a = new Area(‘Footer’);
$a->display($c);
?>

最後にファイルの先頭部分に

[php]
<?php
defined(‘C5_EXECUTE’) or die(_(“Access Denied.”));
?>
[/php]

というおまじないを記述して、その他パス（URL）などを concrete5 の記述に修正していきます。
[html]
<?php
defined(‘C5_EXECUTE’) or die(_(“Access Denied.”));
?>
<!DOCTYPE html>
<html dir=”ltr” lang=”ja”>
<head>
<meta charset=”UTF-8″ />
<title>総本家　國芳庵 :: 創業天保年間　京菓子司　京都修学院離宮前</title>
<link rel=”stylesheet” type=”text/css” href=”<?php echo $this->getThemePath()?>/css/responsiveslides.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php echo $this->getThemePath()?>/style.css” />
<!–[if lt IE 9]>
<script src=”<?php echo $this->getThemePath()?>/js/html5.js” type=”text/javascript”></script>
<![endif]–>
<script src=”<?php echo $this->getThemePath()?>/js/jquery-1.7.1.min.js”></script>
<?php
Loader::element(‘header_required’);
?>
</head>
<body class=”home”>
<div id=”container”>
<header id=”global-header”>
<?php
$a = new Area(‘Header’);
$a->display($c);
?>
</header><!– end header –>

<div id=”contents”>
<div id=”primary”>
<?php
$a = new Area(‘Main’);
$a->display($c);
?>
</div><!– #primary –>

</footer><!– end footer –>
<?php
$u = new User();
if ($u->isRegistered()) { ?>
<?php
if (Config::get(“ENABLE_USER_PROFILES”)) {
$userName = ‘<a href=”‘ . $this->url(‘/profile’) . ‘”>’ . $u->getUserName() . ‘</a>’;
} else {
$userName = $u->getUserName();
}
?>
<p class=”sign-in”><?php echo t(‘Currently logged in as <b>%s</b>.’, $userName)?> <a href=”<?php echo $this->url(‘/login’, ‘logout’)?>”><?php echo t(‘Sign Out’)?></a></p>
<?php } else { ?>
<p class=”sign-in”><a href=”<?php echo $this->url(‘/login’)?>”><?php echo t(‘Sign In to Edit this Site’)?></a></p>
<?php } ?>
</div><!– end container –>
<script src=”<?php echo $this->getThemePath()?>/js/jquery.localscroll-1.2.7-min.js”></script>
<script src=”<?php echo $this->getThemePath()?>/js/jquery.scrollTo-1.4.2-min.js”></script>
<script src=”<?php echo $this->getThemePath()?>/js/responsiveslides.min.js”></script>
<script src=”<?php echo $this->getThemePath()?>/js/script.js”></script>
<?php
Loader::element(‘footer_required’);
?>
</body>
</html>
[/html]

というように、修正ができれば index.html から default.php にファイル名を変更。
今回は、わかりやすいように html ファイルを修正していきましたが、慣れてくれば最初から default.php に記述する方が早いかも知れませんね。
concrete5 が使用する JavaScript ファイル等を読み込ませる為に記述する
[php]
<?php Loader::element(‘header_required’); ?>
<?php Loader::element(‘footer_required’); ?>
[/php]
という記述は、WordPress の
[php]
<?php wp_head(); ?>
<?php wp_footer(); ?>
[/php]
と同じと考えていいのかな。

ここで、管理画面からテーマを選択すると今作ったテーマがインストール可能になっていますので、インストールをクリック。

concrete5 のテーマ

テーマ検査というダイアログが表示されて、新しいテーマとしてインストールされましたので、テーマ一覧に戻り『Hoge Theme』を有効化すると、『このテーマをお使いのサイトのすべてのページに適用しますか？』というダイアログが表示されますので、『はい』をクリック。

concrete5のテーマをインストール

適用したら『サイトに戻る』をクリックして、サイトを表示すると先ほど作ったテーマで表示されているはずです。

新規テーマでの表示

編集をクリックするとテンプレートファイルで設定したエリアが表示されます。

編集をクリック

テンプレートのエリア

デフォルトのテーマである『Greek Yogurt』は、ヘッダー部分・フッター部分をそれぞれ『header.php』・『footer.php』という別ファイルにしていたり、エリアの設定が今回作ったテンプレートとは違いますので、ナビゲーションが表示していなかったりしますが、特に気にすることはないと思います。

で、それぞれのエリアに入っているデータを削除して、今回制作する和菓子屋さんのデータを追加していきます。

データを削除した状態はこんなにシンプル

今回は、『HTML ブロック』を追加して、該当エリアに index.html のソースをコピペしてみます。（画像ファイルも一旦、テーマの『images』にコピーしておきます。）

HTML ブロックを追加

HTML ブロックにソースをコピーペースト

同じように各エリアに『HTML ブロック』を追加して、それぞれ該当する『html ソース』をコピペしていき、すべてのコピー完了後『編集モード終了』をクリックすると

html ソースのコピー後のサイトを表示

と、このように表示されます。
まぁ、html ソースをコピーしただけなので表示するのは当たり前なのですが、一応 concrete5 のテーマを介して『和菓子屋さんのサイト』が表示されました。
もちろん、これでは concrete5 の良さである『直感的な操作による更新やページの追加ができる』というサイトにはほど遠いので、次はもう少し concrete5 らしいサイトへと作業を続けます。

が、長くなってきましたので続きは次回 😀
今回はとりあえず、『HTML ブロック』を使いましたが、次回はヘッダーエリアをもう少し細かいエリアにわけて、『記事ブロック』や『オートナビブロック』等を使って各ブロックを追加していく作業をしたいと思います。

最後に、今回のサンプルサイトを制作するにあたり、手持ちの画像以外は flickr の画像を使用しました。
本来はそれぞれの画像にクレジットを表示しないといけないのでしょうが、yugoQさん、merec0さん、yuichi.sakurabaさんの写真を使わさせていただきました。

※今回のサンプルサイトの名称等はすべて架空です。また、文章はダミーとして百人一首などを使っています。

concrete5 公式活用ガイドブック (Web Designing BOOKS)

posted with amazlet at 14.05.06
猪上博史 Katz Ueno 榊友哉佐々木多生中根紳一菱川拓郎吉川智久
マイナビ (2010-08-05)
Amazon.co.jp で詳細を見る