http://blog.ishiro.com

2007/4/13 金曜日

ブラウザ全体のスクロールバーの消去

Filed under: ajax (javascript), css — ishiro @ 20:20:49

ブラウザ全体のスクロールバーを消去するには次のように書けば良い。

document.body.style.overflow = “hidden”;

これは当然だと思っていた。ところがこれはIEの互換モードでの話で標準モードでは違った。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<body style=”overflow: hidden; border: solid 2px red;”>

test<br />
test<br />
test<br />
test<br />
test<br />

</body>
</html>

次の通りFirefoxではきちんとスクロールバーが消えているがIEだと消えてくれない。

scrollbar-01.gif

試しにbody.style.overflow:scrollとしてスクロールバーを強制的に表示させてみると驚いた。

scrollbar-02.gif

なんとIEの標準モードはブラウザのスクロールバーではなくてbodyオブジェクトのインラインにスクロールバーが展開されてしまう。これには参った。これも他のブラウザと全く違う動作で全然標準とは呼べないような…。

で、どうやってこの余計なスクロールバーを消すのかというと結局こうでした。

<body scroll=no>

すごい独自仕様って感じ。しかもJavascriptから指定しても動かず、静的に指定しておかないとダメみたいです。こんな特殊な仕様、メモしておかないとまたいつかはまっちゃうね。

ブラウザ高さの取得

Filed under: ajax (javascript) — ishiro @ 3:07:37

DOCTYPEを

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

としてHTMLを書いている場合にはブラウザの高さを取得するには次のコードでクロスブラウザ可能だった。この場合IEは互換モードになる。

var height = document.body.clientHeight || window.innerHeight;

しかし、DOCTYPEを

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

として書いている場合には上記の方法だと正しく動かない。そこで標準モードのXHTMLで書く場合どのように書けば良いのか試してみた。表中で○となっているものは見えている範囲のブラウザの高さを取得できたもの。「全」となっているものは見えていない範囲を含むドキュメントの全高さを示す。

IE6/IE7 FF2 Opera9 Safari2
document.body.clientHeight 全 全 ○ 全
window.innerHeight undefined ○ ○ ○
document.documentElement.clientHeight ○ ○ 全 全
document.documentElement.scrollHeight 全 全 全 全

結局次のように書けばクロスブラウザ可能になった。IEよ、バージョン7になっても他の標準から目を背けるのか？

【見えている範囲の高さ】

var height = window.innerHeight || document.documentElement.clientHeight;

【見えていない部分を含む全高さ】

var height = document.documentElement.scrollHeight;

IEは標準モードと互換モードで返ってくる値が違うから要注意だ。面倒だなぁ。

2007/3/29 木曜日

FlashPlayer8でローカルでgetURL()実行

Filed under: Flash, ajax (javascript), tips — ishiro @ 8:08:42

「FlashPlayerをローカルで実行するとブラウザのポップアップウィンドウが開かないのは何故？？」という質問を受けたので原因と解決方法を調べてみました。

【原因】

FlashPlayer8以降に設けられた「ローカルからインターネット上のコンテンツにアクセスできない」というセキュリティルールです。これはまだわかるのですが、今回の場合はインターネット上のコンテンツではなく、ローカルのHTMLファイルを開こうとしてもダメでした。

どうもgetURL()を使った時点でインターネットとの通信と考えられてしまっているようです。不便。

【対策】

二つ方法があります。

1. グローバルセキュリティパネルを使用
[グローバルセキュリティ設定]パネルを使って再生するswfファイルを指定する。通常はこの方法でよいでしょう。

設定する様子をアップしてみました。

ただし、インターネットにつながっていないと設定できないという欠点があるためCD-ROM媒体をオフラインコンピュータ上で再生する場合などは使えません。

2. cfg ファイルを設置
再生するswfファイル、もしくはディレクトリを列挙したファイルを作成し次の位置に配置。.cfg前のファイル名は何でも良く、システムフォルダかユーザ毎のフォルダのどちらかにおけばOK。

Windowsだとこんな感じ。

c:\Windows\System32\Macromed\Flash\FlashPlayerTrus\openwin.cfg

c:\Documents and Settings\<user>\Application Data\Macromedia\Flash Player\#Security\FlashPlayerTrust\openwin.cfg

ファイルの内容はこんな感じ

c:\openwin\openwin.swf

また、次のようにgetURL()で直接window.open()を使うとFirefox2では動いたもののIE7だと動きませんでした。

[AS側]

getURL(”javascript:window.open(’http://www.google.com’)”);

そこで次のようにJavascriptのダミー関数を経由するとIE7でも動いてくれました。

[AS側]

getURL(”javascript:testFunc()”);

[JS側]

<script type=”text/javascript” language=”Javascript”>
function testFunc() {
  window.open(”http://www.google.com”,”_blank”);
}
</script>

色々と面倒ね～。

【参考】

http://www.adobe.com/jp/devnet/flash/articles/fplayer8_security_print.html
http://www.adobe.com/jp/devnet/flashplayer/articles/fp8_security.html

2007/2/16 金曜日

性犯罪者リスト検索

Filed under: ajax (javascript), サービス — ishiro @ 22:46:05

アメリカでは過去に性犯罪を犯した人物の情報が一般に公開されているのはよく知られた話ですが、google mapを使って近所に住む性犯罪者を検索できるようになっていました。

mapsexoffenders.com

mapsexoffenders

日本ではまだまだ考えられないサービスですが、女の子をもつ親にとっては利用できるなら利用したいサービスではないでしょうか。

2007/2/1 木曜日

wav音声ファイルを動的に再生する方法

Filed under: ajax (javascript) — ishiro @ 9:09:16

通常、ファイル単位で管理されている音声ファイルをブラウザで鳴らすにはmp3ファイルでなければなりません。Flashが外部読み込みで再生できる形式がmp3形式だからです。wavファイルを鳴らすこともできますが、初めからswfムービーに組み込んでおかなければならず手間がかかります。

そこでこんな方法が紹介されていました。

sound in webbrowser withOUT flash

Embedタグを動的に作成し、srcタグにwavファイルを埋め込み、画面内での表示は全て隠すという強引な方法です。けっこう目からうろこですね。ただ、Embedタグなのでやはりブラウザの対応状況に100%依存してしまいます。

Operaは動かないですし、FFでもQuickTimeのプラグインが必要なようです。wavファイル自体がmp3に比べてサイズが大きなこともありますし、現状ではやはりFlash経由でmp3を鳴らすことが現実的に良いソリューションだと思います。

次のページ »