A-Liaison BLOG: HTML

ラベル HTML の投稿を表示しています。すべての投稿を表示

2010年3月31日水曜日

Flash の埋め込みパラメータ wmode で発生したトラブルいろいろ

Flashまわりの仕事をしていて wmode パラメータで躓いたのでメモ。

■事の発端
開発機のMac上では正常に動作していたコンテンツが、Windows機のFirefoxでテストを開始したとたん以下のような症状に見舞われてしまいました。

TextFieldにフォーカスを合わせて日本語をタイプするとTextFieldとは全然違うとんちんかんな位置に入力中の文字列が表示される
しかも入力した日本語が文字化けする

ちょっと調べてみて、どうやら wmode パラメータが悪さをしているのではないかということが分かりました。
http://www.326studio.net/blog/2009/10/firefox.html
http://fukata.org/2009/11/29/1905/

ということで早速 wmode パラメータを消してみたところ上手く動作しました。

■そのときのSkype上での会話（一部改変）
登場する皆様ご紹介

 akisute: そもそもテキストボックス内に入力が表示されないのが普通な気がしてきた
 easy: あいうえお=0B0D0F0H
 akisute: http://www.326studio.net/blog/2009/10/firefox.html
 akisute: こいつだな
 wozozo: なんでその指定してたんだっけ
 AE35: > htmlにswfファイルを呼び出すときにwmodeの指定でtransparent,opaqueの指定をするとこの現象が起きます。
 akisute: http://fukata.org/2009/11/29/1905/
 akisute: ということでをぞぞんよろしくお願いします
 wozozo:
 {
                id : 'externalswf',
                quality : 'high',
                wmode : 'transparent',
                allowScriptAccess : 'always',
                width: 100,
                height: 100,
                flashvars: 'abesi hidebu tawaba'
 });
wozozo: いまこうなってます。
wozozo: wmodeごと削除？
feiz: お、そこは以前のプロジェクトでぶつかった問題ですね
feiz: wmode=transparentを付けると
feiz: flash上にhtmlのダイアログを表示したりしたときにflashが上に出てしまう問題が回避できます
feiz: ただし日本語が化けます。
wozozo: e
wozozo: じゃあこれ消していいの
feiz: 両方いっぺんに回避する方法はあったっけ･･･
wozozo: でもいま
feiz: ああ、無いんだった
wozozo: flashの上にhtmlを表示するときには、
wozozo: embedされてるdivごと hide してる
feiz: あ、それが正しいはず
feiz: 以前のプロジェクトでもそうした。
wozozo: naru
wozozo: じゃあ消す。
feiz: ちなみに二つの問題は両方とも特定ブラウザ限がついてたはず。
feiz: どうでもいいけど。
akisute: それはすごい面白いネタなので
akisute: メモってBlogる

■さらに調査

調べれば調べるほどこの wmode には問題だのバグだのが山盛りだと言うことが分かって驚愕。
http://blog.graffiti-web.org/archives/2006/04/wmode.html
http://chabudai.org/blog/?p=34
http://d.hatena.ne.jp/jedisystemer/20090227/1235754536
http://3ping.org/2004/05/15/1441
Flash Player 10では修正されているらしいのですが、上記のバグはFlash Player 10で発生してますし、うーん。これは触らぬ神にたたり無しですね。

■結論
wmode は指定しないようにしましょう、と。Flash Player 9以下ではIEでフレームレートが落ちる問題がありますが、そもそも9を使っている人も少なくなりましたし問題ないと思います。

2009年11月8日日曜日

表示専用のカレンダーJSが欲しい

日付を選択するためのカレンダーJSはよく見るのですが、表示に特化したものは余り見ないので。たとえばこんな感じでjQueryのプラグインみたいに使えるカレンダーが欲しいのです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Calendar object test</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" >
    $(function(){
        // add a new text and set its style
        $("calendar")
        .from(2009, 10, 30)
        .to(2009, 10, 31)
        .text("Halloween")
        .color("#ffcccc")
        .style("bold")
        .backgroundcolor("#ffddcc");
    });

    // calendar event handling
    // use customized Event object which has "day" and "from, to" attr
    $("calendar").click(function(e){
        day = e.day
        this.day(day).text("clicked")
    });
    $("calendar").select(function(e){
        from = e.from
        to = e.to
        this.from(from).to(to).text("selected")
    });
</script>
</head>
<body>
    <div id="calendar">Calendar will be shown here</div>
</body>
</html>

どうでしょ？探せばあると思うのですが・・・

2009年2月26日木曜日

input type="radio"でchecked指定しているにもかかわらずデフォルトでチェックが入らない？と思ったときは・・・

原因を調べるのにずいぶんと苦戦したので備忘録を作ります。

input name="calendar_1" value="1" type="radio" checked

こんな感じのチェックボックスが画面にあるのですが、何度試してもデフォルトcheckedにならないのです。
IEでもFFでも再現しました。

Firebugからcheckedを再度指定し直したり、きちんとchecked="checked"に書き方を変えてみてもダメ。HTMLのバグかと思いましたよ。

原因は・・・そう、ラジオボタン、カレンダーで使ってたんですよ。
3月の1日と4月の1日が同じカレンダーの上に乗っかることもありますよね。

input name="calendar_1" value="1" type="radio" checked
input name="calendar_2" value="2" type="radio" checked
input name="calendar_3" value="3" type="radio" checked
・・・中略・・・
input name="calendar_31" value="31" type="radio" checked
input name="calendar_1" value="1" type="radio" disabled checked

あ、同じ名前のラジオボタンがあるじゃーん。しかもcheckedだー。
そりゃだめだわーアハハハハというお話でした。
checkedが機能しないときはまず真っ先に同じ名前のラジオボタンがないか疑え、ということで。

登録: 投稿 (Atom)