アルファサード株式会社 代表取締役 野田 純生のブログ


HTML TidyをWebサービスにしてみた。


公開日 : 2014-07-22 14:59:30


JSONを返すAPIチックなものを作ってMTのプラグインも作った。詳細は"あっち"のブログに書きました。

HTML Tidy Gateway トップページ

でことで、こっちのブログでは実装にまつわるメモ。

Perl CGIで書いた。CGIモジュールとHTML::Templateを利用。

MT以外のPerl自体何だか久しぶりだったのですが、MT利用なし、DB接続のないCGIがこんなに軽いものだとは...

#!/usr/bin/perl
use strict;

my $tmpl_dir = '/path/to/tmpl/';
my $this_url = 'http://altstyle.alfasado.net/html-tidy-api.cgi';

use CGI;
my $query = new CGI;
$tmpl_path = File::Spec->catfile( $tmpl_dir, 'html-tidy-api-bootstrap.tmpl' );
my $template = HTML::Template->new( filename => $tmpl_path );
print $query->header;
$template->param( FORMURL => $this_url );
print $template->output;

HTML::Template、MT3まではMTの管理画面で使われてましたね。非常にシンプルです。TMPL_VAR、TMPL_IF、TMPL_UNLESS、TMPL_LOOP が使えます。

<TMPL_VAR NAME="FORMURL" ESCAPE="HTML">

<TMPL_IF NAME="HAS_ERROR">
    <TMPL_LOOP NAME="ERRORS">
        <TMPL_IF NAME="FIRST"><ul class="list-group"></TMPL_IF>
            <li class="list-group-item" style="list-style-type:none"><i class="icon-pencil"></i> &nbsp; <TMPL_VAR NAME="MESSAGE"></li>
        <TMPL_IF NAME="LAST"></ul></TMPL_IF>
    </TMPL_LOOP>
<TMPL_ELSE>
    <p><i class="icon-pencil"></i> <TMPL_IF NAME="JAPANESE"><TMPL_VAR NAME="NO_ERROR_JAPANESE"><TMPL_ELSE>No error was found.</TMPL_IF></p>
</TMPL_IF>

ループの指定は以下のような感じで。MTの vars のセットなんかと似ているというか、元々これだったんですものね。

my $i = 0;
for my $error ( @errors ) {
    my $line = { MESSAGE => $error };
    if (! $i ) {
        $line->{ FIRST } = 1;
    }
    $i++;
    if ( $i == scalar( @errors ) ) {
        $line->{ LAST } = 1;
    }
    push ( @messages, $line );
}
$template->param( ERRORS => \@messages );

ただ、MTのテンプレートエンジンなんかと比較すると、テンプレートで使っていない param を突っ込むとエラーになるとか、緩さはあまりないです。

Twitter Bootstrap + google-code-prettify

デザインはTwitter Bootstrapを使いました。検証結果のHTMLに行番号とか付けるのには google-code-prettify を使いました。検証結果から該当行へリンク貼るところは、HTML Tidyの行番号から割り出して正規表現でゴニョゴニョしてます。

HTML TidyとHTML5

そうなのよ。対応できていないので、configファイル作ってみたりしたのですが、今のところ上手くいってません。

new-blocklevel-tags: a,section,article,aside,hgroup,header,footer,nav,figure,figcaption,video,audio,canvas
new-empty-tags: source,command,embed,keygen,track,wbr
new-inline-tags: mark,progress,meter,time,ruby,rt,rp,bdi,bdo,summary,datalist,output

エラーが出るのは以下のようにして回避できるのですが、整形結果で認識できないタグをカットしてしまう。

$tidy->ignore( text => [ qr/<\/{0,1}section>/, qr/<\/{0,1}article>/, qr/<\/{0,1}aside>/ ] ... );

こんなページもあるので、ちょっとウチのスタッフにも頼んで追々対応を検討したいと思います。

UTF8フラグでちょっとハマった

MTのプラグインを書く時にちょっとハマったのよ。MTのソースの中では常にUTF8フラグが立っていて、ただ、APIのほうではUTF8フラグが立っていると上手く行かない。なので、UTF8フラグを落としてからAPIに投げてたのですが、戻りをMTのテンプレート経由で出力するところで化ける。そりゃそうですね。MT側では再びUTF8フラグ付けないといけないのでした。

意外なところでハマったのが以下。

    language => utf8_off( $app->user->preferred_language ),

「ja」とかが渡るってのに、UTF8フラグ引っ剝がしてからAPIに投げないと、微妙に文字化けしましたよ。ということで備忘録ね。

いかにも Bootstrap、でも、一人でサクッとできるのはやっぱりいい

一人制作だから、まず動かすところをやるわけです。MTプラグインまで作ったりして。となると、CSSとかデザインとかは人に頼みたくなるわけですけど、それでアウトプットが遅れるのもしゃくだし、Bootstrap を使うことにしました。どう見てもGitHubっぽくなってしまったが、まぁいいや。そういう意味ではWerdPressが人気なのがわかった。

MTも素敵なテーマがたくさんできるといいですね。



このブログを書いている人
野田純生の写真
野田 純生 (のだ すみお)

大阪府出身。ウェブアクセシビリティエバンジェリスト。 アルファサード株式会社の創業者であり、現役のプログラマ。経営理念は「テクノロジーによって顧客とパートナーに寄り添い、ウェブを良くする」。 プロフィール詳細へ