concrete5(5.7ver)テーマ作成方法の手順メモ

今回はいつもと違ってちょっと技術よりの話です。
とある案件でconcrete5を使用する事になったので、テーマを作成したんですがかなり以前と変わっていてちょっと苦労したので自分用メモをかねてテーマを作成する手順をまとめておきます。

concrete5とは？

concrete5を知らない人向けに説明すると、WordPressとかMovabletypeのようなCMSだと思えば分かりやすいです。
実際に触るとそれらとは全然違うものだと気付きますが、ざっくり何かといえばCMSというくくりになるかと思います。
詳しくは公式サイトや紹介動画を見た方が早いです。
http://concrete5-japan.org/

concrete5を実際に作って使ってみて分かったのは、使う人を最優先に考えられた設計がされているなという点。
例えばページを変更する場合などは、画面上から直接編集をして保存できる（専用の管理画面がない）など、かなり直感的に扱えるように出来ています。
この辺はjimdoなどでも見られる傾向ですが、作る事が目的ではなく運用する事が目的になっている感じにすごく好感が持てます。

テーマ作成の前に

では早速テーマを作成しましょうという事にはならず、まずはconsrete5がインストールされていないと話になりません。
今回は現時点での最新版の5.7を使用するのですが、インストールするために必要なのはMySQLのデータベースを作って、アカウントの情報をメモしておくだけです。
公式サイトからダウンロードしてきたファイル一式をサーバーにアップロードしたあとは手順にそって必要な情報を入力するだけです。
サーバーによってはパーミッションを変更する必要はありますが、やるとしてもそのくらいです。
制作者であれば特に困る事なくインストールできるだろうと思える簡単さです。
ドキュメントも用意されているので、詳しくはこちらで。
concrete5インストール方法
インストールが終わったら設定に入りますが、ここでひとつ注意。
concrete5はキャッシュの機能があって完成後は表示速度を速くするのに使えるんですが、このキャッシュがけっこう強めです。
開発時にはキャッシュを残さないようにしておいた方が快適です。
TPOに合わせて使いましょう。

テーマの作成手順

ではテーマを作ります。
テーマを作成する場合は、まずHTMLで自分でサイトを作ってそれをテーマ化するような手順が制作者的には一番分かりやすいかと思います。
作ってから気付いたのは、concrete5はモジュールやセクションのような概念を持って最初からサイトを設計しておいた方があとで使い回しがしやすいなという点ですが、それは実際に触ってからでないと出てこない実感なので、まああまり重要ではありません。
まずは普通にサイトを作りましょう。
サイトを作ったら次はそのデータをテーマ化します。

テーマの最小構成

テーマを構成する最小限の構成は以下3ファイルになります。

• default.php
• description.txt
• thumbnail.png

default.phpが表示させるテンプレートとなる基本のファイルです。
description.txtはそのテーマの説明用のファイルです。
thumbnail.pngは管理画面に表示させるための120×90の画像です。
この3つがあれば動きます。
ここからdefault.phpを複製、リネームして個別のテンプレートを作成して適用させたりする事が出来るわけです。
この辺はイメージ的にWordPressでpage-xx.phpとか作るイメージと変わりないです。
概要については公式を目を通しておく方がいいですね。
テーマの概要

よく使うもの。スニペット的に。

テーマを作る時によく使うコードを以下にメモしておきます。
WordPressのsynaxhighlightが好きではないので、gistにて埋め込みます。
まずはテーマファイルのヘッダーとフッターに必要なこれ。
これがないと駄目ってドキュメントにも書いてます。

その後に、body直下と/body直前に以下コードを。
これを書く事で編集可能領域としてシステムが認識するようになります。

後よく使うのがテーマまでのパスを代入するコード。
WordPressでいうところの bloginfo(‘template_url’); に該当する感じです。
WordPressで作る人は比較的良く使うと思います。

あとは、テンプレートの読み込み。
以下の場合だとnav.phpを読み込むという意味になります。

あとはconcrete5がブロックを追加できるようにするエリア、人からすると編集が可能になるエリアを以下で作ります。
エリア名には固有の名前をつけましょう。

ページのタイトルを取得するコードはこちら。
毎回手入力するのとかどう考えても無駄だし間違いのもとですよね。

公開日時の取得はこちら。
ブログとかではよく使うかと思います。
情報公開日が書いてないと情報の信憑性があまりよくないです。

あと、よく使うかどうかわかりませんが、編集時のみ表示させたい内容を記述するエリアが必要になったんですが、それは以下で実現できます。

実際に使う人のためのエリアなので、けっこう重要かなと思っています。
あと、親切なKさんにコード類のまとめを教えてもらいました。
公開日は2013年なので、今のバージョンに対応しているかどうかは試してみないと分かりませんが。
知っておくと便利なconcrete5デザインカスタマイズ小ネタ集
※本編とは関係ないですが、コードをgistで埋め込んでいるところに勝手に好感度が上がっています（笑）

テーマのアップロード

テーマを作ったらサイトに適用させます。
テーマファイルをアップロードする訳ですが、アップロード箇所は決まっています。
/application/themes/テーマ名
ここです。
applicationと同じ階層に「concrete」というディレクトリがありますが、こちらはコアファイルなので触らないようにしましょう。
「/concrete/themes/」にもテーマがあり紛らわしいですが、こちらは初期に入っている公式テーマの場所と思った方がいいかと思います。
テーマファイルをアップロードした後は、管理画面で有効化して使えるようになります。
あと、ちょっとしたはまりポイントですが、テーマに新しいテンプレートを追加してアップロードしただけではテンプレートとして認識しません。
必ず管理画面からアップロードしたテンプレートを使用できるように設定する必要があります。
テーマの作成は基本的な部分はこんな感じです。
これが出来ていれば最低限できた感じになります。
もちろんまだ先は長い感じはしますがここがスタートラインです。

ブロックの編集手順

とはいえ、はじめると少し新しい事をやってみたくなるもの。
なので、初期に配置されているブロックを編集する方法を書いておきましょう。
これが出来るようになると、より自由にconcrete5と戯れる事が出来るようになるわけです。
今回は、ブログ記事を読み込む「ページリスト」を編集する場合の方法です。
まず基礎知識として、concrete5では基本的なブロックが
/concrete/blocks/
の中にありますが、これはconcreteに入っている事からも分かるように、ここを変えてしまうのはしてはいけない事なのです。
concrete5ではテーマをアップロードしたapplicationディレクトリにconcreteディレクトリと同じ階層で同名のファイルがあった場合上書きするようになっています。
cssの読み込みをイメージすると分かりやすいかと思います。
applicationに入れた方で上書きする感じですね。
ページリストの場合は
/concrete/blocks/page_list/view.php
に表示用のファイルがあるので、view.phpをダウンロードしてきて編集した後
/application/blocks/page_list/view.php
にアップロードすれば大丈夫です。
他のブロックに関しても同じ扱いなので、気になる方はやってみるとよいかと思います。

まとめ

今さらながら改めてconcrete5を触ったわけですが、やっぱりツールには向き不向きがあるなと感じているところです。
concrete5はサイトとしてデータを変更していく際にはすごくいいツールで、お客さんがどんどん更新できる感じというのはすごくいいです。
でも、ブログをしようとする場合であれば、やはり他のブログツールの方が記事を書く事に集中できる感じはあります。
ひとつのツールで何でもまかなうというのも違うと思うので、使い方次第なのは変わりませんが、色々な手段がある事を知っていて、必要な時に使えるようにしておく事はやはり重要だなと改めて思いました。
今後も積極的に取り入れていこうかなと思います。