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

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がグダグダなレベルなので、突っ込みどころは容赦なく突っ込んでください。

今回もNPtech.jpをネタに、というかこのテーマでは最後のエントリーにしようと思ってるんですけど、タイトルどおりいろんなツールをうまく使って、クオリティを引き上げましょうという話です。もちろん、ケースバイケースによってほかのツールを使えばいいし、もしくは使わなくてもよいものもあります。

ではさっそくみていきましょう。

アクセシビリティ

Fujitsu ColorSelector

背景色と文字色の色をスポイトで抽出して見やすさを判断してくれる。デザインのカラーリングを決めるときの参考に。

aDesigner

IBM産のアクセシビリティチェックツール。とにかく必須。

WebInspector

WebサイトのWebコンテンツJISへの適合度を確認してくれる。

WebコンテンツJIS

日本規格協会が2004年に制定した高齢者や障害者がWebサイトを利用するときにWebアクセシビリティを向上させるために制定された規格。たまに読み直したりして、頭をブラッシュアップしたりするとか。

Web Content Accessibility Guidelines 1.0

W3Cが1999年に策定したWebアクセシビリティに必要な必要な14のガイドラインを策定。こちらもたまに読み直す程度かな。

ユーザビリティ

ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン

手前味噌で恐縮だけど、ざっくりとしたチェックには一番使う。

ディグダグテキストテスト（Web標準の日の益子さんのスライド、PDFの34ページあたり）

テキストを大きくしたりしてレイアウトの状態を見る。あまり流行っていないっぽいけど、個人的には好きな手法（特に文字サイズを大きくする可能性が高いシニア向けのサイトを作るからかな）

デバッグ用CSS「Diagnostic Styling」

はい、またもや自分のブログからですね。これ、常時Stylishに入れておくと便利なんです。

あとは、

• 画像を非表示にしてみる
• CSSを切ってみたりする
• Validate忘れずに
• Google Webmaster Central、Google Analytics、Yahooサイトエクスプローラーあたりは入れておくとのちのち便利だよね
• FeedBurnerは対象ユーザによってかな。

あたりかなと。

かなりざっくりとしたチェックポイントですが、やらないよりかはやったほうがマシ。一度ご自身のサイトを見直してみるよいきっかけになると思います。

さて、今回で第10回ということでちょうど締めにはよいタイミングなので、パーソナルブログの作り方も終えたいと思います。次回は年が代わったあたりくらいにまた何か書ければいいですねー。

そんなわけで、インクルーシブデザインワークショップの各グループごとの発表資料というか、その際のスライドを公開させていただきます。といっても、参加していない方々にとっては何がなんやら分からないかもしれませんが、雰囲気だけでも感じ取ってもらえれば。

あと、参加していただいた皆さんには後日その際の動画も落とせるようにしたいと思っていますので、もうしばしお待ちください（編集とかはやっていないのであしからず）

業務連絡：って冷静に考えれば、このファイルそのものがPDFなんだし、slideshareに上げる時点でダウンロードもできるようになっているんだから、PDFを別途用意する必要なかったですよねｗ＞某人

では、以下からスライドです。

スライド

さて、今回はNPtech.jpでは使っていないのですが、ほかのWebサイト（特に僕が担当するのは中小規模）のHTMLやCSSを書く際によく使っているコードセットのようなものがありますので、公開しておきます。

まず、CSSはstyle.cssというファイルに全部集めています。コードの頭はこんな感じ。

@charset "utf-8";
 
@import url(reset-fonts.css);
@import url(base.css);
 
/* -----------------------------------------------
 
	===== TOC =====
 
	* common
	* header
	* contents
	* main
	* sub
	* footer
 
	===== COLORS =====
	Main Text:			#000000
	Link:				#FFAA00
	Link Visited:			#AAFF00
	Line:				#AAAAAA
 
	===== FONTS =====
	34px				262%
	26px				197%
	25px				189%
	24px				182%
	23px				174%
	22px				167%
	21px				161.6%
	20px				153.9%
	19px				146.5%
	18px				138.5%
	17px				131%
	16px				123.1%
	15px				116%
	14px				108%
	13.5px				104%
	13px				100%
	12px				93%
	11px				85%
	10px				77%
 
----------------------------------------------- */
 
/* -----------------------------------------------
 
	*common
 
----------------------------------------------- */
 
body {
	color: #000000;
}
 
a:link {
	color: #FFAA00;
}
 
a:visited {
	text-decoration: none;
	color: #AAFF00;
}
 
a:hover {
	color: #AAFF00;
}
 
/* -----------------------------------------------
 
	*header
 
----------------------------------------------- */
 
div.header {
	background: transparent url(img/header-bg.png) left top repeat-x;
}

あまり特別なことはやっていないんですけど、冒頭で目次を作っておいて、どんなことを書いているのか一覧化しておきます。あわせて、フォントサイズとカラーの基準値もメモ。フォントサイズは3行目あたりで読み込んでいるYUI Reset CSSとFonts CSSをベースにしています。

