Chromeでaタグに意図しないフォーカスが入っちゃう件の対策

こんな小ネタで結構てこずったのでメモ。
firefoxでは起らない。IEその他は知らん。CanvasとかImgをdragして動かすと、Chromeは周辺のaタグ掴んじゃってみっともない感じになる。
cssで:focusとかいじってみたけど利かなくて、最終的にコードアシストで出た表現で行けた。

a::selection {
	background: transparent;
}

だけでOK。何でコロン二つ? しかし、ブラウザ間差異ってまだあるんだね。めんどくせぇ。他にも今回ぶつかったのがfirefoxだとwindow.eventオブジェクトがundeifindだとか。
けどまぁ商売敵同士に商売ネタを共通化しろって言っても自ずと限界はあるよね、という話でもある。もう寝る。

未解決)aタグのonclick動作不良の件

動物園ログ置き場(改)

検索結果が「no record」だとdivMainのaタグの動作が不良(onclickが死んで、hrefしか活きてない状態=大きい画像の差し替え動作が死ぬ)。

なのでjavascript:void(0)とか、#bodyTopとか色々やったんだけど、onclick属性はページ再読み込みしないと生返らず。つまり未解決。
とりあえず、「no record」アラート出したあとinit()呼び出すことで応急処置。

aタグをspanタグに換えるって対処法もあるみたいだけど、何かW3C先生を騙すだけの対処法だし(href属性指定しないで良くなるだけでしょ?)、文法表現上?は後退するだけなような気がするからパスw

対症療法じゃなくて、根本的な解決方法を見つけたいな。

Java appletのweb埋め込みの件

すごく苦労しました。出来たのはこれ。 ドメインのトップページにアプレット埋め込むのもどうかなとは思うんだけど、jre拒否られたらもともとただの白背景だし、実害はないかなと。 とりあえず、ものすごくW3C先生には怒られるようになりました。アクセシビリティ無配慮だし、何より嫌いな細かなピクセル指定や%指定をしまくってるので、別環境や仕様変更にすごく弱いはずw

元々の話から書くと、だいぶ前にJavaScriptの学習をしていた時にこれを作って遊んでたんだけど、JSのはマルチスレッド処理が弱い(無い)から、while(true)が出来ないんでマウスが止まるとどうしても止まっちゃう。画面の外にマウスが出ても停止。それがいくら試行錯誤しても直せないんであきらめてほっておいた。webページに埋め込むのは簡単なんですけどね。

で、Javaの勉強をしてマルチスレッド処理をいれて書くとJSでは出来なかったことが簡単に実現したw それにすごく軽いし。

しかし大問題が。webページ埋め込みがえらく難しい。ググっても解決策皆無。タグもobjectとembed両方で試したんだけど、ページの背景として設定することが全然出来ないのです。(余談だけど、objectタグとembedタグどっちが正式採用になるのかややこしいねw HTML5ではembedが優勢みたいなんで今回はembed使ったけど、仕様としてはobjectの方が優れてるとは思う)

例えば参考にしたページ「CSSだけで背景をフルスクリーンYouTubeにする」のように、iFrameでappletを埋めたページを背景にしようとしても最前面に出てきちゃうし。当たり前か。

そこで基本に帰って、divの重ね合わせの基本通りz-indexを各divに設定してみたら一応出来たんだけど、挙動が変。例えば前面にただの色付きdivを設定したらFireFoxだと浸食しちゃうのです。 ま、前のdivが白ならべつに良いかとも思ったんだけど、前のdivにタグ打って文章書こうとするとappletが最前面に出てきてしまう。文字が(タグも含め)一切見えなくなる。良く分からない。

結局前面divにiframeで各パーツを埋めていくとちゃんと前面に出てくるのでそうしました。読み込んでるdivの内容(もちろんタグも)をそのまま貼ると後ろに回っちゃうんだから良く分からない。ヘッダー部分、メイン部分、フッター部分それぞれ別ページから読み込んでます。

Chrome、FireFox、IE9、最新版ならそれぞれちゃんと動きます。もちろんJava活きてる前提です。面白かったのがChromeで、Javaのcodeでコンテキストサイズに合わせてappletサイズを取得するようにしているので、embedタグのサイズ指定を変えればappletサイズも変わるんだけど、色んな環境でみっともなくならないようにすごくでかく指定したら、IE、FFは問題ないんだけどChromeだとJVM立ち上がらず、ただの白いページになっちゃう。そこら辺は各ブラウザのJVMの扱い方が違うとしか分からないです。

…出来たには出来たけど、これじゃ簡単とはとても言い難い。脆弱性が言われてるからJavaアプレットがブラウザ実装について冷遇されてるのが如実に感じられる件でした。ちゃんと実装してくれれば、クライアントサイドスクリプトとしても軽くて良い環境だと思うんだけどなー。マルチスレッド処理ができるのはJSに対してもすごいアドバンテージなのに。上のJSで書いてるページとJavaアプレットのページを負荷とか較べると一目瞭然w

次はこのブログにも埋め込んでみよう。wordpressで各パーツを切り出すなんて気が遠くなるけど。

7/1追記)妥協しました。

ヘッダー埋め込みまでで断念。リキッド指定にしたくて%数値を試行錯誤してこんな風に落ち着きました。狭いとこに押し込めてごめん。でも%指定って廃止されるんだよね?

7/2追記)

ヘッダー埋め込み、適当にやってたらIE、FFではむちゃくちゃになってることが判明。結局iFrameで呼び出す方法に変更。何かが根本的に間違ってるような気がする。

position:absoluteにしてz-index指定で重ね合わせるんだけど、top/left指定がChromeだと%指定でOK、IEではピクセル指定じゃないとダメ。

そしてFFではきっちりappletが最前面に出てきちゃって何も読めず…

その他の問題として、IEだとサイドバーのタグクラウドが挙動不審、つーかただの飾りになっちゃってて、タグ別ページにジャンプ出来ない。これはIEのcanvas実装の問題?で、アプレット関係ないかも知れない。しかしChromeでも時々タグクラウドがフリーズする模様。これはアプレット入れる前は出なかった現象。

そしてFFではタグクラウドは全く問題なく動作してる…

とりあえずFFの重ね合わせ問題は直そう。けどこれってプログラミングでも何でもなくて、HTMLのお絵かきの問題だよなー。…頑張って直そう。