IE に textContent は使えない

さっき、Firefox に innerText は使えないから textContent を使いませう、と書いたばかりなのに、今度は textContent が IE で使えないと言う。

ここで 2 つの選択肢が浮上。

1. ブラウザー判定をして、textContent と innerText を使い分ける
2. innerHTML を使う

今回、問題になっているコードでは innerHTML で十分。機能過多な気もするけれど間違いがない。一方、ブラウザー判定を入れると他のバグが混入しそう。バグが出るよりもシンプルなコードで。KISS!

(旧) a.textContent = post_title.textContent;
(新) a.innerHTML = post_title.innerHTML;

蛇足

メモ代全りに

• innerText は IE が独自導入したプロパティ。W3C 非公認。Firefox 以外のブラウザーがサポート。
• textContent は W3C が標準化したプロパティ。IE が非サポート。
• innerHTML は W3C が標準化したプロパティ。全てのブラウザーがサポート。innerText/textContent がテキストだけを返すのに対して、innerHTML は HTML 要素もそのまま返す。

ref

• クリボウのプログラミングひとりごと: Firefox の JavaScript で innerText が取得できない件
• Firefoxで、innerTextが使えない(Javascript) | 主にWeb技術ネタ ブログ
• DOM の textContent と innerText について - フリーフォーム フリークアウト

Blogger がモダン・ブラウザー対応を強力に進める

Blogger は古いブラウザーを積極的に切るという。2011-08-01 からはモダン・ブラウザーで見ることが前提になるという (古いブラウザーでも一応は読めると思うけど)。目的は HTML5 の普及かな。

• Blogger Buzz: Update on Browser Support

サポートから外れるブラウザーは以下の通り:

• Firefox 3.5
• Internet Explorer 7
• Safari 3

これより古いブラウザーを使っている人は、アップデートの用意を!

Google Analytics が Google Chrome を認識 -- 自サイトの統計を取ってみた

Google Analytics がブラウザー・タイプとして Google Chrome を認識するやうになった。

• Google Analytics Blog: "Chrome" now showing as browser type

Google Chrome のリリースが 2008-09-03 で、上記エントリーが 2008-09-04。ほとんど間を合けずサポートした感じ。

さて、このニュースを受けて各ブログがブラウザー・シェアを報告している。お目当ては Google Chrome がどれ程のシェアを取ったか? といふところ。

各サイトのブラウザー・シェア

まずは TechCrunch。

Clickyが引き続き追跡しているChromeの利用状況は、対象の4万5000サイトで2～3%の範囲にある。TechCrunch読者のChrome利用率はずっと高い。火曜日以来6.23%で、これはTechCrunch読者のブラウザーの中で、Firefox、IE、Safariに続く第4位だ。

TechCrunch Japanese アーカイブ » Google AnalyticsがChromeを追跡開始。当サイトでのシェアは6.23% より引用

続いて Polar Bear Blog さん。

Chrome は6.45%で、Safari に次いで第4位。TechCrunch と同じような結果になっています。

中略

最もシェアを落としたのは IE。少なくとも Polar Bear Blog では、Chrome は IE からシェアを奪っている、という結果になっています。

POLAR BEAR BLOG: Chrome、シェアを IE から奪う（このブログに限り） より引用

もう一つ。Going My Way さん。

日本時間で、 9/3 から利用できましたので、それ以降現在までの状況です。
Internet Explorer → 41.08%
Firefox → 37.93%
Google Chrome → 9.25%
Safari → 8.23%
Opera → 2.5%

Going My Way: Google Chrome が出てからのブラウザーの利用状況内訳 より引用

clmemo@aka のブラウザー・シェア

まずは2006-12 の調査結果。1 位 Firefox (49.48%)、2 位 IE (38.47%)、3 位 Opera (4.97%)、4 位 Safari (3.77%)。

続いて、Google Chrome リリース前の金曜日。2008-08-29 のデータ。

