現在位置
  1. ホーム
  2. ブラウザ カテゴリーの記事一覧

ブラウザ カテゴリーの記事一覧

MacのFirefoxでGoogleツールバーが使えなくなった時

MacでFirefoxを使っていたら、突然Googleツールバーが使えなくなりました。おそらくFirefoxの3.6.5あたりからだったでしょうか。うーむ、これは困るなーと思いながらも、僕はなぜかGoogle Chromeも一緒に立ち上げていることがほとんどですのでChromeで検索をすれば良いかーと思っていたのですが、やはりFirefoxで検索をしたいことも多く、かといってアドレスバーに検索キーワードを入れるとGoogleの検索結果ページが出る場合と特定のサイトが表示されてしまうこともあり不便。

ということで、「google ツールバー アンインストール Mac」で検索したらあっさり直す方法が書かれたページを発見しました。同じような症状に見舞われている方は以下のページをご参照ください。

「Mac(OS10.6)のFireFoxでGoogleツールバーが使えなくなった」

とてもCSSハックが面倒ですので、何か用意してください

IE9のベータ版が公開されて間もありませんが、すでにいろいろとCSSハックが解明されていますね。

いやー、こういうの見つけ出しちゃう方ってすごいですね。ChoromeとかOperaなんかもドンドン見つけてしまってください！

と、思うのですが、なんだか実装者が面倒になる一方ですよね。こういうの。

そろそろ特定のブラウザだけにCSSを指定する方法を準備してもらいたい

各ブラウザのW3C仕様への準拠がドドドーっと進んできていますので、これからはもうCSSハックとかはいらなかなーとか思ったりもします。実際に、PC用のサイトをコーディングして、最近FirefoxやSafariへのハックを使った記憶がありません。

ただ、今後僕たちが担保しなきゃいけないデバイスがめっちゃ増えていった時のことを考えると、今のうちから何かしらの対策を練っておいて欲しいなと思うんですよね。

例えば、冷蔵庫に普通にブラウザが搭載されたとしましょう。ワンソースマルチユースの精神のもと、PC向けと、冷蔵庫向けのHTMLを一緒にした場合に、「あー、最近結構売れている、東芝の○○○だけはどうしても表示がおかしくなっちゃうなー」などがあるかもしれません。

たとえwebkitを採用してくれたとしても、素のwebkitから先は各社のエンジニアさんに託されるわけでして、そんなときはむしろwebkitであるがゆえにハックがしずらくでウザイなんとことにもなりかねないなーと思います。

というわけで、例えばですが、

@[メーカ名]-[機種名]-[バージョン番号] {
	[セレクタ] {
		[プロパティ]: [値];
	}
}

なんてふうに書くと、特定のヤツだけに簡単にスタイルを指定できるみたいなのを各社の方々が用意しておくとか、なにかしら簡単なヤツが欲しいなと思っています！

と、こうなってくるとIEのコンディショナル・コメントってすげー優れた機能ですね！

Opera BackStage Tokyo に参加してきました。

昨日（08/04/10）にOpera BackStage Tokyo に参加してきました。
会場がノルウェー大使館ということで、しかもそれが広尾というオサレな町にあるということで、行く前からドレスコードとかは…（さすがにこういうイベントはないか。）とか、もろもろ心配したのですが、無駄な心配で良かったです。

気になった点としては、

  • Operaウィジェットはデスクトップだけでなく、様々なデバイスで動作するんだぜ
  • Operaってメールクライアントとして利用することが可能だぜ
  • 今はOperaリンクに力を入れているんだぜ
  • Operaメモって昨日があるんだぜ
  • Opera使いでありながら、マウスジェスチャ使ってないとか有り得ないんですけど…
  • W3Cのマイケル スミスはジゴロなんだぜ
  • W3Cってフルタイムの人は65人しかいないのに、60ものワーキンググループがあって、猫の手も借りたいんだぜ

という所でしょうか。

その後、懇親会に参加させていただいたのですが、Operaの外国人エンジニアの方々（当然日本人スタッフもですが）って凄い良い人ばかりです。
こんな何にも出来ない人間の話に親身に耳を傾けていただいて、なんか少しでも、ユーザーが言っていることを聞き取ってやろうという意気込みも伝わってきて、凄ーく尊敬出来る方々ばかりなのです。

