2007-03

web2.0おなじみの映りこみをJavaScriptで表現できるライブラリはReflection.jsが有名でかつ軽いですが、mootoolsでもできるみたいです。「Reflection.js for mootools」というプラグインでmootools.jsと一緒に使います。

Reflection.js for mootoolsはデモがよく出来ているので以下にほぼそのまま載っけます。透明度や高さ、背景色も変えられるので機能が一発でわかるようになってます。デモって大事ですね。

使い方は簡単で「reflection.js」と「mootools.js」を読み込んで、映りこみさせたい画像に「class=”reflect”」とするだけ。この辺はReflection.jsと同じですかね。

<script type="text/javascript"  xsrc="/js/mootools.js" mce_src="/js/mootools.js"   ></script>
<script type="text/javascript"  xsrc="/js/reflection.js" mce_src="/js/reflection.js"   ></script>

<img xsrc="test.jpg" mce_src="test.jpg"    class="reflect" />

mootoolsの必要なモジュールは以下の通り。

• Native: Array, String, Function, Element
• Window: Window.Base

また「class=”reflect”」とするとその画像が強制的にblock要素になるので、横に並べたい場合はCSSでfloat:leftを設定する。

javascriptから制御する場合は以下のように扱える。

Reflection.add('photo1', options);  //Reflectionオブジェクトを使う場合

$('photo1').addReflection(options);  //addReflectionプロパティを使う場合

「options」はheight（高さ）とopacity（透明度）があって、それぞれ0〜1の値で設定する。デフォルトはheightが1/3（0.3333…）、opacityが1/2（0.5）らしい。optionを指定するとコードは以下のようになる。

$('photo1').addReflection({height:0.5,opacity:0.75});

でもまあ、Reflection.jsの方がファイル一つだし楽ですかねぇ。

mootools関連エントリー：
javascriptで伸縮するメニューができる

■写りこみ参考リンク

• Reflection.js
• script.aculo.us Reflector
• Kagami - Web2.0風 映りこみ（反射）画像API - Bambino Labs

auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。

<script type="text/javascript"  xsrc="imagemenu.js" mce_src="imagemenu.js"  ></script>

<div id="kwick">
<ul class="kwicks">
<li><a class="kwick opt1" xhref="" mce_href=""  ><span>TOP</span></a></li>
<li><a class="kwick opt2" xhref="" mce_href=""  ><span>CSS</span></a></li>
<li><a class="kwick opt3" xhref="" mce_href=""  ><span>HTML</span></a></li>
<li><a class="kwick opt4" xhref="" mce_href=""  ><span>ABOUT</span></a></li>
</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:185});
</script>

phatfusionの元のsampleはそれぞれ違う画像を動かしてますが、まあこの方がメニューっぽいかなと。クリックするとその部分の幅が固定されるようですが、リンクをつける場合はあまり必要がない機能のような気もします。

また、Image Menuは動作中に右端がぶるぶる震えてしまうので、<ul class=”kwicks”>の幅を固定して、背景に同じパターンの画像を配置するときれいに見えます。自分のsampleでは端を角丸にしたかったので、角丸の画像を１枚作って、左と右に表示してます。

←角丸
←各背景

#kwick {
position:relative;
width:515px;
background:url(menu_bg_gra_lr.gif) no-repeat top left;
}
#kwick ul.kwicks {
display:block;
margin:0 0 0 5px;
height:50px;
background:url(menu_bg_gra_lr.gif) no-repeat top right;
list-style:none;
}

あとこれをちょっと応用して縦に伸縮するメニューを作ってみました。

縦バージョンはimagemenu.jsのソースを「width,Width」→「height,Height」に変換しただけのものを使ってます。しかしこんなことまでできるとは…。

Continue reading

以前書いた画像置換に関して、はてなの方でもいろいろとコメントをいただいたので、気になるものをピックアップしてみました。

