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

| コメント(0) | トラックバック(0)

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も素敵なテーマがたくさんできるといいですね。

トラックバック(0)

トラックバックURL: http://junnama.alfasado.net/cgi/mt/mt-tb.cgi/877

コメントする

Facebook

Twitter

このブログ記事について

このページは、Junnama Nodaが2014年7月22日 14:59に書いたブログ記事です。

ひとつ前のブログ記事は「MTのData APIのアイテム(Asset)関連のエンドポイントプラグインを作った。」です。

次のブログ記事は「MT管理画面のカスタマイズ( メニュー / ウィジェット編 )」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 6.2.6