主要ブラウザのツールで document.write した JavaScript をデバッグできるか確認してみた

おはようございます。なかじまんです。

主要ブラウザのツールで eval した JavaScript をデバッグできるか に続いて document.write した JavaScript をデバッグできるか確認してみました。もとネタとした JavaScript は、次のとおりです。

<script type="text/javascript">
document.write(
' <script> ',
' function d2() { \n',
' var foo = 1; \n',
' var bar = 2; \n',
' foo += bar; \n',
' console.log(foo, bar); \n',
' }; ',
' <\/script> '
);
</script>
<input type="button" value="d2" onclick="d2();" />

IE8

標準の開発ツールでデバッグできませんでした。何か方法をご存知でしたら教えてください。

IE7 以前

調べていません。ご存知でしたら教えてください。

Firefox 3

Firebug を使ってデバッグできますが、実用レベルではありませんでした。JavaScript 中から debugger; を使ってデバッガを起動し、ステップ実行できるのですが、ソースコードと実行中の行がチグハグで、どの箇所をデバッグしているか判断できません。何か方法をご存知でしたら教えてください。

Firefox 2 以前

Firefox 3 と同じです。

Chrome

次のとおり、標準の JavaScript Debugger を使って、デバッグできませんでした。関数単位でブレークポイントは指定できましたが、行単位はできませんでした。具体的なファイル名が分かれば、行単位でデバッグできるのですが、document.write で生成した無名リソースは、関数が最小単位のようです。何か方法をご存知でしたら教えてください。



Safari 4

標準の Web Inspector を使ってデバッグできませんでした。何か方法をご存知でしたら教えてください。

Safari 3 以前

Safari 4 と同じです。

Opera 9.5, 9.6

次のとおり、標準の Dragonfly を使ってデバッグできました。



Opera 9.2 以前

調べていません。ご存知でしたら教えてください。

以上です。document.write した JavaScript をデバッグするときは Opera 9.5, 9.6 を使うとよさそうです。本当に困り果てたときは Firebug でガンバルという選択もありそうです。

主要ブラウザのツールで eval した JavaScript をデバッグできるか確認してみた

こんにちは。なかじまんです。Twitter での言いだしっぺということもあり、少し泥臭いことしました。

主要ブラウザのツールで eval した JavaScript をデバッグできるか確認してみました。もとネタとした JavaScript は、次のとおりです。

<script type="text/javascript">
eval(
' function d1() { \n' +
' var foo = 1; \n' +
' var bar = 2; \n' +
' foo += bar; \n' +
' console.log(foo, bar); \n' +
' }; '
);
</script>
<input type="button" value="d1" onclick="d1();" />

IE8

次のとおり、標準の開発者ツールを使って、デバッグできました。



IE7 以前

デバッグできませんでした。アドインが存在するかもしれませんが、調べていません。ご存知でしたら教えてください。

Firefox 3

次のとおり、Firebug を使って、デバッグできました。ただ、タイミングなどによって、うまく動作しないことがあります。何かコツがあるのかもしれません。



Firefox 2 以前

Firebug を使っても、デバッグできませんでした。JavaScript 中から debugger; を使って、デバッガを起動できるのですが、eval した JavaScript を行単位でデバッグできませんでした。また、他のアドオンが存在するかもしれませんが、調べていません。ご存知でしたら教えてください。

Chrome

次のとおり、標準の JavaScript Debugger を使って、デバッグできませんでした。関数単位でブレークポイントは指定できましたが、行単位はできませんでした。具体的なファイル名が分かれば、行単位でデバッグできるのですが、無名リソースは、関数が最小単位のようです。無名リソースで、行単位にデバッグする方法をご存知でしたら教えてください。



Safari 4

次のとおり、標準の Web Inspector を使って、デバッグできました。



Safari 3 以前

デバッグできませんでした。アドオンが存在するかもしれませんが、調べていません。ご存知でしたら教えてください。

Opera 9.5, 9.6

次のとおり、標準の Dragonfly を使って、デバッグできました。



Opera 9.2 以前

調べていません。ご存知でしたら教えてください。

