タグ別アーカイブ: html

Test::Mojo::DOMを作った

 

Mojoliciousアプリの出力するDOMを詳細にテストするやつ。

https://github.com/jamadam/Test-Mojo-DOM

Test::Mojoだけだと、domのチェックはelement_exitsとelement_exits_notしかできないので、詳細なテストはcontent_*でやるか、DOMを取り出してからTest::Moreを使う。

$t->get_ok('/');
my $dom = $t->tx->res->dom;
is $dom->at('#hoge')->attrs('href'), 'http://example.com', 'right URL';

Test::Mojoと似た流れでDOMのテストもやりたい!

ということで、Test::Mojo::DOMを使うと下記のようにできるよ。APIは変わるかもだよ。

  use Test::Mojo::DOM;
  use Test::More tests => 35;

  my $t = Test::Mojo::DOM->new(MyApp->new);
  $t->get_ok('/')
      ->status_is(200)
      ->dom_inspector(sub {
          my $t = shift;
          $t->at('a')
              ->attr_is('href', '../')
              ->attr_isnt('href', './')
              ->attr_like('href', qr'\.\./')
              ->attr_unlike('href', qr'\.\./a')
              ->text_is('some link')
              ->text_isnt('some link2')
              ->text_like(qr'some')
              ->text_unlike(qr'some2')
              ->has_attr('href')
              ->has_attr('empty')
              ->has_attr_not('not_exists');
          $t->at('a')->get(1)
              ->text_is('some link2');
          $t->at('a:nth-child(2)')
              ->text_is('some link2');
          $t->at('a')->each(sub {
              my $t = shift;
              $t->text_like(qr{.});
              $t->text_unlike(qr{a});
              $t->attr_like('href', qr{.});
              $t->attr_unlike('href', qr{a});
          });
          $t->at('a')->parent->attr_is('id', 'some_p');
          $t->at('a')->parent->parent->attr_is('id', 'wrapper');
          $t->at('#some_p')->has_child('a');
          $t->at('#some_p2')->has_child_not('a');

          $t->at('#some_img')->has_class('class1');
          $t->at('#some_img')->has_class('class2');
          $t->at('#some_img')->has_class('class3');
          $t->at('#some_img')->has_class_not('class4');
      });

リンクチェッカー「mojo-checkbot」がv0.26になった

 

リンクチェッカー「mojo-checkbot」がv0.26になった。主な変更点。

  • embed, frame, iframe inputのsrc属性がクロールの対象となった。
  • formダイアログの表示条件を変更し、action属性と、子要素のname属性が全て同一でなければ、別のフォームとみなしてダイアログを表示するようにした。
  • ユーザー認証情報の使用範囲の条件にportの同一性を追加した。

リンクチェッカー「mojo-checkbot」がv0.24になった

 

mojo-checkbotがv0.24になった。

最近の変更点。目玉はform送信ダイアログの追加です。Basic認証やフォームでユーザー情報を送信する必要のある要認証サイトのチェックが楽になりました。

  • formを検出した場合、レポートビュー上からデータ送信してクローラーのキューを追加可能とした。
  • 401のユーザー認証を要求された場合、レポートビューからユーザー情報を送信可能とした。
  • matchオプションがDeprecatedになり、代わりにmatch-for-checkとmatch-for-crawlを追加した。
  • sleepオプションが全体のパフォーマンスに影響するのを改善した。

 

リンクチェッカー「mojo-checkbot」がv0.21になった

 

リンクチェッカー「mojo-checkbot」の最近の改良点。

  • sleepオプションがリクエストの開始の間隔だったのを、終了と開始の間隔とした。
  • evacuate / noevacuateオプションが追加された
  • コマンドがシンプルになった
  • レポートのステータスコード毎に非表示可能にした
  • スタイルシート内のurl(…)もクロールするようになった。
  • スキーム無指定のURIに対応

サイト内のリンク切れを一括検出する「mojo-checkbot」がβ版になった

mojo-checkbotがある程度できてきたのでベータ版にしてみたよ。githubでゲットできます。最新のバージョン番号のタグがついたものを使ってください。

mojo-checkbotはクローラーにウェブサイト内のステータスコードを収集させつつ、ブラウザでレポートを見れるコマンドラインツールです。checkbotの機能限定版という感じですが、日本語が正常に表示されたり、ファイルを介さないのでシンプルだったり、レポートの見せ方を工夫したりと、色々改善しています。

