プラグインやハードコーディング

WordPressをCMS的に使うときにどうしても必要になるけども、扱いにくいのが表の存在です。HTMLでいうtableですね。

WordPressのビジュアルエディタにはtableを挿入できるようなものがないので（ですよね？）、まず考えられるのはHTMLでハードコーディングすること。ただ、運用担当者がHTMLをあまり知らない場合はプラグインで解決するという方法もあります。使ったことはないですが、例えば、WP-Tableなどはできそうですね。

でも、最近個人的に気に入っているのがカスタムフィールドを使う方法です。ただし、この方法は採用情報などフォーマットが一定の場合にしか使えません。

カスタムフィールド

コードでいうと、あらかじめ次のようなコードが書かれた独自のテンプレートを作っておきます。

<table class="recruit">
<tbody>
<tr>
	<th>勤務時間</th>
	<td><?php echo post_custom('勤務時間'); ?></td>
</tr>
<tr>
	<th>休日</th>
	<td><?php echo post_custom('休日'); ?></td>
</tr>
<tr>
	<th>給与</th>
	<td><?php echo post_custom('給与'); ?></td>
</tr>
<tr>
	<th>備考</th>
	<td><?php the_content(); ?></td>
</tr>
</tbody>
</table>

とこんな感じであらかじめ独自のテンプレを作っておいて、あとは運用担当者にカスタムフィールドを使って値を入れてもらえれば表が生成されるという方法です。これなら運用担当者がHTMLを知らなくても表を作成することができます。

ちなみに、このときの投稿の本文は「備考欄」を別に作っておき、そこに収納されるような形にしています。

もちろん、オーサリングツールなどで表を作ってもらい、コードを貼り付けてもらうことも可能なのですが、こういう方法があることを知っていると表現の幅が広がりそうな気がします。

さて、今回からWordPress as CMSということで、どんなコードでWPをCMSっぽく使うのかについて書いていきたいと思います。第1回目はいきなり英語ブログのエントリー紹介から始めます。

エントリーは、みんな大好きWebDesign WallからBuilding Custom WordPress Themeです。

Building Custom WordPress Theme

1. WordPressのデフォルトテーマの構造がどのようになっているのかをよく観察する（ヘッダー、記事タイトル、サイト内検索など）。
2. デフォルトテーマで基本的なことが分かったらPhotoshopでモックアップを作る。
3. モックアップをベースに各ページごとに静的なHTMLとCSSを作る。
4. デフォルトテーマのフォルダをよく見てみて、WordPressのテーマがどのように動作しているのかを分析する（テンプレート入門やテンプレート階層を参考のこと）。
5. 作ったHTMLとCSSが入ったフォルダをwp-content/themesにコピーする。デフォルトテーマのフォルダのcomments.phpとsearchform.phpも一緒にコピーする。
6. デフォルトテーマのCSSファイルのコメント部分（冒頭の9行ほど）を新しいテーマのCSSファイルにコピーする。
7. HTMLファイルをいくつかのPHPファイル（header.php、sidebar.php、footer.php）に分割する。
8. HTMLのヘッダー部分をheader.phpとして保存し、デフォルトテーマを参考にしながら、title要素やmeta要素、グローバルナビなどをテンプレートタグに置き換える。
9. HTMLのサイドバー部分をsidebar.phpとして保存する。カテゴリやサイト内検索、アーカイブなどをテンプレートタグに置き換える。
10. HTMLのフッター部分をfooter.phpとして保存し、必要に応じてテンプレートタグに置き換える。
11. HTMLファイルの残り部分はコンテンツのみになったので、get_headerなどで各PHPファイルを読み込ませ、構造を作る。
12. ループを理解する。ループは単純にいうと、記事がブログ内にあればそれを表示し、なければ見あたりませんと表示する命令のことだ。
13. デフォルトテーマから<div id=content>..</div>までをコピーし、HTMLファイルに貼り付ける。また、投稿日時や記事タイトル、カテゴリ、前後の記事へのリンクなどをテンプレートタグに置き換える。
14. プレビューでテーマを確認する。
15. single.phpというファイル名で同じような作業を行う。
16. page.phpでも同じことをする。ただし、こちらにはコメントや投稿日時などは必要なければ消しておくこと。
17. あとは新しいテーマのフォルダからHTMLファイルを削除すれば完成だ。あとはsearch.phpや404.phpなども作ればよい。

WP as CMSのために

基本的なサイトの作り方は僕もこの流れとほとんど一緒です。特に、まずモックアップからHTMLファイルを作って、各パーツにバラバラにしていき、それからテンプレートタグというのは全く一緒ですね。ただ、CMS化するのであれば、コメントを必要とされることがあまりないから、そのへんは飛ばしますかね。

