今回は非常にお世話になっているブックマークレットを紹介していきます。HTMLのタグの閉じ忘れやミスを調べてくれるブックマークレットです。
ブログのカスタマイズをしていると時々ちょっとしたミスに気が付かないという事が多々あるのでこのブックマークレットは今や必需品となっています(個人的に)。
調べたいページを開いてこのタグチェックのブックマークレットをクリックするとこんな感じに指摘してくれます。
ある程度HTMLの知識があればどこが間違っていたのかすぐに分かりますし、カスタマイズした時にレイアウトが崩れた!という場合等にも原因がすぐに分かるので私は結構使います。
タグチェックツールの特徴
このブックマークレット名前がない?のでタグチェックツール(仮)としておきます。このツールでできる事は次の点です。
- タグの閉じ忘れを検索する
- 開きタグがない閉じタグを検索する
- 親より先に閉じちゃってる子がないか検索する
- タグ対応エラーの一覧と、ソースコード中のハイライト表示
冒頭でも画像で紹介したようにタグのミスをチェックしてそのページのソースコードと一緒に表示してくれます。ミスのあるソースコードはハイライトされて探しやすいようにしてあるので非常に便利!という特徴があります。
もちろんブックマークレットなので一度ブックマークバーに入れておけばいつでも1クリックでチェックできます。という訳でこのブックマークレットをブックマークバーに追加していく手順を紹介しておきます。
ブックマークレットを追加する
まずはこのブックマークレットを公開してくれているページへ移動。
⇒HTML内タグの閉じ忘れをチェックするツール[ブックマークレット]|とっくりばー
このページでこのブックマークレットの解説がされていますが、下の方にスクロールして「インストール」という見出しの下の「タグ対応をチェック」というリンク部分をドラッグしてブックマークバーに追加します。
これでブックマークレットの追加は完了。ブラウザにブックマークバーが表示されていないという場合にはこの記事を参考に。
⇒ブックマークバーを表示させる方法
さて、ブックマークレットが追加できたら実際に自分のブログでも他の人のブログでもいいので、チェックしたいページを開いてこの追加した「タグ対応をチェック」というブックマークレットをクリックしてみます。
こんな感じでチェック画面になったらOKです。
タグチェックツールの注意点
先ほどブックマークレットを追加したページにもこのような注意書きがありました。
このスクリプトは現在は特に悪いことしてないと思いますが、急に僕が悪気を起こして利用者の個人情報をぶっこ抜くスクリプトに書き換えちゃわないとも限りません。もしかしたら僕のFC2アカウントがクラッキングされてスクリプトを置き換えられちゃうかもしれません。
そんなわけで、例えば個人情報リストを表示してるような画面で利用することは避けて下さい。もしくは、現時点のスクリプトをダウンロードして、自分が信頼するサーバーに置いて使ってください。
この部分をちょっと補足説明しておきます。まずね、さっき追加したブックマークレット(ブックマークバーに追加したやつ)を右クリックして「編集」をクリックしてみましょう。
URLの部分をスクロールしながら見ていくと、「src=’http://tkr-net.tk/tagcheck/tagcheck2.js」という部分がありますよね。
つまりね、「http://tkr-net.tk/tagcheck/tagcheck2.js」のURLにこのツールの作者の方の作成したJavascriptのコードが書いてあってそこのプラグラムコードを参照している訳です。
まあ、コード自体が結構長いのでこれは当然なんだけど、例えばこの「http://tkr-net.tk/tagcheck/tagcheck2.js」というファイルを作者の方が削除した場合にはこのブックマークレットは使えない訳です。
注意書きにもあったようにもしかするとクラッキング(不正にネットワークに侵入)されたりする事もあるかも分かりません。不正に侵入されてソースコードを書き換えられるという事もあるかも知れないという事です。
なので「個人情報リストを表示してるような画面で利用することは避ける」という事は覚えておきましょう。
もしくはちょっと難しいですが「http://tkr-net.tk/tagcheck/tagcheck2.js」で書かれているJavaScriptのコードを全部コピーしたファイルを作成して「信頼できるサーバー」にアップしておき、先ほど書いたブックマークレットのURLの「http://tkr-net.tk/tagcheck/tagcheck2.js」という部分だけを自分のファイルの場所のパス(URL)に書き換えたら安心です。
これも試してみたけど文字コードは「shift-jis」がいいみたい。文字化けするので。
ただ、この場合も自分のサーバーがクラッキング(不正侵入)される可能性だってありますよね。なのでどちらにしても「個人情報リストを表示してるような画面で利用することは避ける」これは重要。
⇒おすすめの便利なブックマークレットまとめ