・yakonyan：<span></span>はない…
・sac3937：前半言ってる事はわかるけど<span></span>っていうのは生理的に嫌な感じ。と思ったらそういう人も多いみたいで安心。
・chaperatta：CSSの画像置換で、画像OFFのときに文字が消えない方法（だけど空タグを使うのがあまり納得できない？？
・urajima：text-indent:-9999pxは確かに使いたくないがかといって空タグはもっと使いたくないなぁ、もうちょっと他の方法探してみよ。
・makitani：んで空タグを推奨ってのは変でないかい？
・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・rusica：「画像置換」は必須別に必須ではないと思う。それと空のspan要素はありえない。
・webmugi：<span></span>はやっぱり気持ちよくない

いろんな意見がありますが、やはり空のspanへの嫌悪感が強いみたいですね。確かに空のspanは文法的にも間違ってるし、気持ち悪いのは確かです。

・infoblog：”「CSS有効で画像は非表示」で見ている環境”の人もいるんだろうけど、希少なケースだと思われるので、正直切り捨てていいと思われる。画像置換はよく使っているので禁じ手になるとキツい。
・kits：「欠陥」を重大と捉えるかどうか。携帯端末に対してはmedia属性で振り分け可能では。

また、「CSS有効で画像は非表示」というのは携帯電話だけでなく回線の遅いモバイルPCなども考えられるので、携帯用のCSSのみでは対処しきれない場合もあるのでは、と思いますがどうなんでしょう。

・leva：コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。
・masakanou：普通にimg要素使いますが。
・retlet：Image Replacement について云々。使いたい場合は空span要素で画像を被せましょうという話。小規模サイトだと普通にimg要素使った方がメンテナンスしやすかったりするけどね。
・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・kana-kana_ceo：もう、おとなしく、img と alt でいいんぢゃないの？
・inazuma2073：携帯用CSSを用意すればいいんじゃないかな。空のspan使うくらいならimgでいきたい

テキスト要素を「画像」として表示したいのであれば、imgタグを使えばいい。これは文法的にも何も間違ってはいないというか、これが本来の使い方です。これはもうほんとにおっしゃる通り。

画像置換を採用すべきかどうかは、その長所と短所をしっかり踏まえたうえで、慎重に検討されるべきです。コンテンツとして有意な画像、文字情報を含んでいる画像については、CSS側から表示を制御するよりも、img要素として（適切なalt属性値とともに）マークアップしたほうが、アクセシビリティ的には好ましいでしょう。（画像置換という手法 | Web標準Blog | ミツエーリンクス）

それでも現状では画像置換を使用せざるを得ない場合もあるのではと思っています。SEO最優先だったり、短納期で素材が決まらず枠組みだけ先に作るみたいな場合とか（制作者サイドの泣き言ですかね…）。

とりあえず「text-indent:-9999px」や「dispay:none」はアクセシビリティに問題がある、Guilde/Lebin Methodは、空のspanがhtmlの文法的におかしい、など手法の問題点を十分把握しておかなければ、と思ってのエントリーではありました。

・hxxk :before擬似要素を用いる手法（拙著内にて解説）では、「CSS有効で画像は非表示」でも情報が伝えられます。IE様が対応していないという関係でまだまだ最適解ではないのですが。/もしくは素直にimg要素でマークアップ。

hxxkさんの「:before擬似要素」を使うという手法ですが、IEが対応してないんですよね。実際には以下のようなソースになるのかと。ソースはシンプルで済みますね。

h6:before {
content:url(ir_test.gif);
display:block;
}
h6{
width:150px;
height:50px;
overflow:hidden;
}
<h6>SITE TITLE</h6>

結局正解なのはimgを使えってことなのかもしれませんが、よりよい最適解があるのならば探していきたいですね。「実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips」はまだ未読ですが勉強のために読んでみようかなと思います。

実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips

posted with amazlet on 07.03.20

市瀬 裕哉 福島 英児 望月 真琴
九天社 (2007/02)
売り上げランキング: 910

Amazon.co.jp で詳細を見る

ほんとに今更ですが、Movable Type 3.3xのコメントスパム対策を変更したので簡単にメモ。

というのもこのサイトで以前行った設定がうまくいっていなかったらしく、コメントが投稿できない状態でした。「国民宿舎はらぺこ 大浴場」さんからいただいたトラックバックでようやく気づいたので、今日慌てて直しました。自分の確認不足で大変申し訳ないです。

で今回参考にしたのはこのサイト「Movable Type 3.3 でコメントスパム対策 (Forcing Comment Previews・MTHash) : アークウェブ ビジネスブログ」。