mojo-checkbotはMojoliciousをベースにしています。Mojolicious本体は同梱されてるのでインストール不要ですが、Mojoliciousのバージョン2からperl5.10.1依存になったので、以前のバージョンで動くかは不明です(5.10.0では動いてる風)。要改善点はまだ多数あるので逐一更新して行きます。見た目がダサいので誰かデザインしてくれませんか。

    mojo checkbot [--start start URL] [--match match string] [--sleep seconds]
        [--ua useragent header] [--cookie cookie string] [--timeout seconds]
        [--evacuate second] [--noevacuate] [--resume]

DESCRIPTION

ウェブサイトのリンクチェッカーです。コマンドラインで開始URLを指定してデーモンを起動し、ブラウザでhttp://127.0.0.1:3000 を開くとチェック状況が逐一報告されます。リンクの収集とステータスコードの収集は再帰的に延々続きますので、matchオプションでURLフィルタをかけておくと、そのうち止まるかもしれません。

OPTIONS

下記のオプションが利用可能です:

クローラーオプション

--start            クロールをスタートするURLを指定します。
--match         チェック対象のURLを正規表現で指定します。
--sleep        クロールの間隔を指定します。
--ua            クローラーのHTTPヘッダに設定するユーザーエージェントを指定します。
--cookie        クローラーがサーバーに送信するクッキーを指定します。
--timeout      クローラーのタイムアウトする秒数を指定します。デフォルトは15です。
--evacuate     [EXPERIMENTAL]レポートをテンポラリーファイルに出力する間隔を指定します。
--noevacuate            [EXPERIMENTAL]resume用のファイル出力を無効化します。
--resume                [EXPERIMENTAL]前回の結果を復元し、再開します。

レポートサーバーオプション

--backlog       Set listen backlog size, defaults to SOMAXCONN.
--clients       Set maximum number of concurrent clients, defaults to 1000.
--group         Set group name for process.
--keepalive     Set keep-alive timeout, defaults to 15.
--listen        Set one or more locations you want to listen on,
                defaults to "http://*:3000".
--proxy         Activate reverse proxy support, defaults to the
                value of MOJO_REVERSE_PROXY.
--requests      Set maximum number of requests per keep-alive
                connection, defaults to 25.
--user          Set username for process.
--websocket     Set WebSocket timeout, defaults to 300.

EXAMPLE1

