ブラウザの最近のブログ記事

今日からOpera Mini for iPhoneがAppstoreで公開されていました。
以前より噂には聞いていたので、公開自体に驚きはありませんが、使って見ての驚きは、今までiPhone用Safariのみを考えて作っていたので、iPhone専用サイトで一部挙動やレイアウト崩れが出てしまいました。
とくに、JSはなんでそんな動きをするのかわからない挙動もありました。

ハックをいろいろ駆使してなんとかするか
or
そもそもU/AでOperaをはじくべきか
難しい選択です。
ひとまず、JSでuserAgentを下のように取得して分岐していた場合は、OperaではPCサイトに流れるので、しばらくは安心できそうです。

<script type="text/javascript">
    if(navigator.userAgent.indexOf("iPhone") != -1){
        window.location.href = "/XXX/index.html";
    }
</script>

Flash制作の際に、ローカルで動くものであれば、traceを使い、いろいろな値を出力させて確認しながら制作しますが、phpやjsなどと連携させる場合、なかなか見ることが出来ません。
そこで、アップされたサイト内のflashの動きの動向を見る際には、このFirefoxのアドオンのLive HTTP Headersを使い、HTMLヘッダを監視すると便利です。
外に読みに行く画像パスやエラーなどについても返してくれます。


ダウンロードはコチラから
Live HTTP Headers - Firefox addon

6月16日にこの「Opera Unite」が発表されましたが、いろいろと奥の深そうなブラウザです。
「Opera Unite」をインストールしたPCは、Opera Softwareのサーバーを経由するものの、同様に「Opera Unite」をインストールしたPCとファイル共有や、チャットなど、本来サーバーが担うべき様々な機能をブラウザで実現してくれるそうです。
残念ながらOperaの普及率はいまいちですが、これを使うことで、FMSを超えたもっとおもしろいコンテンツが考えられそうです。

「Opera Unite」公式ページ
パソコンや携帯電話をサーバーに，Operaが新ソフト「Opera Unite」を発表 : ITPro

NetApplications社の発表する現在世界で使われているブラウザシェアから、ブラウザ検証で重視すべきブラウザを考えてみました。

Internet Explorerが当然一番のシェアであることに変わりありませんが、よく問題となるIE6のシェアは下降線で、IE7は横ばい。IE8は緩やかな上昇です。
GoogleChromeは認知度の割にはシェアは拡大していないのがわかります。

Internet Explorer7.0→ > Firefox3.0↑ > Internet Explorer6.0↓ >>
Safari3↑ > Firefox2.0↓ > Internet Explorer8.0↑ > Chrome→ >> その他

※上位3つでおよそ85％
→:シェア変わらず
↑:シェア拡大中
↓:シェア減少中


主要ブラウザ別のシェアの動向
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1

直近のブラウザバージョン別シェア一覧
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2

主要ブラウザのバージョン別シェアの動向
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=3

Internet Explorer8.0のここ一ヶ月の日毎シェア
http://marketshare.hitslink.com/report.aspx?sample=34&qprid=34&qpcustom=Microsoft+Internet+Explorer+8.0
※毎日確実にシェアを拡大し、現在+1.2%/monthで推移(09/04/30現在)

InternetExplorer8が公式にリリースされましたが、だんだんとIE8でも検証が必要かなと思い、いろいろなハックを試してみました。
結果、下のハックがIE8のみに適応されるのでわかりやすいかなと思ったので、メモしておきます。

color /*\**/:#333333\9;
の部分を普通に
color :#333333;
と記述しないように気をつける必要があります。

<style>
<!--
#ie8{
    background:#ff55ee;
    color:#ffffff;
}
html>/**/body #ie8 {
    background /*\**/: #ff0022\9;
    color /*\**/:#333333\9;
}
-->
</style>

サンプルHTMLはこちら
https://www.bute-studio.com/lab/ie8.html

Internet Explorer7に使うハックはこちらの記事参照
Internet Explorer7のみに適応するCSSハック //CSS

Googleで一回検索すると、7gものCO²を排出するとかしないとかというニュースが先日出ていましたが、このLEAFBANKでは、一回の検索ごとに10gのCO²排出を抑え、さらに検索結果にあわせて表示される広告の収益の一部を環境保護に関するNPO団体に寄付するらしいです。


とはいえ、新たに検索エンジンを開発することはすぐにはできないので、検索結果はYahoo!を利用しているようなので、Yahoo!と比較してどこが10gエコなんでしょうか。

でも検索はブラウザの検索ツールバーからでないと不便なので、入れてみました。(残念ながら今のところWindows版だけですが)




検索するという行為は絶対に抜け出せないので、Windowsを使う際は使ってみようと思います。




環境貢献型ツールバーサービスLEAFBANKツールバーはこちらから

InternetExplorerでは、position: fixedが使えないので、フッターやヘッダーを固定するレイアウトにする場合は、IE6に対策が必要です。
ただし、ヘッダーやサイドバーなど、上から一定座標に配置する場合は、position: absoluteを使ってクリアすることができますが、フッターのように、ブラウザ内の下にくっつけて配置したい場合はなかなかうまくいきません。

いろいろとネットで検索するうちに、1つのJavascriptを読込むだけでposition: fixedが有効になるものを発見しました。
doxdesk.com: software: fixed.js
http://www.doxdesk.com/software/js/fixed.html

これを導入してみましたが、残念ながら、IE6でスクロールした際に若干ピクついた挙動をします。

最終手段では、高さ100%のFlashエリアとして入れて、Flash内で下にくっつかせたらどんなに簡単に処理できるだろうと考えています。


もう一つ参考になるサイトがありました。
http://gyauza.egoism.jp/clip/archives/2008/03/080302-ie6positionfixed/

Google Chromeがβ版から正式版リリースになったようです。
試しに今までβ版を入れていたWindowsPCでChromeを起動してみると、自動ではアップデートが始まりませんでしたが、自分でアップデートしました。

別に普通に使う感じでは違いはわかりませんでした。

GMailやGoogleMap、GoogleEarthはずっとβ版の表記のままサービスが提供されているのに、なぜChromeだけはベータの表記をいち早くやめようとしたのかが気になるところです。

あとは、Google Chromeのウェブ開発者向けの情報に書いてある、
『ウェブサイトが Safari 3.1 でテスト済みの場合、そのサイトは Google Chromeでも正しく動作します。』
の言葉を信じて、検証に手間がかからない素直なブラウザになることを祈るばかりです。

Mac版はいつリリースなんだろう。。。


Google Chrome
Google Chrome Web開発者向け情報

Web制作の仕事をしていると、必ずぶち当たるIEの壁。
CSSでは違った解釈をいろんなところで引き起こしてくれるし、IE6までは.pngの透明画像もそのままは扱えず、ややこしくしてくれちゃうし。。。

そのくせ今でもIE6のシェアが高かったりして。
この際、IE6に致命的なバグが発見されて、毎日テレビのニュースで「古いIEを使っている人は、すぐにIE7に移行しましょう」ぐらいなことがおこらないかと毎日期待してますが、そんなこともなく。

といつもの壁をまたしても感じている今日、発見してしまいました。
IE6だけ落ちる仕掛けが！
しかも簡単に作れる！

驚くほど簡単です。
こんな1行で落ちてしまうIEってどんだけ弱いのかと哀れになってしまうほどです。

ネタ元はこちら
http://d.hatena.ne.jp/Hamachiya2/20070804/browser_crasher

//HTML//////////////////////////////////////////////////////////////////

<style>*{position:relative}</style><table><input></table>