Webコンテンツ完成! でも公開前にこんな自動チェックをかけませんか？

今日は、Webコンテンツの公開前に行っておくとWeb担当者が楽になる自動チェック機能として、Web担のCMSで実装している6つの機能を紹介します。

※2013-09-25　「いいと思うけど、これどうやったらウチのサイトでも使えるの？」という疑問に対する回答を追記しました。

Webコンテンツ完成! もう今すぐにでも公開したいですよね。

でもちょっと待ってください。自社サイトに掲載する前に、そのコンテンツが問題ないかチェックするべきですよね。HTML文法やリンク切れなどなど。

デザイン業界で「FlightCheck」や「プリフライト」と呼ばれる類のチェックですね。そういう「毎回やるチェック」は、システムで自動的にできるといいと思いませんか？

そういった例の1つとして、Web担のサイトで動かしている自動チェック機能を紹介します。Web担では、次のような自動チェック機能を入れています。

• HTML文法チェック
• リンクチェック
• 画像の実サイズとHTMLで指定しているサイズの対応チェック
• 画像ファイルサイズの最適化チェック
• JIS2004対応フォントのない環境で表示できない文字チェック
• グーグル検索結果やTwitterやFacebookでの表示プレビュー

それぞれについて解説していきます。

HTML文法チェック

基本ですね。最初は問題なくHTMLを作っていても、いろいろな校正チェックを経て修正を繰り返すうちに文法ミスの部分が出たりするので、最後に自動チェックしておくといいですね。

Web担では、Another HTML-lintのライセンスを取得して商用利用しています。コンテンツ管理システムからコンテンツ部分のHTMLをAnother HTML-lintに渡す仕組みを作って、ボタン1つでHTMLチェックをできるようにしています。

リンクチェック

これもWebコンテンツのプリフライトとしては基本ですね。いちいちリンクを手でクリックしていると漏れやミスが避けられませんから、自動化するべきものです。

コンテンツ管理システムでリンク（や画像などの埋め込み要素）を抽出して、サーバー側でその飛び先があるかどうかを自動チェックする仕組みを作りました。

ただ残念ながらフラグメント付きリンク（リンクに「#xxxxx」と付くもの）に関しては、飛び先にそのフラグメントのidやnameがあるかのチェックが大変なので、そこまでは実装していません。

同じリンク先URLは自動チェック時に何度もアクセスしないようになっています。

画像の実サイズとHTMLで指定しているサイズの対応チェック

これも、画像の差し替えとかがあると、うっかりミスをしてしまう部分。

HTMLには「height="300"」と書かれているのに実際の画像の高さが298pxしかないというミスですね。ブラウザがいい感じに合わせて表示してくれるのですが、そのせいで縦横比がおかしくなったり、表示が粗くなったりするんですよね。

HTMLから画像のimg要素を抽出し、HTMLの属性やスタイルで指定している幅と高さが、実際に呼び出す画像の幅と高さと同じかどうかをチェックする仕組みを作りました。

慣れていない人がコンテンツを作る場合は、想定しているコンテンツエリアからはみ出すサイズの画像が使われていないかを、ここで同時にチェックするのもいいでしょう。

地味ですがミスを見つけてくれる強いヘルプです。

画像ファイルサイズの最適化チェック

これは、HTMLページで表示する画像が、できるだけ軽いファイルサイズになっているかの最終チェックです。

具体的には、HTMLから画像のimg要素を抽出し、参照先の画像をすべてYahoo! Smush.itのAPIを使って処理する仕組みを作りました。

smush.itだけでは色数を最適化していないとかはチェックできないのですが、チェック結果で画像ファイルのサイズが一覧で表示されるので、あまりにも大きいのはそこで気づけるようになっています。

記事で使われている画像を自動的にsmush.it。最適化した画像はその場でダウンロードできます。

JIS2004対応フォントのない環境で表示できない文字チェック

ちょっとマニアックですが、Windows XPで「JIS2004 対応 MS ゴシック & MS 明朝フォント」をインストールしていない環境では表示できない文字がHTMLに含まれていないかも、自動チェックしています。

典型的な例は、Macで書かれた波ダッシュ「～」ですね。

今やJIS2004非対応の環境はどんどん減っていますので、そろそろこのチェックは不要なのかもしれません。

グーグル検索結果やTwitterやFacebookでの表示プレビュー

これは公開前の自動チェックとは違うのですが、そのコンテンツがグーグルの検索結果やソーシャルメディアでどんな風に表示されるのかをイメージできるプレビュー機能を記事編集画面に付けています。

そのプレビューを見ながら、タイトルや説明文を調整できるように、編集画面で文字が変更されるたびに自動的にプレビューが更新されるようにしています。

記事編集画面でタイトルなどを修正すると、その場でプレビューに反映されます。

実際にはこれ以外にも、よく使うHTMLテンプレートそのままで要素を埋め忘れている部分がないかのチェックなどもあります。

また、これらの自動チェック機能は、記事の編集画面からボタン1つですべて自動実行できるようにしています。以前は1つずつ自分で実行していかなきゃいけなかったのですが、それだと手間ですからね。

また、筆者さんや取材先に完成形のHTMLを見てもらうための、メールで送れる校正HTMLファイル出力の機能も作っています。

御社のコンテンツ管理では、コンテンツ担当者が手間をかけずに必要なチェックを行える自動チェック機能、備えてますか？ もしなければ、入れてみませんか？