$ mojo checkbot --start http://example.com --match http://example.com/ --sleep 2
[Mon Oct 17 23:18:35 2011] [info] Server listening (http://*:3000)
Server available at http://127.0.0.1:3000.

EXAMPLE2

本プログラムはMojolicious::Liteをベースにしていますので、そちらのオプションも有効なはずです。

$ mojo checkbot --listen http://*:3001 --start http://example.com

EXAMPLE3

クッキーを指定して要認証サイトのチェックもできます。

$ mojo checkbot --start http://example.com --cookie 
    'key=value; Version=1; Domain=example.com; Path=/; expires=Fri, 
    28 Oct 2011 15:26:47 GMT'

https://github.com/jamadam/mojo-checkbot

Copyright (c) 2011 jamadam

Dual licensed under the MIT and GPL licenses:

Mojoliciousのバンドルファイルを整理するプラグイン

 

Mojoliciousのエラー画面で使われている画像やJSやCSS。リバースプロキシを拡張子などのホワイトリストで記述すると、これらのバンドルファイルがプロキシを通過せずに404エラーになってしまう。具体的にはこういうケース。

RewriteEngine on
RewriteRule ^(.*(.(html|htm|xml))|/)$ http://localhost:3000$1 [L,P,QSA]

バンドルファイルはなぜかpublic直下にちりばめられているため、記述しづらい。それにファイル名が衝突してることに気付かずハマりそう。そこで、バンドルファイルがあたかも単一ディレクトリにまとまってるかのように装うプラグインMojolicious-Plugin-UnmessifyBundleです。

sub startup {

    my $self = shift;

    # Mojolicious
    $self->plugin(unmessify_bundle => {prefix => 'mojolicious-bundle'});
}

# Mojolicious::Lite
plugin unmessify_bundle => {prefix => 'mojolicious-bundle'};

これを使うと例えばバンドルされたjqueryは/mojolicious-bundle/js/jquery.jsでアクセスできます。エラーページのHTMLソースも適当に書き換えられます。

すると、バンドルファイルをワンライナーでホワイトリスト入りさせることができるのです。

    RewriteEngine on
    RewriteRule ^(.*(.(html|htm|xml))|/)$ http://localhost:3000$1 [L,P,QSA]
    RewriteRule ^/mojolicious-bundle(/.+)$ http://localhost:3000$1 [L,P,QSA]

前回以上にニーズのなさそうなネタでした。

 

CSSでいじれるディレクトリツリーの生成スクリプト

ブログ記事にディレクトリーツリーを掲載しようと思ったんだけど、treeコマンドの出力は味気ないので、CSSでいじりやすくHTML出力できるperlスクリプトをチョー適当に作った。本来の仕事が進まない。

[2011.6.22]ソート追加

 

use strict;
use warnings;
use utf8;
use Getopt::Long;

    my %args = ('L' => 10);
    GetOptions(%args, 'L=s');
    my ($dir) = @ARGV;
    &loopDir($dir || '.', 0);
    exit;

    sub loopDir {
        my ($dir, $depth) = @_;
        chdir($dir) || die "Cannot chdir to $dir\n";
        opendir(my $dh, ".");
        my @entries = sort {$a cmp $b} grep {substr($_,0,1) ne '.'} readdir($dh);
        closedir($dh);
        if (scalar @entries) {
            print "<ul>\n";
            for my $f (@entries) {
                if (-d $f) {
                    print qq{<li class="dir">\n};
                    print qq{$f\n};
                    if ($depth < $args{L} - 1) {
                        loopDir($f, $depth + 1);
                    }
                    print qq{</li>n};
                } elsif (-f $f) {
                    print qq{<li class="file">$f</li>\n};
                }
            }
            print "</ul>\n";
        }
        chdir("..");
    }
  • crypt.pl
  • ddsn_get.sh
  • memo.txt
  • ffmpeg
    • 02.3gp
    • 02a.wav
    • 01a.3gp
    • 01a.wav
    • 02a.3gp
    • 2ch.mp3
    • test.3g2
    • brave
      • 01_2.avi.filepart
    • 01.3gp

 

CSSもかなりテキトー。

.directoryTree {
    padding:10px;
    border:1px solid #aaa;
    background-color:#fffbf0;
}
    .directoryTree ul ul {
        padding:0;
        margin-left:0;
        margin-bottom:0.5em;
        padding-bottom: 0 !important;
        border-left:3px solid #ddd;
    }
    .directoryTree li {
        margin-left:0 !important;
        padding-left:30px !important;
        vertical-align:bottom;
        background-repeat:no-repeat;
        background-position:10px 0;
        list-style:none;
    }
        .directoryTree li.dir {
            background-image:url(./images/xiao_icon/40.png);
            margin-bottom:0.5em;
        }
            .directoryTree li.dir > ul {
                margin-left:-1em;
            }
        .directoryTree li.file {
            background-image:url(./images/xiao_icon/21.png);
        }

jquery.jsontpl.jsというテンプレートエンジンだよ

jsonを使用したテンプレートエンジン「jquery.jsontpl.js」です。jQueryバージョン1.5以上で動作します。

特徴は、テンプレートのパースに正規表現置換やevalなどせず、jQueryの高レベルAPIのみを使用している点です。テンプレート内ではほぼ普通にjavascriptが使えますので、つまりテンプレート内で条件分岐、反復制御ができます。テンプレートは入れ子にもできます。よくある特殊制御構文とか特にありませんので、学習コストが低いかも知れません。

アルファバージョンです。数日でテキトーに作ったので、コンセプトすら正しいのか不明です。

[2011.01.29更新]

デモサイトを作りました[デモ]。あと、IE6でも動作するよう修正しました。正規表現つかっちまった。


テンプレートは下記のように使用します。

$.jsontpl.parse('./tpl.html','./data.json').appendTo(selector);

テンプレート内に下記のようなタグを記述すると変数名nameと解釈され、値に置換されます。

<var name="name"></var>

jsonデータは連想配列の配列として渡します。連想配列のキーがテンプレート変数名です。

[{"name":value}, {"name":value2}, {"name":value3}]

jQuery.jsontpl.getContextメソッドにてコンテキストオブジェクトcontextを取得することができます。コンテキストというのは要するに現在のテンプレートの範囲ということです。contextオブジェクトから、現在のコンテキストでの変数を取得したり、DOM操作をしたりできます。

// コンテキストオブジェクトを取得
var context = $.jsontpl.getContext();

// 変数取得
var name = context.getvar("name");

テンプレート内のdomにはid属性を指定してスクリプトでパース時に制御することができます。テンプレート内のid属性は、衝突を避けるためパース後に削除されます。テンプレート、つまり複製されるものなので、適用後にidが必要になるはずはないという訳です。別にclassでも構いませんが。

context.find("#flag")

変数スコープには注意が必要です。グローバル空間で衝突しないように下記のように記述するとよいです。

<script type="text/javascript">
//<![CDATA[
(function() {
    var context = $.jsontpl.getContext();
})();
//]]>
</script>

jsontplプラグインはjQuery.jsontpl名前空間を占有します。jQuery.jsontplはjQuery.subclassそのものなので、jQuery(selector)とjQuery.jsontpl(selector)はよく似ています。ただし、下記のメソッドを追加、またはオーバーライドしています。詳しくはソースを参照してください。

jQuery.jsontpl.ajax
jQuery.jsontpl.getTpl
jQuery.jsontpl.getJSON
jQuery.jsontpl.get
jQuery.jsontpl.getContext
jQuery.jsontpl.parse
jQuery.jsontpl.fn.getvar
jQuery.jsontpl.fn.parse
jQuery.jsontpl.fn.appendTo
jQuery.jsontpl.fn.prependTo
jQuery.jsontpl.fn.insertBefore
jQuery.jsontpl.fn.insertAfter

使用例

data.json

[
    {
        "name": "Yamada",
        "mail": "yamada@example.com",
        "blood": "A"
    },
    {
        "name": "Yamamoto",
        "mail": "yamamoto@example.com",
        "blood": "A"
    },
    {
        "name": "Suzuki",
        "mail": "suzuki@example.com",
        "blood": "B",
        "detail":{
            "data1":"hoge",
            "data2":"hoge",
            "data3":"hoge"
        }
    }
]

index.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <title>jQuery Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <style type="text/css">
    table,th,td {
        border:1px solid #ccc;
    }
    th {
        background-color: #e0e0f0;
    }
    </style>
    <script src="./common/js/jquery.1.5.js" type="text/javascript"></script>
    <script src="./common/js/jquery.jsontpl.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function(){
            // テンプレートとJSONをサーバーから取得
            $.jsontpl.parse('./tpl.html','./data.json').appendTo('.movie');
        });
    //]]>
    </script>
