Lucky bag::blog

月別アーカイブ 2005年07月

前後の月

• « 2005年06月
• 2005年08月 »

IE 7 は期待して良さそう

この記事が属するカテゴリー

CSS web&blog

昨日のエントリに引き続き IE 7 Beta の話だけど、IE Blog によると、昨日のエントリでもいくつか紹介したバグ関連は Beta 2 で修正される模様。さらに追加でいくつかの項目をサポートすると明言している。やる気満々だな、Microsoft 。

• HTML 4.01 ABBR tag
• Improved (though not yet perfect) <object> fallback
• CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
• CSS 2.1 Fixed positioning
• Alpha channel in PNG images
• Fix :hover on all elements
• Background-attachment: fixed on all elements not just body

サポートされるだろうと見据えて、今月に入ってから当サイトでの略語のマークアップを acronym 要素から abbr 要素に切り替えていたんで、abbr 要素がサポートされてなかったら、「な、なんだってー」ってなるとこだった。セレクタ関連のサポートによって CSS での表現が広がりんぐだし、:hover を全ての要素で使えるようになれば、ul 要素でマークアップしたナビゲーション等でサブメニューをプルダウンさせたりするのが li:hover でラクチンポンになるなぁ。

もし、ホントにこれらが全てサポートされるんであれば期待しても良さそう。あ、もちろん使用できるのは XP 以上だけどね…。

2005-07-30T17:00:19+09:00 | コメント (2) | トラックバック (0) |

IE7 Beta の CSS に関する対応状況

この記事が属するカテゴリー

CSS web&blog

IEBlog でも発表されているけど、Windows Vista と IE 7　のベータ版がデベロッパーに配布されている。個人的に気になるのは IE 7 の方なんだけど、mezzoblue で IE 7 Beta の CSS 周りに関してスクリーンショットと共に報告がされている。

• IE7 CSS Updates

IE には数々の酷いバグがあったり、未対応の CSS セレクタがあったりするんだけど、その辺りに関して対応されているもの、まだ対応されていないもの等をざっと抜き出してみた。

対応されているもの

• PNG 画像への対応
• Peekaboo Bug　（完全ではないかも知れない）
• Guillotine Bug　（完全ではないかも知れない）

未対応のもの

• Line-height Bug
• Border Chaos
• Italic のオーバーフロー
• Doubled Float-Margin Bug
• Three Pixel Text-Jog
• Escaping Floats Bug
• a 要素以外の :hover 疑似クラスの対応
• Body 要素以外への背景画像 position: fixed; の問題
• 属性セレクタなど

つうか、未対応のものが多過ぎなんだけど、もちろん、こんなんで判断しても時期尚早。まだ Beta 1 なんでこれからフィードバックを受けて改善していくんだろうしね。Beta 2 でどこまで対応できるか期待したいとこ。

2005-07-29T10:29:16+09:00 | コメント (0) | トラックバック (0) |

プログレスバーの進行度を CSS で表現する

この記事が属するカテゴリー

CSS

情報量の目安の伝達手段としてプログレスバーってのがある。例えばデータのローディング中に、データ読み込みの度合いを視覚的に表現したりってのはお馴染みだ。んでもって、プログレスバーを (X)HTML と CSS で作るとしたらどんな感じかなぁって思ったんで、ちょっと作ってみた。

<div class="progress">
        <div class="bar" style="width: 75%;"></div>
</div>

これに対して、下記のように CSS で指定する。

.progress {
        background: #ffffff;
        width: 500px;
        border: 1px solid #999;
}
.bar {
        background: #ddffbb;
        height: 20px;
        margin: 2px;
}

class="bar" の幅をインラインスタイルにしてプログレスバーの長さを指定しているんだけど、ここら辺を JavaScript とかでゴニョゴニョすれば良い感じなのかな。と、ここまでやっておいて、論理的なマークアップの観点からすると情報を全て CSS 側に委ねてしまっていて、(X)HTML の方はただの空 DIV じゃんって思ったら萎えた。

うーん、class="bar" 内に井桁（#）を数値分 10 桁単位で document.write して、CSS で color を class="bar" と同じ色を指定。はみ出した分はoverflow: hidden; とかすれば良いのかなぁ、良く分かんないけど:-P

2005-07-27T18:20:47+09:00 | コメント (0) | トラックバック (0) |

アップルが音楽イベントを開催

