主要ブラウザのツールで 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 以前

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

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

Opera 9.5 から script 要素を appendChild してもブロッキングされなくなったよ!?

Happy New Year! なかじまんです。

Opera 9.5 から script 要素を appendChild しても、スクリプトがロードされるまで、ブロッキングされなくなったのですね。まったく知らなかったよ。

var node = jQuery(document.createElement('script'))
.attr('type', 'text/javascript')
.attr('charset', 'UTF-8')
.attr('src', 'http://...');
// Opera 9.5 からはブロッキングされない!?
jQuery('head', document)[0]
.appendChild(node);

ざっとネットで探してみましたが、あまり言及がないようです。その中で見つけたエントリが↓これです。どうやら公式なアナウンスもされてないようですね。

Opera9.2から9.5でのJavaScript周りの変更点 - 0x集積蔵

JSONPが非同期リクエストに修正JSONP が Opera だと非同期処理できない - 川o・-・）＜2nd lifeの件で、TAKESAKO @ Yet another Cybozu Labs: Operaでも非同期リクエストが並列処理できる img-JSONPのようなBKも生まれていた困った動作がようやく改善されました。最速インターフェース研究会 :: OperaでJSONPを非同期リクエストするのサンプルで、タイマーが止まらないことを確認できます。(なんでChangelogにないんだ…)

この件であまり困ることはありませんが、Opera 9.2 さえ捨ててしまえば、今後は Opera 固有の振る舞いを意識した実装は不要ですね。

GMap2 と GStreetviewPanorama の位置情報を相互に連携する方法

Golazo MA4 team のなかじまんです。新機能のお知らせです。

Golazo MA4 で Google ストリートビューを使って、メモの位置の風景を確認できるようにしました。

Golazo MA4 でメモを表示するとき、そのメモの位置を表す Google マップに加え、Google ストリートビューを表示して、その位置の風景を確認できるようにしてみました。今回は、ココメモの "よく読む" のリンク先だけ対応しました。今後は、ココメモの追加や編集でも対応する予定です。

予定どおり、Golazo MA4 で、ココメモを追加するときと編集するときに、Google ストリートビューを表示して、その位置の風景を確認しながらメモできるようにしました。次のスクリーンショットのとおりです。



Google マップの移動に応じて、ストリートビューが連携します。また、ストリートビューの移動に応じて、Google マップが連携します。つまり、マップとストリートビューが相互に連携します。さらに、マップの地点で、ストリートビューのデータが存在しなときは、ストリートビューを非表示にします。

GMap2 と GStreetviewPanorama の移動イベントをハンドリングして、緯度経度を軸として、相互に連携するだけで簡単ジャンと思いきや、GStreetviewPanorama の不完全さ? により、実現にかなり苦労しました。

ので、ソースコードを抜粋して、ポイントを紹介しておきます。

// GStreetview
var pano = new GStreetviewPanorama(document.getElementById('pano'));
//pano.hide(); //BUG

GMap2 は生成してあるとします。まず、GStreetviewPanorama を生成します。このとき、オプションである初期の緯度経度は指定しません。

はじめは非表示とするため、hide メソッドを呼び出したいところですが、この時点で hide メソッドを使うと、show メソッドで表示できなくなってしまいました。バグっぽいです。

// GStreetviewClient
var client = new GStreetviewClient();
client.getNearestPanoramaLatLng(point, function(latlng) {
if (latlng) {
$('#pano').show();
if (pano.isHidden())
pano.show();
pano.setLocationAndPOV(point);
}
});

GStreetviewClient を使って、GMap2 の中心の緯度経度から、getNearestPanoramaLatLng メソッドを使って、ストリートビューのデータを探します。point が中心の緯度経度です。データが見つかったときは、GStreetviewPanorama を表示し、現在地として GMap2 の中心の緯度経度を指定しています。データが見つからないときは、非表示のままです。

var initialized = 0;

// GMap2.moveend
GEvent.addListener(map, 'moveend', function() {
client.getNearestPanoramaLatLng(map.getCenter(), function(latlng) {
if (latlng) {
$('#pano').show();
if (pano.isHidden())
pano.show();
if (initialized == 0)
pano.setLocationAndPOV(map.getCenter());
} else {
if (!pano.isHidden())
pano.hide();
$('#pano').hide();
}
if (initialized > 0)
initialized -= 1;
});
});

// GStreetview.initialized
GEvent.addListener(pano, 'initialized', function(location) {
initialized++;
map.setCenter(location.latlng);
});

GStreetviewPanorama の initialized イベントをハンドリングして、ストリートビューで移動したとき、GMap2 の中心がその緯度経度になるように指定しています。

GMap2 の moveend イベントをハンドリングして、マップを移動したとき、その移動先の緯度経度から、getNearestPanoramaLatLng メソッドを使って、ストリートビューのデータを探しています。データが見つかったときは、GStreetviewPanorama を表示し、現在地として GMap2 の中心の緯度経度を指定しています。データが見つからないときは、、GStreetviewPanorama を非表示としています。

ストリートビューで移動したとき、その移動先をマップの中心としていますが、このままだとマップが移動したことになり、さらに、ストリートビューを移動しようとします。つまり、意味のない連鎖のループが形成され、パラパラチラチラと、同じ緯度経度でのストリートビューの表示が繰り返されてしまいます。

ですので、initialized 変数を使って、ストリートビューの再表示が、ただ1回になるように工夫しています。何かもっと正規な方法がありそうな気がするのですが、今のところ見つかっていません。

主要ブラウザで動作確認しましたが、Opera 9.5 で、ストリートビューの現在地が更新されないという不都合を確認しています。それ以外のブラウザは大丈夫でした。原因は分からずじまいです。Opera 9.2 では期待どおりですので、Flash Player とかプラグインと関係がありそうな気もします。

