IE8 基本情報

• Internet Explorer 8 開発者向け技術概要
• MSDN　What’s New in Internet Explorer 8

IE8 にはレンダリングモードが複数ある。詳細は以下のサイトを参照。

• 2. 実現可能な相互運用性と互換性 – Internet Explorer 8 開発者向け技術概要

少し古い情報ですが、以下サイトも参考になりました。

• 【メモ】IE8の3レンダリングモードのまとめ / KOMOREBI || blog

あまり気にする必要はなさそうですが、以下の点も一応知っておく方がよいかと思います。※主に JavaScript 関連で違いがあるようです。

• IE8互換ビューとIE7はまったく同じではない | エンタープライズ | マイコミジャーナル

meta タグによるモードの指定方法

よく使うようなものだけリストアップします。

<!-- IE8標準準拠モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=8">

<!-- IE7標準準拠モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=7">

<!-- Quirksモードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=5">

<!-- 最新の標準準拠モードを指定 (IE8が最新バージョンの場合なら、IE8標準準拠モードとなる) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

複数のバージョンを指定した場合については、後述。

各モードの内容

IE8モード

CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。

IE7モード

IE7の標準準拠モードと同じ

IE5モード

IE7やIE6の互換モードと同じ

その他モードについては、最初にあげたサイトなどを参照。

モードの複数指定をおこなった場合

meta スイッチには、下記のように複数のレンダリングモードを指定することが可能。

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9">

今のところ、一番多く使うのは IE7 モード指定でしょうか。あまり使わない方が良いのかもしれませんが、保守サイトなどが IE8 で見ておかしい場合などの対応には手軽です。

とても分かりやすかったのでメモ。
簡潔にまとまっていて良いスライドだなー。

上記記事の内容は、以下の通り。
(1) はじめに – 本特集の趣旨
(2) HTML 5マークアップについての簡易リファレンス
(3) Video/Audio要素とそのAPI
(4) Canvasタグ
(5) 大幅に強化されたフォーム要素
(6) アウトラインを意識したマークアップ
(7) ドラッグ&ドロップAPI

時間があるときにゆっくり読むためにメモ。

• Internet Explorer 8 開発者向け技術概要
• MSDN　What’s New in Internet Explorer 8

現時点で Dojo Toolkit が IE8 で上手く動いていません。次の Dojo の ver UP で直されそうなのでに期待。

ライブラリが動かない等、過去に制作したサイトが崩れたり問題が起きている場合、レンダリングモードを変更して過去の IE 互換レンダリングで表示させておくことが必要。

IE8 にはレンダリングモードが複数あります。詳細は以下のサイトで。

• 2. 実現可能な相互運用性と互換性 – Internet Explorer 8 開発者向け技術概要

1 年弱前の記事ですが、こちらも参考になりました。

• 【メモ】IE8の3レンダリングモードのまとめ / KOMOREBI || blog
• SummerWind – IE8のEmulateIE8/EmulateIE7モード

ただ、IE8 の互換モードと IE7 は全く同じではないということで、そのあたりも注意が必要ですね。

• IE8互換ビューとIE7はまったく同じではない | エンタープライズ | マイコミジャーナル
• IEBlog : Site Compatibility and IE8

正直レンダリングモードが複雑化しすぎている気がします。せっかく「 hasLayout から IE8 で逃れられた！（＝ IE の面倒なモノはなくなった！）」と思ったのになぁ。まだ面倒ですね。
とりあえず、「Internet Explorer 8 開発者向け技術概要」を片手にがんばります。

HTML5 利用サイト

• livedoor labs EDGE
• アップル – Safari – Safari 4の登場です。 – 目の前にひろがる新しいウェブの世界。

HTML5 利用サイトを見てると、そう遠い技術ではないんだなぁと改めて思いました。

HTML5 を知るには以下のサイトを

• HTML 5 ― HTML 4 からの変更点
• HTML 5
• HTML5.JP – 次世代HTML標準 HTML5情報サイト
• HTML 5 の新要素
• HTML 5 – Wikipedia

上記にもあげた IBM の「HTML 5 の新要素」が、現在のマークアップと HTML5 でのマークアップを見比べやすいです。

HTML5 でサンプルとかも作りたいなあ。

以下、090628 追記
「仕様が固まる来年 2010 年以降」と書いたところの補足。