かなり雑な訳ですが、原文の方はスクリーンショットもついていますし、サンプルデザインもダウンロードできますので、英語だとあまり引いちゃわずにぜひとも試してみてください。

前回のエントリーの最後で、

次回は年が代わったあたりくらいにまた何か書ければいいですねー。

と言っていたので有言実行（誤字あるのに引用するのってなんだかイヤですけど）。といっても、相も変わらずネタは少ないですが、自分が持ってる数少ないネタの中からWordPressのテーマをどのようにCMSっぽく使っているのかについて書いていこうかなと思っています。

今でもTRANSのWordPressテーマ（テンプレート）カスタマイズのまとめ（日本語訳）などは多くの人に毎日のように来てもらっているわけですしね。

といっても多くのネタを持っているわけでもないので（しつこい）、あんまり長期間書けないかもしれませんが、よろしくどうぞ。

あと、WPのテーマというと、PHPが絡んでくるんですが、はっきりいって僕はPHPがグダグダなレベルなので、突っ込みどころは容赦なく突っ込んでください。

今回はサイト公開直前の手直しや公開後の管理について説明します。

エントリーの新規作成・編集

エントリーの新規作成・編集は管理画面の何箇所からか行うことができます。

詳しい説明は今回は割愛しますが、エントリー作成・更新時にトラックバックの送信を行いたい場合はブログページの管理の「投稿」（編集の場合は「記事一覧」⇒記事名をクリックして記事詳細）から行うようにしてください。

エントリー（記事）作成時に、適当なラベルをつけることで表示したい場所にそのエントリー（記事）を表示することができます。ラベルに「ラベル管理」画面からメモを入力しておけばエントリー一覧・詳細画面でもそれが表示されるため、混乱を防ぐことができます。

エントリー管理画面からラベルで絞込みを行うと、下のような画面になります。

この画面で、「表示順更新」のところに数値を入れてボタンを押せば表示順が更新され、管理画面、公開側共に強制的に表示順が設定されます。並び順は数字の小さなもの→数字の大きなもの→数字の入っていないもの、同じ数字（もしくは数字の入っていないもの）のなかでは投稿日時が新しいものほど上に来ます。強調したいお知らせがあって新しくなくても常に上に表示したい、などの場合に利用できます。

また、エントリー詳細画面についてですが、「メモを編集」からエントリーごとのメモが編集できます。このメモは管理画面のそのエントリーの詳細画面に表示されるだけで、表示側には影響を及ぼしません。文字通りメモとしてご利用下さい。

エディタの上部のタブ「本文」「追記」をクリックすると、それぞれの編集用に切替わります。保存しないで切り替えても入力した情報は失われませんが、保存するのを忘れないように気をつけてください。

「更新」の他、「新規保存」というボタンがありますが、これは編集した既存のエントリーを新しいエントリーとして保存する場合に使います（つまりこれを連打するとそれだけそのエントリーがコピーされる）。

前回まででご説明したとおり、SOYCMSではほとんどの場合エントリーを画面に表示するのにはラベルを通した設定を行います。エントリーの新規作成･編集時には適切なラベルが設定されていることを確認してください。

たとえばRe:Creデモサイトの場合、新着情報は「新着情報」、商品情報は「商品情報」、商品情報の中でも業務用は「業務用」、家庭用は「家庭用」ラベルがつきます。ここで、商品情報には必ず「商品情報」ラベルと、「家庭用」か「業務用」のいずれかのラベルとが二つ同時につくことになることに注意してください。これは商品一覧画面では家庭用と業務用を分け、商品詳細では分けていないためにこのような設定になっています。

エントリー雛形機能について

SOYCMSには「エントリー雛形」という機能があります。たとえば商品情報など、画像と文字がどのような構成になるか決まっていて、全て揃ったフォーマットになっている必要があるエントリーを作成するときに使います。最初に雛形の登録から適当なHTMLを登録しておけば、エントリー雛形機能を使ってそのHTMLをエントリーに読み込むことができます。その上で文章を書き換えたり画像を差し替えたりすることによって、決まった形式のエントリーを表示崩れ等のリスクを低く抑えて量産することができます。

テンプレートの手直し

エントリー（記事）の他、ページのテンプレートにも手直しが必要になることがあると思います。SOYCMSにはテンプレート編集用のテキストエディタとCSSエディタを搭載しています。

・「エディタの切替」ボタンで、HTMLエディタのシンタックスハイライトの有無を切替できます。