ロボットがプレビュー画面を経由せずに直接コメント受付プログラム（mt-comment.cgi）にアクセスしてくることを利用して、プレビュー画面経由でなければコメントを受け付けないようにする方法です。
具体的には
・コメント投稿フォームから「投稿」ボタンを消す
・プレビュー画面から投稿を行ったことの判定として、プレビュー画面にhashを仕込む
・コメント受付プログラム(mt-comment.cgi）の方ではhashが正しい値でなければ投稿を受け付けないようにする

という対策で、Movable Type 3.3x対応というのがうれしい限りです。作業としてはまず、個別エントリーアーカイブのテンプレートから「投稿」ボタンを消す。次に「lib/MT/Template/ContextHandlers.pm」と「lib/MT/App/Comments.pm」にサイトにあるpatchを当てる。patchはローカル上のそれぞれのディレクトリにpatchファイルをコピーして、以下のようにすればいけるんじゃないかと。（Windowsの場合はこちらを参考に。「Windows環境で「ファイルにパッチ（patch）を当てる」 : 亜細亜ノ蛾 - Weblog」)

$ patch -b

あとは「plugins」ディレクトリに「salt.txt」を作り、中に任意の半角英数文字を入れて、アップすれば完了。なんとも簡単です。しかしバージョンが上がったらどうなるんだろう…。次バージョンではデフォルトでもっとしっかりしたコメントスパム対策がされるのを期待しております。

「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。

h5{
width:150px;
height:50px;
background:url('ir_test.gif') no-repeat;
text-indent:-9999px;
}

<h5>SITE TITLE</h5>

h5{
width:150px;
height:50px;
background:url('ir_test.gif') no-repeat;
}
h5 span{
display:none;
}

<h5><span>SITE TITLE</span></h5>

上記のようなCSSだと「CSS有効で画像は非表示」の環境で見ると、その箇所には何も表示されなくなってしまう。「CSS有効で画像は非表示」で見ている環境というと、携帯のフルブラウザやモバイルPCなどが考えられる。また「display:none;」としている場合だと、音声ブラウザはその箇所を飛ばしてしまう。他にもタブボタンでフォーカスできなかったり、アクセシビリティにかなり問題があるようだ。

さらに一部にはこれがスパムに当たるという説もあるが、これは確証はなく、断定は出来ない。

Googleに勤めているエンジニアが以前そのような手法について言及をし、ネット上で話題に上ったことは承知していますが（参考：昨年10月21日に公開された456 Berea Streetの記事「Google, SEO and using CSS to hide text」）、実態についてはその後明確にされていなかったように思います。

上記の記事のなかで、SEOスパムと判断される可能性があるとされているのは、非可視化されるテキストの内容が、それと置き換えられる画像に対し等価ではないと考えられる場合です。ですから、テキストと画像の双方にある情報が一致するよう制作する限りは、SEOスパムと判断される懸念は低いと思います。（画像置換とSEOスパム | Web標準Blog | ミツエーリンクス）

まあとにかく「CSS有効で画像は非表示」で何も見えないというのは確かにまずいので（このサイトも実は「text-indent:-9999px;」で画像置換してます）、対処法を調べてみると、こういうCSSなら「CSS有効で画像は非表示」でも問題なくテキスト部分が表示される事が判明。

h5 {
width:150px;
height:50px;
position:relative;
font-size:12px;
/*HideMacIE¥*/
overflow:hidden;
/**/
}
h5 span {
display:block;
width:100%;
height:100%;
background:url(img/logo.gif) no-repeat;
position:absolute;
top:0;
left:0;
}

<h5>SITE TITLE<span></span></h5>

外枠のh5を画像のサイズにして、中身のテキスト部分の後ろに空のspanを埋め込み、それをblock要素にして背景画像を表示し、position:absoluteで外枠のh5の左上に合わせ、widthとheightを100%にしてh5の要素を被ってしまうというかなりトリッキーなことやってますね。一応ほとんどのブラウザに対応。問題としては、MacのIEだけ文字を拡大すると画像からはみ出てしまうのと、背景が透明な画像は使えないことぐらいかと。後は空のspanが気持ち悪いってところが難点だが、アクセシビリティの問題は解決している。