この記事が属するカテゴリー

Misc

アップルが 8 月 4 日の午前 10 時に東京国際フォーラムにて行われる音楽イベントに、ジャーナリスト達を招待しているらしい。

• Playlist: Apple prepares for Tokyo music event

The event will take place on August 4, at 10:00 am at the Tokyo International Forum. The event could mark the beginning of an Apple iTunes Music Store in Japan.

うぉ、これは iTunes Music Store を日本でやるっつう発表なんじゃねぇの？って勘ぐってしまうけど、今回こそは期待できそう。さて、一曲いくらになるんだろうか。

2005-07-27T12:55:21+09:00 | コメント (0) | トラックバック (5) |

Firefox のブックマークに Tag を導入する機能拡張

この記事が属するカテゴリー

Firefox

Firefox を使っている Tagging ジャンキーにとっては、至極の一品になるかもしれない「Bookmark Tags」という機能拡張。いや、オーバーに言い過ぎた。んで、これが何かっつうと、Firefox のブックマークに Tag を導入することが可能になるのですよ。

del.icio.us や はてなブックマーク等のソーシャルブックマークを使い出すと、Firefox で通常のブックマークなんてあまりしなくなるけど、ローカルにこっそりとブックマークしておきたい物もあったりなかったり。そう言ったブックマークにも Tag を付けて管理したいって人は「Bookmark Tags」を試してみても良いかも。インストールすると、ブックマーク追加時のダイアログが変更され、Tag を入力する欄が表示される。

新しい Tag は 「New」ボタンを押下して入力。既にある Tag から付与したい場合は、チェックボタンにチェックを入れるだけ。すると、Tag 名のフォルダが作成され、その直下にブックマークが置かれる。後から Tag を変更したい場合は、ブックマークのプロパティから変更も可能となっている。

さて、何だかスゲェ良さげな「機能拡張」に思われるかも知れないけど、問題は Tag を付けた分だけブックマークが複製されて増えていくってことか。ブックマークが大量になってくると、サイドバーをスクロールして探すのが大変になりそうだけど、そこら辺はブックマークの検索を上手く使えば良さそう。実は、既にあるブックマークに Tag を付けていく作業が面倒くさくて自分は導入していません;-P ウヘッ

ちなみに、導入する際は必ずブックマークをバックアップしておくことをお薦めします。

2005-07-25T14:24:08+09:00 | コメント (0) | トラックバック (0) |

視覚的に分かりやすい CSS セレクタの手引き

この記事が属するカテゴリー

CSS

CSS2.1 で特定の要素を指定する場合には、下記のセレクタ等を使用して当該要素を選択出来る。

全称セレクタ