Aptana Jaxer でファイルをアップロードすると、特定の条件で mod_jaxer がエラーになる

次のようなフォームを使って、Aptana Jaxer に対してファイルをアップロードを試みました。

ファイルのアップロードは期待どおり動作するのですが、ファイルを指定せずにアップロードしようとすると、mod_jaxer がエラーになり、Apache が 500 Internal Server Error になってしまいます。

<form method="post" action="/picture.html" enctype="multipart/form-data">
<input id="form_picture" type="file" name="picture" value="" />
<input type="submit" value="写真をアップロードする ≫" />
</form>

Apache のエラーログには、次のように出力されます。

[Wed Aug 06 06:46:20 2008] [warn] (OS 10054)既存の接続はリモート ホストに強制的に切断されました。 : mod_jaxer: receive data over socket error: total len=3 read=0
[Wed Aug 06 06:46:20 2008] [warn] (-1)Unknown error: mod_jaxer: read data from socket error

いろいろ確認してみたところ、Safari 3 と Opera 9 (ともに Windows XP) でのみ再現することがわかりました。どうやら、ファイルを指定しないときの multipart/form-data の扱いが、ブラウザによって違いがあり、その違いが mod_jaxer の期待と異なることがあると推測できます。

次のように、送信ボタンに name="submit" と名前を指定したところ、この不都合は発生しなくなりました。つまり、multipart/form-data でファイルをアップロードするときは、type="file" 以外のフィールドも合わせて送信するのが無難そうです。

<form method="post" action="/picture.html" enctype="multipart/form-data">
<input id="form_picture" type="file" name="picture" value="" />
<input type="submit" name="submit" value="写真をアップロードする ≫" />
</form>

ということで、実用上は不都合はないという結論です。

Aptana Jaxer のバグ報告を検索してみましたが、それらしきバグは報告されていないようです。ここで扱った Aptana Jaxer のバージョンは 0.9.7.2472 (Windows XP) です。ですので、先日公開された 1.0.0 RC B では改善されているかもしれません。もしも、改善されていないようでしたら、Aptana に報告したいと思います。

Safari と Opera でキーボードを使ってアンカーを移動する方法

ページ上のアンカーテキストにフォーカスが移ったとき、その a 要素の onfocus イベントをハンドリングして、その中からさらにページの要素を操作するといった JavaScript コードを書いています。

この JavaScript コードを Safari 3.1 と Opera 9.2 でテストしようとしたところ、TAB キーだとアンカーを移動できないことを知りました。これだと、a 要素の onfocus イベントのテストがしにくいです。

そもそも Opera の TAB キーは、フォームの要素を移動するためのものだそうです。その変わりに Opera は、別のショートカットキーを用意しています。

a キーでアンカーを進み、q キーでアンカーを戻ります。Ctrl + ↑↓ キーも同じ動きをします。また、Shift + ↑↓←→ キーで、アンカーとフォームの要素を上下左右に移動できます。

Safari の TAB キーも、フォームの要素を移動するためのものだそうです。が、次のように、"タブキーを押したときに WEB ページ上の各項目を強調表示" オプションを ON に変更すれば、その動きを変えることができます。



オプションを ON にすると、TAB キーを使ってアンカーとフォームの要素を移動できるようになります。もちろん Shift + TAB キーで、その逆に移動できます。

Interface Elements の Scrollto でページ内リンクを快適スムースに！

Postal Search Ajax API リファレンス のページ内リンクのジャンプを Interface elements for jQuery の Scrollto を使って、スムースにスクロールするようにしました。

いわゆる普通のページ内リンクだと、即ジャンプしてしまうので、油断しているとページ内のどこにジャンプしたのか判断できなくなることがありました。が、Scrollto を使ってスクロールするようにしたところ、ページ内リンクの振る舞いが視覚的になり、何が起こっているのか判断しやすくなりました。

実例を見る

Scrollto を使ったスクロールは、次のようなページ内リンクがあったとすると、

<a href="#Postal">Postal オブジェクト</a>

そのスクロール先は、ページ内リンクで指定した # 以降の id を持つ要素になります。ページ内リンクは name 属性を使うことが多いようですが、Scrollto を使うときは id 属性である必要があります。

<a id="Postal"></a>

Interface elements for jQuery のロードは、次のように interface.js を指定するか、

<script type="text/javascript" src="interface.js"></script>

もしくは、次のように iutil.js、ifx.js、ifxscrollto.js を指定します。

<script type="text/javascript" src="iutil.js"></script>
<script type="text/javascript" src="ifx.js"></script>
<script type="text/javascript" src="ifxscrollto.js"></script>

後はページ内リンクを含む要素に対して、ScrollToAnchors メソッドを呼び出すだけで完了です。

ScrollToAnchors メソッドの第1引数はスクロール速度です。'slow'、'normal'、'fast' かミリ秒を数値で指定します。

第2引数はスクロールの方向軸です。'vertical' か 'horizontal' を指定します。省略したときは、スクロール先に最短距離で(スクロール先が斜め方向なら斜めに)スクロールします。

<script type="text/javascript">
jQuery(function($) {
  $('#content')
    .find('a[@id]')
      .css('display', 'block')
      .end()
    .ScrollToAnchors('slow');
});
</script>

上の例では a タグを block 要素に変更しています。これは Opera 9 向けの対応です。Opera 9 では スクロール先が inline 要素だと、その要素がスクロール先にならず、ページの先頭にスクロールしてしまいました。Opera 9 を考慮するならスクロール先は block 要素にする必要があります。


実例を見る

USBハード&ソフト開発のすべて―USBコントローラの使い方からWindows/Linuxドライバの作成まで (TECHI―Bus Interface) インターフェース編集部 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