<< Prev Page Next Page >>

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


HTML内タグの閉じ忘れをチェックするツール[ブックマークレット]

2013/1/28 サーバーを引っ越しました。お手数ですがブックマークし直してください。ついでにscriptタグとHTMLコメントを除外できるように機能もアップしてますから!

tagcheckスクリーンショット
必要に駆られてタグの閉じ忘れを簡単にチェックするブックマークレットを作ってみた。

ほんとに開いたタグの閉じ忘れしか検出できなくて、たとえば開いてないのに閉じてるタグとか、閉じタグと開きタグが互い違いになっちゃってるとこの検出とかはなにもやってない。(11/29現在)11/30 New! 出来るようになりました


機能


ブックマークレットを実行すると
・タグの閉じ忘れを検索する
・開きタグがない閉じタグを検索する
・親より先に閉じちゃってる子がないか検索する
・タグ対応エラーの一覧と、ソースコード中のハイライト表示
以上。たったこんだけのことをやるツールが意外と無かった…いや、あるけど。W3Cツールじゃいかんのかと。でももっと素早くさっさとチェックする必要が…ごめん。ただ作りたかっただけ。

他のツールを調べてみたけど…
HTMLの閉じ忘れをチェックできる「Page Scanner Tool」:phpspot開発日誌
これよりはずっとイイ!よね!ちゃんと閉じてるタグの数とかどうでもいいもんね。

制限


最初innerHTMLを解析しようとしたら、閉じ忘れたタグを適当に補完してくれたHTMLを返してきてて意味がなかったので、一度XHRで読み込み直してるため、制限が。
・POSTで生成された画面とか、ランダムに変化する画面とかでは使えません。
・UTF-8以外のページではソースが文字化けします。(誰か助けて)
あと、造りの問題による(根気と暇不足による)制限が。
SCRIPT中の"</div>"とかの文字列が無視できません2013/01/28 New! 出来るようになりました
・いまんとこのコードでは同じところを何度も何度も走査するので巨大HTMLだと遅いかも。

お約束


このブックマークレットは、
http://tkr-net.tk/tagcheck/tagcheck2.js
を動的に読み込んで実行します。

このスクリプトは現在は特に悪いことしてないと思いますが、急に僕が悪気を起こして利用者の個人情報をぶっこ抜くスクリプトに書き換えちゃわないとも限りません。もしかしたら僕のFC2アカウントがクラッキングされてスクリプトを置き換えられちゃうかもしれません。

そんなわけで、例えば個人情報リストを表示してるような画面で利用することは避けて下さい。

もしくは、現時点のスクリプトをダウンロードして、自分が信頼するサーバーに置いて使ってください。

インストール


タグ対応をチェック←このリンクをブックマーク
WinXP, Firefox3, IE6で一応うごいてました

12/1追記 スクリプトの場所を替えました。これでちゃんと動くはずなのでブックマークし直してください。

12/2 追記 この記事アクセス少ないなあ…けっこうイイと思うんだけどなあ。

12/15 追記 ポップアップブロックにひっかからないようにしました。ブックマークレットをブックマークしなおしてください。

2013/1/28 サーバーを引っ越しました。お手数ですがブックマークしなおしてください。加えて、コメントとscriptタグの中身を無視できるようになりました。


jQueryイディオム:テーブルハイライト

こういうのもjQueryでサクっとイケます。すごいぞCSS3。