あ、そうそう、良くアクセシビリティというテーマのお話では、文字サイズの変更ボタンを制作者側でページに実装するの？という話題が出るときがあります。
それって、ユーザーにとって分かりやすい形でブラウザが実装していれば、必要ないものなのでありますが、ブラウザで文字サイズを大きく（もしくは画面自体をズーム）するには、Operaの場合、「表示 > ズーム > ズーム 率の選択」と、3つものステップが必要になります。
他のブラウザもしかりで、ツールバーの中に隠れてしまっているがために、ユーザーに認知されないという状況が往々にしてありますので、もっと分かりやすい形で、最低限表に出しておいてはどうでしょうか？というのを、アンドレアスさんにお聞きしてみたら、「9.5βからは実装されてたと思うよ」、とのことでしたので、早速9.5βを見てみました。

Opera9.5 のサンプル

上の画像が見てみたものなのですが、ブラウザウインドの右下の部分にセレクトボックスがあります。デフォルトでは、「虫眼鏡マーク+100%」となっていて、ここから拡大率を選択すれば利用可能なんですね。

うーむ、まずはやっとこさこいつが日の目を見たということで、拍手するべきですね。ようこそ地上へー！

ただ流石にこれでは、言われなければ気づかないという方が大多数を占めるような気もしますね。
どうせであれば、更新ボタンとか進む・戻るボタン達に混じらせてもらったりと、せめて上部のツールバー群に昇格して欲しかったなぁというのが正直な感想でした。

とは言え、なんにしても素晴らしいブラウザであることには変わりはありませんので、最後まで読んでいただいて、かつOperaを持っていないという方は、Operaダウンロードページへ向かってくださいませ＜（＿ ＿）＞

本を書きました

人生で初めて本というものを書かせていただきました。まずは紹介してしまうと、「XHTML+CSSデザイン |基本原則、これだけ。」というものです。なんか、「モーニング娘。」みたいで、ユニークなタイトルが気にいっております。

それで、表紙画像がこちらです。

【表紙】XHTML+CSSデザイン |基本原則、これだけ。

これまた、ポップな感じで気に入っております。

「書かせていただきました」とは言うものの、私の他に、こもりまさあきさん、神森勉さん、矢野りんさんと、業界を代表する方々との共著ということで、小生は始終緊張しっぱなし（というかなんというか）な感じで、まさに皆々さまにおんぶに抱っこ状態というありさま。
また、編集の泉岡さんには何かとお手数をおかけしてしまい、編集さまさまな感じでありました。
皆さま、こんな私でしたが、ご協力・ご支援ありがとうございました＜（＿ ＿）＞無事入稿までいけたのも、皆々さまのおかげでございます。

肝心の内容なのですが、この所（というかちょっと前に）声だかに叫ばれているWeb標準。出来る人にとってはなんの障壁も無いわけですが、業界の人材も一回りして業界経験の浅い方（など）の中には、仕様書とか難しくてよく分からん、という方もいらっしゃいます。
そんな中で、これからWeb制作に携わりたい初心者の方はもちろん、既に現場で実作業をおこなっている方、そしてWeb制作が本業ではない企業のサイト更新担当の方などにも、Webページのあるべき姿や用語の意味、仕組みなどが理解していただけるよう、できるだけ平易な言葉を用いてわかりやすくXHTMLとCSSについて解説していこう！というのが本書の主題となっております。

ちなみに、私が担当させていただいたのは、「CHAPTER06：デザインの実装-レイアウト編」「CHAPTER08：トラブルシューティング（一部）」となっております。店頭でお目にかかりましたら、是非ともお手にとっていただき、章立てだけでもご覧いただければ幸いでございます。

IE8Beta

ほんのちょこっとしか触っていませんが、取り急ぎの雑感としては、Firefox2よりもCSSサポートは高いですね。
僕の知っている限りでは、CSSサポートと言えば、Operaが最強なのですが、いろいろごちゃごちゃやってもOperaと遜色ありませんでした。特にfloat周りに力を入れたという印象です。やっとこさ「Acid2テスト」にも合格ですしね。

セレクタの実装なんかも、CSS3のほとんどを実装済みというものではありませんが、納得出来るレベルのものになってきました。特に、ながらく待ち望んだ「before/after擬似要素」がIEでも使える！ということです。また、ながらく苦しめられてきた「IEのhasLayoutプロパティ」というかなり謎の多かった仕様も消えうせるということで、これはもう感動ものです。

今までマークアップを生業とする身としては、何かと話題というか問題児なIEでした。IEが駄々っ子なために、泣きながら徹夜をしたという制作者の方もいらっしゃるかと思いますが、IE8のリリースとともに、一気に制作にかかる負担が解消されそうですね。
Javascriptやその他のプログラミング系の言語はあまり得意ではありませんので、自分では調べていないのですが、amachangさんのIE8 速攻徹底レビューなんかを見ても、全体的にWeb標準回りの強化がされていることが伺え知れます。