・CSSエディタではクラスやIDの一覧から、当該部分に関する記述を検索することができます。

なお、CSSエディタで編集できるのは、Apacheユーザにファイル書き込みの権限がある場合だけです。ですのでこの機能をご利用になる場合にはCSSファイルはCMSのファイルマネージャからアップロードすることをお薦めします。

ダイナミック編集機能について

SOYCMSには「ダイナミック編集」という強力な機能があります。これはページのプレビューを見ながらエントリー、テンプレート、CSSの編集を行うことができるというものです。

エントリー編集

この機能を使えば、既に作成されて画面に表示されているエントリー限定ですが、プレビューから直接そのエントリーの編集画面を呼び出すことができます。これにより、ちょっとした文章の校正などは「今ここで表示されているエントリーは何だったかな？」と迷ったり探したりすること無しに、直感的にそのエントリーの編集を行うことができます。

テンプレート・CSS編集

ダイナミック編集からはテンプレートエディタ、CSSエディタも呼び出すことができます。ちょっとした手直しの他、マークアップ時に最初からこの機能を使っても便利です。変更は保存すればすぐに画面に反映されます。

デモサイトではわざとFIrefoxでしか見られないようなHTML・CSSを書いています。もしよければ他のブラウザでも見られるようにデバッグしてみてください。

終わりに

6回の連載にお付き合いいただき、誠にありがとうございました。今回でひとまずSOYCMSの使い方に関する説明を終了させていただきます。シンプルな企業サイトへの導入例はご理解いただけたのではないかと思います。他にもSOYCMSは、ブログはもちろんちょっとしたポータルサイトの運営にも適しています。またいずれ、そういった特別な使い方についてのご説明をさせていただく機会があればと思っています。

SOYCMSの開発はまだまだ続けていきます。この9月か遅くても10月の頭には次期バージョンをリリースの予定です。また、折角オープンソース化しているのですから、コミュニティとしての運営もできるだけ力を入れていけたらと思います。

ご質問や新機能のリクエスト、バグの報告などがございましたらフォーラム

http://www.soycms.org/

までお寄せいただけると大変嬉しいです。

何卒今後ともSOYCMSをよろしくお願いいたします。

サンプルのサイトは全て設定を行ってありますので、/realfile.htmlのソースと比べてテンプレートがどのようになっているのか、違いを見ていただければと思います。解説はその設定の過程について行います。

まずは、「更新頻度が高い情報」をブロック化していきます。

標準ページでのブロック設定

トップページでは「新着情報」と「お薦め商品」が更新頻度の高い情報にあたります。

テンプレートの設定

この部分のHTMLソースは、新着情報を例に取ると

<ul class="top_list">
	<li>2008.8.16 ここに新着情報が入ります</li>
	<li>2008.8.16 ここに新着情報が入ります</li>
	<li>2008.8.16 ここに新着情報が入ります</li>
</ul>

<ul class="top_list">
<!–– block:id="news" ––>
	<li><span cms:id="create_date" cms:format="Y.m.d">2008.8.16</span> <span cms:id="title">ここに新着情報が入ります</span></li>
<!–– /block:id="news" ––>
<!–– cms:ignore ––>
	<li>2008.8.16 ここに新着情報が入ります</li>
	<li>2008.8.16 ここに新着情報が入ります</li>
<!–– /cms:ignore ––>
</ul>

ここで注意していただきたいのは、block:id=”***”の***はページごとに重複しない任意の半角文字列ですが、cms:id=”###”の###はエントリーの本文なら”content”、追記なら”more”という風に最初から決まっている値です。また、<!–– cms:ignore ––>～<!–– /cms:ignore ––>という印が見えますが、これはそこに囲まれている内容を表示しないという意味です。

ブロックの設定

上記テンプレート設定を記入し終わったら、一度「更新」ボタンを押してください。その上でエディタ部分の「HTML」の横の「ブロック」タブをクリックすると、ブロック設定画面に移ります。正しくテンプレートに追記が行われていれば、block:id=”***”と設定したブロックが表示されていると思います。

デモサイトでは設定を既に行ってありますが、ここでは「ラベル表示用ブロック」を選択し、「新着情報」ラベルのついたエントリーを5件、タイトルに「おまめ商事種式会社　新着情報」のエントリーページ（1ページ1記事の、記事投稿ごとに増えていくページ）へのリンクが自動生成されるように設定してあります。

会社情報ページも設定は同様です。新着情報のみが書き換えの対象となるので、当該箇所に<!–– block:id=”***” ––>等を記入しブロックの設定を行ってください。

