http://www.lepracaun.info/blog/

2008年6月22日

気になるのはモバイル版ブラウザ戦争

世間が、Firefox3の正式版リリースに浮かれ騒がれている昨今、一際冷めた目で見ている自分がいます。
当然、自宅および会社のPCにさっさとインストールしたのは間違いありませんが・・・

もちろん、Firefox3はすばらしいと思います。「爆速」と呼ばれるほど改善されたレンダリングエンジン。そして、あれほど食いまくっていたメモリ使用の改善。
以前の記事「Firefox 3 Beta5 をインストール」でも書いたように、Firefox3はβ2から試している身です。当然、正式版リリースが嬉しくないはずはないのです。

・・・が、世間が「ダウンロード数でギネスに挑戦」とか、大騒ぎしていると逆に冷めてくるのが天邪鬼な性格ゆえ。Firefox1.0のとき、社内で一人Firefox普及活動？していたのも今や昔の話。今度はOpera9.5でも使ってやろうかと思ったりするわけです。

それは冗談ですが、PC版の第2次ブラウザ戦争が勃発する中、PC用のブラウザだけに注目していて良いのかな？と甚だ疑問に思います。
次の戦場は明らかにモバイル＆非ＰＣ用のブラウザなのは間違いないのです。

先日、「Mozilla、モバイル版Firefoxのモックアップ披露」というニュースがありました。そのときのデモも、「Mozilla Labs」の「Firefox Mobile Concept Video」にアップされています。

ようやくMozillaは、モバイル版に対してここまで来た・・・というかまだここレベルにしか達していないということです。もちろん、正式発表までにはさらに完成度を高めてくるでしょうけど、問題はどこに、何に採用されるか？ということです。

すでに携帯用ブラウザだけでなく、NintendoのWiiやDSに「Opera for Nintendo」に採用実績のあるOperaのように、どこまで採用実績を増やせるかが問題なのです。

今最も勢いのあるモバイル用ブラウザエンジンはMozillaではなく、Safariに採用されているWebkitです。
モバイル版ブラウザといえば、これまではOperaでしたが、Opera Mobileすら追い抜きそうな勢いです。

Webkitが有力視される理由は、密かに浸透している開発環境です。
我々Webクリエイターが今後開発していくAdobe AIR、AppleのiPhoneやiPodTouchは当たり前として、GoogleのAndroidもサポートしています。

もちろん、追われるOperaも「Opera リンク」で囲い込みを始めました。
Firefox3でダウンロード記録ギネス達成？のMozillaは大きな出遅れ組みです。Firefox MobileでどこまでWebkitやOperaの追随できるか？
Firefox3のダウンロード数とか、ブラウザシェアよりも、そちらのほうがずっと気になる昨今でした。

投稿者 lepracaun : 20:58 | コメント (0) | トラックバック

2008年4月24日

Google Static Maps

Javascriptを利用できない環境でもGoogle Mapsが利用できるようになりました。

Google Static Maps API

通常のGoogle Maps APIではJavascriptで地図を表示させ、ズーム機能やマウスでドラッグして移動させたり、マウスオンでふきだしを表示させたりなどできました。
ただし、Javascriptを使用できないモバイルサイトでは利用できませんでした。

モバイルでGoogle Mapsを利用したい場合はiアプリ版の「モバイルGoogleマップ」がありましたが、これはドコモの903iシリーズ以降の対応となっており、かなり限定的でした。

これまではモバイル版Yahoo!地図情報にリンクを貼ったりしてモバイルサイトに対応していたのですが、今後はGoogle Static Maps APIにより、Google Mapsも利用できるようになりそうです。

Google Static Mapsは静的なGIF画像を表示させます。
当然、ドラッグして地図を移動させたり、マウスオンでふきだしを表示させたり、ズーム機能は使えません。
しかしながらあらかじめマーカーを表示させたり、通常のマップとモバイル用のマップのいずれかのマップタイプを指定できます。

利用するには従来版Google Maps APIと同様、API Keyが必要です。

Sign Up for the Google Maps APIでAPI Keyを取得、あとはimgタグにパラメータ付きのURLをつけて表示させます。

同じ地図をモバイル用のマップタイプで表示させたのが下記のもの。

• center: カンマ区切りで緯度と経度を指定
• zoom: 0から19の間でズームレベルを指定
• size: 地図画像のサイズ(最大512x512ピクセル)
• maptype: roadmapまたはmobileを指定(roadmapはPC版Googleマップの画像、mobileはモバイル端末 の解像度に最適化した画像)
• markers: マーカーの緯度と経度、位置、色(red, green, blue)、アルファベット1文字を指定
  • [緯度],[経度],[色][アルファベット]の順で記述し、複数マーカーはカンマで区切る。
  • 色とアルファベットの間に区切りは入れない。たとえば緑で「A」のマーカーを表示させたいときは greena と記述する。
• key: ドメインごとに取得するAPIキー(Google Maps APIと同じもの)