1 位 IE (43.16%)、2 位 Firefox (42.28%)、3 位 Safari (10.63%)、4 位 Opera (1.77%)。シェアの一位と二位に差はほとんどない。2006-12 のデータと比べると、何気に IE のシェアが増えて、Firefox のシェアが減った。このブログから技術的な話題が減ったことを暗に指しているのかしらん ^^;。Safari のシェアは倍以上に躍進。MacBook を買って Apple ネタが増えたことと無関係ではないでせう。Opera の落ち込みはひどい。

最後に、Google Chrome リリース後のデータ。データ収録日は 2008-09-05。上のデータの一週間後。曜日によるデータのばらつきは最小限になってるはず。

1 位 Firefox (42.44%)、2 位 IE (39.15%)、3 位 Chrome (8.91%)、4 位 Safari (5.33%)、5 位 Opera (2.71%)。Chrome は 9% 弱のシェアを占めて 3 位。シェアを奪われたのは IE と Safari だった。Firefox のシェアは変わらず。

あとがき

IE のシェアを Chrome が奪ったのは、他のブログさんのレポートと同じ。てっきり Firefox のシェアが落ちるものと思っていたので、意外。

忘れてなければ、一か月後と Linux/Mac 版 Chrome が出た後にもブラウザー・シェアを調べてみたい。

Ctrl + F5 で強制リロード

ウェブ・ブラウザーの更新 (リロード) には、二種類あるというお話。

一つはリロード・ボタン、もしくは F5 キー。これは普通にページの「更新」が行なわれる。

もう一つは Ctrl キーを押しながら更新する方法。つまり

• Ctrl キーを押しながらリロード・ボタンを押す
• Ctrl + F5

こちらは、強制的な更新になる。つまり、ブラウザーはページが最新のものでも (タイム・スタンプが同じでも) 更新を行なう。言い換えると、キャッシュを無視してページの更新を行なう。

ウェブ・ページを見ていて、キャッシュが悪さをしているんじゃないか? なんて話を聞くでせう。そんな時、わざわざウェブ・ブラウザーのキャッシュを空にする必要はなくて、「Ctrl + F5」とすればいい。

あとがき

当ブログを IE で見ると、文字化けを起こすことがある。そんな時も、この Ctrl + F5 を試してみて欲しい。

実を言うと、文字化けした clmemo@aka を「Ctrl + リロード・ボタン」している人がいて、この方法を知った。

clmemo@aka のブラウザ・シェア (2006/12)

Web 屋のネタ帳さんが、某一般サイトのブラウザー・シェアでは IE が 94.19%、Firefox が 2.52% という情報を出している (Google Analytics 調べ)。一方、技術系ブログの odz buffer さんはこんな風に書いてる。

ちなみに、ここの場合、Firefox 49.11%、Internet Explorer 38.80%、Opera 5.27% と、普通には有り得ない数値。OS も Linux、 Macintosh ともに 8% ほどあったりして、世間ずれもいいところだ。

odz buffer - 非技術者のブラウザ より引用

ブラウザー・シェアは、サイトによって大きく傾向が変わることがよく分かる。

clmemo@aka のブラウザー・シェアは?

当 clmemo@aka のブラウザー・シェアを調べてみた (Google Analytics で直近一週間のデータ)。

1. Firefox ... 49.48%
2. IE ... 38.47%
3. Opera ... 4.97%
4. Safari ... 3.77%
5. Mozilla ... 2.17%

odz buffer さんのデータとそっくり。0.5% も違わない!! 技術系ブログだと、ここまで傾向は似るものなのかしらん。

ちなみに、一年前の調査では IE 55.06%, Firefox 36.88% だった。技術系ブログでは Firefox 率は高くなってると言えそう。

もう一つ。OS のデータも...

1. Windows ... 81.71%
2. Linux ... 8.72%
3. Macintosh ... 8.58%

よく似たデータが出た。

貴方のブログはどうでせう。Google Analytics を入れてる方は、ぜひぜひ調べてブログの記事にして下さいませ (Google Analytics の使い方は下記過去記事をどうぞ)。

• clmemo@aka: Google Analytics で遊ぶ (新旧 firefox 編)

Blogger の文字コード問題 (IE 限定?)

