石輪っぷり!

現在、かなり CSS によるデザインが使われるようになりましたが、同時に、画像の表示方法について問題のあるサイトが多くなってきているように思います。それは、タイトルやメニューなどのテキスト画像を CSS で表示させているサイトです。
# css Zen Garden の影響もあるかも。実は私もこの問題を感じつつ 1年前までこの手法を使っていました。

これは、(X)HTML 上のタイトルやメニューなどのテキストに、CSS で大きなマイナスのインデントを設定して画面の外に配置（オフレフトと呼ばれる手法）したり、フォントサイズを 0px などにして画面上に見えないようにし、代わりに画像化したタイトルやメニューを CSS で背景として表示させるという手法で、(X)HTML 上にタイトルやメニューなどを画像で配置するより SEO 的に優位で、音声ブラウザでもきちんと読まれるというものです。

一見アクセシビリティにも配慮した手法と思われます（というか、音声ブラウザに対応さえすればアクセシブルだと信じている人が多い）が、この手法には大きな問題があります。

Webサイトを制作・編集する際に、各ページで共通の部分を何十ページ、あるいは何百ページも修正しなければならない時があります。
Dreamweaver のテンプレートやライブラリを使用している場合、あるいは SSI を使ったり Movable Type のモジュールなどを使用して、共通部分をサーバでインクルードしてページを生成している場合は対象のファイル一つを修正すればよいので楽なのですが、そうでない場合はひたすらコピペを繰り返すといった作業になります。
また、Dreamweaver にはサイト内のファイルを一括して置換する機能もあるのですが、CMS 等のテンプレートファイルなどは、Dreamweaver で扱えないことも多々あります。

そこで、
(1) 複数のファイルを一括で置換できる。
(2) 改行があっても複数行にわたって置換できる。
(3) Webページで使用する Shift_JIS，EUC-JP，UTF-8 に対応している。
この3つがクリアできる置換ソフトを探してみました。

で、これが一番！と実感したのが株式会社ドリームハイブ開発のフリーソフト GrepReplace です。

上記の3つはもちろん、サブディレクトリにも対応し、検索結果から置換対象ファイルを限定することも可能。そして何よりも、動作が軽いし、検索・置換文字列の入力欄も大きくてとても使いやすいです。
一生懸命コピペしてる方、オススメです。

ちなみに、Vecter で配布されているものはバージョンが古く、バグがあるようです。文字コードの指定ができませんでした。最新版はドリームハイブの GrepReplace 詳細ページからダウンロードできます。

Webページ上で、URL を表記することが多々ありますが、Firefox や IE では URL が長くなっても途中で改行してくれないので、レイアウト的に不都合が発生します。（通常、英文は単語の途中で改行することはしないので、半角英数が連続する URL も同様に扱われるため）

Firefox や Netscape では、ボックスを突き破って表示されるだけなのでまだいいのですが、IE 6 以前に関しては困ったことにボックスの幅を拡張してしまうので、概ねページ全体のレイアウトが大きく崩れてしまいます。特に float プロパティを使って2カラムや3カラムのレイアウトをしていると、拡張されたボックスが親ボックスにおさまらず、下に落ちたりしてしまいます。

その解決方法として、Firefox など Mozilla 系のブラウザに対しては、url_breaker という Firefox 拡張の GreaseMonkey 版を Javascript として利用することで解決します。（参考：小粋空間: Firefox・Netscapeで連続した半角文字を折り返す）

問題は IE。 CSS に "word-break: break-all;" という記述を加えれば、単語の途中で改行してくれることは知っていたのですが、これは IE 独自の仕様のため、W3CのCSS Validation にかけるとエラーになるのです。

Validation にパスすることよりきちんと表示することを優先すべきかもしれないですが、トコトンこだわる性格の私としては、何としても表示と Validation の両方をクリアしたいとあれこれ試し、ついにそれを解決する方法を見いだしました。

Mac版の Internet Explorer については、2003年6月に IE6 for mac の開発中止が発表され、2005年12月31日には IE 5.x for Mac の無償サポートを終了、さらに2006年1月31日にはダウンロード等による提供も終了しています。
「今後は Apple 社の Safari 等の最新の Web ブラウザをお使いください。」ということです。
しかしながら、Safari は Mac OS X でないと動かないので、今現在も Mac OS 9 等で IE を使用しているユーザも居るようです。

Web制作の上でこれらのユーザを考えたときに、Mac版 IE 5.x での検証をどうするか（Windows版を含む IE4 以前については、そもそもスタイルシートを適用しないようにすることで回避）ですが、当然 Mac版 IE 5.x が無ければ検証することができません。入手しようにも Microsoft からの提供は終わっています。

そこで、いろいろググっていたら evolt.org というサイトを発見。
ここから Mac OS X 用の Internet Explorer 5.2.3 をダウンロードし、以前 Windows XP にインストールした Pear PC 上の Mac OS X Tiger にインストールしてみました。

因みにこのサイトでは、様々ブラウザの様々なOS版が、新旧様々なバーションでダウンロードできます。
例えば IE 1.0 とか、現在のWebブラウザの前身とも言える Mosaic 、その他見たことも聞いたことも無いようなブラウザまでもがダウンロード可能です。

これでとりあえず Mac が無い自宅でも、Safri に加え、Mac版 IE 5.x での検証が可能になります。
＃Windows にエミュレーションした Mac なので、動作速度はかなりきついですが。

私は普段 Firefox をメインブラウザとして使用しています。
しかし、世の中には IE でないと閲覧できないサイトも数多くあります。その一例が Gyao 。これらのサイトを見る場合はいちいち IE を起動しなければなりませんでした。

この IE Tab という Firefox の拡張機能。別に IE を起動することなく、Firefox の中でレンダリングエンジンを IEエンジン に切り替えることができます。以前からこういうのがあることは知っていましたが、今日初めてインストールしてみました。

すると、思ってた以上にとっても便利。表示しているページのレンダリングエンジンを切り替えたり、それを新しいタブで表示したり、特定のページを常に IEエンジンで表示するといった設定もできます。

Gyao も Windows Update も問題なく表示できました。もっと早くから使っていればよかった。
Webサイト制作時の表示確認にも使えますね。ちなみに、使用される IE のバージョンは PC にインストールされている IE のバージョンによります。

いや、Gyao が Internet Explorer 7 に対応していないと言ったほうが正解ですね。Web制作の上で IE にはいつも悩まされるので、つい、IE7 を悪者にしてしまいます。

本題ですが、IE7 をインストールした環境で Gyao を視聴すると、CM に移る時、あるいはCMから本編に移る時に再生がストップすることが多々あります。そして再生ボタンをクリックすると、再び最初から再生されてしまいます。

音楽やアニメなどの短い番組は問題なく視聴できる場合が多いですが、映画ともなると何度も途中で止まってしまい、そのたびに最初から再生されるため早送りを繰り返す・・・といった状態に陥ります。

実際に IE7 を入れた状態で Gyao のサイトで環境チェックを行うと、問題ありと診断されます。
IE7 をアンインストールして IE6 に戻したらスムーズに視聴できるようになりました。

Windows Update によって IE7 が半強制的にインストールされるまで約2ヶ月。 それまでに改善されるでしょうか。

因みに、最新の Media Player 11 も対応していません。