七転び八起きブログ

CSS3のMulti-columnレイアウトを先取りする方法

2005年09月30日   :: JavaScript

次期CSSとして現在WorkingDraftなCSS3ですが、その中に、新聞のような多段カラムを実現するモジュールが予定されています。

具体的にはCSS3 module: Multi-column layout仕様書原文というものです。昔あったNetscape独自タグのMulticolを思い出させます。

ちなみにCSS3の策定中の草案は色々なサイトで邦訳がされております。
 ・CSS3のモジュール:テキスト
 ・CSS3ハイパーリンクプレゼンテーションモジュール(邦訳)
 ・Web関連技術の仕様書邦訳

もちろん現在のブラウザには基本的には実装されていないのですが(Geckoエンジン系は-moz-つきのでテスト実装されてたんでしたっけ。)、一足先にこれをJavaScriptで使ってしまおうというものが、A List Apart(→A List Apartトップ)に記事としてあげられていました。

該当記事は
A List Apart: Articles: Introducing the CSS3 Multi-Column Moduleです。

最初の方では、多段コラムが再び光を浴びてきた事情や、実際にCSS3に加わった際にどういったプロパティになるか、などの解説になります。

そして、「An interim measure for experimentation」の部分から、JavaScriptで一時的に多段カラムを実現する方法の部分になります。

実際どうしたらよいか

まず、サンプルページがCSS3 Multi-Colum Layout Demonstration and Documentation - CSScripting.comです。ここのTestCaseの部分から各サンプルページに行くことができます。

これを実現するには、一枚のjsファイルを外部から読み込むだけです。それだけで、後はCSS3のカラム周りのセレクタを使えるようになります。例えば

.article {
column-count: 2;
column-gap: 20px;
}

の様に。
実際にローカルでやってみましたが、ちゃんと再現されました(当たり前か)。

気をつけること

JavaScriptがDOM経由でCSSを取得して処理するので、JSファイルを読み出す前にCSSを外部から読み込んでおかないといけません。なので、header内での順番に注意です。

また、あまり複雑なセレクタだと上手くスタイルを取得できないようです。できるだけシンプルなセレクタにするべきだそうです。

それに気をつけていれば、ひとまずOKっぽいです。視線の動きにさえ注意して上手く使えば段組は確実に可読性を向上させると思いますし、デザインの幅も広がりますので、よさげではないでしょうか( ´-`)

なぜ検索結果の上位2サイトにアクセスが集まるんだろう

2005年09月27日   :: Webその他

Webサイトのユーザビリティと言えばこの人、Jakob Nielsen氏。私がHTML等にはじめて触れた時期にちょうど、ユーザビリティというものが盛り上がってきていました。どの雑誌にもユーザビリティの連載が組まれていたような気がします( ´-`)
 [※IT用語辞典 e-Words : ユーザビリティとは 【usability】]

そんなニールセン氏がWeb上で連載しているAlertbox:というコラムがあります。少し更新は遅いですが日本語版もあります(Jakob Nielsen博士のAlertbox)。