ブログページのブロック設定

引き続きブログページのブロック設定を行います。ブログページは以前ご説明したように、ブログトップ、エントリーページ、アーカイブページの三つのテンプレートを持ちますので、それぞれにブロックを設定していきます。基本的な設定操作は標準ページと同じですが、ブログページでは標準ページで設定できるブロックは全て用いることができるほか、ブログページでしか使えないブロック「b_block」を使うことができます。詳しくはマニュアルをご覧頂くとして、ここではサンプルサイトの商品案内ページの設定を行っていきます。

まず、商品案内ページではブログトップとエントリーページしか使いませんのでこの二つのテンプレートを設定します。

商品案内（一覧）ページの設定

ここではブログページ独特のブロック(b_block)は使いません。商品一覧を業務用と家庭用に分けて表示したいので、「業務用」「家庭用」のラベルを新たに作成し、それらのラベルのついたエントリーが表示されるようにブロックを設定します。ここで注意していただきたいのが、「タイトルにブログページへのリンクを張る」設定です。タイトルにブログ（のエントリー）ページへのリンクを張る設定を行う場合、どのブログページにリンクを張るか選択するのですが、設定するブログは表示の対象となるラベルが設定されているブログでなくてもかまいません。ここでは、「業務用」のラベルがついたエントリーを表示させ、「商品情報」ラベルが設定されているブログ「おまめ商事種式会社　商品案内」へのリンクを張ります。このような設定を行う場合、「業務用」ラベルは必ず「商品情報」ラベルとセットで貼るようにして下さい。もし「業務用」ラベルがついていて、「商品情報」ラベルがついていないエントリーを公開すると、リンク先が存在しないことになりますので気をつけてください。

新着情報の設定は標準ページと同じです。

商品案内（詳細）ページの設定

商品案内（詳細）ページは、商品情報のエントリーが追加されるたびに新しいページ（URL）が増えていきます。増えるURLはブログページの設定画面に従って、

/product_catalogue/item【自由に変えられる】/【エントリー名】

という規則で決まります。このページでは、どのURLで（どの商品、エントリーについて）情報を表示するかによって内容が変わります。それを制御するのがb_block:id=”entry”です。このブログページ用ブロックは、ブログページのエントリーページでのみ使用ができて、呼び出されたURLに該当するエントリーの内容を表示するために用います。

あとは新着情報を今までと同様に設定すればOKです。

複数のページで共通の部品のブロック化

「更新頻度が高い情報」の他、「複数のページで共通の部品（たとえばメニューやフッタなど）」もブロック化、エントリー化しておくと便利です。その部分をブロックにしてエントリーを埋め込んでおけば、そのエントリーを書き換えるだけで全ページ一斉に更新をすることが可能になります。

デモサイトでは、メニュー部分のテンプレートに設定を行い、ブロックの設定は行わない状態にしてあります。

この、複数のページで共通の部品のブロック化をする場合には、その部品は別にサイトを作ってそこにエントリーを作成し、「SOYCMS他サイトラベルブロック」で呼び出すのが安全です。というのも、同じサイトでラベル・エントリーを作るとエントリー管理者でログインしても他のエントリーやラベルと同様に編集することができてしまうからです。他サイトに作成しておけば、厳密な権限運用が実現できます。

以上でサイトの設定は完了、あとはエントリーを追加していくだけです。続きは次回！

SOYCMSの使い方、第5回(上)をお送りいたします。今回からいよいよCMSの機能の具体的な説明に入ります。

前回までに作ったサンプルのサイトをSOYCMSに移したものを用意してあります。

http://register.soycms.net/

から下記のID、PWでログインしてください。バックアップはちゃんととってあり、定期的に復元するのでどんどん触ってみてください。ぐちゃぐちゃにしてもらっても大丈夫です。

メールアドレス・・・　re_creators_demo@n-i-agroinformatics.com

パスワード・・・・・・ recreators

公開側のURL

http://recreatorsdemo.soycms.net/

上記デモサイトでは全てのページの設定を終らせてありますが、そこに至る手順を順に説明していきます。

サイトの作成

サイトの作成をまず行います。上記のASP版ではユーザ登録時に自動的にサイトが作成されるのですが、インストール版だと個別に作成を行うことになります。

「サイトの新規作成」からサイトIDとサイト名を適宜入力してサイトを作成してください。SOYCMSにおいては下記のようにディレクトリが作成されます。

• /・・・Apacheのドキュメントルート
• /cms/・・・SOYCMSのインストールパス（SOYCMSはドキュメントルート直下には置かないで下さい）

