home > Web::Blogoscope > 2005年11月

Web::Blogoscope

2005年11月

Firefox 1.5正式版リリース

本日、Firefox 1.5正式版がリリースされた。日本語版も英語版と同時リリースだ（数時間のタイムラグはあり）。時差の関係で、英語版は11月29日、日本語版は11月30日のリリースということになる。

Inside Firefoxの11月29日付けエントリー「The Wait is Over」によれば、Firefox 1.5の新機能は次のとおりだ。

Firefox 1.5は1年半にわたるGeckoレイアウトエンジンの改良の成果を盛り込んだもので、<html:canvas>、SVGサポート、CSS3のマルチカラムレイアウトモジュールのプロトタイプ実装、セキュリティ向上のための主要アーキテクチャの変更、その他多数のパフォーマンス向上のための実装が含まれる。また、体感速度を向上させるために「戻る」「進む」ボタンの仕組みを改善した。

ブラウジング体験の向上のためにたくさんの機能が改善されており、タブの並び替え、ユーザーインターフェイスのちょっとした改善、より利用しやすくなったプライバシーコントロール、新たなオプション、Macユーザーのためのブラウザ移行機能の向上などが含まれる。

エクステンション（拡張機能）の開発者にために、新たなディレクトリやレジストリのインストールロケーションを用意したので、より開発しやすくなるはずだ。

最新のセキュリティパッチへのアップデートはシンプルになっている。Firefox 1.5は新たな更新がないかMozilla.orgを毎日チェックし、セキュリティパッチを自動的にダウンロードし、適用する。

なお、Mozilla Firefox 1.5 リリースノートでは、新機能と改良点が詳しく説明されているので、参照されたい。

スクリーンショット

タブの並び替え

[スクリーンショット: タブの並び替え]

新しくなったオプション画面

[スクリーンショット: 新しくなったオプション画面]

追記（2005-11-30

デフォルトの検索プラグインが充実。楽天市場、gooウェブ、Yahoo!ショッピング＆オークションが追加されている（12:35）。

デフォルトの検索プラグイン

[スクリーンショット: タデフォルトの検索プラグイン]

<html:canvas>とは、スクリプトを使って図形を描くための新しいマークアップ要素で、Firefox 1.5、Safariなどがサポートしている。詳しくは、MDC: Canvas tutorialを参照のこと（15:40）。

Firefox 1.0と1.5のCSSサポート比較はWeb browser CSS supportを参照のこと（16:20）。

SEMリサーチ経由の情報。Firefox 1.5では、デフォルトのスタートページ「Firefox Start」の検索サービスがGoogleからYahoo! JAPANに変更されている（19:40）。

2005-11-30T10:59+09:00 | Webトレンド | 固定リンク | コメント (0) | トラックバック (13)

Web標準ワークフロー

本日発売の『月刊 web creators』 2006年1月号（Vol.49）の巻末特集で、Web標準ベースのサイト制作のワークフローと技術的なポイントについて書きました。XHTML+CSSを中心にした内容ですが、私なりの問題意識を反映させて書きました。わかりやすく仕上がっていると思います。

問題意識というのは、XHTML+CSSはどうしてもテキストから起こしてページを仕上げていくアプローチで語られることが多い点です。しかし、実際の制作現場では、まずデザインがあって（デザインワークを経て）ページ制作に入ります。個人であっても、きっちりとしたデザインワークはないにしても、何となく「でき上がりの姿」を頭に描いているはずです。

XHTML+CSSのワークフローを示したDesignline for the Open Air blog templateという有名なアニメーテッドGIFがありますが、これはあくまでデザインがきっちりと決まっていることが前提であり、デザインをどうスケルトンに落とし込むか、またスケルトンの各部位をどのように定義するかという重要なプロセスも省かれています（そうでなければ、このようにスムーズに制作できるわけがない）。

今回の記事では、デザインをどのようにスケルトン化し、各部位を定義するかという説明から入っています。テーブルレイアウトとCSSレイアウトの違いは結局、スケルトンをtable要素で組むか、それともブロックレベル要素（主にdiv要素）とidで組むかの違いですから、それを体感してもらえるように書いたつもりです。

もうひとつの問題意識に「XHTML+CSSは"all or nothing"で導入するものではない」ということがあります。XHTML+CSS化とひとくちに言っても、弱度、中度、強度の3つがあります。その点については特集の冒頭で書きました。

また、デザインとWeb標準はトレードオフの関係ではないこと、CSSは「最適化されたXHTML」の存在が前提であること、事前に取り決めておくべき制作方針（クライアントとの合意事項）など、ワークフローの前段階の話も書きました。

XHTML+CSSのワークフローをはじめて学ぶ人だけでなく、すでに身につけている人も想定して書きましたので、ぜひお手にとってご一読いただければと思います。

2005-11-29T23:55+09:00 | Web標準 | 固定リンク | コメント (0) | トラックバック (0)

風邪のため

一週間ほど前から風邪気味で、市販薬を飲みつつ騙し騙し日々を過ごしてきたが、今日完全にダウン。風邪による頭痛のため起き上がれず、一日中床に伏していた。まさに小さなアワビことトコブシ状態。磯のアワビの片思い。関係ないか。

お昼に来たらしい~~ペリカン文書~~ペリカン便にも全く気づかず。不在連絡票によると12:30とのことで、その時間は横になっていただけのはずなのに。日中に来た携帯メールには、目が覚めたときに片目をつぶりながら何件か返答。頭が痛いときは片目をつぶってしか携帯メールが打てない。焦点が合わないからか。

この時間にやっと床を出て、両目を見開いてWebとかメールをチェックしているけど、全く集中力なし。こうしてブログを書いているのが奇跡なぐらいだ。「おすぎです。何も言いません。凄い映画です。これは奇跡です」。

本調子になるまであらゆるレスポンスが遅れ気味になります。ご容赦ください。

2005-11-29T00:22+09:00 | 身辺雑記 | 固定リンク | コメント (0) | トラックバック (0)

作業と精神的負担

新しいノートPC（ThinkPad T43p 2668-Q2J）を買ってから約1ヶ月。今日やっとApacheを入れた。最近PerlとかPHPをイジッていないのでまあいいかと思っていたが。2.0.55ではなくこれまでどおり1.3.34。

いつも呆れるのは、httpd.confの設定変更など「インストールの際に何をどうすべきか」をきちんとメモっておかない自分のズボラさ加減。旧PCを起動して、httpd.confを自己宛メールで送って、新しいPCのほうで受信して、突き合わせチェックで設定を引き継ぐ。

時間にしてせいぜい10分ぐらいだからメモっておくまでもないと思ってしまうのだが、このように時間的負担ではなく精神的負担、つまり面倒臭さが理由でなかなか手をつけない作業は意外と多いもの。

精神的負担を軽減する仕組みをいかに整えておくかが、スムーズに仕事をこなすのに不可欠だとわかってはいるのだけど。

2005-11-27T12:33+09:00 | 身辺雑記 | 固定リンク | コメント (0) | トラックバック (0)

IE 7.0 b1を使ってみた

遅ればせながらIE 7.0 beta 1を使ってみた。まだまだ発展途上という感じ。当たり前か。

話題のタブブラウジング（下図）も、Firefoxのように「リンクを新しいタブで開く」といった項目がコンテキスト（右クリック）メニューにないので手間がかかる。

[スクリーンショット: IE 7.0ベータ1のタブブラウジング機能]

インターフェースについては、IEBlogの2005年11月21日付けエントリーのスクリーンショットを見ると、全体的に質感が向上し、ボタン類が少し追加されているぐらいで、beta 1以降に大幅な変更は加えられていないようだ。