このコラムの最新記事が「The Power of Defaults」と言うもので、Webユーザーはデフォルトを無意識のうちに信頼すると言う内容のものです。(→当該記事はThe Power of Default Values (Jakob Nielsen's Alertbox)から)

具体的には検索エンジンの結果ページ(SERP:Search Engine Results Page)についての話です。

まず、記事によると検索結果の内上位二つが殆どのアクセスを獲得するようです。内訳は、全体のVisit数を100%とすると、1位が42%、2位が8%、残りがその他という事で、半分を上位2リンクが持っていっていることになります。

となると、なぜ上位2リンクにアクセスが集まるかという話になります。
記事の中で、この疑問への良くある回答として

「検索エンジンは上位に適切なサイトへのリンクを貼ってくれる。それ故、ユーザが最適なものとして自ら選んだリンクは、結果として検索エンジン上位のサイトになる。なので、見た目として上位のクリック率が上がる」とか

「ユーザはめんどうくさがりだからとりあえず上の方に来た奴をクリックする」といったものが上げられています。

Thorsten Joachims氏らの実験

これを検証するために、Cornell大学の教授のThorsten Joachims氏らが、実験をしたそうです。

その実験とは、スクリプトを仕込んで、上位2サイトの順位をユーザに分からない形で入れ替えるというものでした。つまり、1位→2位、で2位→1位になるということです。

その結果はというこt、元々1位(仮にAサイト)が42%、2位(仮にBサイト)が8%だったものが、1位(Bサイト)が34%、2位(Aサイト)が12%になったそうです。

色々と他の要因はあると思いますがひとまず置いておき、
「入れ替えあり入れ替えなし両方のユーザが同じ」と仮定すると、

(検索結果で2位であるサイトを、何が何でも選ぶという物好きな人がいない限り)
検索結果にあがったサイトの中から積極的にAサイトを選んだ人(順位を入れ替えてもAサイトを選んだ人)は、12%ということになります。

すると、最初にAサイトを選んだ42%のうち、「積極的にAサイトを選んだ::12%」「それ以外の理由で選んだ::30%」ということに。比率で言うと2:5ですね。


と、何かざっと考えただけで穴だらけな推測でしたが、それはともかく、検索結果のトップor2番目にあるというだけでポチッとクリックしてしまう人がこれだけいるということに驚きました。
有る程度検索エンジンの仕組みとか精度を知っているとそこまで即クリックはしないと思いますので、まだまだ検索エンジンと云うものについてや、ネット自体の仕組みを把握しておらず、「検索エンジンの入力欄に探したい文字を入れて、出てきたページの中で一番上のものをクリックする」という人が多いのかもしれませんね。


言ってみれば「I'm Feeling Luckyっていったい誰が使うんだろう」という疑問と根っこは同じ話題ですね。

WWWは実際は"World Wide Wait"だと言ってみたり。

   :: 雑談など

英語は切り貼りするのが簡単なせいか、造語を良く見かけます。
そんな造語シリーズが、OfficeSlang.com - 愉快なオフィスのスラングにありました。

CGI Joeとか、World Wide Waitとか…

[Adminisphere]
純粋化され組織化された上位陣。そしてしばしば、深く考慮された不適切で非合理的な決定を下すことがある。


[Alpha Geek]
社内で最も知識豊富な技術分野の達人のこと。「僕には分からないから、Richに聞いてくれないか?奴はalpha geekだから。」


[Assmosis]
頑張って働くのではなく、上司にお世辞を言ったりへつらうことで成功や出世を得る人たちの経る過程のこと。


[Batmobileing]
心理的な壁をそびえさせること。バットマンの乗るバットモービルの出したり引っ込めたりできる装甲を思い描いて下さい。「彼女が結婚の話をしだすと、彼はbatmobilingをはじめた」


[Blamestorming] 
〆切に間に合わなかったり、プロジェクトが失敗した責任が誰にあるかを追求するための討議。


[CGI Joe]
CGIスクリプトおよび社交術やプラスチックアクションフィギュアにもに筋金入りに精通しているプログラマー。

[Crapplet] 
ひどいコードで書かれた全く使えないJavaアプレット。「30分もかけてダウンロードしたのに、こりゃCrappletじゃないか!」

[Plug-and-Play] 
特に仕事を教えなくてもちゃんと働いてくれる新社員。「あの新しく来た人は本当にplug-and-playだね」


[World Wide Wait]
WWWの本来の意味。


恐るべし英語圏('A`)

一つのOSの中で複数のバージョンのInternetExplorerを動かすには

2005年09月04日   :: Webその他

ご無沙汰ですが、小ネタです。
Windows版のInternetExplorerは、OSと密接に結びついているゆえか、通常複数のバージョンを混在させておくことは出来ません。

しかし、Web制作に関わっていると、複数のバージョンで見栄えを確認する必要が出てくるのも事実。頭を抱えて結局複数のマシンを使う羽目になったりします。

しかし、そんな人に朗報なのが…

IE 6.0 - Browsers - Multiple Explorersです。

スタンドアローンのアプリケーションとして使うことの出来るInternetExplorerを配布しています。ダウンロードして起動してみると確かに動きます。使うだけならこれでOKです。

技術的な部分に関しては「Multiple Ies In Windows Web Design, Web Development And Ecommerce Tutorials.」の方に、動かすために必要だったdllやらの解説が載っています。

Side-by-Side 共有

InternetExplorerの複数のバージョンをデフォルトで並存させられない理由の一つに、それぞれのバージョンで使うDLL等の共有コンポーネントのバージョンが違っている、というものがあるようです。XPに入っているコンポーネントではInternetExplorer4等は動かないということだと思います。

そういった、コンポーネントのバージョン違いによる問題を避けるためにMicrosoftが作ったのが「Side-by-Side 共有」というものです。これを利用して異なるバージョンのInternetExplorerを共存させるとのこと。

Side-by-Side 共有について詳しくはMSDNの「アプリケーションで共有する Side-by-Side コンポーネントの実装 (拡張)」へ。

また、@ITの「新世代Windows、Windows XPを初体験(4)」にも、例が載っています。

ちなみに、Side-by-Side共有をONにするには、同じ階層にIEXPLORER.exe.localというものを空で作ればよいらしいです。


そして、日本語ではmisuzilla.orgさんに、「異なるバージョンのMicrosoft Internet Explorerを共存させてみる。」という素晴らしいページが。

mail TOP