いわゆるリセットCSSはメリット・デメリットの議論もあると思うんですけど、いざYUIに慣れてしまうと離れられないものです。ほかのフレームワークもやっていることは大差ないんでしょうけど。

base.cssというのは自分がよく使いまわしているコードたちをあらかじめ定義しているものたち。内容はちょくちょく変えるんですけど、こんな感じ。

@charset "utf-8";
 
/* base
----------------------------------------------- */
 
.main .section blockquote,
.main .section ul,
.main .section ol,
.main .section dl {
	margin: 1em;
}
 
.main .section ol,
.main .section ul,
.main .section dl {
	margin-left: 2em;
}
 
.main .section ol li {
	list-style: decimal outside;
}
 
.main .section ul li {
	list-style: disc outside;
}
 
.main .section dl dd {
	margin-left: 1em;
}
 
.main .section th,
.main .section td {
	padding: 0.5em;
	vertical-align: top;
}
 
.main .section caption {
	margin-bottom: 0.5em;
	text-align: center;
}
 
.main .section p,
.main .section fieldset,
.main .section table {
	margin-bottom: 1em;
}
 
.main .section ul li p,
.main .section ol li p,
.main .section ul li ul li,
.main .section ol li ul li,
.main .section ul li table tr th,
.main .section ul li table tr td,
.main .section ol li table tr th,
.main .section ol li table tr td {
	font-size: 100% !important;
}
 
.main .section pre {
	overflow: scroll;
	width: 90%;
	margin: 0 0 1.5em 0;
	padding: 1em;
}
 
html&;gt;body pre {
	overflow: visible;
	/*\*/
	overflow: auto;
	/**/
}
 
.main .section strong {
	font-weight: bold;
}
 
.main .section del {
	text-decoration: line-through;
	color: #A80000;
}
 
.main .section ins {
	font-weight: bold;
	color: #000000;
}
 
/* component
----------------------------------------------- */
 
.clearfix:after {
    content :".";
    display: block;
    height : 0;
    clear: both;
    visibility: hidden;
}
 
.clearfix {
	zoom: 1;
	overflow: hidden;
}
 
.capitalize {
	text-transform: capitalize;
}
 
.lowercase {
	text-transform: lowercase;
}
 
.uppercase {
	text-transform: uppercase;
}
 
.aligncenter,
.imgaligncenter {
	display: block;
	margin: 0 auto;
	text-align: center;
}
 
.alignleft,
.imgalignleft {
	float: left;
	margin: 0 1em 1em 0;
}
 
.alignright,
.imgalignright {
	float: right;
	margin: 0 0 1em 1em;
}
 
.txtalignleft {
	text-align: left;
}
 
.txtalignright {
	text-align: right;
}

位置づけ的にはYUI Base CSSを再定義したような形。

本文である箇所は下手にpx単位でがっちがっちにデザイン作るよりも、em単位で緩やかなデザインを作った方がWebっぽいよね[謎]みたいな個人的な信条もあったりします。そんなわけで、HTMLは自然とこんな感じのやつをよく使います。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" media="screen,projection,tv" href="style.css" />
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<title></title>
</head>
<body id="home">

<!-- page/ -->
<div class="page">

<!-- header/ -->
<div class="header">
<!-- /header --></div>

<!-- contents/ -->
<div class="contents">

<!-- main/ -->
<div class="main">
	<div class="section">
		<h1></h1>
		<h2></h2>
		<p></p>
	</div>
<!-- /main --></div>

<!-- sub/ -->
<div class="sub">
<!-- /sub --></div>

<!-- /contents --></div>

<!-- footer/ -->
<div class="footer">
<!-- /footer --></div>

<!-- /page --></div>

</body>
</html>

なんとなく雰囲気分かります？今まではCSSハック使ってたんですけど、条件分岐のほうが楽そうだなと思ってこのやり方になっています。あと、XML宣言などは今のところあまりメリットないよなってことでスルー。Strictを使うかどうかはクライアント次第ってところです。

僕もそんなに毎日のようにコーディングしているわけでもないので、あくまで参考事例としてどうぞ。

昨日、インクルーシブデザインワークショップ with Re:Creator’s Kansaiが盛況のうちに終了しました。参加者や京都大学インクルーシブデザインユニットさん、ファシリテーターの皆さんも含めて40名近くの方にご参加いただきました。ありがとうございます。

当日の雰囲気のために数枚写真を貼っておきます。

携帯で撮影したためか、やはり画質が…。また、リクリでもこのようなセミナーやワークショップを開催したいと思っていますので、よろしくお願いします。

あと、もし当日参加された方などでブログのエントリーを書いていただける方はぜひトラックバックください。

テンプレートを選ぶ

デザインが決まったら、あとはコーディングですね。でも、ちょっと待ってください。もちろん、フルスクラッチでコーディングしてもよいのですが、今回はちょっと違った形でやってみます。

テンプレートを使ってみましょう。実際、NPtech.jpはCSSこそ自分で書いていますが、HTMLはテンプレートにかかりきりです（部分的に自分で付け足したりしていますが）

