1.023world - ヤドカリパークとマリンアクアリウム -

海洋の仕組みと細菌・微生物から学ぶマリンアクアリウムサイト

1.023world Facebook

結果 Oh! Life (旧ブログ)

懲りずに書いてみたりする結果オーライな日記

CSS3は時期尚早っしょ

・・・なんて、ウェ屋が言っちゃイカンかな。
何事も先へ先へ誘導していかないとアカンのかね、やっぱし。

でも、最近はようやく一息つけるようになったかもですよ。
それと言うのも、やはりブラウザ競争がかなり現実味を帯びてきたから。
Firefox を筆頭に、Opera や Safari も頑張ってるし、Google も Chrome を投入してくる時代です。IE は益々追い込まれ、遂にシェアが50%スレスレまで落ちてきたとのこと。
って、まだ半分もあるのかっ!?(苦笑)

んで、何が有り難いかと言えば、例えばウェブコーディング(特にCSS)に於いて、もしかしてそろそろ本気で書いても良い頃? みたいな希望が見えてきたことですよ。
今まではレンダリングのアンポンタンな IE のシェアが足を引っ張っていたので、単に Valid なコードだけでは忠実な描画を期待できなかったり、対 IE 用にてんこ盛りな回避策を忍ばせておく必要があった訳です。
けど、ここまでシェアが落ちたなら、あとはウェブ屋の結託で加速させたろかぁ?なんて。
そしたらあなた、そこはエリートが集う心地よいブラウザ天国ですよ♪
と言っても、IE がショボすぎるだけで、他のブラウザにもまだまだ課題はあるのだけど。。。

まあそんな現状ですから、CSS3 の導入なんてまだまだ淡い夢物語。
こっちゃ IE 対策で無駄にソース重くしてんのに、将来への期待まで盛り込めませんて。
もっとも、ブラウザのサポート以前に、CSS3 自体がまだ策定中な段階らしいけども。。。

せめて IE なんか忘れちゃって、もう CSS2 あたりでバンバン固めちゃいたいっ!
いやぁ~、クライアントに IE 非対応だなんて口が裂けてもゴリ押せませんがな。
そ、今まで通り全身食いしばるしかないでしょうともっ。

結論:ひとときの夢をありがとう。

前置きが長くなりましたが、なんでこんな愚痴を書いたかと言いますと、先日新調した WordPress の管理パネルがですね、そんな僕らのしがらみを華麗にスルーして、あまりにも自由奔放に仕上げられていたので、ちょっと嫉妬しちっゃたんですね(笑)

まず、管理パネルを見ると随所にボックスレイヤが配置されているわけですが、これみーんな流行の角丸処理なんですよね。
ま、それは今さら不思議な事ではないんですが、でもずっと見てたらなんか変?
そしたら案の定ブラウザ各社の独自拡張CSSによる強引なborder-radius風味が、そりゃもうてんこ盛りな訳ですよ。
こらぁ! 中途半端なもん使うなやぁ! このせいでソース肥えとるやないけぇ!
しかもご丁寧に CSS3 の本命である border-radius 本人までご出席する始末。
うーん。僕だって遠慮なく書いてみたいさ。。。

しかしこの角丸。あらためて良く観察すると、てんで怪しい実装具合です。
そこで実際に各ブラウザが現状どれだけ真剣に角丸を表現してるのか試してみました。

まずは、以下のようなサンプルソースを用意。

<html>
<head>
<title>CSS3 TEST</title>
<style type="text/css">
<!--
.radius {
  width:180px;
  text-align:center;
  border:solid 1px blue;
  -moz-border-radius:10px;   /* for Mozilla */
  -webkit-border-radius:10px;   /* for Safari */
  -khtml-border-radius:10px;   /* for Old Safari, KHTML */
  border-radius:10px;   /* for CSS3 */
}
-->
</style>
</head>
<body>
  <div class="radius">
    <p><strong>BORDER-RADIUS</strong></p>
  </div>
</body>
</html>

上記のソースは、横 180 ピクセルのボックスに対して、全ての角を半径 10 ピクセルで丸めなさい、という CSS コードのサンプルです(HTMLは互換モード)
実際には CSS3 による border-radius を解釈できるブラウザはまだないので、上記のように各社向けの独自拡張プロパティを併記しなければなりません(笑)