とすると、

• /サイトID/
• /サイトID/.db/・・・サイトの情報を保存するSQLiteのDBファイルが保存されます（MySQL版でも作成されます）
• /サイトID/.cache/・・・ページ表示用のキャッシュが生成されます
• /サイトID/.entry_template/・・・エントリー雛形のファイルが保存されます
• /サイトID/.template/・・・テンプレートの雛形（日本語変。。。）が保存されます
• /サイトID/.plugin/・・・プラグイン用ディレクトリです
• /サイトID/files/・・・サイトにファイルをアップロードするときの、デフォルトのパスとなるディレクトリです。

SOYCMSをインストールするサーバに既にファイルやディレクトリがある場合は注意してください。また、ドキュメントルート直下（http://ドメイン/直下）にサイトを公開したい場合はSOYCMSのルートサイト機能を用います。サイトIDは空にできませんのでご注意下さい。

ページの作成

サイトにログインした後には、まずはページを作成して行きます。作成するページは第2回で説明したもののうち、お問合せと採用情報以外です。お問合せについては、お問合せ管理システムを近々リリースするのでそのときにまた説明させていただきます。

トップページの作成

SOYCMSをインストールして、サイトを作ってそこに初めてログインするときは、ページ作成を促す画面が表示されます。「ページ新規作成」のリンクをクリックして、ページ作成画面に移動してください。

• ページのタイトル・・・適当なタイトルを入力します。
• ページのアドレス・・・トップページはサイト直下なので空にします。
• 親ページ・・・システム内でページの親子関係を設定できます。ひとまず無視してください。
• テンプレート・・・ここに作成したHTMLを貼り付けます。CSSやリンクのパスの記述に気をつけてください。
• 公開期間･･･公開期間を設定できます。
• 公開設定・・・公開するページか下書きかを選択できます。

SOYCMSではページを動的生成するため、アクセスがあった瞬間にそのURLに設定されているページが公開期間内かつ公開設定が公開である場合のみ、そのページを表示します。

同様に会社情報のページも作成します。

商品案内のページを作成

次に商品案内のページを作成するのですが、これは第2回に説明したとおり、ブログページを使います。ページ作成時には「ブログページ」を選択し、アドレスは/product_catalogue/としてください。

最初に、「このブログで使用するラベルが設定されていません」と怒られます。SOYCMSではページとエントリー（記事）が完全に分離されているため、ブログと記事とを結びつける必要があります。そのためには「ラベル」を使います。ラベルとは、ひとつの記事にいくつでもつけることのできる印、タグです。ブログページの設定で「使用するラベル」に定めたラベルのついた記事が、そのブログの記事として認識されるようになります。最初はラベルも空なので、ラベルを新規作成するところから操作する必要があります。

最初の画面

ラベル設定画面

続いてブログページの設定を行います。

タイトルやアドレス、親ページ、公開設定は標準ページと全く同じです。違うのは、ページの生成設定とテンプレートの設定です。ブログページでは記事が増えるごとにURLも自動生成されるため、このような設定が必要になります。

今回はブログトップ（商品一覧に使用）とエントリーページ（商品詳細に使用）のみの使用となるので、他は生成し内容にしてあります（商品情報をフィード配信することを考えて、フィードも生成するようにしています）。

続いてテンプレートですが、ブログページではテンプレートを三種類設定します。トップページとアーカイブページ、それにエントリーページです。これらはそれぞれブログトップ、月別/カテゴリ別アーカイブ、エントリーページに対応します。記述方法は一部ブログページ専用のブロックが使える他は標準ページと一緒です。

ここではサンプルのサイトを作成するために、トップページとエントリーページに作成したHTMLをコピペします。

全てのページをこの要領で作っていくと、管理画面のページ一覧はサイトマップのようになります。ここまでで、標準ページ使用分については一応は公開可能です。管理画面でHTMLを触れるので、FTP接続の手間くらいは省けます。限られた規模のサイトや、HTMLファイルで既に作成されているサイトを移行する場合などはひとまずこの状態で公開し、随時後半で説明するエントリーによる管理を導入するのも手かもしれません。

今回は少し長いので、(上)(下)の二部構成としたいと思います。(下)では(上)で前回までに作ったHTMLをコピペしただけのテンプレートにブロックを設定し、記事を埋め込んでいきます。

さて、SOYCMSの使い方、第4回をお送りいたします。

今回はSOYCMSを使ってサイトを構築するときに、HTML・CSS・JSのコーディングで気をつけなければならないことを説明していきます。