以上です。最新か次世代のブラウザであれば、おおむねデバッグできるようですね。

メディアクエリによる iPhone スタイルの切り替えは万能じゃないのか?

メディアクエリを使って iPhone (iPod touch を含む) とその他のブラウザで、スタイルシートを切り替えようと試みているのですが、Apple の開発者サイトやネット上で紹介している方法だと、なぜか Safari 2.0.4 (Multi-Safari) が期待どおり振る舞ってくれません。

次のとおり link 要素を記述しました。ですが、

<link media="only screen and (min-device-width:480px)" rel="stylesheet" type="text/css" href="/css/golazo-iphone.css" />
<link media="screen and (min-device-width:481px)" rel="stylesheet" type="text/css" href="/css/golazo.css" />

IE6 と IE7 がスタイルシートを読み込まなかったため、次のとおり [if IE] .. [endif] を追加して個別に対応しました。

<link media="only screen and (min-device-width:480px)" rel="stylesheet" type="text/css" href="/css/golazo-iphone.css" />
<link media="screen and (min-device-width:481px)" rel="stylesheet" type="text/css" href="/css/golazo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/golazo.css" />
<![endif]-->

これで OK という気になっていたのですが、MacOS X Tiger の Safari 2.0.4 (Multi-Safari) を使ってみると、どのスタイルシートも読み込まれないのです。[if IE] .. [endif] はコメントでスキップしているので、つまり、メディアクエリを指定した link 要素をスキップしているということです。

何か方法が悪いのか、勘違いしているのか、自分自身の中で謎が深まっていくばかりです。Safari 2.0.4 (Multi-Safari) 固有の振る舞いなんでしょうか。今となっては Safari 2.0.4 を試す環境がないので、確認もできないのです。困りました。ヘルプみー。

追記です。-- 2008-09-19

明確な記述のある文献は見つかっていないのですが、ネット上などの情報を総合すると、Safari 2.0.4 の時点では、メディアクエリに対応していなかったようです。

ですので、1～1.5世代くらい前のブラウザも範疇に含める必要があるなら、UserAgent を見分けた切り替えが妥当という結論です。う～む。やっぱり、何らかのプログラム的な要素が必要になりますね。

IE6/7 が Aptana Jaxer のレスポンスを誤認して文字エンコーディングの検出に失敗することがある?

Aptana Jaxer で、ある特定の条件で HTML ページをレンダリングすると、Internet Explorer で、誤った文字セットを使用して HTML ページがレンダリングされる という振る舞いが引き金となって、IE6 と IE7 で文字エンコーディングの検出を誤認することがあります。

HTML ページのなるべく先頭に、次のような meta 要素を指定しているにも関わらず、IE6 と IE7 は文字エンコーディングを UTF-8 でなく Shift_JIS として認識してしまいます。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

この文字エンコーディングの誤認は、Aptana Jaxer が HTML ページをレンダリングするときに自動的に挿入する、次のような script 要素の文字列長と関係しています(と推測しています)。

<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja"><head>
<script src="/jaxer/framework/clientFramework_compressed.js?version=0.9.7.2472"></script>
<script>Jaxer.Callback.pageSignature = ...</script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Aptana Jaxer は、html 要素のすぐ後に Jaxer Client Framework の JavaScript ファイルと、サーバとクライアント間の引き渡すデータを JavaScript コードを追加します。この追加する JavaScript の文字列長は、クライアントからサーバにコールバックするかどうか、サーバからクライアントにデータを引き渡す かどうかの条件によって変わってきます。

Aptana Jaxer が追加する script 要素の位置を変更する方法は見つかっていないため、次のとおり、HTTP ヘッダを使って文字エンコーディングが UTF-8 であることを明示すれば、この問題は解決できます。

Aptana Jaxer の中で HTTP ヘッダを上書きできます。次のとおり、Jaxer.Response.addHeader メソッドを使って、Content-Type ヘッダを上書き(引数 true)します。このとき charset=utf-8 を明示します。

Jaxer.response.addHeader('Content-Type', 'text/html; charset=utf-8', true);
もしくは Apache 2.2 の MIME タイプの設定を、次のように変更します。このとき charset=utf-8 を明示します。