これは実はGilder/Levin Methodという手法で、2004年あたりに発見された手法らしい。このサイトによると

• Opera 5 and up (thanks Jay Meinhard)
• IE 6/win
• IE 5.5/win
• IE 5/win
• Mozilla Firebird
• Mozilla 1.2
• Konqueror 3.1.2
• Safari
• Camino
• Omniweb
• IE5.2/Mac OS X (thanks Philippe) (with hack)

とほとんどのブラウザで表示が確認されている。3年前なのでちょっと情報が古いですが…。

とまあ、いろいろ一筋縄では行かない「画像置換」だが、CSSのみで表示をコントロールできるのは捨てがたい大きな魅力なんすよね。(x)htmlを汎用性に扱えるし、大幅なデザインの変更もやりやすい。またプログラムが絡んでいるものは、出力する(x)html部分と見た目を決めるCSSが完全に分離していると、メンテナンスもしやすく効率的に運用できるので「画像置換」は必須だったりします。

結論としては「画像置換」を使うならばリスクを踏まえた上で、そのサイトの目的とターゲットやサイト環境に合わせて、使い所や手法を見極めるというのが現段階での正しいスタンスではないかと思う。

まずは最近知って便利だと思ったCSSの小技をひとつ。

文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。

.note {
padding-left:1em;
text-indent:-1em;
}

<p class=”note”>※米印を使う場合はこいつが便利。<br />
改行してもこの通り。ちゃんと開始位置が揃ってる。</p>

「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。

他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で用語とその説明を表記する際に使うものだが、脚注に使っても問題ないかと思われます。

dl#footnote dt{
float:left;
clear:left;
}
dl#footnote dd{
padding-left:2.5em;
}

<dl id=”footnote”><dt>※１</dt><dd>記号等を含む２文字以上の要素にぶら下げをしたい場合、
定義型リストを使うのがおすすめ。</dd></dl>

<dt>をfloat:leftで左に配置して、<dd>の開始位置をpadding-left:2.5emで揃えている。clear:leftとしたのは※２などがあった場合に、前のfloat:leftを打ち消すため。でもこれだとdtの幅が変わった場合に対応出来ない。その都度指定すればよいのだが、数が増えた場合に大変な事になるので、ここはjavascriptを使って汎用的なぶら下げを作ってみようと思う。

dl要素を他に使う場合もあるだろうから、クラス名「hang_dl」のdl要素にだけ適用されるものを作る。機能としては、各dlごとにdtの幅を取得して、その値をddのpadding-leftに入れ込めば大丈夫なんではないかと。dtへの「float:left;」と「clear:left;」はcssで指定、一応ddへのデフォルトをリセットするために「margin:0; padding:0;」としておく。サイズの取得はブラウザ対応がちょっとめんどくさいので「prototype.js」を利用。それで書いてみたjavascriptとCSSがこれ↓。

<script type="text/javascript"  xsrc="prototype.js" mce_src="prototype.js"></script>
<script type="text/javascript">
<!--
//windowがonloadされたらseHangDl()を呼び出す
Event.observe(window, 'load', function(){
setHangDl();
});

function setHangDl(){
var hangDls = $$('dl.hang_dl');   //クラス名がhand_dlのdlを取得
var maxes = Array();   //各dlごとのdtの最大幅を入れる配列

//各dlごとにdtとdlを取得
var getDts = function(e,i){ return e.getElementsByTagName('dt'); }
var elDts = hangDls.collect(getDts);
var getDds = function(e,i){ return e.getElementsByTagName('dd'); }
var elDds = hangDls.collect(getDds);

//dtの幅を取得
var getW = function(e,i){
var tmpW = Array();
for(var j = 0; j

一応このページで使ってますがsampleはこちら。javascriptはまだ勉強中なのでもっといいやり方があるのかもしれませんが、これを使うとHTML自体はシンプルになるし、ぶら下げを多用する場面ではいいのではないでしょうか。以下のような、インタビューとか会話でよく使われる文字組にも使えますかね。

しかしまあ、ただこれだけのために「prototype.js」を使うのもちょっと無駄が多い気もするなあ。