2006-11-27 アーカイブ

元記事をきちんと読んでも、それだけでは正しさを判断することはできない

仕様をちゃんと理解しておくか、英文をしっかりと読むことで誤解を防ぐでは「元の英語リソースの文意を誤った解釈で解説した記事が、多くの人にそのまま受け止められてしまう」ということを取り上げましたが、いわいさんのコメントや石川 一靖さんからのトラックバックなどで、「元のリソースをしっかりと読んでも、それだけでは正しいとは判断できないだろう」というご意見をいただきました。

None | つれづれのいわいさんからは

まあ、英文を読んだところでそれが仕様として正しいのかは不明だとしか言えないという点は忘れてはならないと思います。

というコメントを送っていただき、脱初心者をめざす人のためのホームページ作成講座の石川 一靖さんからは

結局、phpspot開発日誌の記事の間違いに気がつく人は元の記事を理解できるが、気がつかない人は元の記事を読んでもその間違いに気づかない。仕様をしっかり理解できていなければ元の記事が理解でず、英文をしっかりと読んでも駄目な場合がある。つまるところ、仕様をちゃんと理解しておくことのほうが重要なのだ。

という内容が含まれるトラックバックを送っていただきました。 確かに、そもそもの前提知識が少なければ誤読をしてしまっても、それを誤読と気付かないのかな、というか実際に phpspot開発日誌の KJ さんは Strict という単語の意味を知ってか知らずか訳の時に脱落させてしまい、結果誤読してしまっているしなあ、と思いました。

では、「そもそもの内容が間違っている英語リソースがあって、誤読こそしてはいないものの間違ったまま紹介している」ような例があれば考察しやすいなあ……と思ったのが昨晩の話。

ということで元記事からして間違っている例

さて、日付が変わって 27 日の未明になった頃。 前回の IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌もそうでしたが、こういった「間違った内容なのに注目を集めている」記事の私の情報元ははてなブックマークの最近の人気エントリーです。 そこに、 CSSだけで文字にドロップシャドウをつける方法 | S i M P L E * S i M P L E が掲載されているのに気付きました。

この記事は既に多くの方のコメントによる指摘や、 CSS は正しくお使いください | WWW WATCH という分かりやすい補足記事があり、記事の内容やタイトルに若干の補記がされていますので、記事自体には私からは突っ込みません。

今回突っ込むのは元ネタである Jim Whimpey » Good-Looking, Sharp Offset, CSS Text Styling の方です。 次項で詳しく書いていきますが、最初に読んだ印象は「 Validator に頼って仕様やマークアップの本質を理解していないんだなあ」でした。

Jim Whimpey » Good-Looking, Sharp Offset, CSS Text Styling の内容

Jim Whimpey » Good-Looking, Sharp Offset, CSS Text Styling 自体を読んでいただくのが、その内容を理解する一番の早道だと思いますが、簡単に羅列していきます。 もちろん、私の訳が正確とは限りませんので、併せて元のリソースを読んで下さいね。 ( というかかなり自分のニュアンスで内容を読んでいます、私。 )

1. これは画像を使わずに、 CSS ( と、ほんのちょっとだけマークアップに手を加える ) だけでドロップシャドウテキストを実現する方法である。
2. これは非常に素晴らしいエフェクトだと自負している。これまではその都度そのような画像を作成して埋め込んでいたものを、 CSS で自動的に作成できるのだから。
3. h1 要素の文字に position: relative; を指定しておき ( こちらの方が影となる ) 、 h1 要素内に含まれる span 要素のテキストを position: absolute; と指定して上方向と左方向にそれぞれ 1px だけずらすようにする。
4. <h1><span>Lorem Ipsum</span>Lorem Ipsum</h1> のように、 span 要素を追加するようなマークアップに変更する。
5. span 要素でマークアップして display: block; としているのは、 div 要素などのブロックレベル要素は h1 要素内に配置できないので、 valid なマークアップとするために span 要素にしている。
6. XHTML 内でテキストが 2 回書かれているということは、確実にアクセシビリティは低下するだろう。スタイルシートがオフにされていればグラフィカルブラウザでは見出しテキストは 2 つ表示され、スクリーンリーダでは 2 回読み上げられ、サーチエンジンは見出しテキストが 2 つ書かれてあるように記録するだろう。
   • だがちょっと待ってほしい。それはこのプリティな見出しを実現するための対価と考えるべきであろう。
   • alt タグ ( 原文ママ ) が無いような見出し画像に比べりゃ、全く見出し情報が無いよりはダブってでも情報を提供する方が良いだろう ?