AddType "text/html; charset=utf-8" html
なお、このエントリで扱った Aptana Jaxer のバージョンは 0.9.7.2472 のものです。ですので、先日公開された 1.0.0 RC B では改善されているかもしれません(未確認です)。

Mark of the Web

IEはインターネットとローカルのHTMLファイルでは実行時のセキュリティレベルが違います、インターネット上のHTMLはインターネットゾーンで実行され、ローカルディスク上のHTMLはローカルイントラネットゾーンで実行されます。各ゾーンはIEの「インターネットオプション」→「セキュリティ」タブから変更することができます。

HTMLページを公開する場合、ユーザがダウンロードしてローカルディスク上で利用することも考慮する必要があります。その時、ローカルイントラネットゾーンで実行しては問題がある場合困ります。例えば安全でない外部ページを読み込むHTMLなどです。任意に読み込んだ外部ページにローカルディスクの情報を取得するコードが埋め込まれていた場合、問題が起こります。

そんな場合の為にIEではMark of the Webコードというのがあります。このコードをHTMLに埋め込むとセキュリティレベルをローカルイントラネットゾーンではなく、インターネットゾーンで実行することができます。ローカルイントラネットは制限が緩いので制限されたインターネットゾーンで実行させることでセキュリティを高めることが狙いのようです。詳細を知りたい方はMSDNを参照してください。

Mark of the Webコードは次のように書きます。

<!-- saved from url=(0017)http://yourdomain -->

コードはHTMLの先頭2048バイト以内に埋め込む必要があり、urlの先頭にある0017はURLの文字数です。http://yourdomain は17文字なので0017としています。urlは適当なものを指定できるようです。試しにhttp://aaaaa.com を指定してみましたが期待した通りに動きました。このURLはIEが持っている信頼済みサイトや制限付きサイトと関わりがあり、http://aaaaa.comを制限付きサイトに追加するとスクリプトが実行されなくなります。

Webページを公開する場合はとりあえず埋め込んでおくとよさそうです。

jQuery JSONP プラグインを改善してアップデートしました

コールバックのイベントハンドリングを容易にする jQuery JSONP プラグインを改善してアップデートしました。使い方とソースコードを確認 し、必要に応じてダウンロードして差し替えてください。

変更点は、次のとおりです。コールバックのインタフェースに変更があります。

jQuery 1.2 から script 要素を jQuery.fn.append すると、キャッシュを抑止するための意図しないパラメータが付いてしまう ため、jQuery を使わず、script 要素を直接 appendChild で追加するようにしました。

  jQuery('head', document)[0]
    .appendChild(script[0]);

file:// を使ったり、キャッシュが効いているとき、IE がクラッシュしないように script 要素の削除を 10ms 遅らせる ようにしました。

  setTimeout(function() {
    script.remove();
  }, 10);

jQuery の流儀にしたがい、コールバックのコンテキストが jQuery オブジェクトの要素になるようにしました。

  self.each(fn, [json]);

jQuery 1.2 から jQuery.getJSON メソッド を使って同じ機能が実現できる ため、このプラグインは不要になったのですが、今まで使って慣れ親しんできたのと、ちょっとした愛着があるので、使い続けていきます。

Picasa のデフォルトブラウザが IE7 に固定されてしまう

新しく ThinkPad X61s を購入したら、はじめから Picasa2 がインストールされていました。

こりゃインストールの手間が省けてよかったかと思いきや、困ったことに、Firefox2 をデフォルトブラウザにしたにも関わらず、Picasa からウェブアルバムを開くと、必ず IE7 が実行されてしまうのです。Google から Picasa のパッケージをダウンロードして再インストールしても変わりません。

lenovo と Microsoft で何か細工をしているとしか思えません。原因はよくわからないのですが、解決方法は見つかりました。

Default browser - MozillaZine Knowledge Base

Use the options or preference settings within your Mozilla browser as shown above, to set Firefox or Mozilla Suite/SeaMonkey as the default browser. If that doesn't work, try the following:

次のコマンドを "ファイル名を指定して実行..." を使って実行するだけです。