パラメータの指定の仕方も簡単ですし、とても便利なのですが、気になる点がひとつ。
それは、1日あたりの最大リクエスト数が1000ということです。
ユニーク画像リクエスト数ということですから、同一画像に1000人以上がアクセスしても駄目でしょうし、サイト内に複数の画像を設置していた場合、累計でカウントして1000アクセスを超えたら駄目ということです。
この辺は、設置しようとするサイトおよびページのアクセス解析をみながら判断するしかなさそうですね。

投稿者 lepracaun : 01:35 | コメント (0) | トラックバック

2007年12月21日

IEで背景画像が表示されたり消えたりするバグ

たとえばリストタグのリストマーカーに背景画像を指定している場合、IEで背景画像が表示されたり消えたりすることがあります。

たとえばページを読み込んだときや、ページをスクロールさせたときに発生する現象ですが、これはIEのバグです。

親要素にfloatプロパティを指定している場合に発生するようで、背景画像を指定している子要素にwidthでサイズ指定してやると解決します。

投稿者 lepracaun : 13:45 | コメント (0) | トラックバック

2007年12月19日

WEBメールやメールクライアントのCSS対応状況

メールマガジンなどでHTMLメールを配信している企業も多いかと思いますが、CSSを使用するのは下記のサイトを確認してからのほうが良さそうです。

A Guide to CSS Support in Email: 2007 Edition
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

WEBブラウザに関しては、まだまだブラウザ間の対応状況に差があるとは言え、XHTML＋CSSでコーディングするのが主流になってきています。
ただメールクライアントに関しては、ブラウザほどCSS対応が進んでおりません。
特に注意を要するのがHotmailやYahoo!Mail、GmailといったWEBメール。
ほとんどCSSに対応していないと判断してかまわないと思います。

最近は何でもWEBメールで済ませる方も増えてきております。
かく私も、会社では指定されたOutlook Expressを使用しておりますが、プライベートで使用しているThunderbirdはあくまでもローカルバックアップ用で、メインはGmailです。

Outlook Expressできれいに見えていたCSS使用のHTMLメールが、Gmailで見たらCSSが全部はずれていてビックリ！なんてことにならないように、現時点ではテーブルレイアウトにしておいたほうが無難のようです。

いずれはCSSサポート状況も改善していくとは思いますけど・・・。

投稿者 lepracaun : 14:32 | コメント (0) | トラックバック

2007年10月28日

CSS最適化ツール「Clean CSS」

続いて、膨大になったCSSのプロパティを整理＆チェックするのに便利ツールを紹介します。

■Clean CSS
http://www.cleancss.com/

Code Beautifierと同じアプローチのツール。
結果の表示もほぼ同じです。
それもそのはずで、ベースとなっているのは「CSSTidy」というCSS最適化ツールで、使用しているバージョンが違うだけ。

ちなみに「Clean CSS」はCSSTidyのバージョン1.1を使用。
「Code Beautifier」はCSSTidyのバージョン1.3を使用しています。
いずれもこの記事を書いている2007年10月28日現在での仕様です。

ベースとなっているCSSTidyのバージョンが違うとはいえ、現在両者を使い比べた印象では、お好きな方をどうぞという感じです。
チェックに使用したCSSソースでは、結果が変わらなかったというだけですので、できるだけ最新のものを使いたいというのであれば、「Code Beautifier」を使用すべきでしょう。

投稿者 lepracaun : 13:43 | コメント (0) | トラックバック

CSS最適化ツール「Code Beautifier」

膨大になったCSSのプロパティを整理＆チェックするのに便利ツールを紹介します。

■Code Beautifier
http://www.codebeautifier.com/

CSSのソースをコピペで貼るか、CSSソースのパスを入力すると最適化をかけて、結果を表示してくれます。

オプションの設定が多岐に渡っております。
自分なりにベストなオプション設定を見つけるしかないです。

オプションの設定で、Preserve CSSではなく、Sort Selectors (caution)やSort Propertiesにチェックを入れると、セレクタやプロパティ順に並び替えしてくれるのはいいのですが、肝心のコメントが削除されてしまうのが難点。

コメントを削除したくない場合は、Preserve CSSにチェックを入れておく必要があります。

Output as fileにチェックを入れれば、CSSファイルとして出力も可能。
Discard invalid propertiesで、各CSSのバージョンごとにバリデーションもかけてくれます。

使いこなせば便利なツールだと思います。

投稿者 lepracaun : 13:21 | コメント (0) | トラックバック

2007年10月11日

ブロックレベル要素の高さを揃えるheightLine.js

シンプルでいて利用価値が非常に高いと思われるJavascriptのライブラリが発表されていました。
ブロックレベル要素の高さを揃えることができるという「heightLine.js」

複数のブロックレベル要素の高さを揃えれないというCSS固有の問題を解決できるという点で、かなり有意義なのではないでしょうか？
WEB標準に準拠という考え方に固執すると、ブロックレベル要素の高さを揃える必要性に疑問を感じなくもありませんが、現実問題として、デザイン上そういうニーズはあります。

そこだけテーブルレイアウトにしてしまうと、どこか「敗北感」みたいなものがあり、フルCSSレイアウトではなくなります。
そんな時、便利なheightLine.js。
ぜひ今度使わせていただきたいと思います。

投稿者 lepracaun : 01:27 | コメント (0) | トラックバック

