<< 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タグの中身を無視できるようになりました。


この記事に対するコメント

あのー

使い方が今ひとつわからないのですが、
これをどうやったらブックマークできるのでしょうか。

【2011/01/31 09:14】URL | monk #xtc7akX2[ 編集]

リンクを右クリックして、IEなら「お気に入りに追加」、Firefoxなら「このリンクをブックマーク」を選択してください。

【2011/02/24 19:22】URL | tockri #-[ 編集]

このブックマークレット、とっても便利です。
こういうのがなかなかなくて探してました。
ヒットが少ないのは、恐らく検索キーワード的に「タグ 閉じる チェック」とかではなかなか出てこないからでは無いでしょうか・・・

【2011/03/01 15:11】URL | #-[ 編集]

なるほど、「閉じる」ってキーワード、確かにないですね。「閉じ忘れ」だとGoogleで上位に出るんですけどね。

【2011/03/02 00:30】URL | tockri #-[ 編集]

いや、これ、マジですごい便利ですよ。感謝しています!!!

【2011/03/21 15:27】URL | #-[ 編集]

使い方はわかるんですが、そこをどうやって修正すればいんですか?

管理ページのHTMLを見ても244行もあるかどうか・・・

【2011/06/07 04:17】URL | イツルギ #-[ 編集]

使い方はわかりましたが、その行を見つけるのは自力なんですよね?

なにか見つけるコツないんですか?

初心者ですが、害すこと言ったのなら誤ります。

ですがよろしくおねがします。


【2011/06/07 04:32】URL | アキ #-[ 編集]

>イツルギさん、アキさん
修正の仕方、閉じタグを書くべき場所については、ツールではわかりません。コツとしてはHTMLをきれいにインデントして整理して書くぐらいじゃないかと思います。

【2011/06/16 01:24】URL | とっくり #-[ 編集]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

【2011/08/24 01:31】 | #[ 編集]

便利なツールつかわせていただいています!

以下のコードで、pタグが閉じていないといわれるのですがなぜでしょうか・・・。
<p>
<object>
<param />
<param />
</object>
</p>

【2011/12/16 20:47】URL | 通りすがり #-[ 編集]

ちょっと修正しました。直ったかもしれません。

【2011/12/19 02:17】URL | tockri #-[ 編集]

とても見やすく便利です。活用させていただいてます。
IE用の条件付きコメントにも対応してはいかがでしょうか。

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

↑このような場合に、「残念、3個のタグがきちんと対応していません。」と出力されます。

【2011/12/21 16:10】URL | ryocc #Jm4ryzE2[ 編集]

ryoccさん
なるほどー
って、どの場合に対して判定すればいいか決められないですねえ・・・
<!-- ~ -->を全部無視するようにすればいいのかもしれないですねー。
<!--と-->で囲まれた位置の配列を作って、開きタグや閉じタグを見つけた場所がその中にあったら飛ばす、みたいな感じでできそうです。
いずれ対応するかもしれません。そのときは<script>内も無視出来るようになっているはず。
どなたか対応してくださってもよいですー

【2011/12/21 23:55】URL | tockri #-[ 編集]

非常に助かっています。ありがとうございました。

【2012/01/19 14:31】URL | hamu #-[ 編集]

すごい!いつもかなり探しても見つからなくて苦労してました。
本当に助かります、ありがとうございます。

【2012/05/09 16:54】URL | #-[ 編集]

DWを使ってるので、行数も探しやすくていい感じです。
ただ、タグ対応が完璧なはずなのに、DWの画面の表示がおかしいのは、DWのせいだろうか?

【2012/05/09 16:56】URL | #-[ 編集]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

【2013/03/27 11:15】 | #[ 編集]

すみません。
クロームに対応していらっしゃらないのでしょうか?

【2013/10/31 16:53】URL | okada #-[ 編集]

すみません、できましたー!
ありがとうございました!

【2013/10/31 17:13】URL | okada #-[ 編集]

すばらしい!!

バリデートチェックのブラウザ拡張は時間が掛かるので
簡単なチェックでいいのに困ってました。

【2013/11/15 13:26】URL | #-[ 編集]

とても助かりました(^^)

【2013/11/28 12:53】URL | ikki #-[ 編集]

リンク文字をブックマークバーにドラッグすれば良かったんですね…気づくのに数ヶ月かかりました…orz
これ、メッチャ便利ですね、助かってます!

【2014/03/30 08:59】URL | 通りすがりの名無し #1jxB54a6[ 編集]

>リンク文字をブックマークバーにドラッグすれば良かったんですね…気づくのに数ヶ月かかりました…orz

クロームですね。
確かにクロームの記載が一切無いのは不親切だね。

【2014/04/21 16:20】URL | #-[ 編集]

いや、だってこれ作ったの2008年なので、クロームとかまだ無かったから…

【2014/10/10 23:50】URL | #-[ 編集]

こちらのスクリプトの判定処理を用いて、テキストエディタ上でチェックを行うマクロを作成し、当方のサイトで公開させていただきました。

* http://www19.atpages.jp/inkyogoya/gPad/checkCloseTag.html
* http://www19.atpages.jp/inkyogoya/sakuraEditor/checkCloseTag.html

便利なスクリプトの公開をありがとうございます。
重宝しています。

【2014/12/05 21:00】URL | 隠居小屋 #1VAZ.SlQ[ 編集]

本当に素晴らしいブックマークレットです。
とても困っていたので、すごく助かりました!
ありがとうございました!!

【2014/12/10 11:11】URL | 375 #-[ 編集]

Firefoxのバージョンを40にアップデートしてから
ブックマークレットが機能しなくなりました。
原因を調査していただけますか?

非常に愛用していたので、改修お願いします。

【2015/08/13 15:33】URL | 名無し #-[ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです

【2015/10/14 11:41】 | #[ 編集]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

【2017/01/31 16:55】 | #[ 編集]

この記事に対するコメントの投稿



管理者にだけ表示を許可する

この記事に対するトラックバック

トラックバックURL
http://tockri.blog78.fc2.com/tb.php/168-3f56bffd
この記事にトラックバックする(FC2ブログユーザー)

タグの閉じ忘れを防ぐ便利ツール

タグの閉じ忘れを防ぐ便利ツールというかブックマークレットをご紹介。 日本語サイトなのでとても嬉しいですよ~。 サイト作成をしたことがある方なら誰でも経験のあるタグの閉じ忘れ。 あたりの閉じ忘れを経験したことがないとは言わせません。 とくにdivは閉じ忘れると ウェブ3.14【2011/06/08 10:09】


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