JenkinsとHTMLHintを使用して潜在的な構文エラーに気づいていく

今回紹介するツールを使用することで、静的なコードを解析して構文エラーをレポートとしてまとめることができます。

Jenkinsとは代表的な継続的インテグレーションツールの1つです。ソフトウェア開発時におけるビルド、デプロイ、テストなどの作業自動化を行ってくれます。

Jenkinsの主な特徴は以下になります。

• 幅広い環境で構築が可能
• GitHub、Subversionなどのバージョン管理、時間の指定など幅広いトリガーを所持
• 豊富なプラグイン
• Webブラウザ上で操作が可能

HTMLHintとはシンプルなHTMLの構文チェックツールです。主に以下のチェックを行ってくれます。

• 要素名がローワーケースになっているか
• 属性名がローワーケースになっているか
• 属性値がダブルクォートで囲まれているか
• 属性値が空になっているか
• 同じ要素内に同じ属性があるか
• DOCTYPE宣言が最初に記述されているか
• 要素の閉じ忘れがあるか
• 空要素にスラッシュを入れるか
• 文字参照を行っているか
• id属性がユニークになっているか
• 空のsrc値がないか
• title要素があるか

使ってみる

以下がすでにインストールされている状態からの解説になります^※。

• Jenkins
  • Checkstyle Plugin
• node.js
  • HTMLHint
  • gulp

※ 今回はWindowsのローカル環境で使用しています。

HTMLHintで構文解析を行いそのレポートを出力する方法として、gulp-htmlhint-checkstyle-file-reporterを使用します。

使用するnpmは以下になります。

• gulp
• gulp-htmlhint-checkstyle-file-reporter
• gulp-concat
• gulp-footer
• gulp-header
• gulp-htmlhint
• vinyl-paths
• del

タスクを動かすgulpfile.jsはgulp-htmlhint-checkstyle-file-reporterのUsageから解析するフォルダのパスを変更し、さらに以下をタスク追加しました。

gulp.task('clean', function () {
  return del([REPORT_DIR + '*.*'])
})

次にJenkinsでプロジェクトとジョブの作成まで行います。

次にジョブの設定を行いますが、今回はソースコード管理、ビルド・トリガ、ビルド環境については何も設定しません。

General

• 高度な設定をクリックしてカスタムワークスペースを使用にチェックを入れます
• ディレクトリの入力欄にプロジェクトのディレクトリを入力します

ビルド

• Windowsバッチコマンドの実行を選択します
• タスクを動かすディレクトリに移動してタスクを実行するコマンドを入力します

ビルド後の処理

• Checkstyle警告の集計を選択します
• gulpfile.jsで定義したファイル名のパスを入力します

これで設定は完了になるので保存をクリックします。

準備が完了しましたので、HTMLファイルが500ほどあるサイトから意図的にエラーをつくって計測してみましょう。

使用用途

エラーが1つもないWebサイトがあれば素晴らしいですが、人が作っている以上ヒューマンエラーはどこかで生じてしまいます。構築時に使用してエラー0の成果物を提供する、運用しているサイトに導入して地道に改善していく、グラフとして表示されるのでエラーの修正などの地道な作業のモチベーション維持にもつなげるなどが使用用途としては考えられます。

ヒューマンエラーの対処法として今回のようなツールを導入してWebサイトの改善を考えてみてはいかがでしょうか。