ブログ作成に役立つブックマークレット

2024/08/03

2018/10/01

Bookmarklet 初心者向けバリデート作業効率化

vanillaice (Akira)

FC2ブログで記事を書く際に役立つかもしれない、という条件付きです。特に旧投稿画面を利用し、htmlを使うことが多い方向けです。

他の方が製作したものについてはここでの二次配布は致しません。ご紹介するだけです。リンクを掲載しますので直接赴き、提供者様の規約・ルールに則ってご利用ください。

htmlバリデート系

htmlの正当性を検証するためのツールです。

HTML終了タグチェッカー

開始タグと終了タグの「数」が合っているかどうかの整合性をチェックできます。

2024.8.3
提供終了となりましたので、この章は記録としての参照用として残しておきます。

例) 開始タグと終了タグの数が正しい

<p>
  <span style="color: red;">あいうえお</span>
</p>

例) 開始タグと終了タグの数が不整合

<p>
  <span style="color: red;">あいうえお
</p>

注意点

html5では終了タグ省略可能なものがいくつかあります。li要素についてはカウントしないように調整してくださっていますが、その他 </p> </tr> </td> など、文法的には省略が正しくともエラーの指摘を受けてしまいます。html初心者の自覚がある方は省略可能であっても終了タグを書くことをおすすめします。

W3C validation

ドラッグ&ドロップでブラウザのブックマークバーへ登録。

Nu Html Checker

ドラッグ&ドロップでの登録ができない場合は新規ブックマーク作成から適切な名称をつけ、以下の内容をURLの部位にコピペで登録してください。

javascript:var aA%3d'https://validator.w3.org/nu/%3Fshowsource%3dyes%26doc%3d';var bB%3dencodeURIComponent(window.location.href);var wW%3dwindow.open(aA+bB,'_blank','width%3d800,height%3d500');void(0);

htmlタグチェッカーは開始タグと終了タグの「数」をチェックするツールです。こちらのW3C validatorはページ全体のhtmlの正当性を検査しますので、開始及び終了タグの「数合わせ」だけではなく「位置」についても検証できます。検証内容の説明は以下のリンク先でざっと説明しています。

ページスピード測定ツール系

ページ表示スピード改善の提案などを調べるツールです。

GTmetrixに即アクセス

javascript:(function()%7Bwindow.open(%27https://gtmetrix.com%3Furl%3D%27%2BencodeURIComponent(location.href))%7D)()

検証したいページを開き、ブックマークをクリック。別タブでGTmetrixの検証ページが開かれ、対象アドレスが既に記入されている状態になっているはずですのでそのまま Enter/ Return キーを押下すると検証が始まります。つまりURL入力の手間を省きます。

Page Speed Insightsに即アクセス

javascript:(function()%7Bwindow.open(%27https://developers.google.com/speed/pagespeed/insights/%3Fhl%3Dja%26url%3D%27%2BencodeURIComponent(location.href))%7D)()

使い方はGTmetrixと同じですが、ブックマークレットをクリック後別タブで表示されると同時に解析が始まります。

まとめ

記事内のhtml記述ミスは常に気をつけるに越したことはないのですが、特に全文表示タイプテンプレートを利用している方は注意が必要です。要約タイプと違い全文タイプはトップページに表示される内容も個々の記事内容に依存します。ですから個々のページ単位で見れば少々のミステイクだとしても、トップページでは複数件掲載されるのですからレイアウトが大きく狂ってしまうこともありますし、JSが動かない、CSSが狂うなどの害も考えられます。ですから本当なら初心者さんは要約タイプを選ぶのが賢明なんですけどね (´・ω・｀)

記事内でhtmlをよく利用する、という方は毎回バリデートにかけるぐらいの意気込みは必要です。もう毎回です。記事を一つ書いたらプレビュー画面なり投稿済みページなりで必ずW3Cのバリデータにかける。そしてミスがあれば即修正。面倒ではありますが、例えば過去記事から内容をコピペして使いまわした場合でもその元内容自体が間違っていると後の修正がかなり困難になります。ですからマメにチェックをするのが自身にとっても最も合理的なんですね。

検証自体がめんどうでもURL入力の手間ぐらいは省けますので是非ご活用ください。

最後に「プレビュー画面」で検証される場合にはtime要素(記事投稿日や記事修正日に関する情報)は以下のようなエラーになります。
Bad value --T::+09:00 for attribute datetime on element time: The literal did not satisfy the time-datetime format.
が、投稿(保存)を済ませた時点でちゃんと日付が入りますので大丈夫です。