sleipnir というウェブ・ブラウザーのバグ・トラッキング・データベースに、「clmemo@aka が文字化けして読めない」とのバグ・レポートが上がった。原因は、sleipnir が使ってる IE コンポーネント。IE 系のブラウザーは、meta 要素を title 要素より前に置いてエンコード指定しないと、エンコード判定に失敗するらしい。

• タブブラウザ Sleipnir オンラインデータベース(バグトラッキング/251)

Blogger のテンプレートは、デフォールトで title 要素の後に meta 要素を置く仕様なので、sleipnir を始めとする IE 系ブラウザーで文字化けが起きたんでせう。

実はこの問題、とっても有名。mixi の Blogger コミュニティーでも話題になったし、クリボウさんのブログでも取り上げられたこともある。

けれど、firefox をメインで使ってる、呑気なこのブログの作者は、他人ごとに思ってたんですな。全く申し訳ない。

そういったわけで、先程、テンプレートの修正を終えた。IE 系ブラウザーでも文字化けしなくなったはず。

修正方法は簡単。テンプレートの修正ページを開いて

<title><$BlogPageTitle$></title>
<$BlogMetaData$>

となっているのを

<$BlogMetaData$>
<title><$BlogPageTitle$></title>

と、上下の行を入れ替えるだけ。

詳しい解説は、クリボウさんの Blogger 入門にあるので、そちらをお読み下され。

• クリボウの Blogger 入門: 文字化け対策、エンコードのこと

Microsoft が「お気に入り」管理サービスを開始

パーソナライズド・ホームや新メール・サービスを「Windows Live」の名を冠してリリースしている Microsoft が、「ブックマーク」にも手を拡げてきた。その名も、

• Windows Live Favorites

ブックマーク (IE で言う所の「お気に入り」) をフォルダーやタグで管理できて、公開レベルを設定可能。IE や firefox からのインポートをサポート。日本語も問題なく通る (メニューやヘルプも日本語化済!)。

試しに、手元の firefox のブックマークをインポートしてみた。

まず、「追加 > インポート」から「お気に入りのインポート」をポップアップ。「Netscape Navigator や Mozilla Firefox のブックマークを Bookmark.htm ファイルからインポートします」との文言が出るので、「bookmark.html」のパスを firefox のプロファイルから探して入力。そう、自動で探してくれない。どこに bookmark.html があるかを、ユーザーが教えてやらなきゃいけない。ちょっと不親切だよね。で、パスを入力したら「次へ」。すると、firefox の「ブックマーク」が読み込まれる。

firefox の「ブックマークの管理」を見れば分かるけど、ブックマークはいくつかのフォルダーに分かれてる。普通のブックマークを入れてるフォルダーに、「ブックマーク・ツールバー」のフォルダー、それに「クイックサーチ」用のフォルダー。Windows Live Favorites は、そのフォルダー構成をそのままにインポートしてくれる。ちなみに、firefox ブックマークの「キーワード」が、Windows Live Favorites には「タグ」として読み込まれる。

読み込んだブックマークは、フォルダーやタグで管理できる他、画面トップにある「お気に入りの検索」から検索をかけることもできる。

Windows Live Favorites はソーシャル・ブックマークじゃない

さて、この Wisdows Live Favorites。ソーシャル・ブックマークとして使うには制限が多すぎる。例えば、

• 新規ブックマーク追加用の bookmarklet が用意されていない (IE の「お気に入り」と同期させて使うみたい)。
• お気に入りとフォルダの追加件数が 1,500 件に達するか、保存容量が 2 MB に達すると、それ以上お気に入りを追加できなくなります (from ヘルプ)
• del.icio.us やはてなブックマークのようなブックマークのコメント機能がない。

ちよつと使えないでせう。

では、ダメダメなサービスかというとそうでもない。というか、Microsoft は、このサービスをソーシャル・ブックマークとしてリリースしたわけではないと思う。

ここから、ぼくの私見。

