2011年11月28日月曜日

「IE6でクラス切り替えによる画像のロールオーバーを行う場合はIDセレクタを指定しちゃいかんぜよ」というお話

久々にどっぷりと深みにハマったので、記録を残しておこうと思います。

やりたかった事は、チェックボックス風のON、OFF画像をクリック時とマウスオーバー時に適宜変更して表示するだけだったんですけどねぇ。

さて、当初は以下のようなコードを書いてました。

<html>
<head>
<style>
<!--
    a#hogehoge.check_off
    {
        background-color : blue;
        color : black;
    }
    a:hover#hogehoge.check_off
    {
        background-color : black;
        color : white;
    }
    a#hogehoge.check_on
    {
        background-color : green;
        color : black;
    }
    a:hover#hogehoge.check_on
    {
        background-color : red;
        color : white;
    }
//-->
</style>
<script type="text/javascript" >
    function change_class(elm){
        if( elm.className == "check_on" ){
            elm.className = "check_off";
            elm.innerHTML = "今はcheck_offだよ";
        }
        else{
            elm.className = "check_on";
            elm.innerHTML = "今はcheck_onだよ";
        }
    }
</script>
</head>
<body>
    <a href="#" id="hogehoge" class="check_on" onclick="change_class(this);">
        クリックを!
    </a>
</body>
</html>
※テストコードなので背景色の変更で書いていますが、背景画像でも同様。

hogehoge というエレメントに対して、check_on クラスの場合に、通常なら背景が緑色で文字は黒色、マウスオーバー時なら背景が赤色、文字は白色に指定しています。
また、check_off クラスの場合は、通常なら背景が青色で文字は黒色、マウスオーバー時なら背景が黒色、文字は白色に指定しています。
ところが、上記コードのページを IE6 で見ると「クリックを!」の背景もテキストもデフォルト色で表示されて、マウスオーバーでも色が全く変わりません。
そして一度クリックすると check_offクラスで指定している背景が青色、文字は黒色になり、マウスオーバーで背景が黒色、文字は白色になります。さらにクリックすると最初と同じデフォルト色に戻ってしまいます。
どうも、check_on クラスの指定がまるっきり無視されてるような感じです。

これを、IE7以降や FireFox で見ると、ちゃんと指定通りの色で表示されるんですよねぇ。

この対処方法をまったく思いつけず一旦は、
    <a href="#" id="hogehoge_on" class="check_on">クリックを!</a>
    <a href="#" id="hogehoge_off" class="check_off">クリックを!</a>
と2つエレメントを用意して表示・非表示を切り替えるという方法を取ろうと、書き換えまで行ってたのですが・・・
なんとか対応策を見つけました。

idセレクタ #hogehoge がまずかったようで、以下のようにclassセレクタだけを使う事で回避できました。

    a.check_off
    {
        background-color : blue;
        color : black;
    }
    a:hover.check_off
    {
        background-color : black;
        color : white;
    }
    a.check_on
    {
        background-color : green;
        color : black;
    }
    a:hover.check_on
    {
        background-color : red;
        color : white;
    }

気付けば「な~んだ」という話なんですけどねぇ・・・
それに元々不要な idセレクタまで使ってたのがいかんのかなぁと思いつつも、IE6だけで問題が起こる訳で、やはりバグなんですかねぇ。

2011年10月27日木曜日

SEO対策 - メタタグの書き方

SEO対策ネット-メタタグの書き方 で以下の情報を見つけたので記録しておく。

<meta name="robots" content="INDEX,FOLLOW">
<meta name="description" content="サイトの紹介文">
<meta name="keywords" content="キーワード,キーワード,キーワード">
検索ロボット対策のメタタグです。
検索ロボット対策で重要!とくにサイトの紹介文は重要!
1.
<meta name="robots" content="INDEX,FOLLOW">
ココのページは、開いてますよ 入ってもイイですよ と、
検索ロボットに伝えるタグ
2.
<meta name="description" content="サイトの紹介文 ">
検索エンジンの検索結果に反映される文で、クリックしたくなる様な紹介文を書く
文字数は80文字ぐらいが良い で、
重要なキーワードは前に書く!
Yahoo!(ヤフー)では特に重要視されるラシイ
3.
<meta name="keywords" content=" キーワード,キーワード,キーワード ">
ページの重要なキーワードを書く
5個~6個ぐらいが良い
4.すべてのページに、このメタタグを張り付けた方がイイ
(ページの内容にあう紹介文・キーワードで)


--------------------------------------------------------------------------------
SEO対策ネットには有用な情報が満載なので、
メインページも要チェック!(作者の方に感謝!!)


2011年10月18日火曜日

[HTML5]canvas は drawImage()で描画できる

1つの canvas の絵を別の canvas へ描画しようと思って context.getImagedata() と context.putImagedata() を使ってみたのですがアルファ値を無視してしまうのでアルファブレンド出来ないんですね・・・
うーん、困った~と思ってHTML5.JP(何時もお世話になってます)を物色していたら、なんと context.drawImage() には canvas 要素が設定できるとのこと。


早速試してみる。検証コードは以下の通り。

