タグ別アーカイブ: css

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.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に対応

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);
        }

javascriptとcssを全自動で連結&圧縮する

橋の上から
Creative Commons License photo credit: amadeusrecord

ウェブサイト作るときに、最近は膨大な数のjqueryのプラグインなんかをロードしなくちゃいけない。ロードするファイルが増えるとページのパフォーマ ンスにも影響するのでソースを1ファイルにまとめて、さらに圧縮するのが効果的なんだけど、これを手作業でするのは骨が折れる。特に開発段階では頻繁にソースへの修正が入るので、効率が悪い。そういう訳で自動化した。

こうなる

無数のjsやcssを個別に開発し、HTMLにはcat.phpのパラメータとして各ファイル名を+区切りで記述する。ファイルはdir/a.jsなどとディレクトリを切っても構わない。

<script type="text/javascript" src="./js/cat.php?jquery.1.4.2.js+a.js+b.js"></script>

<link rel="stylesheet" href="./css/cat.php?dir/a.css+dir/b.css" type="text/css" />

これだけで、全てのファイルが連結され、改行やコメント、先頭のCSS以外のcharsetが削除される。また、gzip対応ブラウザにはgzipを出力し、Etagなどのキャッシュ関連のヘッダもいい感じに世話してくれる。ファイルの更新日を常に判定しているので、ファイルに変更が加わればキャッシュはクリアされる(はず)。そういう訳で、一度セットアップしてしまえば、圧縮うんぬんのことは忘れてしまって、どんどんファイルを増やそう。

方法

ライブラリとして下記をダウンロードする。

下記のように配置する。PHPのライブラリは任意の場所で構わないが、cat.phpの先頭のset_include_pathを合わせる必要がある。

[DIR]commons
├[DIR]php
│├[DIR]Minify
││├[DIR]CSS
│││└Compressor.php
│││└UriRewriter.php
││├CommentPreserver.php
││└CSS.php
│└JSMin.php
├[DIR]js
│├[DIR]cache
│├jquery.1.4.2.js
│├a.js
│├b.js
│└cat.php
└[DIR]css
  ├[DIR]cache
  ├a.css
  ├b.css
  └cat.php

※cat.phpに実行権限、cacheディレクトリに書き込み権限が必要。

Google Page Speedつながりで、次回は全自動で画像最適化のネタを書きたい。