ドジっ子Watcher
「スーパードジっ子Company」の更新情報、ならびに自分が書きたいことなんでも。
201710<<123456789101112131415161718192021222324252627282930>>201712
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/--(--) --:--:--| スポンサー広告| コメント:- ブックマークに追加する
 Dataスキームという言葉を聞いたことがあるだろうか? 検索で来た方は当然ご存知だろうが、HTMLファイルの中に文字列としてファイルの内容を埋め込めるという便利なものである。
 例えば日本語に無い漢字をほんの1~2文字書きたい場合に、グラフィックで描いた別の画像ファイルを用意してそれを表示したりするのだが、たったそれだけのために別のファイルを用意するというのも鬱陶しいとは思われないだろうか? そのように、ちょっとした別ファイルが必要な場合に積極的に使っていきたいテクニックである。

 さてそのように便利なDataスキームだが、残念ながらIEを始めとして非対応のブラウザも結構存在する。さすがにIEが非対応とあっては「使えるのが当然」という考えでプログラムするわけにはいかないので、「使えるかどうか」を判別することができれば便利と思って判定プログラムを作ってみた。
 本当は誰かが作っていれば使わせてもらおうかと思ったのであるが、検索した限りでは出てこなかったので需要もあろうかと作ってみた(Javascript必須)。もし「うまく動かないブラウザがある」「ここはこのようにした方が」などの点があったらコメントやトラックバック等で教えてほしい。
 というわけで試しに作ってみたのが以下のプログラム。tm.srcの右辺はDataスキームとして書いた1×1のgif画像である。
<script language="JavaScript">
<!--
function dschk() {
tm = new Image();
tm.src = 'data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAAACAkQBADs=';
return( tm.complete && tm.height == 1 && tm.width == 1 );
}

alert( dschk());

//--></script>
 要するにDataスキームとして画像を読み込ませ、正常に読み込まれてサイズも正しければtrue、そうでなければfalseを返すというものである。
 読んでみた限りではうまく動くと思われる。実際Fifefox2、Opera9、IE6では正常に動作する。しかしながらNetscape4.7では正常に動作しないのである。といってもただ正常に動作しないだけなら回避方法もあるのだが、調べてみるとどうやらtm.src=の行でプログラムの実行を中断しているようなのである。そうであれば当然その後に書いたプログラムは動作するはずもない。

 というわけでなんとか回避できないかと考えて作ったのがこれ。
<script language="JavaScript">
<!--
dsceme = false;
tm = new Image();
setTimeout("tmout()",5);
tm.src = 'data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAAACAkQBADs='
dsceme = ( tm.complete && tm.height == 1 && tm.width == 1 );

function tmout() {

alert( dsceme);
}

//--></script>
 少々トリッキーであるが、上記に加え実行対象のプログラムをタイマーで起動するようにしたものである。こうすることによって途中で実行が止まってしまったら直後の変数設定のところは実行されないということを利用して上記の問題を回避したものである。

参考サイト:
URI の data: スキーム - 技術メモ帳
HTMLに画像を埋め込む。 - SaikyoLine.jp
データスキーム な URL を作るツール - 朝顔日記 ※Dataスキームな画像の作成に使用させていただきました。
The data: URI kitchen ※オンラインDataスキーム作成ツール

サンプルページ:Dataスキームが使えるかどうかのテスト
↑FC2の広告スクリプトが邪魔してるからか、Netscape4.7ではうまく動作しないことがあるようです。
スポンサーサイト

テーマ:JavaScript - ジャンル:コンピュータ

この記事へのコメント
コメントを投稿する(記事に関係無いコメントは荒らしとみなし削除・アク禁とします)
管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
管理人の承認後に表示されます
2014/04/02(水) 20:21:31 |
ブクマコメント  はてな:  Buzzurl:  livedoor:
copyright © 2004-2005 Powered By FC2ブログ allrights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。