firefox.exe -silent -setDefaultBrowser

これで Picasa から Firefox2 でウェブアルバムが開くようになりました。プリインストールされた Picasa には要注意です。

input要素を操作すると "このコマンドはサポートされていません" エラーになることがある

次のように JavaScript/jQuery を使って HTML フォームを動的に生成しようとすると、IE6 だと "このコマンドはサポートされていません" というエラーが発生します。

var form = $('<form />')
  .addClass('editor');

$('<input />')
  .addClass('small')
  .attr('type', 'button')
  .attr('value', 'OK')
  .click(function() {
  })
  .appendTo(form);

Microsoft サイトから該当する技術情報が見当たらなかったのですが、どうやら input 要素の type 属性を変更しようとすると、このエラーになるようです。上記の JavaScript でいうと、type 属性に botton を指定する箇所が該当します。

ですので、HTML フォームを動的に生成するときは、DOM 操作ではなく、次のように innerHTML の仕組みを使って input 要素を生成する必要がありそうです。

var form = $('<form />')
  .addClass('editor');

$('<input type="button" />')
  .addClass('small')
  .attr('value', 'OK')
  .click(function() {
  })
  .appendTo(form);

ちょっと解せない感じは残りますが、この JavaScript は、他のブラウザでも期待どおり動作しています。

JiffieでIEを操作する

最近、Jiffieなるライブラリの存在を知りました。Java InterFace For Internet Explorerの略でJNIを介してIEをJavaから操作することができます。
ここから実行ファイルをDLして次のJavaプログラムを書いて実行すると、IEが起動して「aiueo」をキーワードにGoogle検索します。

//IEを起動してGoogleを表示する
InternetExplorer ie = new InternetExplorer();
ie.setVisible(true);
ie.navigate("http://www.google.co.jp/");
ie.waitWhileBusy();

//入力ボックスに「aiueo」と入力して送信する
IHTMLDocument2 doc = ie.getDocument(true);
IHTMLInputElement input = doc.getElementByName("q");
input.setValue("aiueo");
IHTMLFormElement form = input.getForm();
form.submit(true);

//検索結果を10秒表示後、終了する。
Thread.sleep(10000);
ie.quit();

Jiffieは基本的なIEの操作以外にも、ページの読み込みやDLなどをハンドリングすることもできます。またJiffieUtility#executeScript()を使って外からスクリプトを実行することも可能です。java.awt.Robotと合わせて使うことで、場面場面の画面キャプチャを撮りながらテストを実行するなんてこともできます。

こういったブラウザ操作の自動化はSeleniumなどの既存のツールで大半のことができてしまうので需要は少ないと思いますが既存のツールで要件を満たせないような場合に役に立つかもしれません。

Windows Update で IE7 が自動インストールされないようにしておく

2月の中頃からだったでしょうか。Windows Update の優先度の高い更新プログラムとして Internet Explorer 7 (IE7) が配布される予定になっています。

開発した WEB サイトの動作チェックのため、Internet Explorer 6 (IE6) を維持しておきたいので、Microsoft が配布している 自動配布の無効化ツールキット (Blocker Toolkit) を使って、IE7 が誤って自動インストールされないようにしてみました。

IE7BlockerToolkit_0816.exe をダウンロードして実行すると、いくつかのファイルが C:\Windows\Temp に解凍されます。そして、そのプログラムを、次のようにコマンドプロンプトから実行します。これだけです。

C:\WINDOWS\TEMP\IE7BLO~1>IE70Blocker.cmd /B
MICROSOFT TOOL KIT TO DISABLE DELIVERY OF
MICROSOFT INTERNET EXPLORER 7

Copyright (C) Microsoft Corporation.  All rights reserved.

Blocking deployment of Internet Explorer 7.0 on the local machine

操作は正しく終了しました

C:\WINDOWS\TEMP\IE7BLO~1>

これで Windows Update によって IE7 の自動インストール(または高速インストール)が無効になるようです。有効に機能するかどうかは、実際に IE7 の配布が始まってみないとわかりませんね。