さあ、そして感動のブラウザ大運動会の表彰結果は以下の通り。

各ブラウザでの角丸結果

うおっ! Safari すげぃっ!! これは文句なし 100 点でしょう♪

Firefox 3.0 も頑張ってます。でもちょいにじみすぎ。うーん。90 点。

Firefox 2.0 以前の Mozilla (Netscape含む)に関しては、まあ、やっつけですが、許しましょう。50 点。

Google の Chrome も似たようなレベルですが、均一なドット分布と、気持ち少しアンチエイリアシングが効いているので、甘めの60点。

問題は Opera ですが、やはり本命採用まではあくまでもスルーのようです。
念のため最新版の Opera 9.63 も入れてみたんですがダメでした。うーん。0点。

そして IE 。もう問題外です。しかも 8.0ベータ2 をもってしても話にならない(汗)
第一、パラグラフのマージンはどこいっちゃったんだ?
あと上の互換モードだと IE はボーダーを内包しますが、標準モードだと外に出ます。
また IE 6 では xml 宣言があると互換モードになるバグがありましたが、それは IE 7 以降では改善されていました。
とは言え、もう頭に来たので -100点♪

ちなみにフォントファミリーは無視してください。多分、僕の設定の問題です。

さ。考えてみてください。
こんな IE をまだ半数ものユーザーが利用しているということを。
しかもこの結果から、IE 8.0 を待つ意味はあるのでしょうか?

そろそろ Firefox か、あるいは Safari あたりでビシッと決めちゃいましょうよ、奥さん。
早く汚れのないコーディングを楽しませてよ(笑)

と言うわけで、WordPress 管理パネルから角丸処理をすべて排除しました(曝)
角丸処理の撤去だけで CSS ファイルだいぶ軽くなったんちゃうかな?

結論:CSS の角丸なんて、まだ要らないっ。

20090305-css

例え角角(笑)でも、クロスブラウザなだけウェブ屋の精神は保たれますわ。
まあ、IE で使ってた方は、気づきもしなかったかな(汗)

こちらのエントリーもどうぞ♪

ヤドカリのヤドカリ

この記事を含むタグの全記事リスト: ヤドカリ情報

先日、ゆぅぞぅ氏から面白い写真を頂きました。
掲載許可を貰ったので、貼っちゃいますよ♪

コモンヤドカリに寄生虫

なんだこれ!? でかっ!!

で、ゆぅぞぅ氏によると、これはヤドカリのハラにヤドる、その名も「ヤドカリノハラヤドリ」その人です! って、まんまかよっ!

しかし、こちらのページがソースだそうすので、ゆ~ちゃんが勝手に命名したわけではなさそうです(笑)

そしてその全貌がこちら。

ヤドカリノハラヤドリ/Athelges takanoshimensis Ishii

うーん。。。コメントに困んとね。
ハイセンスな団扇がたくさん付いてます。みたいな。

ヤドカリの寄生虫は僕も過去に一度だけ撮ったけど、なんかちょっと違って見えます。
その時のがこれ。

セグロサンゴヤドカリと寄生虫

もう記憶がもうろうとしてますが、たまたま死んだセグロサンゴヤドカリ(寄生虫が原因?)の標本写真を撮ろうと、死骸を殻から引き上げた際に発見した寄生虫です。
ちょっと写りが悪いので寄生虫本人の詳細は判りづらいけど、とりあえずセグロさんの右のポケットで仲良く一緒に育っていたようですね(笑)

以前、千葉の駒井先生からも伺いましたが、こんな感じでヤドカリに寄生虫が着いてることは良くあるそうです。
上のソース元でも書かれてますが、この手の寄生虫は大抵♂と♀がペアで寄生しているそうですよ。

ヤドカリの多くはマイホームを持ち、そして他人夫婦まで養っている。。。
そしてひとたび抱卵時期になれば、殻の中は他人夫婦と我が子たちで大騒ぎか。。。
その名の通り、ヤドカリってなんとアットホームなのか@
それに引き替え・・・やめとこ。