おそらく、Microsoft は、ブックマークをホスティングさせるサービスを狙ってるんじゃなからうか。firefox で言えば、ブックマーク情報を含む bookmarks.html ファイル専用のオンライン・ストレージが狙いじゃなからうか。つまり、ブックマークそのものをオンラインに置くのが目的ではなくて、Bookmarklet をオンラインに置けるようにするのが目的なんじゃなからうか。

言い換えれば、Microsoft Live Favorites の競合相手は、del.icio.us やはてなブックマークではなく、blummy ではないのか。blummy は、ブックマークレットをオンライン上に保存する謂わば bookmarklet 専用ソーシャル・ブックマークだけど、それをもう少し別の形 (ブックマークごと管理) でやろうとしてるのが Microsoft Live Favirites ではないのか。

• blummy - The bookmarklet management bookmarklet
• 百式 - メタ便利ツール (Blummy.com)
• 『ちよろず。』 - Bookmarkletを集約できるAjaxアプリ"blummy"かんたん利用法

そう考えると、ソーシャル・ブックマークとしては容領の小さすぎることも、インポート・エクスポートがウェブ・ブラウザーに特化していることも理解できるやうな気がする。

Microsoft、侮り難し。と思いつつ、インポートしたブックマークレットを見てみれば、favicon を使うようにした bookmarklet はインポートされてなかった。ギャフン。

ブログのデザイン -- IE 対策

このブログ clmemo@aka のデザインの骨子は、[2005-06-06] に Green Witch という名前で作られた。その後、 最小幅を設定したり、 右サイドバーに折畳み式のコンテンツを作ったりと少しずつ進化してきた。ただ、デザインの確認は firefox だけでやっていて、IE のバグを考慮に入れてなかった。

たまたま、IE でブログを見直してみたところ、レイアウトがえらく崩れているのにびっくり。というわけで、IE のバグ対策を二点行ったのでメモっとく。

問題

IE6 でこのブログを見ると、右サイドバーがメイン・コンテンツの右端から押し出されて、本文の一番下に配置される。これは、次の二つの問題に起因する。

1. IE6 が min-width をサポートしない問題
2. IE6 が 内側のボックスの大きさに合わせて外側のボックスの width を広げてしまう問題

min-width をサポートしない問題について

firefox で見ると、メイン・コンテンツの横に白い帯が見える。これは、単なる飾り。作り方は、「 最小幅の設定」を参照されたし。

問題は、この飾りを作るために width にパーセント指定と px 指定が混ざっていること。

#main-content {
  width: 61.8%;
  float: left;
  margin: 0 1% 0 2%;
  border-style: none double;
  border-width: 18px;
  border-color: #eee;
}

#sidebar {
  float: left;
  width: 28%;
}

そのため、ブラウザーのウィンドウ幅を狭くすると、width が 100% を越えて、(結果) 右サイドバーが下に落ちてしまう。そこで firefox では最低の window 幅を CSS の min-width で指定していた。IE は min-width をサポートしないから、この解決策は使えない。

問題になっているのは border-width の px 指定だから、IE にはボーダーを設定しないことで逃げる事にした。見栄えが好みと合わなくなるけど、サイドバーが下に落ちるよりはまし。

IE だけ CSS を適用させないようにするのに、IE の独自実装 Conditional Comments を利用した。Conditional Comments を使うと、

<![if expression]> HTML <![endif]>

のように書いて、if 文にマッチするブラウザーだけ HTML を表示させられるようになる。

今回の場合、IE だけボーダーの設定をしないようにしたい。具体的には CSS ファイルの該当部分からボーダーの設定を取り除き、 Blogger のテンプレートに次のコードを追加した。

 <![if lt IE 5]>
  <style type="text/css">
    #main-content {
      border-style: none double;
      border-width: 18px;
      border-color: #eee;
    }
  </style>
 <![endif]>

if 文の意味は、IE のバージョンが 5 以下ならボーダーの設定をする、というもの。

内側のボックスの大きさに合わせて外側のボックスの width が広がる問題

簡略化した次のコードをごらんあれ。

<div style="width: 100px;">
 <pre>
   ...
 </pre>
</div>

