原作ファンにとっては何度も読んで知り尽くした話を、さらにアニメでまで見たのに、マンガの単行本を買うかどうか？という難しい選択を迫られるコミック版「狼と香辛料」その３巻が発売された。
結論から言うと、原作ファンならぜひ買って損はない作品に仕上がっている。
どうしても活字メディアとしての制限を受けるため視点がロレンスに限定される小説。
また、制作費と話数の制限を受けるため、あまりのんびりと出来ないアニメ版。
コミック版３巻では原作第２巻のノーラ編が始まるが、その冒頭、薄幸の羊飼いノーラの境遇を情緒溢れる絵柄で描き出す。これは漫画と言うメディアの特性を生かしたすばらしい演出だと思う！
教会の司祭から魔女ではないかと疑われているのは原作通りだが、そのうえセクハラまがいの行為まで強要され、街の人間からは好奇の目で見られ、粗暴な傭兵から乱暴される危機も描かれ、思った以上に酷い境遇であることをうかがわせる。これならば、後々ロレンスの企みに乗るのも道理…という出来。このシーンを見ただけで、買ったかいはありましたよ！
必要があってだいぶ調べましたが…結論。
そんなものは、無い。
まぁ実際ないことはなかったんですが…一番よく見かけたのが下の方法。
html>/**/body #sample p {
color /*\**/: blue\9;
}
これはとても覚えられないし、感覚の問題になってしまいますが、かなり気持ち悪い。
ヴァリデーションも通らないらしい。
おとなしく、コンディショナルコメントでIEのみに読み込ませるCSSを指定するのが最も分かりやすそうだ。
<!–[if IE]> <link rel=”stylesheet” href=”ie.css” type=”text/css” /> <![endif]–>
IE7まではCSSハックでしのいでいましたが、<head>タグ内は一切変更できませんという奇特なCMSを使っているのでない限り、今後IE対策はこの方法で対応しようと思います。
参考：
IE8だけに適用させるCSSハック
Internet Explorerの条件分岐コメント (コンディショナルコメント)
前回の記事に引き続き、Microformatsについて勉強中ですが、
クラスデザインパターンというのがあるようです。
参考：
class-design-pattern · Microformats Wiki
一言で言ってしまえば、HTML中において、その部分が何であるかという意味を示すのにclass属性を使おうという考え方です。
まず、HTML要素として提供されている意味的な要素があればそれを使う。
一般的なところでは<hx>タグや<ul>/<li>その他諸々。ここは最低限押さえましょう。
で、適切な意味的な要素がない場合。この場合は<span>か<div>を使います。
「適切」のラインは別の議論が必要になると思いますが。。。
次に、「意味的なclass名」をつけます。代表例として「hCard」の記述例が挙げられています。
<div class="vcard"> <a class="url fn" href="http://tantek.com/">Tantek Çelik</a>, <span class="org">Technorati</span> </div>
クラス名「vcard」がMicroformatsの規格を使用していることを表しています。
fnは名前、urlはURL、orgは所属。分かりやすいですし、電子名刺の標準的なフォーマットであるvcardの規格に基づいているので、機械でも理解できるデータと言えます。
このように、インライン要素では<a>か<span>、ブロック要素では<div>を使うようにします。
ほとんどの場合、CSSをいじらずとも既存のページにも簡単に導入することができるというわけです。
ところで連絡先という意味では<address>属性もありますが、文書の作成者の意味合いが強いので使い方を選びますし、中身の書き方は特に決まっていません。HTML要素とMicroformatsのどちらを使うかという問題ではなく、適切にマークアップされたHTMLを拡張するのがMicroformatsと言えるかもしれません。
次回はいよいよ実践、新着記事のコーディングについて改めて考えてみようと思います！
関連する記事を出力するプラグインは色々存在するが、シンプルに今見ている記事と同じカテゴリの最新記事を表示させる方法を考えてみた。
で、こんな感じで表示できました！
<?php $categories = get_the_category();
foreach($categories as $category):
$related_posts = get_posts('category='.$category->cat_ID.'&exclude='.$post->ID);
if($related_posts): ?>
<h2><?php echo $category->cat_name; ?>カテゴリの最新記事</h2>
<ul>
<?php foreach($related_posts as $related_post): ?>
<li><a href="<?php echo get_permalink($related_post->ID); ?>"><?php echo $related_post->post_title; ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; endforeach; ?>
各カテゴリの記事はget_posts()の初期値の5件まで表示されます。
microformatsについて知ったのはだいぶ前のWeb Designing誌の特集だったと思います。その頃はほとんど参考資料がありませんでしたが、現在は日本語にも対応しているmicroformats.orgのWikiが充実してきているようです。
まず、microformatsとはなにか。microformats.orgの説明を引用するとこんな感じ。
Microformatsとは、Webサイトで人やイベント、ブログ記事、レビュー、タグのような共通して公開されているものを記述する際に用いるマークアップパターンです。
分かったような分からないようなという感じですが、そのmicroformatsの拠り所となる概念としてさらに「POSH」というものがあるそうです。
POSHとは、Webページを作成する際に意味的なHTMLを用いることのベストプラクティスを簡潔にあらわしたものです。
この説明だけではまた分かりにくいですが、「意味的なHTML」というところがポイントです。実際のタグで言うと、見出しならなるべく<hx>タグ、段落ならなるべく<p>タグ、一覧性のある項目ならなるべく<ul>/<li>タグなどを使う、ということです。
反対に「表現的なHTML」という言葉もあります。こちらの代表的なタグは太字の<b>や文字サイズを変える<small>などです。また、表組みとして情報を整理しているのではない、レイアウトのためだけの<table>タグも含まれます。
ただし、現在主流のXHTML1.0などに用意されている意味的な属性は、本当に最低限のものです。Webで公開する情報としてよくある「連絡先」や「タグ」、「イベント情報」などを表す属性はありません。で、乱暴に言ってしまえば、無いなら作っちまおうぜというのがmicroformatsなのです！（たぶん）
実際のWebの現場では、そんなこと言われなくても各々ローカルルールを決めてコーディングしていることと思います。大きめのサイトを複数人数でコーディングする場合、画像のファイル名の付け方まで最初に細かく決めてしまうのが普通です。そうしないと、「この人の担当ページが遅れているから、他の人がヘルプに入る」というようなリソース配分がスムーズに出来ないからです。
じゃあ、なぜわざわざ作らなきゃいけないかという理由ですが…
「機械でも読めるようにするため」というのが一番じゃないかと思います。
見出しタグ<hx>やページタイトル<title>では、せいぜいその部分がそのページの内容を表す重要な部分であろうという程度のことしか分かりません。しかし、「連絡先」や「タグ」、「イベント情報」などがマークアップによってページのどの部分に記述されているのかが分かると、サイト内のイベント情報だけをピンポイントで検索することが可能になると考えられます。
他にも、ブラウザがmicroformatsに対応することで、ただ閲覧するだけではない情報の活用の仕方が広がります。ページ内の連絡先をワンクリックでアドレスブックに保存したり、ページ内のイベント情報をワンクリックでカレンダーに保存したり。これは便利ですよね。
詳しくは古い記事ですが下記に分かりやすくまとまっています。
【Web 2.0 Expo】「データ形式Microformatsがブラウザを進化させる」，Mozillaがアピール：ITPro
しかししかし、世の中ユーザーに便利なだけでは動かない。僕がMicroformatsに期待しているのは、HTMLコーディングをより楽にしてくれるのではないかという点です。マークアップとCSSの書き方の組み合わせはいくらでもあります。しかし、標準的な書き方が確立されれば、その部分はどんどん自動化できるようになっていく。
ユーザーにとって便利で、しかも開発が楽になれば、世の中変わるんじゃないか。
と、華々しい想像も広がるところなのですが、まずは「意味的なHTMLを書くことは重要」ということが言いたいのです。より具体的には、単に見出しタグやリストに気をつけるだけじゃなく、「意味的なクラス名」を積極的に付けていこうということです。（続く…）