---

■ CSS Hack

仕事で対応しないといけないブラウザは IE5/IE6/IE7/Fx2/Safari3 の 5ブラウザ。

CSS をファイル別に分ければ対応は簡単なのだが、パフォーマンスやメンテナンスの観点から 1つのファイルでの対応になっている。

そうなると、CSS Hack の使用はさけられない。

.test {
	color:#000;	// IE5
	voice-family:"\"}\"";
	voice-family:inherit;
	color:#f00;	// IE6
	}
:root .test {
	color:#0f0;	// Fx2.x 〜
}
html:\66irst-child .test {
	color:#00f;	// Sarafi2.x 〜
}
html:not(:only-child:only-child) .test {
	color:#f0f;	// Safari3.x
}
*:first-child+html .test{
	color:#ff0;		// IE7
}

このコードを見てすぐに表示が思い浮かぶようなら、CSS に関しては言うことなし。

html:not(:only-child:only-child) は今日教えてもらって初めて知った。

今後 IE8 が出てくると、それに対する対応も何か考えないといけないんだよなぁ。

---

---

■ IE8 WebSlices メモ

Activities 以外のもう一つの新機能である WebSlices のメモ。

こちらの方がサービスとして作りやすい。要は RSS。マイクロフォーマットの一種。Safariだとデフォルトで実装済み。Firefox だと何だろう?

WebSlices の Whitepaper
http://code.msdn.microsoft.com/ie8whitepapers/Release/ProjectReleases.aspx?ReleaseId=567

対応としては HTML に決まったクラス名をつけるだけ。

<div class="hslice" id="1">
	<p class="entry-title">Item - $66.00</p>
	<div class="entry-content">high bidder: buyer1 … </div>
	<abbr class="endtime" title="2008-02-28T17:00:00">
	<span class="ttl">15</span>
	<a rel="feedurl" href="auction.microsoft.com/item.xml"></a>
</div>

- "hslice" と "id"、"entry-title" は必須。これだけでもおKー
- entry-content はオプショナル
- endtime はエクスパイアされる、したい時間
- ttl は To The Live の略。単位は分。情報を取りに行くインターバル。デフォルトだと 15分。これ以下の時間には設定できないみたい。
- feedurl は entry-content の代わりに表示させたい外部ファイルへのリンク

これだけで、ツールバーに追加されるが、デザインが微妙なので別途外部ファイルを読み込んだ方がいい。読み込み方法は feedurl でのリンク先で指定する。ただしリンク先の外部ファイルは RSS2.0 に準拠したフォーマットである必要があるので、これだけでもデザインはかなりおかしい。

ので、かなり強引だが、RSS の XML ファイルの description 要素の中に HTML のコードを直で書く。

<description>
	<![CDATA[ 
		<p style="background:blue">The weather is X.</p>
	]]> 
</description>

外部スタイルシートを読み込めないので、スタイルはインラインで直に指定する。複雑なデザインにしようと思うとかなり面倒。しかも RSS として吐かないといけないのでテンプレ作るのが面倒。うーん、どーすっかな。

Activities も Webslices も ebay の IE8 対応サイトが非常に参考になる。

eBay – Internet Explorer 8 Beta – Activities and WebSlice Enabled Search

---

---

■ IE8 Activities メモ

IE8 β1 を対象にしたサンプルを作り始めたのでメモ。

IE8 β1
Internet Explorer 8 Beta: Home Page

IE8 に関する最新情報は開発者の Blog で。
IEBlog

---

IE7 互換モードで表示させる場合はヘッダーの Meta Tag で対応

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

UserAgent

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)

- Emulationモードでも IE8 の機能は使える。Emulation はあくまでも表示ベースの対応
- Emulationモードでは User Agent は IE7 と全く同じになるため、アクセスログ上では IE7 と IE8 の区別がつかない
- IE7 の Emulation モードじゃないと Windows Update が使えない

---

メインの新機能は Activities と Web Slice

Activities
現在 Activities に登録できるサービスは以下。デフォルトでも幾つかのサービスは登録済み。
http://ie.microsoft.com/activities/en-en/Default.aspx

Activities Whitepaper
http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&ReleaseId=566

Whitepaper をベースにしてサンプル作成。とりあえず、Preview Window には HTML でできることはすべてできるっぽい。JS も Flash も Silverlight も CGI も問題なく動く。

作成方法
1. XML ファイルを用意。
sample.xml

<?xml version="1.0" encoding="UTF-8"?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <homepageUrl>http://maps.live.com</homepageUrl>
        <display>
            <name>Map with Live Maps</name>
            <icon>http://www.live.com/favicon.ico</icon>
        </display>
        <activity category="map">
            <activityAction context="selection" >
                <preview action="http://maps.live.com/geotager.aspx">
                    <parameter name="b" value="{selection}" />
                    <parameter name="clean" value="true" />
                    <parameter name="w" value="320" />
                    <parameter name="h" value="240" />
                    <parameter name="format" value="full" />
                </preview>
                <execute action="http://maps.live.com/default.aspx">
                    <parameter name="where1" value="{selection}" type="text" />
                </execute>
            </activityAction>
           </activity>
</openServiceDescription>

- "homepage Url"、"preview action"、"execute action" のドメインは同一じゃないと駄目
- name はコンテクストメニュー等に出るので適宜変更
- icon も同様
- category は現状 "map" や "blog"、"define" なんかがあるけど自由に設定可能みたい
- activityAction は "selection"、"document"、"link" の 3つ。デフォルトは selection


2. HTML ページに XML ファイルを呼び出すコードを適当に記述

<button onclick="window.external.addService('sample.xml')">
	Activities Sample
</button>

準備はこれだけ。後はクリックして(させて) 登録すればおK－。問題があれば登録時にエラーダイアログが出る。

通常考えられるサービスは検索、翻訳がらみ。現在用意されているサービスもそんな感じ。HTML だったら何でも表示できるので他のサービスもできそうだけど、コンテクストメニューに表示する意味があるかどうかが問題。何か面白い物作れないかなー。

おまけ
Firefox で Activities が使えるアドオンがあったwww。Context Search っていう同様のアドオンがあるのに IE涙目www。

窓の杜 - 【REVIEW】FirefoxでIE8の新機能“Activities”を再現「IE8 Activities for Firefox」

---