2010年9月に正式な勧告としてリリースする予定、これは遅れるかもしれないし、予定通りかもしれないですが、どっちにしても正式な勧告が来てから実務では使うことになるかな。

• HTML 5 における HTML 4 からの変更点
  W3C の HTML ワーキンググループ による「HTML 5 differences from HTML 4 (Working Draft 22 January 2008)」の日本語訳
• HTML5.JP – 次世代HTML標準 HTML5情報サイト

06/13 追記：
大事な部分を丸ごと書き忘れていることに気付きました orz
javascript 関連の部分を追記いたしました。

新規ウィンドウを開かせる手段を実装したい、という場合は以下の 2 種類が有名だと思います。

• a に target=”_blank” を指定する
• javascript で設定する

しかし「ウィンドウを新たに開くかどうか」はユーザーが決めるべきことなので、作り手が決め手はいけない、という話もあります。
そのためか、XHTML 1.1 や XHTML Basic では target=”_blank” という書き方は準拠していない、とされ NG になってしまいます。
「マークアップ言語である HTML で、ウィンドウ操作をする」という点も問題なのだと思います。マークアップ目的以外になるので。

でもユーザーの中にも新規ウィンドウを開く手段を実装しておいて欲しいという人もいます。
いやいや余計なお世話だから、こっちに決めさせてくれ、そんなことは実装しておかないでくれ、という人もいます。
実装して欲しい・欲しくない、という人が両方いる…ということで、じゃあ両方のリンクを制作しておけばいいんじゃ！と思いまして。今回はそんな方向でやってみました。

ポイント

• rel 属性は XHTML1.0 Transitional では OK 。HTML4.0 では rel に指定できる値が決まっている。rel を使うのならば、XHTML1.0 Transitional で書いておくようにする。今回はより柔軟に対応するために、class 属性を使用。
• マークアップ言語である HTML でウィンドウ操作はしない（つまり _blank は使用しない）。新規ウィンドウを開く部分は javascript で window.open を使って実装。

実装方法は次のような形。

見本

Numb.

テキスト部分のリンクをクリックすると同じウィンドウで開き、矢印の画像部分のリンクをクリックすると新しいウィンドウで開きます。

※現在違う方法で実装を始めたため、この見本では新規ウィンドウが開きません。

実装方法

• ) か b ) どちらかの方法を選び、javascript を保存。HTML に外部ファイルとしてこれを読み込ませる。
• た目を整えるための、style.css にコレ用の CSS を追記。
• ウィンドウを開くリンクとしておきたい a タグに `class=”external”` をつける。
  ※ウィンドウを開かないリンクも一緒に記述します。
• おまけ。 Firefox の方は Copy+ を使って簡単に記述できるようにすると便利です。ここは任意。

1. javascript

prototype.js を利用する場合と、利用しない場合では少しだけ javascript が違います。
もし Litebox 等、body に onload を書くものを利用している場合は prototype.js を利用するほうを選んでください。

参考：prototype.jsを使ってみる 2-Event.observe[to-R]

a ) prototype.js を利用しない場合

function externalLinks() {
	if (! document.getElementsByTagName ) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i<anchors .length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("href") && anchor.getAttribute("class") == "external") {
			anchor.onclick = function(event){return newWindow(this, event);}
			anchor.onkeypress = function(event){return newWindow(this, event);}
		}
	}
}
function newWindow(anchor, event){
	var keyCode;
	if (event && event.type == 'keypress') {
		if (event.keyCode)
		keyCode = event.keyCode;
		else if (event.which)
		keyCode = event.which;
		// 13 == Return key. 32 == space key
		if (keyCode != 13 && keyCode != 32)
		return true;
	}
	return !window.open(anchor);
}
window.onload = externalLinks;

上記 javascript を「externalLink.js」と名前をつけて保存。
以下の 1 行を HTML の header 内に書く。

<script type="text/javascript" src="/path/externalLink.js">

上記の方法は onload を最後の 1 行に書いています。
onload イベントは 1 ページに 1 回しか使えないため、もし onload を他のスクリプト（ Litebox など）で使用している場合、この記述方法では実装できません。
そんな方は b ) prototype.js を利用する場合、のほうを使ってください。

b ) prototype.js を利用する場合の javascript