というわで、以下が検証（という程のものでもない）ソース。時間があれば、いろいろやってみたいっす。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>デモ</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding-top: 100px;
}
div.container {
width: 800px;
overflow: hidden;
}
div.content {
width: 3200px;
}
div.section {
float: left;
width: 760px;
padding: 10px;
border: 10px solid #313131;
}
div.section ul li {
list-style: none;
min-height: 200px;
background: url(demo.gif) right bottom no-repeat;
}
div.section ul li h3 {
position: relative;
}
div.section ul li h3:after {
content: "abcdef";
}
div.section ul li h3 img {
float: left;
margin-right: 10px;
border: 5px solid #a2a2a2;
}
div.section ul li p {
/*float: left;*//* 最後に追加してみたら、IE7・FF2でめっちゃ崩れた */
margin-left: 200px;
}
div.section dl {
clear: left;
}
</style>
</head><body>
<div class="container">
<div class="content">
<div class="section">
<ul>
<li>
<h3>hnタイトル<img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" /></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<hr />
<p>ダミーテキスト</p>
<dl>
<dt>dtっす</dt>
<dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
</dl>
<p>dlの後のpっす。ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<!-- /.content --></div>
<!-- /.container --></div>
</body>
</html>

また、IEといえば、2/13にIE6からIE7への自動更新がはじまっているのですが、思ったほどにグーンとは移行が進んでないですよね。ちなみに弊社（有限会社アイエイトワン）のサイトで見てみると、IEユーザー自体は約50%と他のサイトより少なめです（まぁ、職種的に同業の方がご覧になる機会が多いですからね）。その中での比率ですと…

  • IE6：64.20%
  • IE7：35.19%
  • IE5.5：0.62%

となっています。
【有限会社アイエイトワンサイトユーザーのブラウザシェア】Google Analyticsのページです

このようにIE7への移行はちょっと微妙な感じになっておりますし、IE8も2008年中にリリースと噂されている訳ですから、是非ともIE7はすっ飛ばしてしまって時期スタンダードはIE8になってしまえば良いのにと思います。

最後にちょっと残念（というかやっぱり）な感じというものです。IE8ではあらたに「WebSlices」という独自の機能を実装しています。これは何かと言うと、セマンティックWebということでは有名な、あの Microformats の代替的な機能となるものです。より詳しい情報としては、【詳報】セマンティックWebに向かうIE8の「8つの強化点」にて説明が掲載されております。
まぁ、ついにマイクロソフトさんもここまで対応するようになったということは間違いなく喜ばしいことなのではありますが、せっかくセマンティックWeb的なことに対応するのであれば、独自の機能などを作り出すのではなくて、世界中の皆でせっせと仕様を策定している Microformats の一部に対応した方が良いんじゃないの？と思います。

WebSlices というのは、Microformats の hAtom を拡張したものらしいのですが、記述の仕方が Microformats とは微妙ーに変わってきます。そんな中、時期バージョンでは Microformats そのものに対応するらしい Firefox とかもある訳です。
クロスブラウザと言うと今までは(X)HTML+CSSの世界やJavascript界隈で主として叫ばれていた言葉だったのですが、今後はセマンティックWebにおけるクロスブラウザ問題なんかも出てきてしまいそうな予感です。

とは言え、最後にネガティブな内容も書きましたが、全般的にWeb標準回りに強化した新たなIE8のリリースを今か今かと待ち遠しいです。

Re：Acid2テストの功罪

ADPさんのAcid2テストの功罪でおっしゃっているように、各ブラウザはCSS2.1を正確にレンダリングするだけでもものすっごい時間がかかっているわけですよね。

確かに、CSSのプロパティの組合せを考えてみると、そりゃもう途方もない組合せが考えられるわけで…。単純に、このプロパティが来たときにはこうするんだよ、としただけではなかなかうまくいかないんだろうなぁと思います。ブラウザベンダーの皆さん、本当にお疲れさまです、と心から思います。

さてさて、そんな状況の中、W3CによるCSS3の制定は止まっていないわけで。今後、HTMLの要素も増えれば、プロパティ・セレクタなんかもどんどん増えてくるんですよね。

CSS2.1（といかCSS2）でも勧告からほぼ10年たってやっとブラウザが結構な感じで実装して来たわけで。CSS3って何時の話ですか？と思います。その頃のWeb制作って、今のような(X)HTML+CSSなんだろうか？

カテゴリー

その他

  • Valid XHTML
  • ログイン