プロモーションとアフェリエイト

先日のエントリーで紹介した、はてなの「Ajaxイン・アクション欲しい！」キャンペーン、無事 終了したようですね。何というか、実にコストパフォーマンスのいいプロモーションでしたね。10冊（35,000～40,000円くらい？）の投資で、かなり SEM 効果を稼げたのではないでしょうか？でも、真面目に中身について、今回は個人的にかなり期待してます。

昨日のエントリー "CSS だけでポップアップヘルプ"をご覧いただければわかるように、Amazon のアフェリエイトを始めました。どちらかというと、広告は僕も好きではない方なので（Google Ads はココログフリーに問答無用で付いてくるもので、僕がつけたものではありません）、小金稼ぎが目的という訳では必ずしもありません。単純に (1) このサイトで紹介する書籍のデータや画像を拾って、(2) 整形・最適化して、(3) この blog に貼り付けるのが面倒だったので、amazon に直接飛んでいただくことにしよう！という、より不純で手抜きな動機から始めたものです。(^_^;ゞ ですから、訪問者の方々が僕の小金稼ぎにご協力いただけるのであれば、それはそれでもちろん純粋に嬉しくはあるんですが、わざわざこのサイトを通して本を購入する必要はありませんので。(^ ^;)

う～ん、この売り込みに対する熱心さの温度差は一体..。(- -;)

CSS だけでポップアップヘルプ

対応ブラウザ: 1.5 8, 9 2.0
（動作未確認の環境が多いので暫定。動作報告歓迎。(^ ^;)）

最近、Ajax や JavaScript ネタが多かったので、今日は CSS ネタで。

ネタの出処は、O'Reilly の "Cascading Style Sheets: The Definitive Guide" などでもお馴染みの Eric A. Meyer が運営している下位サイトのひとつ: CSS/edge から。テーマは CSS だけでポップアップを作成（"Pure CSS popup"）すること。ちなみに Eric Meyer は、W3C の CSS の test suite の作成を手掛けてたりもする Web 標準側の人ですが、このサイトでは、（Web 標準には違いないけれども）ブラウザでの実装や普及もまだまだこれからという、もっとも先端（あるいは異端）な CSS テクニックを積極的に紹介しています。とても興味深い記事が多いですが、当然、運用法を誤ると、アクセシビリティ的に問題が生じることがあるので注意が必要です。

1. Pure CSS Popups
2. Pure CSS Popups 2
3. Pure CSS Popups 2b

今回ここでは、この Eric Meyer のエントリーをちょっとアレンジして、インラインテキストのポップアップヘルプを作成してみます。今日はサンプルとソースをいっぺんに出してしまいましょう。以下の CSS ソースの点線で囲われた部分の上にマウスカーソルを乗せると、Firefox (Gecko 系ブラウザ)、Opera、Safari ならポップアップヘルプが現れるはずです。

HTML

<p>このあたりは段落内の本文です。<span class="term"><dfn>用語</dfn><span class="annotation">（このあたりは用語に対する注釈です。）</span></span>このあたりは段落内の本文です。</p>

CSS

span.term:hover（マウスが乗った時のポップアップなので、まず term クラスを持つ span 要素（span.term）全体に対して:hover ダイナミック疑似クラスを適用する。） span.annotation（次いで、あらかじめ display: none; を適用している、span.term の子孫要素の span.annotation を display: block; で可視化させる。） {

display: block;
width: 320px;
position: absolute;（position を絶対位置指定にして、span.annotation をレイヤー化させる。必要に応じて z-index でレイヤーの順序を調整する。）
left: -4em;
bottom: 5em;
background: #eeddaa;

}

続きを読む "CSS だけでポップアップヘルプ"

CSS セレクタ、グループ化の落とし穴

対象:
（CSS を解する ほぼすべてのブラウザ？）

CSS ソースの比較的ポピュラーな整理法として、セレクタのグループ化というのがあります。CSS セレクタはカンマで区切って並列表記することで、複数のセレクタに対して同時に同一のスタイルを設定することができます。

個別にスタイルを指定

セレクタをグループ化

tr#descendant td div div { background-color: green; } tr#child > td > p { background-color: green; } tr#adjacent th + td + td p { background-color: green; } tr#sibling-comb td span ~ p { background-color: green; } tr#attribute td p[class="valid"] { background-color: green; } tr#starts-with td p[class^="val"] { background-color: green; } tr#ends-with td p[class$="xml"] { background-color: green; } tr#lang td p:lang(zh-cn) { background-color: green; } tr#not td *:not(p) { background-color: green; }

tr#descendant td div div, tr#child > td > p, tr#adjacent th + td + td p, tr#sibling-comb td span ~ p, tr#attribute td p[class="valid"], tr#starts-with td p[class^="val"], tr#ends-with td p[class$="xml"], tr#lang td p:lang(zh-cn), tr#not td *:not(p) { background-color: green; }

プロパティが共通する部分だけをグループ化して、固有部分を切り分けておくだけでも、管理が随分 楽になるので重宝します。すでに活用している方も、きっと多いのではないでしょうか？

ところが この CSS セレクタのグループ化、どうやら思わぬ落とし穴があるようです。グループ化したセレクタ群の中に、ひとつでも閲覧中のブラウザが未対応のセレクタを含むと、グループ化したほかのセレクタまで無効化されてしまって、グループ化したブロックのスタイルが適用されなくなってしまうみたいです。

続きを読む "CSS セレクタ、グループ化の落とし穴"

MochiKit: 軽量 JavaScript ライブラリ

対応ブラウザ: 6+ 1.0+ 8.5+ 2.0+ 3.4+

ここ最近、prototype.js や scriptaculous.js に話題が偏りがちでしたが、MochiKit という JavaScript ライブラリも注目されています。（別に無視していたわけではなく、単に追っかけきれていないだけです。そもそも公開されているライブラリやフレームワークの数が尋常じゃないので..。cf. Round-up of 50 AJAX Toolkits and Frameworks）prototype.js や scriptaculous.js が Ruby on Rails のフロントエンドをサポートしているなら、MochiKit は TurboGears という、Python ベースの Web アプリケーション開発フレームワークのフロントエンドを支えています。

ブックマークレットを利用したデバッガや、データを昇順・降順に並べ替えられるソータブルテーブル、キーボード操作を意識した Web アプリケーション開発には欠かせないキーイベントの取得、ソースコードビューワーといったようなものまで、ごくごく簡単に設置することができるようになっています。

• MochiKit
• MochiKit Demo
• Google Groups: MochiKit

続きを読む "MochiKit: 軽量 JavaScript ライブラリ"

Intel Mac対応の ATOK 2006

昔に比べてはるかに改善されているとはいえ、ことえりの変換効率に焦れてきている今日この頃。いっそ、SKK にでも変えようかな..なんてことが頭をよぎった時に、ちょうど ATOK 2006 for Mac が 7月にリリースされるというニュースが目に飛び込んできました。

• ATOK 2006 for Mac 紹介サイト - JustSystem
• ATOK 2006 for Mac プレスリリース - JustSystem

続きを読む "Intel Mac対応の ATOK 2006"

scriptaculous.js 関連 2題

今日は、prototype.js（クロスブラウザで Ajax をサポートする JavaScript フレームワーク）を利用して、さまざまイフェクトを提供する Script.aculo.us こと scriptaculous.js から。Ruby on Rails にも同梱されている、今をときめく JavaScript ライブラリなので、ご存知の方も多いのでは？

1. scriptaculous.js のカンペ - Scriptaculous Cheat Sheet
2. 画像に反射効果を出すリフレクタ効果 - script.aculo.us Reflector

続きを読む "scriptaculous.js 関連 2題"

各ブラウザ CSS 仕様の覚書

以下は各ブラウザベンダーが公式に発表している CSS 対応表です。そのうち、見やすくまとめ直すつもりですけど、ともあれ備忘録として書き留めておきます。

1. Internet Explorer（*=5, **=5.5, ++=6）
2. Gecko（Firefox, Seamonky, Camino などを含む。）
3. Opera 7, Opera 8, Opera 9
4. Safari［PDF version の入手先］
5. Konqueror（KHTML 3.4）

Ajax in Action 邦訳本！

はてなの naoya さんの日記で知ったのですが（naoya さん、訳本のまえがきも書いてるようです）、Ajax in Action の邦訳本が出るんですね。

Dave Crane, Eric Pascarello, Darren James. Ajax in Action. Manning Publications, 2005-01.	柏原正三, 株式会社はてな（監訳）. Ajaxイン・アクション. インプレス, 2006-06.
特価 $28.32（$44.95）	￥4,998（税込）

前の職場で原書は購入していたんですが、読むどころか、Ajax の勉強そのものがままならないほど忙殺されていて、結局、読めずじまいでした。(T-T)

Amazon.com での評価が高かったのと、目次を見てみる限り、中身が概説書としてかなり充実していたというのが昨年 原書を購入した理由だったのですけど、日本語版、Amazon で ￥4,998 ですか..。間違いなく、これまで出ている日本語の Ajax 本の中ではもっとも概説書としてふさわしい内容になるとは思うんですけど、うーん、そもそも原書からして高いしなぁ。アメリカと違って日本は原則として書店割引できないし、仕方のない値段なのはわかるんだけど..。(^ ^;)

ま、開発者の方ならば、この値段に目をつむってでも迷わず「買い」だと思います。訳文の評価は発売前なので、まだ何とも言いようがありませんが、もし気になるようでしたら原書も併せて購入されるのが良いでしょう。

はてなで「Ajaxイン・アクション欲しい！」キャンペーンをやってますけど、はてなの会員じゃないとダメみたいで激しく残念。目下、自前の MT への移行準備中ということもあって、今、アカウントを作っちゃうと単なる冷やかしにしかならないしなぁ。(^_^;;ゞ

続きを読む "Ajax in Action 邦訳本！"

IE 7 は ::before, ::after を実装せず

Internet Explorer 7 (IE 7) beta 2 Preview も日本語版が登場して、いよいよリリースに向けてバグ潰しに専念する段階に入ったようです。

かねてから気になっていた ::before, ::after 擬似要素ですが、どうやら IE 7 ではサポートされない、というのが真相のようですね。Google で引っ掛けてみると情報が錯綜してるし、IE Blog のコメントを見ても ::before, ::after 擬似要素に関するコメントがほとんど黙殺されていて、かなりイライラさせられましたが、ようやっと IE Blog 中に次のような Markus Mielke 氏のコメントを見つけました。

re: What’s New for CSS in Beta 2 Preview?

Friday, February 03, 2006 12:24 PM by Markus [MSFT]

Answering a couple common questions:
- :before and :after will sadly not make it into IE7.
- people reported that :hover would not work from an @import. That's a bug and already fixed in our builds.
- min/max we heard the request and working hard on it. Hopefully we make it for IE7.
-- Markus

非常に有用で需要もあるセレクタなだけにちょっと遺憾ですが、これでようやく IE 7 に合わせた CSS コーディングの準備ができそうです。(- -;)

max-width, min-width の方はサポートされる見通しみたいですね。これも重要なプロパティなので、こちらはひと安心です。(^ ^;)

続きを読む "IE 7 は ::before, ::after を実装せず"

Fixed design or liquid design ?

実は、目下 新しい個人サイトを構築中なんですが、ちょっとした悩みが..。

相対レイアウト（liquid design）にすべきか、固定レイアウト（fixed design）にすべきかで悩んでいます。XHTML ソースの方は、どちらを採用しても中身は変わらないんですが（というか、変わらないように書くべきなんですが）、問題は CSS や画像素材制作です。（僕の場合、実際に面倒なのは後者だったりします。お恥ずかしい話で、単に得意不得意の問題なんですけど。）

相対レイアウトと固定レイアウトの単純比較

比較項目		相対レイアウト (liquid design)	絶対レイアウト (fixed design)
コーディング難易度		高: 常に background-repeat を意識した素材制作をする必要がある。max-width や min-width への配慮も必要。	低: ボックスサイズや画像素材の縦横サイズを決めうちして制作できる。ボックスモデル（margin , padding, width 絡み）にさえ注意すれば、大きな問題はない。
大画面での見やすさ	総評	○: 表示領域を画面の解像度にあわせて伸縮できるので、見やすく操作しやすい。	×: 基本的なレイアウトは保持できる。
	問題点	行が横に伸びすぎて読みづらくなる。（しかもそのままでは文字の大きさが小さいまま不変。）	画面の解像度が大きくなるほど、テキストやボタンの見た目の大きさが相対的に小さくなり、操作の快適さが損なわれる。（→フィッツの法則）
	回避策	一行あたりの文字数の上限を max-width を、em で指定して制限する。 文字の大きさを JavaScript などを活用して変更できるようにする。（画面サイズを取得して、一定値を超えるとフォントサイズの大きい CSS ファイルを読込むようにするか、ユーザーに任意の文字の大きさを選択できるような UI を提供しても良い。）	Opera と IE 7 については、画面に表示されているあらゆるものをそのまま拡大／縮小するズーム機能が実装されている。 横幅やフォントサイズの異なる複数のスタイルを用意して、CSS の切り替えなどで対応する。ただしその分、コストはかさむ。

続きを読む "Fixed design or liquid design ?"

Spry - Adobe の Ajax フレームワーク

Adobe が Ajax 用のフレームワーク "Spry" を公開したようですね。目下、XML をベースとした、Photo Gallery, Product Table, RSS Reader の３点のデモが併せて公開されています。なお Spry 本体のダウンロードには Adobe の開発者向けアカウントが必要です。（登録は無料。メールアドレスと大まかな居住地の入力を求められます。）

続きを読む "Spry - Adobe の Ajax フレームワーク"

niftycube.js - 角丸効果 JavaScript ライブラリ

対応ブラウザ: （: 表示に乱れあり）

先日、"Nifty Corners Cube" という、ボックスの外枠に角丸効果を出すための JavaScript ライブラリを知りました。「え？今頃知ったの？」って方はともかく、「何でいまさら角丸効果を JavaScript で出す必要なんかあるの？！そんなの、CSS でできるじゃない？」と怪訝に思われる方もいるでしょうが、まずはこの niftycube.js の特徴をご覧あれ。

主要機能

• 文書構造上、無意味なブロック要素（div など）を HTML 上に記述することなく、単一の div 要素に対してでも角丸効果を出すことができる。
• （以前に紹介した behaviour.js のように）角丸効果を適用する場所を CSS セレクタで指定できる。
• CSS の背景色や背景画像などを niftycube.js が自動的に検出してくれるため、JavaScript の記述量が非常に短い。（JavaScript 初心者でも簡単に扱える。）

サンプル 1

サンプル 2

続きを読む "niftycube.js - 角丸効果 JavaScript ライブラリ"

邦人による Ajax 関連書

今日はかねてからずっと勉強しようと思っていた、Ajax 関係の積んどく本の中から。まだ斜め読みの段階なので、ひょっとしたら後で意見が変化するかもしれません。ま、第一印象ってことで。(^ ^;)

続きを読む "邦人による Ajax 関連書"