以上、本日はゆぅぞぅ氏のヤドカリヤドリに釣られ、ダジャレ特集でお送りしました。
ゆぅぞぅ氏、ありがとです♪

こちらのエントリーもどうぞ♪

サイトマップを作ってみる

ココで言う「サイトマップ」とは、ウェブサイトのコンテンツをツリー形式で示したような「よくあるHTMLページ」の事ではなくて、対検索エンジン用のサイトマップXMLのことですぜ。
これは如何に効率よく漏れなく検索エンジンにクロールして貰うかを目的としたものなので、残念ながら人間様が見ても楽しいものではありません(苦笑)

で、今までも一応サーバーのルートにそれっぽいものを配置していましたが、いかんせん情報に疎いこと、腰が重いこと、人間様が楽しく無いということで、URL を羅列しただけの一番簡単なテキストファイル形式のものを置いてただけでした(汗)
えー。いーじゃん。これで十分じゃん。

が、先日 Google のウェブマスターツールにログインしたところ、サイトマップの欄に「警告」のマークが(大汗)
慌てて詳細を見てみると、「リダイレクトするURLは書いちゃアカンよ」とのこと。
早速調べてみると、あ。いくつかスラッシュ抜けが。。。で修正。

ま、問題自体はそれで解決したのですが、ちょうど Google のサイトマップを作るWPのプラグインも検討したりしていたので、この際どうせなら 1.023world 内の完全なサイトマップを作ってやろうじゃないか! と言うことに♪

さて。どーするか。
とりあえず、関連サイトを調べてサイトマップの仕様からお勉強しなくてわ。
そして、以下のような形式で記述する必要があるのだと判りました。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
 <url>
  <loc>http://www.example.com/</loc>
  <lastmod>2005-01-01</lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.8</priority>
 </url>
</urlset>

Googleウェブマスターツールより抜粋

要するに、サイト内の全てのページをこの形式で列挙して、サーバーのルートにXMLとして配置すればOKと言う感じかな。
で、僕は Perl しか書かないので、CGI で作ることにしました。
ついでにモバイル版も用意すべく、こちらのページを参考に同時生成するようにした。
完成後、Googleウェブマスターツールに取り込んでみたら、あっけなく承認♪

しかしこの形式はあくまでGoogle仕様と言うことらしいので、他の検索エンジンにも登録できないのかなぁと調べてみたら、なんかプロトコルの参照先を Google から www.sitemaps.org に変更するだけでいけるっぽい。
と言うことで、上記のソースの <urlset> 要素の xmlns 属性値を http://www.sitemaps.org/schemas/sitemap/0.9 に差し替えるようにした。

で、試しに Yahoo のサイトエクスプローラーにも登録してみたら、こちらもあっけなく成功♪
わーい。

あと、MSN とかどうすんのか。。。
で、またまた調べていたら、今度は全ての検索エンジンに対応した汎用のサイトマップ形式を発見!
それが「ROR」という形式だった。早く言ってね。
但し MSN は Google や Yahoo のようなウェブ管理者向けツールがまだ無い(英語版のみ)ので、あくまでも HTML のヘッダにサイトマップの URL を指定しておいて、それを元にクロールして貰うとのこと。
ま、せっかくいくつも作ったんだし、ROR は MSN 用にして、さっきのは Google と Yahoo 用ということにしよう。
どうせ CGI が勝手に生成するんだし(笑)

さらに、やっぱり人間様も楽しみたいなと言うことで、同時に閲覧向け HTML も吐き出すようにこだわってしました(曝)
で、これが一番の手間だったりして(汗)

そんなこんなで、人間様向けサイトマップです。
あくまでも「見れる」ようになったと言うだけで、やっぱし楽しくは無いか。。。

その他、検索エンジン向けのものは、 sitemap.xmlsitemap-mobile.xmlror.xml としてサーバーのルートに配置してあるので、興味のある方はご覧ください。
でも重いのであまり見て欲しくなかったりして(汗)
やっぱり圧縮する機能も付けた方が良いかな。
また考えよう。

ちなみに毎日深夜に自動的に書き出すようにしてます。
更新頻度や重要度なんかは良いとしても、ページ自体が増えてくコンテンツもあるしね。

うん。ようやくスッキリした♪

こちらのエントリーもどうぞ♪