function externalLinks() {
	if (! document.getElementsByTagName ) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i</anchors><anchors .length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("href") && anchor.getAttribute("class") == "external") {
			anchor.onclick = function(event){return newWindow(this, event);}
			anchor.onkeypress = function(event){return newWindow(this, event);}
		}
	}
}
function newWindow(anchor, event){
	var keyCode;
	if (event && event.type == 'keypress') {
		if (event.keyCode)
		keyCode = event.keyCode;
		else if (event.which)
		keyCode = event.which;
		// 13 == Return key. 32 == space key
		if (keyCode != 13 && keyCode != 32)
		return true;
	}
	return !window.open(anchor);
}
Event.observe(window,'load', externalLinks, false);

上記 javascript を「externalLink.js」と名前をつけて保存。
以下の 2 行を HTML の header 内に書く。

<script type="text/javascript" src="/path/prototype.js">
<script type="text/javascript" src="/path/externalLink.js"></script>

javascript の最後の 1 行、`Event.observe(window,’load’, externalLinks, false);` は prototype.js を利用しています。
onload で読み込むものが他にある場合は、こちらの javascript を利用してください。

prototype.js も読み込む必要がありますが、よく使われているため「すでに prototype 使ってるよ」という方もいると思います。
その場合は再度読み込ませなくても OK ですので、externalLink.js を読み込ませる分だけ追記してください。

2. CSS

WP の使用しているテーマの style.css に以下の CSS を追記します。

/* for externalLink */
a.external {
	margin: 0 5px 0 3px;
}
a.external img {
	vertical-align: middle;
	border: none!important;
}

a.external の margin 設定は、画像の左右の余白設定です。
margin: 上 右 下 左;
という感じですので、余白を調整したい場合は変えたい場所の数字を変更してください。

a.external img のほうの設定は特に弄らなくて大丈夫だと思います。

3. XHTML

<a href="http://www.google.co.jp/" title="Google">Google</a>
<a href="http://www.google.co.jp/" title="[Google]を新しいウィンドウで開く" class="external">
<img src="http://hogehoge/hogehoge.gif" alt="[Google]を新しいウィンドウで開く" /></a>

このような形で書いています。画像のパスは自分で用意した画像ファイルのパスに適宜変更してください。
上では見やすくするために改行を入れてますが、実際には改行はなくて OK です。

アイコン探し参考：

いろいろな用途で使えるミニアイコンあれこれ – GIGAZINE

この方法の良い点

• Valid である。
• ページを新しいウィンドウで開くか、そのままのウィンドウで開くか、この両方を提供できる。

この方法の悪い点

• リンク 1 つにつき 2 つ分のリンクを書くことになるので、ソースが長くなる。
• これに対応した HTML をその都度書くのが面倒。

この悪い点の 2 つめ、書くことが面倒なのが最大の問題点だと思っています。
そんなわけで、Firefox + CopyURL+ で簡単にタグを作れるようにしました。

CopyURL+ でこの方法用のタグを生成

CopyURL+ の使い方や細かい点は「
Numb. – 「Copy URL+」+「MozShot」」という記事に書いたので、こちらを参考になさってください。

Copy URL+ 用 user.js