SOYCMSのテンプレートはHTMLほとんどそのままです。MT等では慣れてくるとモックから（普通のHTMLを作らずに）いきなりMTのテンプレートを作る、なんて話も聞きますが、SOYCMSでは一旦HTMLでコーディングしても無駄な手間はかかりません（というか、いきなりテンプレートを起こす場合でもやることは同じになります）。

さて、そこで気になるのがHTMLを作るときの注意点です。

SOYCMSのテンプレート用HTML作成時の注意点

普通CMSのテンプレートにするためのデザインを作成するときには、ある程度CMSの知識が必要になります。もしそのCMSに詳しくない人がデザインやHTML・CSSコーディングを担当したなら、それをCMSのテンプレートにする人は苦労すると思います。

SOYCMSの場合、注意しなければならないのは下記の3点です。

• 読みやすいように書く
• 繰返し場所をはっきりさせる
• パスは絶対パスにする

それぞれの点をもうすこし詳しくみていきますね。

「読みやすいように書く」

結局最終的にテンプレートに加工する時にはソースを読んで行わなければならないので、対応するタグがどれとどれか、など、できるだけ人が読みやすいソースを書いた方がいい、ということです。

「繰返し場所をはっきりさせる」

SOYCMSでは、記事の情報をページに表示する場合、記事につけるラベルを指定して、そのラベルのついた記事のm件目～n件目までを表示、というように設定を行います。そのとき、どの部分が記事の内容に置き換えられるのか、またどこからどこまでが記事の数だけ繰り返されるのかをわかりやすくしておく必要があります。もちろんテンプレートを作成する人がわかれば十分なのですが、位置を間違えると色々な問題が発生してしまいます。

「パスは絶対パスで書く」

これはSOYCMSに限ったお話ではないのですが、CMSが導入されていてダイナミックにサイトの構造が変化する場合、各種のパスは絶対パスで書くことが望ましいです。を相対パスで書いているとリンク切れの原因になります。

全般的に他のCMSを利用する場合や静的HTMLでサイトを制作する場合にも当たり前に心がけておいた方がいいことばかりですね。

サンプルの公開

前回までに考えたサンプルのサイトのコーディングを行ったものを下記に公開しておきます。（お問合せと採用情報は作っていません）

http://recreatorsdemo.soycms.net/realfile.html

デザイナーではなく、マークアップエンジニアでもなく、プログラマーでさえない僕がお盆の間に作ったサイトなので細かなことはいいっこ無しにしてください笑

あと、現在はFirefoxでしか見ることができない（IEだとぐちゃぐちゃになる）のですが、次回以降のお話のためにわざとそうしています。

次回はいよいよSOYCMSの使い方について具体的な操作を交えて説明します。

ふるしょうです。Blogにねこの写真をアップしたらアクセス数が伸びました。やはりWebの住人にはねこ好きが多いようです。

さてSOYCMSの使い方第3回、ページ設計・デザインについてですが、今回もまた必ずしもSOYCMSを使う場合に限らないお話も多いです。

というのも、SOYCMS自体、「当たり前の事が当たり前に、簡単にできる」をコンセプトとして作ったからです。

わざわざ改めてそんなこと言われなくても、、、という事がほとんどだと思いますが、整理のつもりでお付き合いいただけると嬉しいです。

では、本題に入りたいと思います。

前回サイト全体の構成に関するお話をしましたが、当然情報設計は各ページごとにも考えなければなりません。当然そこではサイトの設計とも大きなかかわりが出てきますし、ユーザインターフェイスのことも考慮しなければなりません。ごっちゃにすると大変なので、「内容による整理」と「UIも含めたビジュアルデザイン」の二つに分けて議論しようと思います。

内容による整理

ここでは、それぞれのページにどのような情報が必要になるかを考えます。(テーマは検討を進めるプロセスであって、挙げる例そのものはサンプルのサイトについて適当に考えたものです。チェックシートではないので、そういった視点からのツッコミはご容赦願います)

全てのページに必要な情報

• サイト全体のナビゲーション
• プライバシーポリシーへのリンク
• 著作権表示

トップページに必要な情報

• アイキャッチになる大きな画像
• 会社のポリシーがわかる情報
• 新着情報・・・新着詳細へのリンクを貼る
• お薦め商品・・・商品案内（詳細）へのリンクを貼る

企業情報ページに必要な情報

• 会社名、所在地など企業情報

採用情報ページに必要な情報

• どんな人がほしいかという情報
• 募集中の役職、採用条件などの情報

お問合せページに必要な情報

• 連絡先
• お問合せフォーム