レンダリングエンジンは、まだIE 6のままのようだ（これは想定の範囲内）。Web標準サポートなどは今後に期待。

公式ドキュメンテーション

追記（2005-11-26）

今後のリリーススケジュールその他については、MyRSS管理人ブログさんがまとめていらっしゃるので、ご参照ください（14:31）。

2005-11-26T14:19+09:00 | Webトレンド | 固定リンク | コメント (0) | トラックバック (0)

産経新聞防災ネット

新聞を模したレイアウト、3Dな作りは単純といえば単純だけど、実際にカタチにしたものははじめて見たのでちょっと驚いた。
うん、よくできている。

産経新聞防災ネット: http://www.bo-sai.net/

2005-11-26T01:31+09:00 | 注目サイト/ソフト | 固定リンク | コメント (0) | トラックバック (0)

早くも今年を振り返る

雑誌の年末進行とかいろいろと迫っている時期であるが、かといって他の仕事を前倒しで終わらせるような殊勝さもなければ余裕もない。ぶらり三都物語にでも行きたいが、その目論見は人べんに夢と書いて儚く消え失せ、この時間になってもPCに向かって人べんに動くと書いて働いているわけだ。

思えば今年は長期旅行をしていない。気づいたら師走が目前という時期になっていた。どこかに時間泥棒がいて、1日24時間をこっそり20時間にされていたような気がする。

原因はわかっている。決して時間泥棒のせいではない。興味がいろんな方向に拡散してしまって、情報収集とトライアル＆エラーに時間を取られたことだ。成長に不可欠なプロセスなのかもしれないが、それにしてはクネクネと日光いろは坂のような道をとつ迷いつたどってきた感じだ。

来年の話をすると鬼に腹を抱えて爆笑されるが、私事も仕事もいろいろとイベントがある予定。計画どおりに行くかどうかわからないけど、今年がその滑走路になったと、後年振り返ることができればと。

2005-11-25T00:38+09:00 | 身辺雑記 | 固定リンク | コメント (0) | トラックバック (0)

ボージョレヌーボー私的解禁

すでに旧聞に属する話題であることに、時の移ろいの早さを感じてしまうわけだが。

いくら四葉雷蔵の私にもお酒に好き嫌いはある。赤ワインはほとんど飲まない。それに、ボージョレヌーボー解禁だの何だのと世間のロマンティック浮かれモードに掉さして生きる、そのぐらいの心意気はもっている。男一匹ガキ大将だ。

数日前にいつものお酒屋さんに寄ったら、入り口には「ボージョレヌーボー本日解禁」という派手派手しいポップとともに山積みの瓶。無視して洋酒コーナーに進み、バーボンを物色していると、棚の向こう側にボージョレ山が。見まい見まいとしてもどうしても気になって、往年のタマちゃんが水面に顔を出すように棚からひょこひょことチラ見する。

そうこうしているうちに、気づいたらボージョレ山のふもとにたどり着いていた。「なぜ山に登るのか。そこに山があるからだ」。

で、

[写真: ボージョレヌーボーの瓶]

買いました、ボージョレ。

で、

[写真: ボージョレヌーボーをワイングラスに注いだ]

飲みました、ボージョレ。

感想。なかなか美味しいじゃないか。
来年から四の五の言わずに素直に飲みます。

2005-11-23T22:46+09:00 | 身辺雑記 | 固定リンク | コメント (0) | トラックバック (0)

AppleのXmasバナー

LinkShare（リンクシェア）で利用できるApple StoreのXmasバナーが超クール。

追記（2005-11-23

そろそろ新しいiPodを買わないとな。
私の第2世代iPodはバッテリーがヘタリ気味で、騙し騙し使っている。
第2世代なんて、まだ使っている人はいるのだろうか（13:58）。

2005-11-23T00:31+09:00 | Webトレンド | 固定リンク | コメント (0) | トラックバック (0)

夕刊フジBLOGのタブ広告

夕刊フジBLOGのナビゲーションタブに「松井証券HP」の広告が。
ちょっと騙し討ちっぽいけど、斬新といえば斬新。

2005-11-22T23:12+09:00 | Webトレンド | 固定リンク | コメント (0) | トラックバック (0)

Google Maps API解説

先日のほったらかし温泉ではGoogle Maps APIを利用して地図を埋め込んだが（現在は埋め込まずに単純にリンクさせています）、友人知人から「どうやるのか簡単に教えて」という要望がいくつか寄せられた。

公式のドキュメンテーション（Google Maps API Documentation）が公開されているが、設置の際に気づいた点も含めて、導入手順とカスタマイズ方法をまとめてみる。

まずはAPI Keyの取得

Sign UpからGoogle Maps API Keyを取得する。利用条件に同意し、サイトのURLを入力すればAPI Key生成される。Keyの取得にはGoogleアカウント（無料）が必要。

設置の前に

正しいXHTML文書への埋め込みが推奨されている

Google Mapsは、正しいXHTML文書への埋め込みが、またレンダリングモードは標準準拠モード（standards compliant mode）が採用されることが推奨されている。

試したところでは、HTML 4.01でも文書型宣言なしでも問題なく表示された（Firefox 1.0.7とWin IE 6で確認）が、script要素（後述参照）では内容をCDATAセクションとするので、厳密にはXHTMLでなければならない。

レンダリングモードについては、XHTML文書でXML宣言を記述してしまうと、Win IE 6では過去互換モードが採用されてしまう。ただ、過去互換モード（つまりXML宣言を記述したまま）でも問題なく表示されたので、この点はそれほど気にしなくてもよさそうである。

エンコードは`UTF-8`

Google Mapsを埋め込むページのエンコードはUTF-8。もしShift_JISなど他のエンコードを採用している場合は、UTF-8ベースの別ページを作ってインラインフレーム（iframe要素）で呼び出したほうがよい。他のエンコードのまま呼び出すと、Win IE 6でエラー表示され、Google Mapsが読み込めない場合がある。

現状はインラインフレームとして表示させるのが安全

これは私の環境に基づくが、ページのエンコードがUTF-8であっても、Win IE 6のエラー表示はなくならなかった。インラインフレームを経由して呼び出す方法にしたらエラー表示がなくなった。したがって、エンコードに関わらず、インラインフレーム経由でGoogle Mapsを埋め込んだほうが安全だと思う。

インラインフレームを呼び出すページの文書型をStrictではなくTransitionalにしなければならないが、この点は目をつぶる。もちろん元々Transitionalであれば問題はない。

シンプルな例

ソース

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
//]]>
</script>

サンプル（google_maps1.html）

解説

div要素ではstyle属性で地図の幅（width）と高さ（height）を指定する。

公式のドキュメンテーションのサンプルでは、Key情報を含めたscript要素がhead要素内に書かれているが、必ずしもhead要素に含めなくてもよい。ここでは、div要素の直後に書いておくとしよう。src属性では取得したあなたのKeyを指定する。

map.centerAndZoom()メソッドで地図の中心点の経度と緯度を指定する（139.70352172851562, 35.68757466560839）。

※ 経度と緯度を算出するための地図を用意したので、ご利用ください。

また、map.centerAndZoom()メソッドでは地図の縮尺を指定する（4）。値が小さければズームインされた地図で、値が大きければズームアウトされた地図で表示される。

移動/縮尺ボタンをつける

ソース1

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
//]]>
</script>

サンプル（google_maps2.html）

解説1