大雑把に言うとこんなニュアンスでしょうか。 「じゃあ alt 属性をきちんと指定している見出し画像の方がもっと適切なんじゃないの ? 」と言いたくもなりますが、画像を使わずにというのが重要なポイントのようなのでスルーします。

実際にこの記事自体のコメント欄は賑わっており、

• Nothing new. If you come up with a way that doesn’t require you to have the text typed twice and I’ll be impressed.
• Cute, and a great example of how NOT to write code.
• The point of CSS is to separate content from style. Here you are using style and content together to create a new style. This is definitely NOT the right way to use HTML and CSS. It does look pretty good though :)
• That’s kinda nice, however it is not semantically correct. A screen reader will read the h1 text twice, your best bet would be to use javascript to insert the span dynamically.
• It’s also a great way to annoy those who’re reading your text with a screen reader or other CSS-unaware browser. Finding a way to do it without having the text in there twice would be news.
• Ben, Me is right, why are you calling him an ass? This isn’t a CSS tip at all. It’s typing the text twice into the markup. That’s not CSS, that’s HTML. Having all your headlines appear twice in your text is not the right solution.
• I love you critical morons.. take the tip and be happy or shut the hell up
• Nice effect, but gotta agree with Rob - it’d be cleaner to insert that span with JS to keep the markup clean. A quick example: http://janit.iki.fi/temp/textshadow/
• Man alive. A bunch of crybabies. Oh Waaaa! 0.00001% of the web surfers out there will have slight problems. And they will just have the text displayed/read twice.
• yep this isn’t very good, might even cause some search engine penalties….

といった多くのコメントが寄せられています。

現在は紹介側は補記されているけれど

CSSだけで文字にドロップシャドウをつける方法 | S i M P L E * S i M P L E の方にもコメントが寄せられたり指摘記事が書かれたり、また元記事のコメント欄のコメントについての指摘もあったりで現在は補記されていますが、そもそもの XHTML コードが何故そのような余計なマークアップがなされたのかを考えれば、あるいは XHTML の仕様についての知識があれば、または元記事のコメント欄の雰囲気をつかむことができていればそもそもこの方法を安易に紹介することは無かったのかなあ、と思いました。

しかし、指摘を受けてすぐに補記を行い、間違った情報を流していることに対しての非を認めているのは好感が持てるなと思いました。

……というのも、その記事は本当に正しいのか？：メモランダムでは かなり怪しい説明を見つけたので、とりあえず「XHTML 1.0 Transitionalではiframe要素が使えます。」とコメントを送っておいた と書かれているのにもかかわらず、 IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌にはコメントが反映されていませんし、内容も間違ったままということで、図らずも対応の違いを見せ付けられたからです。 PHPSPOT開発日記はコメントが書けない? - よくきたblog やよくきたはてダ - phpspotの罠といった話も耳にしますし、投げっぱなしかそうでないかというのは大きく印象が変わってくるなあと思う 2 つの記事でした。

Movable Type の Atom Feed テンプレートをチェックしてみよう