</head>

<body>
    <table class="movie">
        <tr>
            <th>名前</th>
            <th>メール</td>
            <th>血液型</td>
            <th>A型</th>
            <th>詳細情報</th>
        </tr>
    </table>
</body>
</html>

tpl.html

<tr>
    <td><var name="name"></var></td>
    <td><var name="mail"></var></td>
    <td><var name="blood"></var></td>
    <td id="flag"></td>
    <td id="subtable" class="subtable">
    </td>
</tr>
<script type="text/javascript">
//<![CDATA[
(function() {
    // コンテキストオブジェクトを取得
    var context = $.jsontpl.getContext();

    // テンプレート内で条件分岐例
    if (context.getvar("blood") == 'A') {
        context.find("#flag").html("true");
    }
    // サブテンプレートを挿入
    $.jsontpl.parse('./tpl2.html', context.getvar("detail")).appendTo('#subtable');
})();
//]]>
</script>

tpl2.html

<div class="hoge">
    data1:<var name="data1"></var>
    <br />data2:<var name="data2"></var>
    <br />data3:<var name="data3"></var>
</div>

jquery.jsontpl.js(最新版はgithubにて)

/*!
 * jquery.jsontpl - client side template engine powered by jQuery
 *
 * @requires jQuery version 1.5 or higher
 * @version 0.0.3
 */