使っているテンプレートは、次期WordPressのデフォルトテンプレの呼び名が高い「Sandbox」です。これにHTMLを任せてしまい、CSSでデザインを制御する、そんなフローですね。

日本語ではこのあたりのドキュメントで読めます。

• Sandbox テーマ « iDeasilo
• Sandbox 1.2 « iDeasilo
• おで流WordPressテーマの作り方（5）Sandbox特集 – Odysseygate.com

で、何が嬉しいのかについてちょっとだけ触れておきます。

コードサンプル

例えば、トップページのbody要素には以下のようなコードが入ります。

<body class="wordpress y2008 m11 d07 h18 home blog loggedin">

で、記事の場合はこんな感じ。

<body class="wordpress y2008 m11 d07 h18 single postid-126 s-y2008
s-m11 s-d06 s-h18 s-category-review s-tag-conference s-tag-nten
s-tag-us s-author-admin loggedin">

はたまた、ページも違います。

<body class="wordpress y2008 m11 d07 h18 page pageid-2 page-author-arata-kojima loggedin">

とこのようにbody要素、記事、コメントの3箇所にこのようなPHPで制御されたclass属性の値が自動的に入るわけです。あとは、CSSでこれらのclass属性を起点にデザインしてやればよいわけです。こういうのができるのがSandboxなわけです。

そのため、NPtech.jpにおいてもほとんどHTMLは触らずに（部分的にIE6に対応させるためにdiv要素を入れ子にしたりしましたが）あのようなデザインを作っているわけです。

ちなみに、SandboxはWordCampでも紹介されています。

さて、今回はパーソナルブログの作り方もお休みして、海外のちょっとしたデザインルールの惰訳です。元記事は、Shneiderman’s Eight Golden Rules of Interface Designより。

1. 一貫性を維持する。
2. アクティブユーザがショートカットを使えるようにする。
3. 意味あるフィードバックを用意する。
4. システム間のつなぎ目が分かるようにデザインする。システムはあるタスクの固まりが複数連結して構成されているものだ。ユーザはその固まりを1つ処理できたと分かることによって、満足や安心を得られるものだ。
5. 簡単にエラーを処理できる。
6. やり直しをできるようにする。
7. システム内部の動きが把握できるようにする。特にそのシステムに慣れた人はそのもの自体に責任を持っているし、その動きにどんな意味があるのかを知りたいものだ。
8. 人間の短期記憶に負担をかけない。

シンプルだけどよいガイドラインですね。特に、4はなるほどなーとちょっと考えさせられました。ちなみに、著者のBen Shneiderman氏はこんな人みたい。

あと、インクルーシブデザインワークショップ with Re:Creator’s Kansaiはまだまだ募集しています。

グラフィックデザインの勘所と書いてはみたものの、僕、あんまり専門でもないので大したこと言えないなーと思いつつ、何回かに分けてエントリーを書きます。

どこからデザインを作り込むか。

正直に言って、今このエントリーを書きながら、非常に悩んでいます。いやね、自分がデザインするときってどこから始めているんだろうか、と。

レイアウトは先ほどのエントリーのプロトタイピングあれこれで基本的なところは決まっているわけです。あと、配色とかもポートフォリオを集めるで決まっているわけです。すると、あとはどうやっているんだろう。。。

このNPtech.jpの場合はまず絶対にグリッドシステムのラインをそのままデザインにしたい！というのが明確にありました。故に、背景にほぼ均等間隔にラインを引いているわけです。それで、単にラインを引いただけでは面白くないよなと思い、上から段々に灰色から黒色に濃くしていったりしています。

で、あえてラベリングを英語にすることによって「わかりやすいかっこよさ」を演出していたりします。本当はナビ部分とかは日本語のほうが視認性が圧倒的に高いんですけど。Verdana使いたい！という理由もあります。

その上で全体的に2.0っぽくしたくなかったので、ドロップシャドウとかを使わずにやっていくと、どうしても平べったいイメージになってしまいます。そこで、各所ボーダーに対して色の違う1pxのボーダーを2色くっつけて表示してみたり。すると、ちょっとだけそこが盛り上がっているように見えますよね？

ありゃ、このままいくとｇｄｇｄコースだ…orz

デザインの勘所

ものすごく無理矢理にまとめてみます。

1. デザインはデザインする前が勝負！どんな情報を掲載し、掲載しないかの取捨選択をしておくこと（そういうのがユーザビリティやディレクションのワークフローの必要性だと思うのです）。
2. かちっとデザインしようとすると面白みがなくなる。コントラスト大事！
3. でも、一方で揃えるべきところは揃えること。統一感大事！

うーん、うまく言葉に表わせていない。

グラフィックデザインをするときは、情報を整理してその強弱をわかりやすくすること、一方で楽しさ、面白さ、そういう感性的なもの。

そう、うまく理論的な情報整理と感覚的な楽しさ、それをどのように融合させるのかがデザインの大事なところなんだと思います。

ダメですか、このエントリ－。次のエントリー頑張りますので、勘弁してやってください。