メモ：InstaMT環境にAnother HTML-lintを設置する

Another HTML-lint（htmllint.cgi）の入手

Another HTML-lint プライマリサイトのダウンロードのページより、フルパッケージのhtmllint.lzh（SJIS/CRLF）をダウンロードします。

download

http://htmllint.itc.keio.ac.jp/htmllint/download.html サーヴィス終了とのことです。

Jcode.pmの準備

この章では、HTML-lintが必要とするJcode.pmの導入を説明します。

/mt/extlib/内にJcodeというフォルダと、Jcode.pmがあるようならば（一部ベータ版などでパッケージされてないものもあるようです）フォルダJcodeと、Jcode.pmを/InstaMT/perl/lib/ 以下にコピーします。

HTML-lintの説明にNoXS版のときにUnicode.pmがあるとうまく動作しませんとありますので、コピー後にUnicode.pmを削除します。

なお、Jcode.pmの配布サイトからモジュールをダウンロードしていれることもできます。

zip形式のファイルをダウンロードして展開した後、Jcode.pmとJcodeフォルダを/InstaMT/perl/lib/にいれます。

Another HTML-lintの展開と配置

以下は自分でおこなったときの構成です。好みで適宜かえてみてください

downloadしたhtmllint.lzhをInstaMTのcgi-binに展開します。

展開後のhtmllintは階層をもっていません。スタティックなファイル等はInstaMTのドキュメントルート（www）以下にまとめておきます。

参考までに、wwwフォルダ以下のスタティックなファイルは以下のような階層にしておきます。

www -
    - /htmllint/  # htmllintフォルダ
    
        - htmllint.html
        - index.html
              ・・・
        - /img/ #img フォルダ
           -  normal.gif # 画像ファイル
              ・・・
        - /temp/ #tempフォルダ 

#!/usr/local/bin/perl
を
#!C:/InsataMT/perl/bin/perl

htmllintenvの書き換えと環境ファイルの設定

Another HTML-lintの環境ファイルを設定をおこないます。

htmllintenvファイルをhtmllint.envにリネームします。

以下は自分の設定例です。ここではHTMLファイルのディレクトリは/www/htmllintとします。

# CGI 用ディレクトリ (絶対パスかCGI相対パスで指定、なるべく絶対パスにしてください)
$RULEDIR  = 'c:/instamt/cgi-bin/htmllint/';        # 規則ファイルの場所
#$LOGSDIR = './logs/';   # ログファイルの場所 (不要ならコメントアウト)
$TMPDIR   = 'c:/instamt/www/htmllint/tmp/';     # テンポラリファイルの場所
$IMGDIR   = 'c:/instamt/www/htmllint/img';        # イメージファイルの場所
$TAGSLIST = '';          # タグ一覧キャッシュ用の場所 (空ならキャッシュしない)
                         # 設定するときはアクセス権を適当に与えておくこと

# HTML 用ディレクトリ (CGI が出力する HTML 中で使う)
$HTMLDIR    = '../../htmllint/';                     # HTMLファイルの場所
$GATEWAYURL = $HTMLDIR.'htmllint.html'; # ゲイトウェイサーヴィス HTML
$EXPLAIN    = $HTMLDIR.'explain.html';  # 解説用 HTML (HTML用)
$CGIROOT    = 'http://localhost/cgi-bin/htmllint/';                 # CGIの場所
$IMGROOT    = 'http://localhost/htmllint/img/';                 # イメージファイルの場所

# デフォルト規則ファイル (Windows/Macでは . から始まるファイルは無効) 
$HTMLLINTRC = 'htmllintrc';

# HTML 用ディレクトリの設定がおかしいと出力されるページでリンク切れなどがおこります。 実際は使ってみておかしなようであれば適宜なおすとか、HTMLファイル側で調整するなどするといいでしょう。

よくわからないときは、

• Another HTML-lintをWindows XPで動かす - Another HTML-lintのダウンロードと組込

を参考にするといいです。

補足

htmllintrcファイルはHTML-lintで変更可能なパラメタが列挙されたファイルです。起動時にデフォルトでチェック項目でチェックしたりしなかったりなどの調整ができます。

gatewayの動作確認

実際に起動してつかってみます。InstaMTが起動されている状態で、http://localhost/htmllint/htmllint.htmlにアクセスします。

とりあえず、DATA領域指定のほうでチェックしてみて、正しく結果がでているか確認します。

Another HTML-lintのMovable Typeへの連携

ここでは、HTML-lintをMovable Typeの管理画面で利用できるようにカスタマイズする例を紹介いたします。

簡単にいえば、

• a href="http://localhost/cgi-bin/htmllint/htmllint.cgi?V;URL=編集しているページのパーマリンク"

が編集中画面に表示されればAnother HTML-lintを使って確認することができるようになります。alt-tmplateを使ったカスタマイズを以下に示します。

カスタマイズが苦手手軽なのでjQueryを使えるMovable Type 5による説明となります。

1. フォルダCMSを新規作成してmt/alt-temple/以下に置きます。
2. /mt/tmpl/cms/のedit_entry.tmplをそっくりコピーして、任意エディタの新規作成に貼り付けます。

3. 以下のコードをinclude/footer.tmplをインクルードしてるコードより上に追加して同じ名前にて、CMSフォルダ以下に保存します。

   
   <mt:setvarblock name="jq_js_include" append="1">
       jQuery(function(){
        gt_entrylink= $("#permalink-field a.button").attr("href");
        if (gt_entrylink.indexOf('http:')==!-1){
           var htm_temp='';
           htm_temp += '<div><a href="javascript:void(0);" class="button" id="htmllint">HTML-lint</a></div>';
           $("#permalink-field").append(htm_temp);
        }
       });
   
       jQuery('#htmllint').click(function(event) {
           window.open('http://localhost/cgi-bin/htmllint/htmllint.cgi?V;URL=' + encodeURIComponent(gt_entrylink),'_blank');
       });
   </mt:setvarblock>

上記カスタマイズの動作は以下のページのようになります。

• InstaMT環境に HTML-lintを導入してみた

付録

参考情報等の一覧です