ブックマークレットとjqueryで簡単チェックツールを作る

tick placed in excellent check box with red pen

制作会社、特に受託をメインでやっている会社は、たった一つのコピペミスが命取りになってしまいます。「Ctrl+C」と「Ctrl+X」を打ち間違えてしまう悲劇は、幾度となく訪れます。ですので、チェック作業は入念にしなければなりません。左手の腱鞘炎よりも眼精疲労が心配です。

今回のツールは、比較的ひっかかりやすいミスを、「できるだけ均一に」、「できるだけ簡単に」、見落とさないようにするためにはどうすればよいか、ということから考えました。あと、自分の両目に負担をかけないように。

まずは、どんな機能があればチェック効率が上がるか、社員にヒヤリングした結果、下記のレスポンスがありました。

ソース開いてメタ情報チェックするのめんどいなー
chromeってalt表示されないんだよね
画像の比率が微妙に違うんだけど、パッと見わかんないよ

ふむふむ。
前向きに解釈してみると、
・メタタグ(タイトル、キーワード、ディスクリプション)を確認したい
・altの入れ忘れや、文言間違いをチェックしたい
・画像の幅高さが元画像とhtmlで指定している値で違う場合、見つけやすくしたい
ということが要望のようです。

chrome拡張の「Pendule」でいいんじゃないの?とも思いましたが、そんなに高機能でなく、ワンタッチで必要な情報が欲しいみたいです。確かにちょっと重いし、chromeでしか使えないですからね。
どんなブラウザでも同じ仕様で使うことができるもの、と考えたところ、古き良きブックマークレットにたどり着きました。
ブックマークバーに置いておいて、チェックしたいときにクリックすれば、上記のようなミスりポイントがささっと出てくるイメージです。インストールとか設定とかそんなものは導入のハードルを上げるだけです。

 

インターフェースを決める

なるべく簡単に、がテーマなので別ページ遷移は却下です。とりあえずモーダルウインドウで、ページの一番上のレイヤーに突っ込んでみましょう。

タイトル 素晴らしいタイトル
キーワード 素晴らしいキーワード
ディスクリプション 素晴らしいディスクリプション
画像 altとかパスとかサイズとか

で、下記がjqueryを利用して上記の機能をなんとなく実装したソースになります。

結構なボリュームになりますが、半分はCSSでレイアウトを整えているだけなので、少し細かく見ていきましょう。

 

まずはjqueryを使えるようにする

今回はhtmlソースをたくさんパースするので、jqueryを使って簡単に処理していこうと思います。
下記が大枠になります。

注意点として、jqueryの読み込みは必須なので、jqueryを使っていないページだとエラーが出てしまいます。なので、無かった場合に備えて、条件分岐をしています。
これでおよそどんなページでも対応可能にしています。

 

メタ情報を取得する

次に、簡単そうなメタタグ(タイトル、キーワード、ディスクリプション)を取得してみましょう。

文字コードのところだけ注意が必要です。html5はちょっと書き方が違うんですね。

 

画像情報を取得する

では次に、altと画像サイズが適正かどうかをチェックするために、ページで表示されている画像の情報を取得してみます。

each関数で、ページ内のimgタグを拾ってきます。変数に一個ずつ代入していき、さらに細かく情報を代入していきます。少しつまづいたのが、naturalWidthとnaturalHeightの使い方でした。画像の元々の幅高さを取得する方法です。この為にjqueryを使ったといっても過言ではありません、ブラウザ対応がめんどうで。。
次の3行は、見やすくするための代入なので無視します。

画像情報の準備ができたので、実際に表示処理をしていきましょう。

altの箇所で、3箇所分岐をさせてます。「altが空の場合、altタグが無い場合、altが記入されている場合」の3つです。html5では、altタグって無理やり記述しなくてもいいんですね。昔は「alt=””」は必須だったのに、便利な世の中になりました。
続いて、画像サイズがオリジナルと違う場合の表示です。横か縦か、どちらかにずれがあれば赤い文字で表示させています。これにより、元画像とソースを見比べる手間がだいぶ軽減されました。

画像情報をテーブルに代入して、完璧です!表示は下記のようになりました。

cap01

ソース開いてメタ情報チェックするのめんどいなー
chromeってalt表示されないんだよね
画像の比率が微妙に違うんだけど、パッと見わかんないよ

全てクリア!これで要望通りのツールが完成しました。
画像の元ファイルが、「undefined × undefined」となっているのは、widthタグとheightタグがないためです。また、フルードイメージ対応のため画像を100%にしていたりしても、赤字で表示されます。これはしょうがないかなー。

最後の、「画像サイズの縦横どちらかが1pxを含んでいる場合は出力しない」は、主にアクセス解析用ダミー画像対策です。ページ内の画像を全部拾ってしまうので、一緒に表示されてしまうんですね。また、うちの会社は、HTMLメールもよく制作しますので、「spacer」対策でもあります。だいたい1×1のgifで作っているからです。

 

少し使いやすく調整をしてみる

ここまで作ったら、要素の取得関係は一旦終了です。ここからは使いやすさを試行錯誤していきましょう。
まず、非表示の切り替えをどうすればいいか?これはトグルで切り替えるのが一番早いですね。

モーダルウインドウをchkWrapというクラスにしてるので、chkWrapがなかったら表示、あったら非表示と分岐文を書きます。
非表示ボタンを押すタイミングで、表示させた要素はしっかりリムーブさせましょう。

次の施策は、ボタン押したとき、スクロールした場所から始まってしまうので、最上部に戻してます。

CSSに関しては、いい感じに設定すればOK。

 

minfyしてブックマークバーに設置する

このページとかでminfyして、ブックマークバーに設置すれば、目にやさしいチェックツールの出来上がりです。

↓をブックマークバーにドラッグしてクリックしてみてください。
スマートにチェック!

いかがでしょう?
やさしさが伝わっていればうれしいです。

これをカスタマイズすれば、
・OGPタグの取得
・文字のゆれの発見
・ページ内のリンク一覧
などなど、なんだか便利そうなツールが自作できそうですね。

また、メンテナンスのことを考えて外部スクリプト化にしておけば、更新した時でもいちいちブックマークする手間が省けます。

Share on Facebook0Tweet about this on TwitterShare on Google+0Email this to someone