2007年8月27日

FirefoxなどのGeckoエンジン系ブラウザで画像の下の隙間ができる件

ドキュメント宣言で標準モードにした際に、FirefoxなどのGeckoエンジン系ブラウザで画像の下の隙間ができます。
解決方法は、imgタグにvertical-align: bottom;を指定すると解決できます。

投稿者 lepracaun : 16:04 | コメント (0) | トラックバック

2007年8月19日

clearfix：overflowを使用した解決方法

clearfixであれこれ調べているうちに、overflowを使った方法でfloat問題を解決した方法がありました。
QuirksModeというサイトのClearing floatsという記事に紹介されていた方法。

日本語でも下記のサイトで紹介されていました。

• floatボックスが親ボックスを突き破る問題
• clearfixハックは本当に必要なのか
• float の問題を overflow で解決

ただし・・・MacIEで問題が生じるそうなのですが、現在テスト環境が無いので確認できず。
Netscape7.1でも中身が表示されないなどの問題が生じると記載されているサイトがあるのですが、overflow: hidden;と記述した場合、Windows用Netscape7.1版では問題なく表示されました。
Mac OS Classic (OS 8 & 9) 用Netscape7.02 版でのことでしょうか？

元ネタの記事からそのままソースを拝借

MacIE対応、Netscape7.1対応も含めて下記の通りに。

投稿者 lepracaun : 05:28 | コメント (0) | トラックバック

clearfixのバリエーション

CSSで2カラムレイアウトした際に生じるfloatに関する問題について。
親ボックスの中にサイドバー部分をfloat:leftさせ、コンテンツ部分をfloat:rightさせたとします。
すると、中身のボックス（サイドバー部分、コンテンツ部分）の高さが親ボックスに反映されません。
親ボックスに背景を敷いていた場合、中身のボックスが親ボックスをはみ出してしまいます。

そこで編み出されたのがclearfixという方法。
本家はPosition Is Everythingというサイトで、その中のHow To Clear Floats Without Structural Markupという記事で紹介されています。

IE6以降、Firefox、Safari、Operaといったモダンブラウザだけならnorisfactoryの「clearfixの決定版を作る －モダンブラウザ編－」が、もっとも参考になるかもです。
ここで紹介されているCASE10でファイナルアンサーと言えると思います。

しかしながら、いまだIE5.0、MacIE5.2といったレガシーブラウザでCSSレイアウトを依頼してくるクライアントもいまだ後を絶ちません。
実際つい最近、IE5.0、MacIE5.2、Netscape7.1対応のフルCSSレイアウト移行案件がありました。
Win IE5.0やMac IEなどのテスト環境を揃えるだけで一苦労でした。

clearfixに関しては、本家以外にもいろいろな記述方法が発表されていますが、上記のレガシーブラウザ対応を考慮すると、実は本家が一番よく練られているのがわかりました。

ちなみに本家の記述方法は下記の通り。

clearfix自体にはいろいろバリエーションがあります。

■IE独自拡張zoomプロパティを使用

※zoom:100%をzoom:1としているパターンもあります。
いずれにせよ、zoomプロパティはIE独自拡張のため、W3Cのバリデートに通りません。
便利ではありますがレギュレーションにマッチしないのでアウト。残念です。

■IE7対応版（本家にプラスアルファ）

※本家のclearfixに追記してIE7対策を施したもの。
IE7が登場するまでは、最初のdisplay: inline-block;をdisplay: inline-table;と記述しているパターンが多かったようです。
レガシーブラウザもIE７も網羅するならこれでOKかと。

■content: ".";のピリオドはNetscape7.1以下用

content: ".";の箇所をcontent: "";（スペースなし）、content: " ";（半角スペース入り）としているバリエーションがあります。
結局これは、Netscape7.1を対象ブラウザとしているかどうかがポイントのようです。

■参考サイト
文中に紹介したサイト以外に参考となるサイトへのリンクを貼っておきます。

CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件
→概念を図解で非常にわかりやすく解説されています。overflowを使った解決方法についても記述されていますが、その件に関しては別の記事で紹介します。

floatボックスが親ボックスを突き破る問題
→概念をわかりやすく解説されているサイト。ここでもoverflowを使った解決方法についても記述されていますが、その件に関しては別の記事で紹介します。

clearfixはちゃんと考えられていた
→content:プロパティになぜピリオドを入れているのか検証結果と見解が記載されています。

【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]
→zoomプロパティというIE独自拡張を使ったclearfixを紹介されています。バリデーション通過を考慮しなければ良い方法かと。

「clearfix」のIE 7対策：その２
→IEの各バージョンに対応したclearfixのバリエーションを紹介されています。

clearfixを考えみた .1
→content:プロパティになぜピリオドを入れているのか検証結果と見解が記載されています。

俗に言う clearfix と言われるコードのバリエーション色々
→いろんなバリエーションの紹介とリンク先を記載されています。

floatさせたボックスが親ボックスからはみ出すのを回避する裏技のIE7対策（その2）
→IE7対応版を紹介されています。

投稿者 lepracaun : 03:13 | コメント (0) | トラックバック