<!DOCTYPE html>
<html lang="jp" >
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function ge(id) { return document.getElementById(id); }
window.onload = function(){
var canvas1 = ge("canvas1");
var con1 = canvas1.getContext("2d");
con1.fillStyle = "blue"; // 背景を青に
con1.fillRect(0,0,320,460);
var canvas2 = ge("canvas2");
canvas2.style.display = "none";
var con2 = canvas2.getContext("2d");
con2.fillStyle = 'rgba(255,255,255,0.0)';
con2.strokeStyle = 'rgba(255,255,255,0.0)';
con2.lineWidth = 0;
con2.fillRect(0,0,100,100);
con2.fillStyle = 'rgba(255,0,0,0.5)';     // 透明度50%の赤で
con2.beginPath();
con2.arc(50, 50, 50, 0, 2*Math.PI);   // 円を描画
con2.fill();
con1.drawImage( canvas2, 100, 100 );
}
</script>
</head>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="100" height="100"></canvas>
</body>
</html>


なるほど、確かに HTML5の canvas 要素は context.drawImage() で描画出来ました。

2011年10月6日木曜日

[日々これ勉強]点と線

私、それなりに小説を読むのですが、結構ハードボイルド系が好きで、大沢在昌さんの探偵物や新宿鮫シリーズを読んでたりします。
今はレイモンド・チャンドラーのロング・グッドバイ(村上春樹訳)を読んでます・・・
そして、本の影響を大きく受けて「バー」の雰囲気が結構好きなんですよ。


で、先日某ジャズバーのマスターとゆっくり話す機会を得たのですが、なんと同い年でビックリ!!かたやジャズバーのマスターとして一国一城の主、こちらはしがないリーマン・・・
さらに人生経験という意味ではまるっきり大人と子供ですわ、ほんとに。

で、そのマスターからお店の子達に学んで欲しい事という話を聞いたのですが、これが自分にも当てはまる!というか私も実行しなきゃと思ったのでここに書いておこうと思います。
  1. お店にいる時間を無駄な時間にしない。

    これはカクテルや水割り1つ作る場合でもお客さんを意識したり、もてなしの心を持つという事。まぁここまでは普通に親や上司が思う事でありましょう。
    しかし、マスターは一つ上を行って、この「お客さんを意識する」、「もてなす」を自分の本来の仕事や趣味に生かして欲しいと。
    この日いたバイトの子はバレエを小さい頃からやってるんだそうで、例えば水割りを作る時の手の動き一つでも見てる人を意識していれば、バレエの時にもここで手をピンと伸ばすとか、もっと大きく動かすといった風に活かせるはずと。なるほど~。
    私はお客様の顔が見えない仕事をしてるもので、つい自分本位のUIを作ったり、機能を簡略化してたり・・・それはイカンなと、強く反省した訳です。
    常に使ってくれるお客様を意識して作らないとね。

  2. 何事も点(人であったり物事であったり)を沢山蒔いておく。
    それが線になって物事を成し遂げられる。

    これも「なんだそんな事」と思われるんでしょうが、出不精で人との付き合いが苦手な私には結構うーん!と思わせられたんですよねぇ。
    人脈とでも言うんでしょうか、一朝一夕で築ける物では無いので普段から意識してないと出来ない事ですね。
とまぁ、人生まだまだこれからだ(笑

2011年9月29日木曜日

[JavaScript] JavaScriptでiframeのdocumentを取得

IEとFireFoxで取得方法が違うので、以下に記録を残す。

id に "hoge_frame" とセットしていたとしましょう。
で、hoge_frame のドキュメントを取得して中身をあれこれ弄りたい場合には

var hoge_frame = getElementById("hoge_frame");
if( hoge_frame != null ){
    var hoge_doc = null;
    if( hoge_frame.contentDocument ){
        hoge_doc = hoge_frame.contentDocument; // FireFox
    } 
    else{
        hoge_doc = frames['save_frame'].document;  // IE
    }
    if( hoge_doc != null ){
        var huga = hoge_doc.getElementById("huga_textarea");
        huga.value = "hogehoge";    // textarea は innerText じゃなくて value でセットする
    }
}

といった感じでフレーム内のドキュメントへアクセス出来る・・・と。
なるほどね。

[PHP] $_POST['hoge'] で Notice エラー

$_POST[]で受信できない!と焦ったので、Noticeエラーへの対処方法を。。。

if( $_POST['hoge'] ){
    print( '<div>' . $_POST['hoge'] . '</div>' );
}

という処理をしたい場合に、$_POST['hoge'] が未定義だと Notice エラーが出力されます。
対処は至って簡単で、以下のように定義されているかチェックするだけ。

if( isset($_POST['hoge']) ){
    print( '<div>' . $_POST['hoge'] . '</div>' );
}

これで Notice エラーは出なくなり万事解決!!

ちなみに、エラーは NOTICE、WARNING、ERROR、PARSE の4種類に大別され、この順番で障害度が高くなるそうな。
NOTICEは php.ini で出さないようにも出来る(らしい)が、不安なので今後も出すようにしておこうと思ってます。

NOTICEエラーについては、このページを参照させて頂きました。(感謝)