商品案内（一覧）ページに必要な情報

• 商品のリスト

商品案内（詳細）ページに必要な情報

• 個別商品の詳細な情報

新着詳細ページに必要な情報

• 新着情報の詳細な情報

UIも含めたビジュアルデザイン

では次に、UIも含めたビジュアルデザインについて検討したいのですが、SOYCMSの使い方とは直接関係が無く、またそれだけで十分にひとつのテーマになってしまうので割愛させていただきます。一点だけ述べておくなら、「アフォーダンス」というキーワードを覚えておくと色々便利です。

CMSを導入する場合の注意点

CMSを導入する場合特に重要になるのが、

ページをまたがるコンテンツについて更新作業の手間をどれだけ減らすことができるか

です。たとえば上記例だと、新着情報を追加するのにいちいち詳細ページを作って、トップページを書き換えて、そこに詳細ページへのリンクを追加して、、、というのは大変ですよね。できれば、一つの情報を投稿するだけで全てのページが書き換わるように設定を行っておきたいものです。

そこで問題になるのが、導入しようとしているCMSではどのようにしてそれが実現できるのか？ということです。

SOYCMSなら、あまり考えることはありません。詳しくは第5回で説明しますが、エントリー（記事）として投稿・管理できる情報はサイト内のどのページでも表示することができるからです。リンクも自動生成を行う機能があるため、リンクの張り忘れ・貼り間違いの心配もありません。

また、サイト構築上どうしても心配なのが、後から要件が変わることです。特に、複数のページが同時更新されるような複雑な機能追加は、CMSによっては難しい場合もあります。しかし、なぜ難しくなるかというと、ページとコンテンツの分離が不完全だからです。一定のコンテンツと結びついたページを元にサイトを構成していると、それ以外のコンテンツと結び付いた部分を追加したくなった場合に苦労します。SOYCMSでは、ページがコンテンツと完全に分離されているため、後から「ここにこんなコンテンツを追加したい」という要望にも（デザイン面での問題を除けば）柔軟に対応することが可能です。

自分のblogでもプログラミングを勉強してみたいデザイナーさま向けの記事を書いてみたりしているので、もしよければそちらにもコメントいただけると嬉しいです。

さて、第2回の記事として、SOYCMSを使った場合のサイト設計について説明させていただきます。とはいっても、あまりシステムのことは意識しなくても使うことができるというのがSOYCMSの特徴なので、かなり一般的な内容になります。

サイトコンテンツの種類

情報設計については、TRANSのあらたさんが詳しく書かれているのでそちらもご参考にしていただけたらと思うのですが、一般的な企業サイトのコンテンツといえば下記のような感じでしょうか。

• 会社そのものの情報
• 製品・サービスの情報
• 採用についての情報
• ニュース、プレスリリース
• お問合せ先の情報やお問合せフォーム
• IR（主に上場企業）
• その他の情報（休業期間のお知らせ、キャンペーンなど）

サイトを制作する場合、これらをわかりやすく配置することが求められます。

メンテナンスの視点からのコンテンツ分類

また継続的な情報発信を実現するには、ユーザにとって優しいサイト設計を意識するだけでなく、情報のメンテナンス性が高くなるようにしなければなりませ ん。たとえばひとつの更新で何箇所も書き換える必要があるとしたら、リンク切れ事故を誘発するだけでなく、その手間がネックになってそもそも更新自体が滞 る、なんてことになってしまいます。

そこで、企業サイトのコンテンツをメンテナンスの視点から整理してみます。

更新がほとんど発生しないもの

会社情報など

更新が頻繁に発生するもの

古い情報は不要になるもの

見出し・リード文など？

古い情報が破棄されず、コンテンツが増えていくもの

商品情報など

サイトマップとページごとのコンテンツ

もちろんWebサイトなので、

• サイトマップをどうするか
• 各ページ内コンテンツをどうするか

という切り口も必要です。特に、コンテンツが増えるにつれてページも増えるのか否かは重要です。

CMSとサイトの設計

さてここで「サイト更新を楽にしたいならCMSを導入しよう」という話になるのですが、それはそれで問題がおきます。というのも、利用するCMSの知識が 十分にないと、どういう風にサイトを構成すればいいのかわからないからです。折角CMSを導入しても、そのCMSが持っている機能と管理するコンテンツの 癖がかみ合わないと、サイト更新が簡単に行えるようにはなりません。

そしてやっとこさ表題の説明に入るのですが、SOYCMSの場合は非常にシンプルです。