これの「横列・縦列をハイライト」をDHTMLで。 404 Blog Not Found:javascript - tableの横列・縦列をハイライト
1. まずスタイルシートは同じ物を使います。
<style> .hstripe-even { background-color: #ccffcc } .hstripe-odd { background-color: #ccccff } .vstripe-even { background-color: #ffccff } .vstripe-odd { background-color: #ffffcc } </style>
2. 横縞にしたいtableにclass="hstripe"をつけます。別にtbodyじゃなくていいよ。 3. スクリプトは以下。
$(function() { $('table.hstripe tbody tr:even').addClass('hstripe-even'); $('table.hstripe tbody tr:odd').addClass('hstripe-odd'); $('td:even', 'table.vstripe tbody tr').addClass('vstripe-even'); $('td:odd', 'table.vstripe tbody tr').addClass('vstripe-odd'); });
この縦縞、最初
$('table.vstripe tbody tr td:even').addClass('vstripe-even');
ってやってたら市松模様になってしまった。でもちゃんとうまくいくようになってたよ! 以上!
現金・預金株式以外の証券株式・出資金金融派生商品保険・年金準備金預け金未収・未払金対外証券投資その他合計
1979FY1,948,234242,722452,2410432,124110,71082,0087,2372,4893,277,765
1980FY2,174,447288,165492,2080499,327112,128105,9597,2033,3493,682,786
1981FY2,416,292334,403479,9060579,077108,308115,5437,7033,2164,044,448
1982FY2,627,648421,591528,3060668,918111,449125,5956,0984,1014,493,706
1983FY2,827,925531,158716,1610767,412111,207151,1775,3454,5585,114,943
1984FY3,054,117595,207767,2900882,297112,985170,1447,7165,2235,594,979
1985FY3,294,078667,2391,004,08901,020,857112,128183,95414,6414,0316,301,017
1986FY3,545,346761,4681,397,07301,208,116114,366215,82728,8175,1077,276,120
1987FY3,818,660863,7751,837,84801,418,681119,563235,59748,6146,7278,349,465
1988FY4,100,172925,4232,165,53201,663,884124,178254,03361,1478,2649,302,633
1989FY4,479,416984,2072,032,11401,918,591121,556281,37838,90213,9969,870,160
1990FY4,818,2261,077,0391,721,85102,116,160125,205326,46838,38615,07410,238,409
縦縞↓
現金・預金株式以外の証券株式・出資金金融派生商品保険・年金準備金預け金未収・未払金対外証券投資その他合計
1991FY5,171,5661,093,5271,256,95402,289,595125,235343,20236,55112,96810,329,598
1992FY5,404,6331,156,5431,188,16302,514,169127,713407,33427,22110,74810,836,524
1993FY5,669,5721,185,5181,232,91802,747,022137,953422,35816,01411,34911,422,704
1994FY6,007,0851,147,0871,184,76602,947,169138,400411,80115,17311,29011,862,771
1995FY6,296,3601,166,1421,439,81503,185,969140,031393,92323,3354,75312,650,328
1996FY6,583,8751,110,3451,177,09303,356,732143,650413,90143,29212,53512,841,423
1997FY6,940,141998,1971,217,4211353,480,154141,010425,26145,80415,58513,263,708
1998FY7,237,920925,2571,015,2801593,589,076141,930422,53944,88816,02613,393,075
1999FY7,447,390921,6071,522,809513,698,712142,837411,58240,42014,59214,200,000
2000FY7,514,280905,7741,301,4781603,776,240138,403386,74560,02076,37714,159,477
2001FY7,654,300790,2971,035,2762353,790,429124,771381,96674,35072,74113,924,365
2002FY7,755,143684,510782,9145723,769,795122,941368,88069,76766,36713,620,889
2003FY7,799,718692,7281,187,1564533,777,293121,986353,80968,181108,98114,110,305
2004FY7,763,389773,1991,229,0062403,826,049121,897327,21669,984111,43814,222,418


jQueryイディオム:全チェック

さてjQueryで超簡単になる処理を思いついては書いていく連載が始まりました。

まず第一回は、よくある複数選択のチェックボックスを全部まとめてチェックしたりはずしたりするアレ。一行でイケるよ。

名前 同期しない
name=id[1] 山田太郎 name=test1
name=id[2] 鈴木一郎 name=test2
name=id[3] 木村太郎 name=test3

上のtable内のcheckboxのうち、nameが"id"から始まるもの全部のチェック状態を一番上のチェックボックスに同期させる。

<input type="checkbox" onclick="$('#list input:checkbox[name^=id]').attr('checked', this.checked);" >
こんだけ。


数字しか書けないinputとか英単語しか書けないinputとか

brazilの人が「いやーそこはやっぱりkeydownで禁止しなきゃだめでしょ」と言ったのでこんな面倒なことに手を染めることに。

方針

入力される文字をイベントから取り出して、正規表現にマッチしなかったらイベントをキャンセルする。ただし、Tabとか矢印とかEnterとかを邪魔しないように。

イベントの種類

ちょっと実験用のHTMLを作って調べてみたところ、keydownイベントとkeypressイベントではevent.keyCodeとかで取れる値が違ってた。keydownでは仮想キーの値なので、記号キーとか押すと220とかめっちゃでかい数字になって使えない。今回は「何の文字を入力しようとしたのか」によって、キーイベントを無かったことにしちゃうのが目的なので、keypressイベントを使う。

[キーイベントから文字を取る]

最初は軽く考えてた。jQueryではkeyCodeとcharCodeを合わせた「which」っていうプロパティが使えるから

var char = String.fromCharCode(evt.which);

ってやればどのブラウザでも入力する文字がとれるねーって思ってた。甘かった。あまあまちゃん。Firefoxでカーソルキーがきかなくなった。

しばし悩んで各ブラウザでkeyCodeとcharCodeの値を取ってみたのが下の表。

keypressイベントでのkeyCode、charCode。
タイプしたキー
Firefox
IE
Safari for Windows
keyCode
charCode
keyCode
charCode
keyCode
charCode
a
0
97 (a)
97 (a)
undefined
97 (a)
97 (a)
/
0
47 (/)
47 (/)
undefined
47 (/)
47 (/)
[shift]
イベント発生せず イベント発生せず 0 0
[shift]+5 (JP106 %)
0
37 (%)
37 (%)
undefined
37 (%) 37 (%)
[左矢印]
37 (%)
0
イベント 発生せず 0 0
[shift]+7 (JP106 ')
0
39 (')
39 (')
undefined
39 (') 39 (')
[右矢印]
39 (')
0
イベント発生せず 0 0
[backspace]
8
0
イベント発生せず
8
8
[delete]
46 (.)
0
イベント発生せず 0
0
[enter]
13
0
13
undefined
13
13
[escape]
27
0
27
undefined
27
27
[space]
0
32 ( )
32 ( )
undefined
32 ( )
32 ( )
IME ONのとき
229
0
イベント発生せず イベント発生せず

いくつか問題があるにせよ、大体なんとかなるかな。

  • Firefoxでは制御キーをpressしたときにkeyCodeがあってcharCodeが0になる。文字を入力するとkeyCodeが0でcharCodeが入力文字。
  • IEでは制御キーでkeypressイベントが発生しない。
  • Safari(Win)では制御キーではkeyCodeもcharCodeも0
  • IMEがONのとき、FirefoxはとりあえずkeyCode229?他はイベント無し。

というわけで、keypressイベントから、何の文字を入力しようとしたのかを調べるコードはこれだ!

function pressedChar(event) { var code = 0; if (event.charCode === 0) { // Firefox, Safari control code code = 0; } else if (!event.keyCode && event.charCode) { // Firefox code = event.charCode; } else if (event.keyCode && !event.charCode) { // IE code = event.keyCode; } else if (event.keyCode == event.charCode) { // Safari code = event.keyCode; } if (32 <= code && code <= 126) { // ASCII文字の範囲内 return String.fromCharCode(code); } else { return null; } } function numberonly(event) { var char = pressedChar(event); if (char && !char.match(/\d/)) { return false; } else { return true; } } function wordonly(event) { var char = pressedChar(event); if (char && !char.match(/\w/)) { return false; } else { return true; } }

以下、IE以外の方はIMEをOFFにしてお楽しみください。

数字のみ:
英単語のみ:

Firefox3からはime-modeが有効になるらしいし、IMEのことは将来に後回し。というか実際には、これやったあとさらにonkeyupイベントでチェックしてハネる、という手を使っている。

ああ、ごめんごめん、HTML部のソースはこうです。
数字のみ:<input type="text" style="ime-mode:disabled" onkeypress="return numberonly(event)" /> 英単語のみ:<input type="text" style="ime-mode:disabled" onkeypress="return wordonly(event)" />


HTA Tips

調べながらTwitter Clientを作って身につけたHTAに関する知識。

■HTAはどこのドメインにでも自由にXmlHttpRequestを使える
前から知ってたけど。JSONP使わなくても自由に書ける。

■アンカーをクリックするとIEが開くけど、こうすればWindows関連づけで開ける。
他でやったことあるので応用したらできた。僕の場合はFirefox。

var url = "http:.......";
var sh = new ActiveXObject("Shell.ActivationApplication");
sh.shellExecute(url);

↑なんかバグがありましたので修正


■HTA:Applicationタグの前でwindow.resizeTo()する
これは知らなかった。HTA:Applicationタグの後でwindow.resizeTo()すると一瞬通常の大きさのウィンドウが表示されてからリサイズされるのでカッコ悪かったけど、解決。


jQuery

最近になってようやくjQueryを触ってみた。

いままでprototype.jsを使ってたけど、乗り換えたくなった。

prototype.jsはJavaScriptでrubyみたいに美しく書きたいというのが目的で、jQueryはJavaScriptでみんながやりたいことをできるだけ短く書きたいというのが目的。

あ。これだ。これ欲しかったやつだ。なんで今まで見なかったんだ自分。

特定の要素をマウスオーバーで背景色を変化させるようにしたいとき、prototype.jsだと

var target = $('target_element'); Event.observe(target, "mouseover", function(e) { target.style.backgroundColor = "#eeffcc"; }); Event.observe(target, "mouseout", function(e) { target.style.backgroundColor = "transparent"; });
だけど、jQueryだと
$('#target_element').hover(function() { $(this).background("#eeffcc"); }, function() { $(this).background("transparent"); }
となる。

さらにXPathとCSS3セレクタの組み合わせで、めちゃくちゃ細かい要素指定が一行でできる。prototype.jsでは何行かかるかわからないような指定、たとえば「id="contents"の中でhrefがhttp://www.sat.ne.jpで始まるa要素すべての文字色を変更する」は

$("#contents>a[@href^=http://www.sat.ne.jp]").color("#993344");
一発でできちゃう。素敵すぎる。

しかも圧縮版も公開されていて、そっちを使うとライブラリ自体のサイズが19KBしかないというのもすごい。(prototype.jsは70KB)

prototype.jsみたいに組み込みオブジェクトの定義を上書きしてないところもイイ。Arrayの挙動が変わると困ることもあるので。


DOM API と innerHTML のパフォーマンス比較

404 Blog Not Found:javascript - element.innerHTML はなぜ速く見えるかにて

InnerHTMLは速くない。速く見えるだけだ。
とあった。Danさんの予測は、DOM APIが遅く見えるのは、DOM Treeを更新していくたびに再描画が走るからではないかというもの。
そうなのかなと思って実験を作ってみました。
  • 複雑なHTMLを文字列として作ってからinnerHTMLに代入するのと、
  • 再描画が一度も走らないよう、あらかじめ複雑なElementを作ってから最後にdocumentにくっつけるようにするの
  • Elementを作ったそばからどんどんdocumentにくっつけていくの
で比較しました。↓以下実験。




innerHTML DOM1 DOM2

やっぱり速いんじゃないかなinnerHTML。WindowsのFirefoxとIE6ではinnerHTMLが大差で速いです。おそらくJavaScriptエンジンが一行一行複雑なオブジェクトメソッドを操作しなきゃなんないDOM APIよりも、ブラウザのネイティブコード中でも最もゴリゴリに最適化された部分であろう「HTML文字列をparseして表示する」っていうタスクを叩くinnerHTMLのほうが速いっていうことじゃないでしょうか。

ついでに、大きなElementを作って最後にbodyに接続するのと、createElement()したそばからbodyに接続していくのの比較は想像通り、最後にbodyに接続したほうが速い。Firefox のソースコードは見たこと無いけど、Java の AWT とか swing のソースコードをめちゃめちゃ真剣に解析して似たようなものを独自に作ったことがあるのでまあ納得できる。DOMツリーに変更を加えると再描画範囲を決定するために親をたどりながら「この範囲内は再描画必要ですよ」とフラグを立てていくみたいなことをしてるんだろう。基本的な考え方はそう遠くないはず。

と、Firefoxでだけ試して書いてたら、IEでは「DOM2」のほうが速いじゃん。IEで再帰呼び出しが遅くなるパターンに何かはまっちゃったのかも。いやーん

あと、Operaがなんだか速い。傾向はFirefoxと同じかな。

↓以下ソース。


» Read More...

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。