user_pref('copyurlplus.menus.n.label','Create URL&Title/externalLink');
user_pref('copyurlplus.menus.n.copy','<a href="%URL%" title="%TITLE%">%TITLE%</a><a href="%URL%" title="[%TITLE%]を新しいウィンドウで開く" class="external"><img src="http://hogehoge/hogehoge.gif" alt="[%TITLE%]を新しいウィンドウで開く" /></a>
');

※user_pref(‘copyurlplus.menus.n.・・・の、n の部分は user.js 内でかぶらないように数字をつけます。
これのみなら 1 、他にすでに 1～3 まで使ってあるなら 4 、というかんじに。

※http://hogehoge/hogehoge.gif は自分の用意した画像ファイルのパスに置き換えてください。

以上です。もしよろしければお試しください :grin:

07/07/30 追記
javascript で新しいウィンドウを開くためのアイコンを自動で追加する方法に現在は至りました。
リンクに、新しいウィンドウで開くためのアイコンを自動で追加(Wpプラグイン) – Numb.

リンクが張られた瞬時にRSSで通知するアクセス解析ツール – トラックフィード

trackfeed を使用するためには、指定された HTML タグをリンクされる可能性のあるすべてのページに貼り付ける必要があります。
ブログの場合、サイドバーかフッターのテンプレートに貼り付けてしまえば全ページに表示されるようになるので OK です。

しかし trackfeed に登録した際に送られてくる HTML タグは、そのままだと Valid XHTML に通りません。
最近は HTML ではなく XHTML で書かれたブログも多く、このサイトも XHTML で書いてあります。
Valid なほうが気持ちが良いよね、ということで、trackfeed 用貼り付けタグを Valid XHTML に通るようにしてみました。

<a href="http://trackfeed.com/"><img name="trackfeed_banner" src="http://img.trackfeed.com/img/tfg.gif" alt="track feed" border="0"></a>
<script src="http://script.trackfeed.com/usr/●●●.js"></script>

送られてくる HTML タグは上記のようなかんじだと思います。※●●● のところはユーザーごとに違います
これを以下のように修正。

<a href="http://trackfeed.com/"><img name="trackfeed_banner" src="http://img.trackfeed.com/img/tfg.gif" alt="track feed" border="0" /></a>
<script src="http://script.trackfeed.com/usr/●●●.js" type="text/javascript"></script>

この修正したほうの XHTML タグを貼り付ければ、Valid XHTML に通ります :)

分かる方には簡単な内容ですが、分からない方には分かりにくいかな～・・？と思うので記事にしてみました。

ez-HTML

高機能すぎるほど高機能なので、使いこなすには最初に「ん、これどういうもの？どうするの？」
と多少ヘルプを見ないといけないかもしれません。
でも、自分が便利と思う機能だけ使いこなせればいいと思うので、そんなにたくさん学ばなくてはいけないわけでもないし、
なにより便利なので最初のヘルプを見る作業を加味しても十分使ってみる価値ありかも。

基本的には分かりやすく使いやすいソフトだと思います。
寄与歓迎のフリーウェアとなっていますが、下手な製品よりよほど良さそう :D

Dreamweaver のような WYSIWYG ではないのですが、それがまた気にいってます。
WYSIWYG エディタは、時として意図しないコードが勝手に入ったりするのがどうも苦手。
テーブルを作るときなんかは WYSIWYG 最高だと思うんですが、普段は HTML や CSS を手で書くほうが好きです。

ez-HTML の気に入っている特長はこんなかんじ。

• 文字コード・改行コードが多種に対応
• 文字コード:
  JIS / EUC / SJIS / Unicode16LE / Unicode16BE / UTF8 / UTF8N
• 改行コード:
  CR / LF / CRLF
• CSS 編集では、使っている ID や CLASS 名を一覧に表示させることが可能 ( 長くなっても検索を使わずとも探しやすい )
• HTML 編集では、コメント一覧からジャンプ可能
• HTML の仕様と文法を選択可能 ( XHTML 1.0 Transitional や、XHTML 1.1、i-mode HTML ver5.0 等 )
• リンク先の CSS 等も読み込んでのプレビュー可能 ( DW みたいだ )
• タブ ( タブでぱっぱっと見れるの便利だと思っています )

HTML が長くなるとコメントで該当箇所を探すことも多くなり、その際使い勝手よかったです。

CSS の ID や CLASS の一覧。
対応箇所にダブルクリックで飛べます。

そのほか、プレビューやタグ入力支援も充実しており、本当に高機能。

ちなみに、シンプルな汎用エディタとしては、TeraPad が文字コード等の指定種類も多くシンプル＆機能は押させており、おすすめです。
ini ファイルとかペペッと開くには、TeraPad がいいかんじ。なにかテキスト系ファイル開くなら、とりあえず TeraPad で開いてみようか、というかんじ。安心の対応力というか…（笑。

シンプルな HTML エディタなら、Crescent Eve がおすすめ。Eve のほうが、HTML や CSS を書くことに特化してます。
※UTF-8はShift_JISに変換可能な文字にのみ対応　←ここが惜しい！

HTML や XTHML、CSS を大量に作業する場合には、DW や ez-html がファイルの繋がりを見てくれて作業しやすいですが、
単体でページを編集するのでであれば Eve も中々いいです。トリプルクリックで１行選択とか好きですね…そういう痒いとこに手が届く感じが素敵だなと思います。それぞれ、そのうち紹介できたらいいな。

• 先日の javascript では、結局 _blank を後付けで指定しているので、よくないのかも。
• そもそも _blank が推奨されなくなったのは、ユーザーがウィンドウを開くかどうかは決めることであり、サイトの運営者が決めることではない。ということから、らしい。それに沿ってないんじゃないか。

丁度同じようなことを取り上げている方のブログを見つけました。

hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel=”external”を使うのが美しいと思う。

コメント部分含め、参考にさせていただきつつ整理。

問題点、注意点

• rel 属性は XHTML1.0 Transitional では OK 。 HTML4.0 では rel に指定できる値が決まっている。rel を使うのならば、XHTML1.0 Transitional で書いておくと良さそう。
• javascript を用いるとしても、 _blank 指定を後からつけるのでは根本的な解決に至らないので、やはり window.open を使うほうがよい。その場合、javascript がオフであっても困らない対策も必要。
• いずれ、rel を使用しないでおくようにしなければならないのなら、いっそ class で指定しちゃうのもアリ

良さそうな手法

問題点、注意点を考慮して考えてみると、理想はこんな感じでしょうか。

• 元のリンクはそのウィンドウに開く形態にしておきつつ新規ウィンドウを開きたい人のためになんらかのアイコンなどで新規ウィンドウを開く方法も同時に作っておく。
  その際 _blank を付け足すのではなく、 window.open を使用する形で。
  ※これの欠点は、同じリンクを 2 回記述することになるのでソースが伸びてしまうこと。
• ユーザーが新規ウィンドウで開くかどうか決められるように javascript で細工をつくり、チェックボックスにチェックをつけた場合には新規ウィンドウを開かない、なんてのも良いかも。
• javascript で開くようにする場合にも、href に URL を指定する。
  ( この場合、元のウィンドウが一緒にページが変わってしまわないよう、ちょっとしたポイントがある。)
  これによって javascript がオフの環境でリンク先に行けないなどということが起きなくなる。

理想にちょっとでも近づくべく、[hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel="external"を使うのが美しいと思う。 の hori-uchi さんのコードを少し改造させていだいて使うことにしました。元のソースの詳細は、上記サイトで確認していただくとして改造したところを書いておきます。

元のコード▼

function externalLinks() {
if (! document.getElementsByTagName ) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {
anchor.onclick = function(event){return popupWindow(this, event);}
anchor.onkeypress = function(event){return popupWindow(this, event);}
}
}
}

function popupWindow(anchor, event){
var keyCode;
if (event && event.type == ‘keypress’) {
if (event.keyCode)
keyCode = event.keyCode;
else if (event.which)
keyCode = event.which;
// 13 == Return key. 32 == space key
if (keyCode != 13 && keyCode != 32)
return true;
}
return !window.open(anchor);
}
Event.observe(window,’load’, externalLinks, false);

もし class="externalLink" と class に指定するならば、
6 行目の rel を class に変更します。
rel 属性を使って指定するのであれば、そのままで OK です。

26 行目の
Event.observe(window,'load', externalLinks, false); を、
window.onload = external; に変更。

変更したものが、こちら。▼

function externalLinks() {
if (! document.getElementsByTagName ) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("class") == "external") {
anchor.onclick = function(event){return popupWindow(this, event);}
anchor.onkeypress = function(event){return popupWindow(this, event);}
}
}
}