map.addControl(new GSmallMapControl());という記述を含めることで、地図上に移動/縮尺ボタンを表示することができる。

ソース2

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
//]]>
</script>

サンプル（google_maps3.html）

解説2

GSmallMapControl());の「Small」を「Large」に変更することで、縮尺ボタンにスライドバーを表示することができる。

マップ/サテライト切り替えボタンをつける

ソース

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
//]]>
</script>

サンプル（google_maps4.html）

解説

map.addControl(new GMapTypeControl());という記述を含めることで、地図上にマップ/サテライト切り替えボタンを表示することができる。

なお、script要素のsrc属性のURLが「maps.google.co.jp」の場合、切り替えボタンは「マップ」と「サテライト」の2つ。「maps.google.com」に変更した場合、切り替えボタンは「マップ」と「サテライト」と「ハイブリッド」の3つになる。ただし、日本国内の地図情報は「ハイブリッド」に対応していないようだ。

マーカーを表示させる

ソース

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
var point = new GPoint(139.70352172851562, 35.68757466560839);
var marker = new GMarker(point);
map.addOverlay(marker);
//]]>
</script>

サンプル（google_maps5.html）

解説

変数pointで経度と緯度を取得し、変数markerでGMarkerをその位置に表示させるようにし、map.addOverlay()メソッドの引数にmarkerと指定してマーカーを生成させる。ここでは地図の中心点とマーカーの位置に同じ経度と緯度を指定しているが、もちろん異なる経度と緯度でもよい。

インフォウィンドウを表示させる

ソース1

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
var point = new GPoint(139.70352172851562, 35.68757466560839);
var marker = new GMarker(point);
map.addOverlay(marker);
var offset = new GSize(0, -20);
map.openInfoWindow(map.getCenterLatLng(), document.createTextNode("新宿駅"),
offset);
//]]>
</script>

サンプル（google_maps6.html）

解説1

変数offsetは、インフォウィンドウの初期位置をマーカーの「黒丸」の部分にするための指定。GSizeの引数の1番目がx軸、2番目がy軸上の移動位置（ピクセル値）。別に「黒丸」の部分を初期位置にしなくてもよいが、何となく。

map.openInfoWindow()メソッドで、インフォウィンドウの中身を指定する。document.createTextNode()メソッドの引数として含めた文字列が、インフォウィンドウ上に表示される。なお、この方法では文字列が指定できるだけで、リンクの設定などマークアップを指定することはできない。マークアップを指定するには、次の方法を利用する。

追記（また、Firefox 1.5やOpera 8.5では、なぜか文字列が縦書きになってしまうという問題がある。次の方法では縦書きが回避できる。

