HTML TidyをWebサービスにしてみた。
公開日 : 2014-07-22 14:59:30
JSONを返すAPIチックなものを作ってMTのプラグインも作った。詳細は"あっち"のブログに書きました。
でことで、こっちのブログでは実装にまつわるメモ。
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> <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
HTML5で変わったa要素、main要素とかに対応していないのは確認したけど、ミスを発見するのにはいいかも！ http://t.co/MKn0JRAgkN
— yasuhisa yanagi (@atstyle) 2014, 7月 22そうなのよ。対応できていないので、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が人気なのがわかった。