というのも、ページについては「標準ページ」と「ブログページ」を、記事が増えたときにページも自動的に増えるかどうかで使い分けるだけだからです。各ページの機能詳細については、公式サイトのマニュアルをご覧下さい。

標準ページ

• 作成
• 管理

ブログページ

• 作成
• 管理

標準ページを使うことが考えられるページ

• トップページ
• 企業情報
• 採用情報
• お問合せ

ブログページを使うことが考えられるページ

• 新着情報の詳細
• 商品情報
• IR

標準ページは1URL1ページで、URLは自由に設定することができます。たとえばindex.htmlで終わるURLを設定しておけば、一見静的HTMLのように見せかけることもできます。ブログページは記事が増えるたびにURLも増えていくため、URLには若干の制約があります。

また、後々詳しく説明していきますが、SOYCMSではエントリー（記事）をサイト内どこでも自由に表示させることが可能です。なのでどこに何を表示する かについては、静的HTMLでサイトを作るときと同じように、システムのことはあまり考慮しないで設計することができます。その他、後から更新頻度を上げたいコンテンツが出てきたりといったケースにも柔軟に対応できます。

サンプルのサイト

と、いうわけでSOYCMSを使ったサイト構築の例として、下記のような簡単な、でもよくある形を考えて見ます。S・・・標準ページ、B・・・ブログページで作るページです。

/

トップページ・・・S

/company_information/

企業情報・・・S

/product_catalogue/

/product_catalogue/item/

商品案内（一覧･詳細）・・・B

/recruit/

採用情報・・・S

/inquiry/

お問合せ・・・S

/topics/

トップページに表示される新着情報の詳細・・・B

SOYCMSでは、記事をページに引っ張ってくるときに任意のブログページの、記事詳細ページへのリンクを自動的に生成する機能があります。この機能を使って、トップページに新着情報とおすすめ商品を表示し、そこから新着情報（詳細）と商品案内（詳細）へのリンクを張ろうと思います。新着情報は全てのページに表示してもいいかもしれません。

では、SOYCMSの使い方第1回、はじめます～

今回を含めて6回の連載を予定しており、全体を通してよくある企業サイトを具体的に作っていこうと思います。

まずはアジェンダ（全体の流れ）とそれぞれの点における簡単なポイントを説明します（説明の順番は実際にSOYCMSを利用してサイト制作を行う場合の流れと一緒です）。

アジェンダ

1. 全体の見通し
2. サイトの設計
3. ページ設計・デザイン
4. HTML・CSS・JSコーディング
5. ブロックの作成（エントリーの埋め込み）
6. 日々の管理

1.全体の見通し

今回です。本当なら環境構築のことなど書けたらいいんですが、レンタルサーバ、特に共用サーバではサーバ毎の設定に差がありすぎて一般的なことが書きにくいので割愛させてもらいます。使っているサーバで動いた、動かないという情報は

SOYCMSフォーラム

にご投稿いただけると助かります。動作環境を満たしているサーバでしたらファイルのアップロードだけで動作します(SQLite版)。

2.サイトの設計

SOYCMSにおいて、サイトを構成するページは二種類です。1URL1ページの「標準ページ」と、記事が増えるとページも自動的に増える「ブログページ」です。MTやWPと違うのは、標準ページでもブログページでも、サイト内どこでも好きなエントリー（記事）の情報が引っ張ってこれるということです。

3.ページ設計・デザイン

SOYCMSはデザインをほとんど拘束しないため、システムのことはあまり考えずにデザイン性やユーザビリティ、アクセシビリティに配慮したデザインを行うことができます。

4.HTML・CSS・JSコーディング

SOYCMSのテンプレートはHTMLほとんどそのままなので、どんなHTMLでも簡単にテンプレートにすることができます。なので、HTMLをコーディングするときに気をつけることはあまりありません（後で読みやすいようにソースを書く、コンテンツが増えたときに表示が崩れないようにする、くらいでしょうか）。また、CSS、JSのデバッグもテンプレートの時点で行うことが可能です。

5.ブロックの作成（エントリーの埋め込み）

いよいよCMSらしい内容に入ります。SOYCMSでは、ページとエントリー（記事）は完全に分離されています。エントリー（記事）にラベル付けを行うことで、このラベルのついたエントリー(記事）の3件目～7件目を表示する、という形でページにエントリー(記事）を表示します。よく更新する場所の他、ヘッダやフッタ、ナビゲーションといった複数のページで共通する部分もエントリー(記事）にすると便利です。

6.日々の管理

サイト公開後の、日々の管理の方法を説明します。SOYCMSは後からのページの追加や運用方法の変更にも柔軟に対応できます。