* {background: #fff;}

全ての要素

タイプセレクタ

p {background: #fff;}

全ての p 要素

子孫セレクタ

div p {background: #fff;}

div 要素の子要素（下位）のp 要素

子供セレクタ

div > p {background: #fff;}

div 要素の直接の子要素（直接下位）のp 要素

隣接セレクタ

p + p {background: #fff;}

同じ親要素を持つ p 要素に継続する p 要素（兄弟）

:first-child 疑似クラス

div p:first-child {background: #fff;}

div 要素内で一番最初に出現する p 要素

この中で子供セレクタ、隣接セレクタ、:first-child 疑似クラスは Win IE では未対応だったりするんだけれども、これらのセレクタを組み合わせることによって、ID や クラスを付与せずとも特定要素を指定することが出来る。拙記事「first-child疑似クラスと隣接セレクタ」でも使用例を紹介しているけど、これらの使用方法を分かりやすく説明しているサイトもある。

• LITERARYMOOSE.INFO: CSS Selectors — a Visual Guide for Absolute Beginners

各セレクタによる指定と、それに対する結果が載っていて分かりやすい。各セレクタの使用方法を理解するには非常に良い感じ。一番最後には宿題が3 問用意されていたりして、一瞬「えーと…」って考え込んじゃったりして。

2005-07-23T16:31:22+09:00 | コメント (0) | トラックバック (0) |

PHP ベースのフォーラム「vanilla」を試してみた

この記事が属するカテゴリー

web&blog

PHP ベースのフォーラムアプリケーション「vanilla」。DB に MySQL を使用し、テーブルレイアウトではなく、完全 CSS レイアウトってのに惹かれて、会社のサーバにこっそりインストールしてみた。

まぁ、結果的には日本語使えなくて残念って感じだったんだけど、言語の設定を選べる項目があったんで、そのうち日本語化されるのを密かに待ってみる。

インストール自体はかなり簡単で、ファイルをまるっとサーバーに上げて、readme.html にアクセス。指示に従って数ファイルのパーミッションの変更と、 MySQL のホストやDB の名前、ユーザ名やパスワード等の必要項目を入力して、3 ステップくらいでインストール完了。 手動でのインストールも可能で、その手順も readme.html に記載されている。

動作もなかなか軽くて良い感じ。フォーラム上の Discussions （スレッド）には定義リストを使っていて、(X)HTML のソースをチョロッと見た感じではちゃんと作られているっぽい。Discussions をブックマークする機能もあったりして、深く埋もれてしまったものも追っていけるみたい。

スタイルシートは、screen 用と何下に handheld 用が用意されていたりして、中身を見てみたら、何処の部分のスタイルを指定しているのかの説明が各ブロックごとにコメントされていた。見た目を変更したい場合は多分これを直接弄れば良いんだろうな。つうか、色々試そうと思ったんだけど、日本語未対応が判明しちゃったんで設定周りとかあまり深く突っ込まなかった。

2005-07-21T16:41:56+09:00 | コメント (0) | トラックバック (0) |

Firefox のクイックサーチを活用してみる

この記事が属するカテゴリー

Firefox

Firefox のロケーションバーにキーワードと検索したい単語を入力することで、任意の検索サイトで検索することが出来るクイックサーチ機能。デフォルトでは、Google、goo 辞書英和辞典、Wikipedia、e-Words が用意されているけど、自分でも検索サイトを追加することが出来るのは周知の通り。正直あんま使ってなかったんだけど、Firefox Quicksearches + Delicious = Godlike Powers (Repost) に感化されて「はてなブックマーク」のクイックサーチを追加してみた。

クイックサーチの追加方法は至って簡単で、検索サイトのサーチボックス（検索欄）内にて右クリックで「この検索にキーワードを設定」を選択する。とりあえず、「はてなブックマーク」のキーワードは hb とした。

これで思い立った時に、ロケーションバー（ Ctrl/Cmd + L ）に「hb 検索したい単語」でサクッと「はてなブックマーク」内検索出来るんで、少しはクイックサーチを使うようになるかもしれない。

2005-07-21T12:28:28+09:00 | コメント (0) | トラックバック (1) |

Firefox のサイドバーを強化する機能拡張

この記事が属するカテゴリー

Firefox

ここ最近インストールした Firefox の機能拡張の中で、All-In-One Sidebar が自分の中で地味にヒットした。

インストールすると Opera のサイドバーのように左横にボタンが表示される。んでもって、サイドバーに「機能拡張」「ダウンロード」「テーマ」「DOM インスペクタ」「JavaScript コンソール」等々が表示できるようになるっつうシロモノ。ちなみに、Ez Sidebar を入れてるとコンフリクト起こすみたい。ヘタするとプロファイルがぶっ壊れるらしい。

2005-07-19T18:34:57+09:00 | コメント (0) | トラックバック (1) |

画像サイズを em で指定

この記事が属するカテゴリー

CSS

「width 属性と height 属性の話」のエントリーを書いたあとに見つけた「CSS Scale Image Html Tutorial」はなかなか興味深かった。

一般的なブラウザでは、表示メニューから文字サイズを大きくしたり、小さくできたりする（ IE はフォントサイズを px 指定してあると変更不可だけど）。もっと先進的なのは、Opera のズーム機能で、こちらは文字のみならず画像も拡大・縮小できるわけだけど、CSS の em で画像のサイズを指定することで、Firefox や IE などでも文字のみならず画像も拡大・縮小できるぜって話。

サンプル

• scale_image.html

サンプルを作ってみたんで、見てもらえば分かると思う。同じ画像に対して、上は img 要素の width、height 属性でサイズを指定しており、下は CSS にて、単位 em を使って指定している。ブラウザの表示メニューから文字サイズを変更すると、下の画像もサイズが変化する。

問題は、当たり前な話なんだけど、デフォルトのフォントサイズを変更出来るブラウザでフォントサイズを変更していると、最初から画像サイズが変更された状態になってしまうって事と、親要素の状態によっては画像サイズの単位を em に変換するのが面倒ってことか。

2005-07-13T17:43:55+09:00 | コメント (4) | トラックバック (1) |

del.icio.us の for:username タグ

この記事が属するカテゴリー

del.icio.us

del.icio.us が新しく導入した for: tags 。これが何かっつうと、ブックマークをポストする際、タグに "for:ユーザー名" とすることで、そのユーザーにブックマークを送信することが出来、送信先の方では、 http://del.icio.us/for/ へアクセスすれば、自分に送信されたブックーマークを確認することが出来るってしろもの。そして、http://del.icio.us/for/ユーザー名 はそのユーザー以外が閲覧することは不可能となっている。

色々と言われているとおり、スパマーがアダルトや広告サイトのブックマークを送りつけるってことは考えられる。友人やグループなどで情報をシェアするには非常に便利な機能かもしれないんで、そういったスパム行為によってノイズが入り込むのはもったいないなあ。

んで、実際に僕がその機能を利用してブックマークを送るような del.icio.us ユーザーな友人がいるかってーと、まったくもって思いつかないわけで。

2005-07-11T19:14:21+09:00 | コメント (2) | トラックバック (0) |

@import を使ってブラウザに CSS を読み込ませない方法

この記事が属するカテゴリー

CSS

特定のブラウザに CSS を読み込ませたくない方法の一つとして、 @import を使う hack がいくつかある。そういった hack を使いたい場合には、各 hack の@import 規則と適用ブラウザを一覧表にまとめたサイトが便利。

• Hide CSS from browsers :: @import

縦に@import 規則、横に各ブラウザの対応状況、W3C CSS 検証サービス（W3C CSS Validator）に通るか、その際にエラーが出るのか警告が出るのかが分かるようになっている。プラス記号（ + ）は、その @import 規則を読み込むことが出来、マイナス記号（ - ）はその @import 規則を読み込むことが出来ない。

また、各 @import 規則の通し番号をクリックすることで、現在使用しているブラウザがその @import 規則で CSS を読み込む事が可能かを確認することも出来る。赤い文字で This text will be red if the rule has been applied. と表示されれば、その @import 規則で CSS が読み込めており、グレーの文字で This text will be red if the rule has been applied. と表示されれば、その @import 規則で CSS が読み込めていないという事になる。

最終更新日が 2004 年 9 月 23 日とちょっと古いけど、ページをまるまる zip ファイルで落とせるようになってるのが親切。

2005-07-11T13:01:49+09:00 | コメント (1) | トラックバック (1) |

ソーシャルブックマークに Rating という考え

この記事が属するカテゴリー

del.icio.us

del.icio.us を徘徊してて気付いたんだけど、Tag にアステリスク（ * ）を使っている人がいる。どうやら Rating、つまり、そのブックマークに対する評価をアステリスクで表しているってことらしい。最高評価は五つ星（ ***** ）で、人によってはちゃんと星 1 個から 5 個までで評価している人や、五つ星のみを付けている人も居たりと使い方は色々。

五つ星が付けられているブックマーク

• del.icio.us / tag / *****

ブックマークに対するメタな情報として、Rating を付けるってのは結構面白いアイデアだなあって思った。もちろん、感じ方、見方は人それぞれ違うんで他人から見たら必ずしも同じ価値を感じるとは限らないんだけど、Rating を一つの指標として参考にするのは有りかなと。例えば、ギークな人が五つ星を付けていたら注目すべき事なんじゃないか、とかね。

2005-07-09T11:29:02+09:00 | コメント (0) | トラックバック (1) |

Google が公開した Firefox 用機能拡張

この記事が属するカテゴリー

Firefox

Google が公開した 3 つの Firefox 用機能拡張のうち、個人的に一番気になるのは「Google Send to Phone」かも。

Google Send to Phone for Firefox is an extension that enables you to send short text messages of web page content to your mobile phone.

閲覧しているページのアドレスや、ページ内の選択したテキスト（eg, お店の電話番号とか住所とか）をポチッとなで携帯に送れるっつうのは激しく便利そう。日本向けに対応してくれれば使ってみたいな。ただ、送信先のキャリアと番号がクッキーにキャッシュされるってのは微妙かもね。

2005-07-08T10:16:39+09:00 | コメント (0) | トラックバック (0) |

視覚弱者のための「Zoom layout」

この記事が属するカテゴリー

web&blog

ロンドンで開催された @media のカンファレンスにて2005 年 6 月 10 日に行われた Joe Clark 氏のプレゼンと、それを受けた Douglas Bowman 氏の記事。視力が低い人を考慮したレイアウト「Zoom layout」という提案をしている。

• Zoom the Web:The problem of giant fonts
• Stopdesign | Zoom layout

全く目が見えない視覚障害者の場合はスクリーンリーダーなどを利用するんだろうけど、かろうじて視力がある人たちは普通のブラウザを使うと思われる。ユーザビリティの話で、スクリーンリーダーを利用するユーザーへの対応の話は出てくるけど、低い視力のユーザーに配慮してってのは意外と聞かなかったりしたから、改めて考えさせられた。大きめのフォントサイズ、ハイコントラスト、シングルカラムのレイアウト等の代替 CSS を用意しておくってのは大事なことかも。やっぱ、こういったことはテーブルレイアウトでは難しいから、企業サイトはどんどん CSS レイアウトに移行すべきなんだろうな。もちろん、(X)HTML の構造をちゃんとマークアップしてってのは大前提だけど。

とりえず、Bowman 氏がClark 氏のプレゼン中におもむろにラップトップを開き、プレゼン終了時には Zoom layout 用の CSS をほとんど作り終えたってのは単純にスゲェなと。

2005-07-06T17:48:04+09:00 | コメント (4) | トラックバック (0) |

木製の iPod

この記事が属するカテゴリー

Misc

うはっ、iPod のガワを木で作っちゃった人が居るみたい。

• Real Wood iPod by ZapWizard

どうやら表面だけらしいんだけど、なにげに本体とホイール部分は違う木を使って雰囲気を変えていたりして、愛情とこだわりを感じるなぁ。手触り良さそうだし、使い込むほど味が出てくるような気がするマスターピース。

2005-07-05T22:32:37+09:00 | コメント (0) | トラックバック (0) |

width 属性と height 属性の話

この記事が属するカテゴリー

web&blog

いや、もう激しく今更な話なんですが。

• imgのheightとwidthは必須か? (PC Tips)

自分も未だに迷信に引きずられて width 属性と height 属性を記述し続けてるんだけど、実際に世間一般はどうなんだろ。古めのブラウザの爲には、記述しておいた方が良いかも知れませんが。 の古いブラウザって、どこらへんのブラウザには当てはまるのかなあ。ばっさり切り捨てて記述をしていない人って結構いるのかしらんとか思った。

img 要素の width 属性と height 属性って、あくまでユーザーエージェントのレンダリングのための情報だと自分は認識している。

The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.

height属性とwidth属性は、ユーザエージェントに対して画像やオブジェクトの大きさに関する概念を知らせるので、ユーザエージェントは画像やオブジェクトに割り当てる空間を予約し、そのデータが届くのを待っている間も文書のレンダリングを継続できる。

そう言った意味では、最近のブラウザが width 属性と height 属性の情報がなくてもシームレスに描画出来るんであれば、とくに記述しなくても良いんだろうな。

2005-07-05T13:21:31+09:00 | コメント (8) | トラックバック (0) |

iTunes で del.icio.us 上のメディアをポッドキャスティング

この記事が属するカテゴリー

Misc del.icio.us

そういや、iTunes のバージョン 4.9 で正式にポッドキャスティングをサポートしたことによって、del.icio.us 上にブックマークされているメディアを取り込めるようになったんだな。

• How to find and add media to your iTunes library with del.icio.us

iTunes への取り込み方法

システムタグに関しては、拙記事「del.icio.us タグがファイルタイプをサポート」や、「del.icio.us で音楽ファイルのダウンロード」でも説明しているけど、例えば MP3 ファイルや Audio ファイルであれば下記へアクセス。

• del.icio.us / tag / system:filetype:mp3
• del.icio.us / tag / system:media:video

RSS を iTunes へドラッグすると読み込まれるんで、気になるファイルを「入手」ボタンでダウンロードして再生。

Audio ファイルの場合は、再生すると左下のアートワーク内で再生され、クリックすると画面がポップアップされる。

やべぇ、なんか楽しいぞ。まだ日本ではそれほどポッドキャスティングが広まってないんで、とりあえず del.icio.us で漁るのも良いかも。

2005-07-01T17:20:04+09:00 | コメント (0) | トラックバック (1) |