このブログだけのフィードを購読今日は、Webコンテンツの公開前に行っておくとWeb担当者が楽になる自動チェック機能として、Web担のCMSで実装している6つの機能を紹介します。
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があるかのチェックが大変なので、そこまでは実装していません。
画像の実サイズとHTMLで指定しているサイズの対応チェック
これも、画像の差し替えとかがあると、うっかりミスをしてしまう部分。
HTMLには「height="300"」と書かれているのに実際の画像の高さが298pxしかないというミスですね。ブラウザがいい感じに合わせて表示してくれるのですが、そのせいで縦横比がおかしくなったり、表示が粗くなったりするんですよね。
HTMLから画像のimg要素を抽出し、HTMLの属性やスタイルで指定している幅と高さが、実際に呼び出す画像の幅と高さと同じかどうかをチェックする仕組みを作りました。
慣れていない人がコンテンツを作る場合は、想定しているコンテンツエリアからはみ出すサイズの画像が使われていないかを、ここで同時にチェックするのもいいでしょう。
画像ファイルサイズの最適化チェック
これは、HTMLページで表示する画像が、できるだけ軽いファイルサイズになっているかの最終チェックです。
具体的には、HTMLから画像のimg要素を抽出し、参照先の画像をすべてYahoo! Smush.itのAPIを使って処理する仕組みを作りました。
smush.itだけでは色数を最適化していないとかはチェックできないのですが、チェック結果で画像ファイルのサイズが一覧で表示されるので、あまりにも大きいのはそこで気づけるようになっています。
JIS2004対応フォントのない環境で表示できない文字チェック
ちょっとマニアックですが、Windows XPで「JIS2004 対応 MS ゴシック & MS 明朝フォント」をインストールしていない環境では表示できない文字がHTMLに含まれていないかも、自動チェックしています。
典型的な例は、Macで書かれた波ダッシュ「～」ですね。
今やJIS2004非対応の環境はどんどん減っていますので、そろそろこのチェックは不要なのかもしれません。
JIS2004対応について詳しくはIBMさんの資料がわかりやすいです。グーグル検索結果やTwitterやFacebookでの表示プレビュー
これは公開前の自動チェックとは違うのですが、そのコンテンツがグーグルの検索結果やソーシャルメディアでどんな風に表示されるのかをイメージできるプレビュー機能を記事編集画面に付けています。
そのプレビューを見ながら、タイトルや説明文を調整できるように、編集画面で文字が変更されるたびに自動的にプレビューが更新されるようにしています。
実際にはこれ以外にも、よく使うHTMLテンプレートそのままで要素を埋め忘れている部分がないかのチェックなどもあります。
また、これらの自動チェック機能は、記事の編集画面からボタン1つですべて自動実行できるようにしています。以前は1つずつ自分で実行していかなきゃいけなかったのですが、それだと手間ですからね。
また、筆者さんや取材先に完成形のHTMLを見てもらうための、メールで送れる校正HTMLファイル出力の機能も作っています。
御社のコンテンツ管理では、コンテンツ担当者が手間をかけずに必要なチェックを行える自動チェック機能、備えてますか？ もしなければ、入れてみませんか？
安田 英久（やすだ・ひでひさ）
株式会社インプレスビジネスメディア
Web担当者Forum 編集長
プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、現在Webサイト 「Web担当者Forum」編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開してい る。
個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模 索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。
- 内容カテゴリ：Web担当者／仕事
- コーナー：編集長ブログ―安田英久
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：Webコンテンツ完成! でも公開前にこんな自動チェックをかけませんか？ [編集長ブログ―安田英久] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.