『
2012年07月 』
すごく原始的な対応方法で、何ら目新しいことが含まれてないエントリですが、自分向けのメモとして。
このブログはwordpressが対応してくれてるのか、初期設定のままで(もちろんJavaやcanvasは走りませんが)問題なく表示されてるんですが、ドメインのインデックスページが何か変。
様々なサイトを漁りまくって、言われるがままにコードをいろいろ書き直して試行錯誤しても上手く行かず。viewportの記述を加えると変な風に崩れるし、Media Queriesもなぜか期待通りの動作をせず。
結果的に上手く行ったので、やったことを書き残しておきます。
参考：初めてスマートフォン専用ページを作成する際に知っておきたいポイント
1) -webkit-text-size-adjust : none; を記述。縦横で勝手にフォントサイズを変えさせない。
2)@media screen and (max-width: 480px) { body { font-size: 0.7em; } } を記述。フォントを小さくする。
やったことはこれだけw 原始的すぎる。まぁ、そっけないインデックスページなんだから当然なんだけど。
で、ポイントはMedia Queriesの書き方の説明がサイトによってちょっと違うこと。基本を理解してないのが悪いんだけど、間違った書き方で書いちゃって動かなくて試行錯誤w
もう余計なことはしないで、次からはこのやり方で行きます。
12年7月5日(木)‡23時10分18秒 ‡
未分類
前のエントリの続き。えらく長くなりそうなのでエントリ分けました。つまり、ものすごくハマってます。
｢z-indexの不思議｣
IEとChromeは柔軟です。アプレットのあるdivを0(=AUTO)にして、その他のdivを1以上に設定すると当然アプレットを背景にすることが出来ます。
FFはその設定だとアプレットdivが最前面に来て、すべてを見えなくしてしまいます。もともとposition:absoluteだし、wmode=”transparent”にしてもだめ。結局アプレットdivを-1にしてみたら、他が隠されなくなった、というかアプレットdivが親divの後ろに隠れちゃうw あたりまえー、なんだけど、IE、Chromeだとちゃんと(期待通り)表示される。これ柔軟すぎないか？w つまり、親divのz-index値は無視で、内包された子divのz-index値の大小で重ね合わせてるご様子。
しかし、ここで驚愕の現象が。アプレットdivでない、ただの文字を引っ張ってきてるiFrameのdivに-1を設定すると、IE、Chromeともに親divの後ろに消えるw 上の仮説がすぐ崩れたw
FF、IE、Chromeそれぞれ違うけど、アプレットの扱い方が他の要素と違うってことがわかりました。問題は解決せず。
追記)あきらめました。
FF除外ハックってあるんですね。2009年の記事だからいつまで保つかわかりませんが。「モズドキュメントハック」
7/4追記)さらに後退
全部アプレットで書き直しました。アプレットとhtml要素の重なりに悩むのをやめました。
でもnoembedタグが使えないと言うことでまたjre拒否の場合の表示に悩んだんですが、結局noembedタグ使いました。jre走らないくらい古いブラウザならnoembedタグも活きてるんじゃないかと。
IEテスターで見た限り、IE7まではnoembedタグの内容が期待通り表示されてました。最新ブラウザで意図的に拒否してる場合はどうなるのだろうか。やっぱりobjectタグで書き直そうかな。
サファリ？知りません。
7/4追記)これで最後?
objectタグで書き直ししました。わかったこと。
- objectタグをChromeとFFは認識せず。書き方の問題かもしれないけど、この書き方(ページソース見てね)でIEは普通に動作。
- commentタグで括ってembedタグを(従来通りの内容で)記述。ChromeとFFも従来通り、普通に動作するようになる。
- jreが死んでるサファリではちゃんとobjectタグの代替ドキュメント(だけ)が描画される。期待通り。
問題はobjectタグの書き方が良く分からないこと。ググってもそれぞれ書いてる内容が(時期に依るのかも)違う。objectタグをChrome、FFが認識しないなんてあり得ないので、認識できるように書ければembedタグの入れ子なんて要らない。
あるいは、noembedタグの復活を期待。もともとIE、Chrome、FFすべてembedタグは認識して、ちゃんと動作するのだから、代替ドキュメントをembedタグで適用できれば何の問題もないのだから。
やっぱりoracleが悪いんじゃないかと思うのです。未だにググって出てくる純正ドキュメントに｢appletタグの利用｣なんてあるからね。｢objectタグ(or embedタグ)による埋め込み｣ってキーワードで出てくるのはFLASHについての記事ばかりw
objectタグ埋め込みは今後も勉強しよう。
追記)
スマートフォン…
12年7月3日(火)‡01時09分50秒 ‡
未分類
すごく苦労しました。出来たのはこれ。 ドメインのトップページにアプレット埋め込むのもどうかなとは思うんだけど、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のお絵かきの問題だよなー。…頑張って直そう。
12年7月1日(日)‡03時55分06秒 ‡
未分類