上の例では、div 要素が pre 要素を囲んでいる。そして外側の div 要素には 100px の横幅が設定されてる。問題は pre 要素の中身のテキストが横長く、100px を越えた場合に起きる。

。 firefox のような標準に準拠したブラウザーは、100px 超過分のテキストは div のボックスを飛び出る形で表示する。ところが、IE は超過した分だけ外の div ボックスの width を広げてしまう。もし、pre の内側のテキストが 120px なら、div の width も (CSS の設定を無視して) 120px になる。200px なら、div の width は 200px。テキストの幅がブラウザー・ウィンドウの幅と同じ位い広いと、div もブラウザー・ウィンドウの幅と同じ位い広がっちゃう。そんなことになれば、右サイドバーの在るべきスペースは当然なくなるから、結果下に落ちることになる。

この解決策として、pre 要素に幅を設定してそれより大きな width を取る場合はスクロール・バーを表示させる方法がある。それを CSS で指定するには overflow: scroll とする。ただ、この問題は IE だけの問題だから、この設定は IE にだけ指定したい。というわけで、 Blogger のテンプレートに次のコードを仕込んだ。

 <!--[if IE]>
   <style type="text/css">
    pre {
      width: 450px;
      overflow: scroll;
    }
   </style>
 <![endif]-->

Conditional Comments で IE にだけコードを適用。ただし、このコードは IE の独自拡張だから、 firefox らのために <!-- --> で Conditional Comments そのものをコメントアウトする。

さあ、これで IE でもレイアウトが崩れないはず。どうかな?

JavaScript で生成したコードのソースを見る (2) IE 編

以前 JavaScript で生成した HTML コードを見る方法を firefox 限定で紹介して、IE で同じことはできないものかと書いた。そしたら、Climber(通りすがり) さんがコメントを、MOONGIFT さんがトラックバックを下さった。ありがとうございます。

彼らのコメントを纏めると、こうなる。

1. IE 自体に JavaScript で生成した HTML コードを見る機能はない。
2. タグ・ブラウザー unDonut に、選択部分のコード表示機能がある　(by MOONGIFT さん)。
3. タグ・ブラウザー Sleipnir にも、同様の機能がある (by Climber さん & MOONGIFT さん)。

というわけで、お二方の支持を受けた Sleipnir を試してみた。

Sleipnir 2.0 beta3

Sleipnir は丁度 version 2.0 のベータ版が出ていた。新らし物好きとしては試さずにいられない。Sleipnir は HTML レンダリング・エンジンとして、IE コンポーネントと Gecko を切り替えられるらしい。Gecko は firefox で利用されている。今回欲しいのは IE と同じ出力なので、Gecko エンジンには拘らない。

インストールは簡単で、公式ホームページにあるインストーラー版をダウンロードして実行するだけ。IE の設定を引き継ぐことができるので、すぐに使える。

機能豊富なようだけれども、まずは範囲を指定して HTML のソースを見てみる。firefox だと右クリックでできたけど、Sleipnir ではメニューの [表示] から「選択範囲のソースを見る」を選ぶ。すると、凶悪なことに Word が起ち上がった （なんてこった!）。これはメニューから [ツール]->[インターネット・オプション]->[プログラム] と辿って、「HTML エディター」を Word 以外のもの （Notepad しか見つからなかったけど...) に変えればいい。JavaScript で生成したコードも見れた。

しかし、見えなくもある。

ただし、この機能、firefox ほど完璧ではないように見える。今回、生成されてるはずのコードは

<span id="foo" onclick="function(){bar();}">hogehoge...

なのに、Sleipnir で見ると

<span id="foo">hogehoge...

onclick 属性が抜けてしまった （firefox なら、もちろん大丈夫）。でも、hogehoge をクリックすると、関数 bar は呼ばれてる。この onclick は span_node.setAttribute('onclick','function(){bar();}'); のように設定したのだけど、それが拙いのかな? なんか IE は setAttribute 系と相性が悪そうだし。それとも、Sleipnir のバグだろうか。うーん、ドツボに嵌って行く感じ。