drry+@-> Movable Type のデフォルト Atom フィードテンプレートを駄目出しを読んで、自分のところの Feed はどうだったかなあと思って確認してみると、 <$MTDate$> をそのまま使ってしまっていました。 私は Feed のテンプレートも自分なりのカスタマイズをしていたのですが、 id の部分については見落としていました。 早速修正をして、年次による恒久性の消失に対応対応。

また、以前は Tagwire Plugin を用いてタグ機能を実現していたのですが、 Movable Type 3.3 では標準でタグ機能が実装されていたので、そちらに乗り換えていました。 標準のタグ機能では <$MTTagName$> テンプレートタグでタグ名を指定するのですが、 Tagwire Plugin によるタグ機能では <$MTTag$> テンプレートタグによってタグ名を指定します。 よって、標準タグ機能に切り替えた際に Atom Feed テンプレート内の <category term="<$MTTag encode_xml="1"$>" /> 部分を <category term="<$MTTagName encode_xml="1"$>" /> に書き換えておくべきだったのですが、それも見落としていたために category 要素の term 属性値が空っぽのままになっていましたので、それも併せて修正しました。

hxxk.jp の Atom Feed テンプレートソース 20061127 版

良い機会なので、現在使っているテンプレートのソースを公開しておきますね。 Feed 関係についてはあまり厳密にチェックしていないので、もし「もっと良い書き方があるよ」という場合は是非お知らせください。

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title><$MTBlogName remove_html="1" encode_xml="1"$></title>
  <link rel="alternate" type="text/html" href="<$MTBlogURL encode_xml="1"$>" />
  <link rel="self" type="application/xml" href="<$MTBlogURL$>feed/atom" />
  <link rel="service.post" type="application/xml" href="<$MTCGIPath$><$MTAtomScript$>/weblog/blog_id=<$MTBlogID$>" title="<$MTBlogName encode_html="1"$>" />
  <id>tag:<$MTBlogHost exclude_port="1" encode_xml="1"$>,<MTArchiveList archive_type="Monthly" sort_order="ascend" lastn="1"><$MTArchiveDate format="%Y"$></MTArchiveList>:<$MTBlogRelativeURL encode_xml="1"$>/<$MTBlogID$></id>
  <updated><MTEntries lastn="1"><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></MTEntries></updated>
  <MTIfNonEmpty tag="MTBlogDescription"><subtitle><$MTBlogDescription remove_html="1" encode_xml="1"$></subtitle></MTIfNonEmpty>
  <generator uri="http://www.sixapart.com/movabletype/">Movable Type <$MTVersion$></generator>
  <MTEntries lastn="15" sort_order="descend">
    <entry>
      <title><$MTEntryTitle$></title>
      <link rel="alternate" type="text/html" href="<$MTEntryPermalink encode_xml="1"$>" />
      <link rel="service.edit" type="application/xml" href="<$MTCGIPath$><$MTAtomScript$>/weblog/blog_id=<$MTBlogID$>/entry_id=<$MTEntryID$>" title="<$MTEntryTitle$>" />
      <id><$MTEntryAtomID$></id>
      <published><$MTEntryDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></published>
      <updated><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></updated>
      <summary><$MTEntryExcerpt remove_html="1" encode_html="1"$></summary>
      <author>
        <name><$MTEntryAuthorDisplayName encode_xml="1"$></name>
        <MTIfNonEmpty tag="MTEntryAuthorURL"><uri><$MTEntryAuthorURL encode_xml="1"$></uri></MTIfNonEmpty>
      </author>
      <MTEntryTags case_sensitive="1">
        <category term="<$MTTagName encode_xml="1"$>" />
      </MTEntryTags>
      <content type="html" xml:lang="<$MTBlogLanguage ietf="1"$>" xml:base="<$MTBlogURL encode_xml="1"$>">
        <$MTEntryBody encode_xml="1" convert_breaks="0"$>
        <$MTEntryMore encode_xml="1" convert_breaks="0"$>
      </content>
     </entry>
   </MTEntries>
</feed>