ソース2

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
var point = new GPoint(139.70352172851562, 35.68757466560839);
var marker = new GMarker(point);
map.addOverlay(marker);
var offset = new GSize(0, -20);
map.openInfoWindowHtml(map.getCenterLatLng(),
'<div style="width: 200px">
<a href="http://ja.wikipedia.org/wiki/%E6%96%B0%E5%AE%BF%E9%A7%85"
target="_top">新宿駅</a><br />東京都新宿区<br />よく利用する駅です。
</div>', offset);
//]]>
</script>

（引数に含めたマークアップを途中で改行していますが、実際は改行しないで記述してください）

サンプル（google_maps7.html）

解説2

インフォウィンドウでマークアップを指定するには、map.openInfoWindow()メソッドではなくmap.openInfoWindowHtml()メソッドを利用する。内容にリンク（a要素）を含める場合は、target属性で「_top」と指定しておく（リンク先がインラインフレーム内に表示されるのを防ぐため）。

追記（なお、<div style="width: 200px">～</div>でラップしているのは、Firefox 1.5やOpera 8.5では内容が縦書きになってしまうという問題を回避するためである（2005-12-10）。

追記（モダンブラウザを前提にするのであれば、<div style="white-space: nowrap">～</div>としても縦書きの問題が回避できるようだ（2005-12-11）。

2005-11-21T23:12+09:00 | Webトレンド | 固定リンク | コメント (2) | トラックバック (6)

XHTML+CSS集中講座

11月19日（土）と20日（日）の2日間にわたって東京・恵比寿で開催した「XHTML+CSS集中講座」が終了しました。早めに満席になり、盛況のうちに終えることができました。

神戸や京都、長野など遠方よりご参加いただいた方もいらっしゃって、とてもうれしかったです。参加者の皆さん、お疲れさまでした＆ありがとうございました。

次回は12月3日（土）と18日（日）に開催します。すでに申し込み受付をはじめていて、すぐに満席になってしまうかもしれませんので、参加をお考えの方はお早めにお申し込みください。2日連続申し込みも、どちらか1日だけの申し込みも可能です。

12月3日（土）はXHTMLを、12月18日（日）はCSSを中心に扱います。そのほか、Webの最新事情についても実例を交えて講義します（今回はGoogle Analytics、Web 2.0などをお話ししました）。

詳しくは、XHTML+CSS集中講座紹介ページをご覧ください。

2005-11-20T23:56+09:00 | 話し仕事 | 固定リンク | コメント (0) | トラックバック (0)

エアロライフステッパー

実は先日の函館白いカレーと一緒に通販で買ったものがある。「エアロライフステッパー」。ご存知の方も多いことでしょう、往年の麦踏みを彷彿とさせる室内運動器具。

ダンボールに入ったまま2週間も放ったらかしにされていたエアロライフステッパー。忘年会が続く12月と喰ったら寝正月に向けて、大腰筋を鍛えてウエストを絞っておかねばと、思い出したようにダンボールを開けて取り出した。ゴソゴソ。

[写真: エアロライフステッパー斜め上から]

なかなか格好のよいフォルム。これは踏みごたえがありそうだ。

中央にはコントロールユニットがあって、

[写真: エアロライフステッパーコントロールユニット]

時間、回数、1分当たりの回数、消費カロリーまで切り替え表示してくれる。
エアロの名に恥じないハイテクぶり。

先ほど200回踏んでみたが、すでに筋肉に痛みが。これは効く、絶対に効く。
目標は1日400回、さもなくば夕食抜きだ。イエス！~~高須クリニック！~~

＊＊＊

ちなみに、横から見ると、

[写真: エアロライフステッパー横から]

カニっぽい。スプレーで真紅に染めたくなった。

2005-11-18T18:00+09:00 | 身辺雑記 | 固定リンク | コメント (0) | トラックバック (0)

Googleサイトマップ解説

Googleサイトマップ（Beta）が日本語に対応した。ユーザーがGoogleのインデックスにWebページを直接登録するサービスだ。

トップページでは次のようなメリットが謳われている。

サイトの統計情報とクロールできなかった URL に関する情報が確認できるようになります

クロールの精度が高まり、より多くのウェブページが検索結果に表示されるようになります

最新のページを検索結果に反映できます

ページの最終更新日や更新頻度など、ウェブページに関する具体的な情報を送信して、クロールがより効率的に行えます

また、Googleサイトマップを利用すると、そのサイトの「クロールに関する情報」や「検索クエリに関する情報」などのGoogleの統計データが取得できる。

[スクリーンショット: Googleサイトマップ統計情報クロールに関する情報]

[スクリーンショット: Googleサイトマップ統計情報検索クエリに関する情報]

利用にはサイトマップファイルが必要

Googleサイトマップの利用の際に必要なのが「サイトマップファイル」だ。既存の(X)HTML形式で作成したものではなく、新たに専用のXML形式で作成する必要がある（ほかにもいくつかの形式が認められている）。

今後、サイトマップファイルの用意は、必須のSEO手法となるだろう。サイトマップファイルの作成方法についてはヘルプに詳しい説明があるが、いくつかの補足を含めて以下で解説しよう。

サイトマップファイルのXMLフォーマット

全体像を示すと次のとおり。エンコードは「UTF-8」と決められている点に注意。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
  <url>
    <loc>http://www.cybergarden.net/</loc>
    <lastmod>2005-11-17T12:00:00+09:00</lastmod>
  </url>
  <url>
    <loc>http://www.cybergarden.net/blog/</loc>
    <lastmod>2005-11-17T12:00:00+09:00</lastmod>
  </url>
   :
  (必要なだけ。ただし50,000個まで)
   :
</urlset>

ルート要素はurlset要素。子要素としてurl要素を必要なだけ含める。url要素の子要素のloc要素が該当ページのURL、lastmod要素が最終更新日だ。時刻は示さずに日付だけでもよい（例: 2005-11-17）。

なお、ひとつサイトマップファイルに含められるURLは50,000個まで、ファイルサイズは10MBまでと決められている。

オプション要素の指定

オプション要素として、changefreq要素で更新頻度を、priority要素で優先度を指定できる。changefreq要素ではalways、hourly、daily、weekly、monthly、yearly、neverのいずれかの値が、priority要素では0.0から1.0までの値（デフォルトは0.5）が指定できる。

優先度は、あくまでサイト内での相対的な基準であり、他サイトのページとは比較されない。つまり、すべてに「1.0」としても無意味となる（＝0.5として扱われると考えられる）。

<url>
  <loc>http://www.cybergarden.net/blog/</loc>
  <lastmod>2005-11-17T12:00:00+09:00</lastmod>
  <changefreq>daily</changefreq>
  <priority>0.7</priority>
</url>

特殊記号や非ASCII文字のエスケープ

特殊記号「&」「'」「"」「<」「>」の5つは、それぞれ文字参照「&」「'」「"」「<」「>」でエスケープする必要がある。たとえばURLに「&」を含める場合は次のようにエスケープする。

http://www.cybergarden.net/forum&amp;mode=view

非ASCII文字についても、ISO 8859-1に基づいてエスケープする必要がある。たとえば「セディーユつきのC」は「%C7」、「ウムラウトつきのo」は「%F6」とエスケープする。エスケープのためのHex値（16進数値）についてはISO 8859-1 (Latin) Charcters Listを参考にするとよい。

サイトマップファイルを圧縮する場合

サイトマップファイルはgzip形式（.gz）で圧縮し、アップロードすることもできる。含められるURLは50,000個まで、ファイルサイズは未圧縮状態で10MBまでだ。

WindowsではLhacaなど、MacOSではGZipandaなどの無償ソフトウェアを利用することでgzip形式に圧縮できる。

複数のサイトマップファイルを使用する場合

サイトマップに含めるURLが50,000個を超える場合や、ファイルサイズが10MBを超える場合は、サイトマップインデックスファイルを作成することで、複数のサイトマップファイル（1,000個まで）のインデックスとすることができる。

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.google.com/schemas/sitemap/0.84">
  <sitemap>
    <loc>http://www.cybergarden.net/sitemap1.xml</loc>
    <lastmod>2005-11-17T12:00:00+09:00</lastmod>
  </sitemap>
  <sitemap>
    <loc>http://www.cybergarden.net/sitemap2.xml</loc>
    <lastmod>2005-11-17T12:00:00+09:00</lastmod>
  </sitemap>
   :
  (必要なだけ。ただし1,000個まで)
   :
</sitemapindex>

通常のサイトマップファイルと異なり、ルート要素にsitemapindex要素を、子要素にsitemap要素をサイトマップファイルの数だけ置く。loc要素が該当ファイルのURL、lastmod要素が最終更新日だ。

アップロード場所

サイトマップファイルはルートディレクトリにアップロードしておこう。サブディレクトリにアップロードする場合は、それ以下の階層のURLしか含めることができない点に注意（もし含めたとしてもクロールされない）。

サイトマップファイルがひとつの場合

http://www.cybergarden.net/sitemap.xml

サイトマップファイルが複数の場合

http://www.cybergarden.net/sitemapindex.xml
http://www.cybergarden.net/sitemap1.xml
http://www.cybergarden.net/sitemap2.xml

なお、ファイル名に特に決まりはない。

追記（2005-12-02）

サイトマップファイルをアップロードしてからしばらく経たないと、統計情報その他は見られない。データの取り込みに一定時間かかるということ。どのぐらいかはそのサイトによるが、1日（24時間）ぐらいは待つことがあると考えてよいと思う（13:43）。

追記（2005-12-14）

Googleサイトマップのステータスで「不適切な日付」というエラーが表示される場合は、lastmod要素の「時間」と「タイムゾーン」を削除し、「日付」だけにする。

[悪い例]
<lastmod>2005-11-17T12:00:00+09:00</lastmod>

[よい例]
<lastmod>2005-11-17</lastmod>

これはGoogleサイトマップ側の問題であり、将来的には解消されると考えられる（15:55）。

追記（2006-07-04）

現在、「不適切な日付」問題は解消されている（「時間」と「タイムゾーン」を指定してもオーケー）。

2005-11-18T01:25+09:00 | Webトレンド | 固定リンク | コメント (0) | トラックバック (15)

飛べ、白い鳥！

和田さんのブログで知った、Nifty Track Back Gallery。

あなたのブログからトラックバックを送信すると
NIFTY Track Back Galleryに「鳥」が一羽生まれます。
鳥をクリックすると……ぜひご参加ください。

ということなので、喜び勇んで飛ばしてみた。

＊＊＊

十数分後...

[スクリーンショット: Nifty Track Back Gallery 初期状態]

鳥を片っぱしからクリックしていると...

[スクリーンショット: Nifty Track Back Gallery マイ白い鳥の紹介]

とうとうマイ白い鳥の捕獲成功！

[スクリーンショット: Nifty Track Back Gallery マイ白い鳥の紹介アップ]

アップ画像です。何だかうれしい。

2005-11-17T16:20+09:00 | 注目サイト/ソフト | 固定リンク | コメント (0) | トラックバック (1)

匂いと香り

こんなことを書くと屁理屈人間と言われそうだが、個人的には「匂い」は悪いこと、「香り」はよいことと考えているので、「よい匂い」や「変な香り」という表現には違和感がある。「汗の匂い」を「汗の香り」とは、「汚職の匂いが漂う」を「汚職の香りが漂う」とは表現しない。匂いは臭気、香りは香気ということになる。

ただ、マンションの隣室の夕食がカレーとおぼしいとき、どんなに食欲をそそられても「カレーの香り」ではなく「カレーの匂い」と表現する人が多いと思う。私もそうだ。あるいは、花や香水については、よくても悪くても「香り」と表現する人が大半ではないだろうか。

そう考えると、「匂い」と「香り」の違いには単によし悪しだけではなく、対象自体が関わってくるケースもあるわけだ。イメージとしては、温かいものには「匂い」が、冷たいものには「香り」がマッチする気がする。

ほかにも、文字としては「臭い」「薫り」があるが、前者は悪い意味、後者はよい意味で使うのは明らかだ。「匂い」「香り」と発音が同じなのでお目にかかる機会は少ないが、そのぶん意味がはっきりしている。

2005-11-17T14:10+09:00 | Webライティング | 固定リンク | コメント (0) | トラックバック (0)

Web標準の日時の形式

実は一般的な文書フォーマットの間では、日時（date and time）の形式に混乱がある。主に使われるのは次の2つの形式だ。

ISO-8601/W3C-DTF（W3C Note, Date and Time Formats）。HTML、XHTML、XMLなどのW3C仕様、Dublin Core、Atomなどが準拠。RSS 1.0も日時のボキャブラリにDublin Coreを使うのが一般的なので（dc:dateなど）こっちのグループ。
RFC 822（IETF, RFC 822）。RSS 2.0、changes.xmlなどが準拠。

両形式を比較すると次のとおり（秒は省略。もしつける場合はどちらの形式も分のあとに「:55」と2桁で）。

ISO-8601/W3C-DTFの例

2005-11-16T02:27+09:00

RFC 822の例

Wed, 16 Nov 2005 02:27 +0900

どちらの形式がより「Web標準」的かというと、もちろんISO-8601/W3C-DTFのほうだ。

ただ、(X)HTMLでこの形式をそのまま表示してしまうのは、あまり格好がよろしくない（と感じるのは私だけだろうか）。不格好さの原因は、日と時をつなぐ「T」と、お尻の「+09:00」（タイムゾーン）にある。

そこで本ブログでは、次のようにspan要素とCSSを利用して「T」と「+09:00」が見えないようにしている（エントリーの末尾を参照）。

span.tandd { visibility: hidden; }
span.tzd   { display: none; }
 :
 :
2005-11-16<span class="tandd">T</span>02:27<span class="tzd">
+09:00</span>

ここで「T」に対して~~colorプロパティで背景色と同じ色を適用している~~visibilityプロパティで不可視化している理由は、displayプロパティで非表示化してしまうと日と時の間が詰まってしまうからだ。

おまけ: Movable Typeでの日時形式の設定方法

Movable Typeでは、MTEntryDateで日時形式を指定する。タイムゾーンはMTBlogTimezoneを利用するのが便利だ。

<$MTEntryDate format="%Y-%m-%d"$>T
<$MTEntryDate format="%H:%M"$><$MTBlogTimezone$>

2005-11-16T22:04+09:00 | Web標準 | 固定リンク | コメント (0) | トラックバック (0)

カニ占い

そろそろカニが美味しい季節。楽天市場でカニを注文したけど、届くのは来週末。

頭のなかがカニでいっぱいになってしまったので、勢いで「カニ占い」を作りました。生年月日と血液型から、あなたにマッチするカニとその性格を診断します。

カニの種類は、ズワイガニ、タラバガニ、毛ガニ、ワタリガニ、花咲ガニ、上海ガニの6つ。沢ガニとかはありません（ちょっと悲しすぎるので）。

ぜひお試しくださいませ。

カニ占い: http://u-maker.com/179004.html

ちなみに私は「ズワイガニ」でした。「タラバガニ」を狙っていたんですけど。

＊＊＊

今年は春夏秋と一所懸命働いたので、カニファンドの資金はまあまあ潤沢。継ぎ目なしにカニが食べられそうで、すでに心のなかでバンザイ三唱。カニゲル係数がめっぽう高くなりそうだ。

見出し構造の理想と現実

見出し（h1～h6要素）をどう適切に構造化するかは、これまでもわりと議論されてきた。W3C仕様書はいずれも言葉足らずなので、ISO-HTML（ISO/IEC 15445:2000）とそのユーザーズガイド（User's Guide to ISO/IEC 15445:2000）がよく引き合いに出される。

現状での理想的な見出し構造

拙著『Web標準の教科書』にも書いたが、ISO-HTMLの見出しに関する要件は、

h1要素からはじめること
途中のレベルの見出しを飛ばさないこと

の2点にまとめることができる。つまり、

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h3>小見出し</h3>
<h3>小見出し</h3>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h3>小見出し</h3>
<h3>小見出し</h3>

というように、h1要素からはじまり、h2要素、h3要素、それ以下、という階層構造が理想的ということになる。なお、後述のXHTML 2.0にも、途中のレベルの見出しを飛ばすのはよくない（bad practice）という説明が加えられている。

ここで「理想的」と書いたのは、ページ構成によってはいくつかの見出し要素を使うことが躊躇されたり、ページ間で統一的なマークアップルールを設けている場合、このような階層構造を逸脱しなければならないページもありうるからだ。

CSSをうまく利用してこれらの問題を避けることもできるが（たとえばdisplayプロパティを利用する）、必ずしも一定レベル以上のCSSテクニックを習得していないケースもある。

見出しが及ぶ範囲のわかりにくさ

理想的な階層構造であっても、見出しが及ぶ範囲がわかりにくいという仕様設計上の欠点は乗り越えられない。

私たち人間であれば、h1要素、h2要素、h3要素という順序をツリー構造として頭に思い描くことができる。しかし、ソース上はどの見出しレベルも完全にフラットな関係だ。

人間の認識

h1
- h2
  - h3
  - h3
  - h3
- h2
  - h3
  - h3
  - h3

ソース上の構造

h1
h2
h3
h3
h3
h2
h3
h3
h3

人間とマシンの認識のミスマッチといえるし、それぞれの見出しに対してツリー構造をもとに演繹的に役割を付与できないという実際的な問題もある。

将来の見出し構造

XHTML 2.0（現在、草案）では、h1～h6要素のほかに、h要素とsection要素が導入予定だ。これら2つの要素を入れ子にすることで見出しを階層化できる。

<h>大見出し</h>
<section>
  <h>中見出し</h>
  <section>
    <h>小見出し</h>
    <h>小見出し</h>
    <h>小見出し</h>
  </section>
</section>
<section>
  <h>中見出し</h>
  <section>
    <h>小見出し</h>
    <h>小見出し</h>
    <h>小見出し</h>
  </section>
</section>

このように、h要素で見出しを、section要素でその見出しが及ぶ範囲をマークアップすることになる。見出しをその範囲も含めてツリー構造化できるわけだ。

忘れられた問題: `h1`要素は複数出現してよいか

1つのページでh1要素が複数出現しても書式上は全く問題がない。XHTML 2.0はThe series h1 h2 h1 is acceptableという例を出しているぐらいだ。

一方、h1要素の「ルート見出し」としての性格を重んじれば、1つのページには1つのh1要素だけ、という考えになるだろう。私もどちらかというとこのタイプだ。h1要素の範囲ごとに複数のページにわけたり、見出しレベルの割り当て方を変えるといった方法で、1ページ1ルート見出しというルールを守ったほうがよいと考えている。

XHTML 2.0では、これまでの仕様と同様、書式上で1ページ1ルート見出しという制約が課されているわけではない。ただ、h1～h6要素も引き続き利用できるため、h1要素と最上位のh要素の役割がバッティングするのでは、という新たな疑問もある。

2005-11-14T17:00+09:00 | Web標準 | 固定リンク | コメント (0) | トラックバック (1)

ほったらかし温泉

決して「整備や管理がなされていない温泉」という意味ではない。固有名詞。昨日は日帰り温泉マニアの友人に連れられて、山梨県にある「ほったらかし温泉」に行ってきた。

場所は次のとおり（Google Maps APIを利用）。

ほったらかし温泉

[写真: ほったらかし温泉] 広めの無料駐車場が用意されており、大型バスも止まっていた。途中の狭い急斜面の道路でも何度か大型バスとすれ違って、雪が降ったらバスはおろか普通車でも四駆でないと厳しいだろうなと思った。

車のナンバープレートを見ると遠方から来ている人も少なくないが、温泉街ではなく山の途中にある温泉場なので地元の人のほうが多そうだ。

温泉には「あっちの湯」と「こっちの湯」があり、入泉料はどちらも大人500円、小学生以下400円。今回は「あっちの湯」を選択。露天風呂は手前が木造り、奥が岩造り。内風呂と洗い場もある。

露天風呂からの景色が最高。甲府盆地が一望でき、前方右手奥には富士山が見える。ちょうど夕暮れどきに着いたので、お湯につかりながら昼と夜のフェードアウト/フェードインが楽しめた。

追記（2005-11-13

よく考えれば、「あっちの湯」と「こっちの湯」というのも、投げっぱなしジャーマンふうのイカしたネーミングだ（18:00）。

2005-11-13T15:54+09:00 | 身辺雑記 | 固定リンク | コメント (0) | トラックバック (1)

パーソナライズドポータル考

検索エンジンはインターネットの扉とよくいわれるが、数年前までは文字どおりポータルサイトが「扉」の役割を果たしていた。しかし、ひとくちに「ポータル」といっても、その中身は昔と比べて様変わりしている。

少し振り返ってみると、Yahoo!のディレクトリという専門店からはじまったポータルは、その後ニュースコンテンツ、Webメール、マイページなどさまざまなサービスを投入し百貨店化することで、ユーザーのニーズを満たすとともにロイヤルティ（忠誠心）を得てきた。

しかし、このようなコンテンツ集約型ポータルは、Googleの登場によって変化を迫られることになった。既存のポータルのようにWeb上に無数に存在する情報のうち「有限の範囲」を切り取るのではなく、Googleは無数のなかから優れた情報を選び出すしくみを提供した。大げさにいえば、Googleによってユーザーにいっそう自由がもたらされた。

その後、Yahoo!やMSNなど既存のポータルも独自の検索テクノロジーの開発に着手することになる。一方でGoogleはコンテンツ集約型ポータルを見習ってGmailやGoogle Newsなどの新サービスを投入した。いわば互いの円の重なり合う部分が次第に大きくなっていった。ただし、表面的には同じサービスに見えても、Googleは常に斬新なテクノロジーで実現し、フリーかつオープンに提供してきたことは大いに評価すべきだ。

このような流れのなかで、Google Personalized Homepage（GPH）などのパーソナライズドポータルの出現をどう捉えたらよいか。

パーソナライズドポータルの目的のひとつは「ブラウザの弱体化」であり、ブラウザの機能や役割を奪うことだ。ブラウザの、そしてすべてのデスクトップアプリケーションの決定的な弱点は、単一のマシンを必要とすることだ。Web上でブックマーク、フィードリーダー、メーラーその他が利用できれば、どのマシンを使おうと関係がない。これは、Webをプラットフォームとして考えるWeb 2.0のコンセプトとも合致する。

ブラウザにはWebページをレンダリングするという役割だけが残されることになる。あるいは、Firefoxのように拡張機能を使って他のアプリケーションの機能を統合したり、Web上に散らばるサービスを集約できるブラウザでないと、パーソナライズドポータルと伍して戦えないことになる。

すでに述べたとおり、デスクトップアプリケーションにはパーソナライズドポータルが備えるユビキタス性はない。デスクトップアプリケーションからWebアプリケーションへ、MicrosoftからGoogleへという流れのなかで、ビル・ゲイツがWeb 2.0時代に備えるように幹部に指示したのも、このような認識にもとづくものだろう。

パーソナライズドポータルのもうひとつの目的は、提供サービスをまとめる窓口になることだ。GPHは明らかに、Google NewsやSearch History、Gmail、orkutなどのサービスを統合するプラットフォームとして位置づけられている。われわれユーザーにとっては、Googleが提供するサービスさえあればそれでよい、というわけでは決してないが、他社サービスへのアクセスはブックマークで埋め合わせることができる。

このように考えると、パーソナライズドポータルの出現は、後年振り返ってみたときにわりと衝撃的な出来事として語られるのではないだろうか。

追記（2005-11-11

ビル・ゲイツのメールの全文翻訳が公開されています。

CNET Japan 「『サービス化の波に備えよ』--ビル・ゲイツによる話題の...」: http://japan.cnet.com/news/biz/story/0,2000050156...

Googleパーソナライズド検索（Search History）も日本語に対応しました。

Googleパーソナライズド検索: http://www.google.co.jp/psearch

2005-11-10T22:14+09:00 | Webトレンド | 固定リンク | コメント (0) | トラックバック (2)

リストに見出しをつける方法

リストの見出しをどうつけるかは、簡単なようでわりと奥深い問題だ。以下、一般的な方法とその問題点を見たあと、突っ込んだ方法と応用例を説明しよう。

一般的な方法

リストに見出しをつけるには、h1～h6要素を利用するのが最も一般的だ。

<h2>カテゴリー</h2>
<ul>
  <li>Webトレンド</li>
  <li>ブログトレンド</li>
  <li>ポータルトレンド</li>
</ul>

しかし、この見出しは、リストに対してつけられているというよりは、ページ全体の文脈上の存在といえる。書式上は全く問題ないが、見出しとリストが直接結びつけられているわけではない。

突っ込んだ方法

dl要素（定義型リスト）を使って、見出し情報とリストを直接結びつけることができる。

<dl>
  <dt>カテゴリー</dt>
  <dd>
    <ul>
      <li>Webトレンド</li>
      <li>ブログトレンド</li>
      <li>ポータルトレンド</li>
    </ul>
  </dd>
</dl>

このように、dt要素に見出し情報を、dd要素にリストを含める。

あるいは、Jeffrey Zeldmanのサイトのように、

<dl>
  <dt>カテゴリー</dt>
  <dd>Webトレンド</dd>
  <dd>ブログトレンド</dd>
  <dd>ポータルトレンド</dd>
</dl>

と、ひとつのdt要素に複数のdd要素を対応させる方法もある。

番号リストはどうする？

番号リストの場合も、dl要素を利用して見出し情報とリストを対応させることができる。

<dl>
  <dt>好きなカニの種類</dt>
  <dd>
    <ol>
      <li>タラバガニ</li>
      <li>ズワイガニ</li>
      <li>花咲ガニ</li>
    </ol>
  </dd>
</dl>

ほかの要素にも応用できる？

もちろんできる。たとえばblockquote要素を考えてみよう（単純化のために属性は省略）。

<dl>
  <dt>
    <cite>益子 貴寛『Web標準の教科書』p.540</cite>
  </dt>
  <dd>
    <blockquote>
      <p>ただし、人間であれば知識や経験によって判断できることでも、
      コンピュータなどのマシンが判断するには何らかの仕組みが必要で
      ある。つまり、メタデータをマシンにも利用可能なかたちで表現す
      ることではじめて、検索や推論などの処理をマシンに代行させるこ
      とができることになる。</p>
    </blockquote>
  </dd>
</dl>

このように、dt要素に見出し情報として引用元を、dd要素にblockquote要素を含める。

また、ソースコードを示すのであれば、dt要素に見出し情報を、dd要素にpre要素を含めればよいだろう。

`dl`要素のちょっとした注意

このように、dl要素は、ある内容と他の内容を直接的に結びつけるのに利用できる。ただし、子要素であるdt要素はインライン要素であり、テキストや他のインライン要素を含むことができるが、ブロックレベル要素は含むことができない点に注意が必要だ。

つまり、次のようなdt要素とdd要素の内容モデルを逸脱することはできない。

<dl>
  <dt>(テキスト/インライン要素)</dt>
  <dd>(テキスト/インライン要素/ブロックレベル要素)</dd>
</dl>

まとめ

table要素にはcaption要素が用意されているので、見出しをどうつけるか迷うことはほぼない。しかし、他のブロックレベル要素には直接的な見出しをつける手段が与えられていないので、dl要素を利用するしかないというボキャブラリ上の制約がある。

個人的には、文脈上の見出しとしての役割を部分的にでも備えているのであれば、普通にh1～h6要素を利用し、あるブロックレベル要素に対する個別的な見出しを指定する場合だけdl要素を利用すればよいと考えている。

2005-11-09T22:58+09:00 | Web標準 | 固定リンク | コメント (0) | トラックバック (0)

Google Adsenseの紹介プログラム

Google Adsenseが紹介プログラムを開始した。新規利用者の広告収入が100ドルに達した時点で、紹介者に100ドルの謝礼が支払われるとのこと。

バナーのサイズは、120×240、120×60（2デザイン）、125×125、468×60の4種類から選べる。いずれもスクリプトを埋め込むタイプ。次は125×125サイズだ。

シンプル＆クリーンなデザイン。

2005-11-09T17:23+09:00 | Webトレンド | 固定リンク | コメント (0) | トラックバック (0)

包丁の突進を止めた爪

普段料理をする人なら、包丁で指を切りそうになった（あるいは実際に切った）ことが一度ならずあるはずだ。

今日の夜、野菜サラダを作ろうと玉ねぎ1/4個を猛スピードで極薄にスライスしていたら、終わりに近づいたとき包丁が変な角度で入ってしまい、でも玉ねぎにその勢いを止めるほど厚みはなく、猫の手にしている左手親指に向かって刃が突進してきた。

右腕の筋肉を総動員してブレーキをかけるも時すでに遅く「万事休す」と観念したら、やや伸び気味の爪のおかげで刃の勢いが殺され、皮膚まであとゼロカンマ何ミリのところで止まった。

無精さがこんなところで役に立つとは思わなかった。ことほどさように、何が幸いするかわからないという人生の妙に思いを馳せた。

2005-11-09T00:17+09:00 | 身辺雑記 | 固定リンク | コメント (0) | トラックバック (0)

CSS+XHTML？

書籍で「CSS+XHTML」と銘打ったものが出ているが（例）、これはおかしい。

XHTMLはそれだけで自己完結するフォーマットであるが、CSSは自己完結的ではないからだ。マークアップあってのスタイルシートであり、CSSはXHTMLの存在が前提になる。HTMLでもXMLでも同じだ。

単なる数字の足し算ならば「1+2」でも「2+1」でもよい。しかし、言葉はその出現順序によって主従関係や前後関係、多寡の関係などがつきまとう。だからこそ「XHTML+CSS」という表現が一般的なのだ。

2005-11-07T20:07+09:00 | Web標準 | 固定リンク | コメント (0) | トラックバック (0)

すき焼きメール

見ず知らずの人から、携帯に

今晩すき焼きでいいですか？

というメールが舞い込んで右往左往。「いいですよ」と返したい気持ちでいっぱいになった。

少し考えた後、「誤送信ですので、正しいアドレスにご送信ください」とヨード卵の黄身ぐらいに濃厚な洒落の利いたメールを返そうと思ったが、何かの罠かもしれないと思いとどまってスルー。

もし他意のない単純な誤送信メールだったとしたら。記念日、誕生日、昇進などなどメールの向こう側のささやかな幸福シチュエーションを思い浮かべてしまった。

誤送信の旨を伝えてあげなかったことに、何か申し訳なさに似た感情を覚えた。

2005-11-06T23:56+09:00 | 身辺雑記 | 固定リンク | コメント (0) | トラックバック (0)

『WEB STRATEGY』 Vol.1

MdNの新雑誌『Web Strategy』Vol.1が10月31日に発売されました（ムック扱いですが、すでに来年1月中旬のVol.2の発売が決まっているそうです）。

Webデザインではなく、ディレクションやプロモーション、プランニング、運用ノウハウにフォーカスした新しいタイプの雑誌です。企業の広報担当者やWebビジネスを大きく発展させたい方などにもおすすめです。

私は次の記事を執筆しました。

WEBディレクションに求められる「検索エンジンとの上手な付き合い方」を30分で身につける今だから再確認! SEO/SEMの基礎固め
魅せる! 読ませる! WEBライティングと文章編集の実践テクニック

全国書店/オンラインで好評発売中ですので、興味のある方はぜひお手にとってみてください。

2005-11-06T01:13+09:00 | 書き仕事 | 固定リンク | コメント (0) | トラックバック (0)

エントリーの「日時」の意味

普通にエントリーを書いて普通にポストする人はピンとこないかもしれない。エントリーを「書いた時間」と「投稿した時間」にタイムラグはほぼ発生しないからだ。投稿フォーム上でエントリーを書くのに時間がかかってしまい、30分ぐらいタイムラグが発生してしまうこともあるが、その程度なら誤差の範囲といえる。

日時指定に対応しているブログサービス/ツールでは誤差が修正できる。それだけでなく、過去の日付を指定することも、未来の日付を指定することも可能だ。実際に、ブログを純粋な日記として利用している人は、所用や多忙で数日間エントリーを投稿できなかった場合、時間ができたときに数日分のエントリーをまとめて書き、過去の日付を指定して欠けた日のエントリーを埋めたりもする。

しかし、読み手としては、現在の日時と投稿された日時が大きく異なることに違和感を覚える。ブログは書き手と読み手の同時性（simultaneity）が大切だと思うからだ。フィードリーダーでそのブログのフィードをチェックしたとき、新たなエントリーが過去の日付で（あるいは何時間も前の設定で）投稿されていたりすると大いに戸惑う。

うがった見方をすれば、過去の日付を指定したエントリーで、すでに起こったことを予言することもできるわけだ。しかもその真偽を検証するには、かなり熱心にそのブログを観察していない限り無理だ。フィードで最新15エントリーを提供しており、それらは今日から遡って15日以内に書かれたとすると、それ以前の日付を指定して投稿されたエントリーは、多くの人にとって隠されたエントリー（hidden entries）となる。

あるいは、予言とまではいかなくても、ある物事について有力な意見が公開されたとき、それ以前の日時でその意見を取り込んだエントリーを投稿すれば、「自分のほうが先にそう考えていた」ことを示すことができてしまう。本来ある人に帰属すべきオリジナリティが別の人に帰属してしまうか、あるいは疑義が生まれてしまう可能性があるわけだ。

議論が熟した後に、「たぶんこういう結論になるだろう」というエントリーを過去の日付で投稿することもできる。いわば先見の明を偽装していることになる。

著名なブログであればすぐにこのような異変に気づく人が現れるかもしれない。しかし、読み手がそれほど多くはない普通のブログではそうはいかないばかりか、検証手段も限られている。後日、検索エンジンのインデックスに反映され、オリジナルのエントリーと模倣したエントリーの両方が多くの人の目にさらされたとき、投稿日時を比較しただけでは後者がオリジナルとなってしまう。

もちろん「偶然の一致」というケースもありうるだろう。しかし、それを証拠づけるものは何もないため、判断は読み手のリテラシーに依存することになる。読み手間の情報交換によって判断が洗練される可能性もあるが、あくまで事実に近づくだけであって事実を知るわけではない。

単純に読み手の混乱を避けるためだけでなく、このような問題の発生を防ぐためにも、現在の日時と大きく異なる日時で、特に過去の日付でエントリーを投稿しないほうがよいと思う。純粋な日記であれば、タイトルに該当する日付を書き、投稿日時は文字どおり投稿した日時のままにしておくなど、いくつか方法はあるだろう。純粋な日記ではなく、たとえばコラム形式であればなおさら、投稿日時を過去の日付にする必要はないはずだ。

同じ考え方が、過去のエントリーを大きく改変する場合にも当てはまる。改変の際はdel要素とins要素を利用するか、手を加えずに追記として書くべきだろう。どちらの場合でも日付を示す必要があるが、del要素とins要素の場合はdatetime属性で、追記ならばテキストでプレーンに示せばよい。

2005-11-05T23:53+09:00 | ブログトレンド | 固定リンク | コメント (0) | トラックバック (1)

函館白いカレー

フジテレビ.ディノス専門チャンネルをたまたま見て、衝動買いしてしまったものが今日届いた。それは、「函館白いカレー」。

白いカレー？　そう、白いカレー。われわれの既成概念を打ち砕く斬新なアイデア。タイカレーはわりと白っぽかったりするが、真っ白ということはない。函館の「季節居酒屋ひろべ」店主広部三雄さんが考えたそうだ。

以下、レポート。

箱とパウチ

まずは箱から。

[写真: 函館白いカレーの箱]

何が書かれているかというと...

函館の料理店が
道南の帆立、野菜、牛乳と、
さらに（ココナッツミルク）で
まろやかに造りました。

とのこと。

右上隅には「2004年度第12回北海道加工食品フェア北海道知事賞」のシールが。北海道の星（なのか）！左側に「中辛」というマークがあるが、ほかのレベルは存在しない模様。心構えとして、ということか。

箱のなかのパウチは...

[写真: 函館白いカレーのパウチ]

真っ白。見上げたこだわりようだ。

盛りつけ

さあ、はりきって盛りつけよう。

[写真: 函館白いカレーの盛りつけ]

どう見ても~~くりぃむしちゅー~~クリームシチュー。
色合い的にブロッコリーを添えたくなったので、そうしてみた。

カレーなのでラッキョウをつけてみたが、場違い感ひしひし。
唐辛子の位置をちょっといじって...

[写真: 函館白いカレーに添えたラッキョウ]

ミル・マスカラス。

試食

さて、遊んでいないで食べてみよう。

[写真: 函館白いカレーをスプーンですくう]

感想を正直にいいます。ビミョウ。「いただきました、星ひとつ半です」。

辛さはあるといえばあるんだけど、何とも物足りない。味が定まっているようで定まっていない。「ちょっとスパイシーなクリームシチューです」といわれても、そのまま信じて食べてしまうぐらい。

2005-11-05T00:46+09:00 | 身辺雑記 | 固定リンク | コメント (0) | トラックバック (0)

放送と通信の融合

今日は文化の日なのでのんびりと文化的な生活を送ろうと思っていたのに、ある媒体の記者から電話が。楽天 vs. TBSで話題の「放送と通信の融合」について意見を聞かせてほしいとのこと。

こちらの都合を考えずにずけずけと厚かましいと思ったが、知らない人ではないので、専門外ですがと断ったうえで次のようなやり取りをした。

放送と通信という区別の古臭さ

記者

放送と通信の融合について、抱いているイメージを聞かせてほしい。

私

まず「放送と通信」という区別自体が古い。電波に乗せるか回線に乗せるかというハードの話ばかりで、肝心のコンテンツがなおざりだ。コンテンツがどのような経路で配信されようと、ユーザーにとっては届きさえすればよいからだ。

アメリカではTiVoというハードディスクレコーダーが流行している。地上波やケーブルテレビなどの番組情報（EPG）をもとに、好きな番組をハードディスクに録画しておくシステムだ。つまり、TiVoユーザーからすればコンテンツだけが問題なのであって、配信経路はどうでもよい。

記者

それはライフスタイルの多様化と関係しているのか。

私

もちろん関係している。ユーザーのライフスタイルは多種多様なのに、テレビ番組は時間弾力性がない。古くからビデオテープレコーダーが時間弾力性を補完してきたが、180分テープで3倍速で録画して9時間が容量の限度だった。しかし、ここ数年でハードディスクレコーダーが普及し、容量は飛躍的に増大している。デスクトップPCもテレビ/ビデオ機能つきが当たり前になった。「フロー」ではなく「ストック」の観点で考えるべきだ。

余談だが、テレビ局が躍起になっている視聴率というのはそもそもおかしな算出方法だ。統計的には信頼できる母数が確保されているかもしれないが、録画した場合はカウントされないという致命的な欠陥がある。ビデオリサーチ社といいながら、ビデオが対象に含まれていないのは皮肉だ。

放送のデジタル化

記者

地上デジタル放送が2006年までに全国で開始されるが、その影響は？

私

放送と通信を区別する意味がいっそうなくなる。フロー型視聴からストック型視聴への移行が一気に加速するのは間違いない。ホームサーバやマンションサーバに1週間分の番組を録画しておき、見たい番組を見たいときに視聴できるようになるはずだ。

先ほどの視聴率の話でいえば、デジタル化によってフローもストックも適切に把握できるようになるため、正確な値が算出できるようになるだろう。ただ、そのころには視聴率が今ほどの意味をもた�

Web::Blogoscope

Firefox 1.5正式版リリース

スクリーンショット

タブの並び替え

新しくなったオプション画面

関連エントリー

追記 （2005-11-30

デフォルトの検索プラグイン

Web標準ワークフロー

風邪のため

作業と精神的負担

IE 7.0 b1を使ってみた

関連エントリー

公式ドキュメンテーション

追記 （2005-11-26）

産経新聞 防災ネット

早くも今年を振り返る

ボージョレヌーボー私的解禁

AppleのXmasバナー

追記 （2005-11-23

夕刊フジBLOGのタブ広告

Google Maps API解説

まずはAPI Keyの取得

設置の前に

正しいXHTML文書への埋め込みが推奨されている

エンコードはUTF-8

現状はインラインフレームとして表示させるのが安全

シンプルな例

ソース

解説

移動/縮尺ボタンをつける

ソース1

解説1

ソース2

解説2

マップ/サテライト切り替えボタンをつける

ソース

解説

マーカーを表示させる

ソース

解説

インフォウィンドウを表示させる

ソース1

解説1

ソース2

解説2

XHTML+CSS集中講座

エアロライフステッパー

Googleサイトマップ解説

利用にはサイトマップファイルが必要

サイトマップファイルのXMLフォーマット

オプション要素の指定

特殊記号や非ASCII文字のエスケープ

サイトマップファイルを圧縮する場合

複数のサイトマップファイルを使用する場合

アップロード場所

サイトマップファイルがひとつの場合

サイトマップファイルが複数の場合

追記 （2005-12-02）

追記 （2005-12-14）

追記 （2006-07-04）

飛べ、白い鳥！

匂いと香り

Web標準の日時の形式

ISO-8601/W3C-DTFの例

RFC 822の例

おまけ: Movable Typeでの日時形式の設定方法

カニ占い

関連エントリー

見出し構造の理想と現実

現状での理想的な見出し構造

見出しが及ぶ範囲のわかりにくさ

人間の認識

ソース上の構造

将来の見出し構造

忘れられた問題: h1要素は複数出現してよいか

ほったらかし温泉

追記 （2005-11-13

パーソナライズドポータル考

追記 （2005-11-11

追記（2005-11-30

追記（2005-11-26）

産経新聞防災ネット

追記（2005-11-23

エンコードは`UTF-8`

追記（2005-12-02）

追記（2005-12-14）

追記（2006-07-04）

忘れられた問題: `h1`要素は複数出現してよいか

追記（2005-11-13

追記（2005-11-11

`dl`要素のちょっとした注意

函館白いカレー