(function ($) {

    $.jsontpl = $.subclass();

    /**
     * プラグイン開発用のデバッグコンソール
     */
    var console = {
        log : (window.console) ? window.console.log : function () {}
    };

    /**
     * デフォルトパラメータ
     */
    $.jsontpl.params = {
        classPrefix : 'jsontpl',
        __trailing__: null
    };

    /**
     * デフォルトパラメータをオーバーライド
     *
     * @param obj {object}
     * @returns {jQuery.jsontpl}
     */
    $.jsontpl.setParams = function (params) {
        $.extend($.jsontpl.params, params);
        return this;
    };

    /**
     * Ajaxキャッシュ{url : data}
     */
    var cache = {};

    /**
     * キャッシュ機構を追加したajaxメソッド
     *
     * @param params {object}
     * @returns {XMLHttpRequest | empty object}
     */
    $.jsontpl.ajax = function (params) {
        if (cache[params.url]) {
            params.success(cache[params.url]);
            return {};
        }
        params.success = (function() {
            var url = params.url;
            var orgSuccess = params.success;
            return function(a) {
                cache[url] = a;
                orgSuccess(a);
            }
        })();
        return $.ajax(params);
    };

    /**
     * テンプレート取得用のAjaxラッパーメソッド
     *
     * @param url {string}
     * @returns {jQuery.jsontpl}
     */
    $.jsontpl.getTpl = function (url) {
        var ret;
        $.jsontpl.ajax({
            type: "GET",
            url: url,
            cache: true,
            async: false,
            error: function (error) {
                console.log(error.statusText + " at " + url);
            },
            success: function (tpl) {
                ret = $.jsontpl(tpl);
            }
        });
        return ret;
    };

    /**
     * JSON取得用のAjaxラッパーメソッド
     *
     * @param url {string}
     * @returns {jQuery.jsontpl}
     */
    $.jsontpl.getJSON = function (url) {
        var ret;
        $.jsontpl.ajax({
            type: "GET",
            url: url,
            cache: true,
            async: false,
            dataType: 'json',
            error: function (error) {
                console.log(error.statusText + " at " + url);
            },
            success: function (json) {
                ret = json;
            }
        });
        return ret;
    };

    /**
     * テンプレートとJSONの取得用のAjaxラッパーメソッド
     *
     * @param tpl {string} テンプレートファイル名
     * @param json {string} JSONファイル名
     * @returns {jQuery.jsontpl} テンプレートとJSON
     */
    $.jsontpl.get = function (tpl, json) {
        return {
            tpl  : $.jsontpl.getTpl(tpl),
            json : $.jsontpl.getJSON(json)
        };
    };

    /**
     * テンプレート内のコンテキストを保持
     */
    var context;

    /**
     * テンプレートから現在のコンテキストを取得するAPI
     * @returns jQueryエレメント
     */
    var getContext = $.jsontpl.getContext = function () {
        return context || $('body');
    }

    /**
     * テンプレート内から現在のコンテキストでの変数を取得するAPI
     * @param name {string} 変数名
     * @returns 値
     */
    $.jsontpl.fn.getvar = function (name) {
        return this.data('jsontpl')['var'][name];
    }

    /**
     * テンプレートパース
     *
     * @param tpl {jQuery element | string} jQueryエレメントまたはファイル名
     * @param json {object | string} JSONオブジェクトまたはファイル名
     * @returns {jQuery element}
     */
    var _parse =  function (tpl, json) {
        if (typeof tpl === 'string') {
            tpl = $.jsontpl.getTpl(tpl);
        }
        if (typeof json === 'string') {
            json = $.jsontpl.getJSON(json);
        } else if ((json && json.constructor !== Array)) {
            json = [json];
        }

        var ret = $.jsontpl('<div />');

        for (var idx in json) {
            var data = json[idx];
            var tpl_tmp = $.jsontpl("<div />");
            tpl_tmp.data("jsontpl", {'var':data});
            var current_context = context;
            context = tpl_tmp;
            tpl_tmp.html(tpl.clone());
            for (var tplvar in data) {
                tpl_tmp.find("[name=" + tplvar + "]").replaceWith(data[tplvar]);
            }
            ret.append(tpl_tmp.children());
            context = current_context;
        }
        ret.find("[id]").removeAttr("id");
        return ret.children();
    };

    /**
     * テンプレートパースAPI
     *
     * @param tpl {jQuery element | string} jQuery element or filename
     * @param json {object | string} object or filename
     * @returns {jQuery element}
     */
    $.jsontpl.parse = _parse;

    /**
     * テンプレートパースAPI
     *
     * @param json {object | string} object or filename
     * @returns {jQuery.jsontpl element}
     */
    $.jsontpl.fn.parse = function (json) {
        return _parse(this, json);
    };

    $.jsontpl.fn.appendTo = function (selector) {
        getContext().find(selector).append(this);
        return this;
    };
    $.jsontpl.fn.prependTo = function (selector) {
        getContext().find(selector).prepend(this);
        return this;
    };
    $.jsontpl.fn.insertBefore = function (selector) {
        getContext().find(selector).before(this);
        return this;
    };
    $.jsontpl.fn.insertAfter = function (selector) {
        getContext().find(selector).after(this);
        return this;
    };

})(jQuery);