WindowsXP カスタマイズ読本 (IDGムックシリーズ) 月刊Windows Server World編集部 by G-Tools

IE 7.0 から position: fixed スタイルがサポートされてます(ようです)

IE 7.0 から position: fixed スタイルがサポートされたのですね(ようです)。

次のように IE のときだけ position: fixed スタイルを absolute で代替しようと試みていたのですが、IE 7.0 が期待どおりのポジショニングにならないので、少し悩みました。

(function($) {
  if ($.browser.msie)
    container
      .css('position', 'absolute');
})(jQuery); // function($)

次のように、バージョン 7.0 未満という条件が必要ですね。

(function($) {
  if ($.browser.msie && $.browser.version < 7.0)
    container
      .css('position', 'absolute');
})(jQuery); // function($)

追記です。IE 7.0 であっても後方互換モードのときは position: fixed スタイルはサポートされません。ですので、次のように、後方互換モードのときという条件も必要ですね。

(function($) {
  if ($.browser.msie && (!$.boxModel || $.browser.version < 7.0))
    container
      .css('position', 'absolute');
})(jQuery); // function($)

世界の「最先端」事例に学ぶ CSS ベスト・プラクティス [Web Designing Books] (Web Designing BOOKS) 大藤 幹 by G-Tools

jQuery を使って入力ボックスに郵便番号のマスクを適用してみた

デモを見る

jQuery を使って、入力ボックスに郵便番号のマスクを適用してみました。

入力ボックスがフォーカスを得ると、"1234567" の書式での入力に制限します。また、入力済みの郵便番号があるときは、その郵便番号を選択状態にします。
入力ボックスがフォーカスを失うと、"123-4567" のハイフン付きの書式に変更します。

カット & ペーストに対するマスクは対応していません。今後の課題です。現在、シンプルかつ確実な方法を模索しています。

jQuery(function($) {

$('#c')
  .keypress(function(e) {
      var code = typeof(e.charCode) != 'undefined'
        ? e.charCode : e.keyCode;

入力した文字コードを判別するため、ブラウザの差異を吸収します。Firefox など charCode プロパティを持つブラウザは charCode プロパティを、IE など charCode プロパティを持たないブラウザは keyCode プロパティを使います。
なお fix_events.js プラグインを使うと、キーボードイベントのブラウザの差異を吸収できるようです。

      if (code && !e.ctrlKey)

なんらかの文字を入力して Ctrl キーを押していないとき、文字の入力を制限します。
Ctrl キーを除外しているのは、カット (Ctrl+C) & ペースト (Ctrl+V) などを受け入れるためです。

        if ((code < 48 || code > 57)
          && code != 8 // BACKSPACE (Safari3)
          && code != 9 // TAB (Safari3)
          && code != 13) // RETURN (IE6, Opera9, Safari3)
            e.preventDefault();
    })

数字以外の文字のときはイベントをキャンセルし、既定の振る舞いをするよう促します。
ただし preventDefault メソッドの解釈がブラウザにより異なるため、バックスペースキー、タブキー、リターンキーのみ明示的に受け入れるようにしています。

  .focus(function() {
      var c = this.value;
      c = c.replace(/[^\d]/g, '');
      this.maxLength = 7;
      this.value = c;
      $(this).select();
    })

フォーカスを得たとき、入力ボックスの値を数字だけに変更します。このとき、入力文字数を7文字に制限して、入力済み数字があれば選択状態にします。

  .blur(function() {
      var c = this.value;
      c = c.replace(/[^\d]/g, '');
      if (c.length >= 3)
        c = c.substr(0, 3) + '-' + c.substr(3);
      this.maxLength = 8;
      this.value = c;
    });

フォーカスを失ったき、入力ボックスの値を "123-4567" の書式に変更します。

$('#c')
  .blur();

WEB ページをロードしたとき、入力ボックスの明示的にフォーカスを失わせ、入力ボックスの値が "123-4567" の書式になるようにつじつまを合わせます。

$('#f')
  .submit(function() {
      $('#c').blur();
    });

}); //jQuery

フォームを送信するときも同様です。

となりのトトロ SG-047A 郵便番号 by G-Tools