function popupWindow(anchor, event){
var keyCode;
if (event && event.type == 'keypress') {
if (event.keyCode)
keyCode = event.keyCode;
else if (event.which)
keyCode = event.which;
// 13 == Return key. 32 == space key
if (keyCode != 13 && keyCode != 32)
return true;
}
return !window.open(anchor);
}
window.onload = externalLinks;

こういうのが理想かな？

Numb.

こんな感じに、「このウィンドウに開く」、「新しいウィンドウに開く」でリンクを 2 つ書くのが本当はいいんじゃないかな～。でも、ちょっと骨が折れますね :roll:
WP-AddQuicktag
で登録しちゃえば、多少が作業量が軽減される、かも？

私は当面は、XHTML1.0 Transitional を使いながら rel 属性を使って、 javascript でwindow.open を使うようにしてみようかな～と思います。
両方書くのは、続けられる自信が…

もし 2 つリンクを書くようにするならば、こんな感じのものをボタンに登録するつもりです。
<a href="" class="externalLink"><img src="open.gif" alt="新しいウィンドウを開きます" title="新しいウィンドウを開きます" /></a>

2 つ書く場合 Markdown を使うと、下記のように書くことになりそうです。ううーむ。
やっぱりちょっと、お手軽さが減っちゃいますね～。

[Link](http://xxx.com/)
[](http://xxx.com/" rel="external)