2012/03/31

Sapporo.js-20120331

テストフレームワークの紹介

QUnit

jQueryから分離
XUnit系

jasmine

BDD for JavaScript
RSpecっぽい

whiskey

最近よさげ？
Nodeで使いやすいように作ってある
ドキュメントが少ない

mocha

@tricknoesさんがお気に入り
フレキシブル
実行結果の出力形式が豊富
- JSONとかTAPとか

mochaの準備

npm install -g mocha
npm install expect.js

current dirにtest/を作ってテスト用ファイルを作る

describe('Example', function() {
    it('should passed test', function() {})
}

mochaを実行すると、test/以下のファイルを実行してくれる

追記: mochaのinstall時に-gをつけないと、mochaコマンドを直接叩けない

mochaのその他メモ

-Rで出力を切り替えられる。指定できるフォーマットは--reportersで確認
-wでtest以下のディレクトリの変更をwatch
-Gを付けるとGrowlに通知

JavaScript: The Good Partsの読み合わせ

P.90のarray.pop()まで進んだ

"hoge"とString("hoge")の違いについて

確認方法

Object.prototype.self = function() {
    return this;
}
 
 
typeof ("hoge").self();
// "object"
 
 
("hoge").self().valueOf();
// "hoge"

tricknotesのぼうけんのしょ jsのプリミティブな型について

遅延再定義 @oosugi20さん

    var func = function() {
        var count = 0;
        var hoge = $('#hoge');
        $hoge.text('1回目のクリック');
 
        // 2回目以降は↓の関数のみ実行される
        func = function () {
            count += 1;
            hoge.text('2回目以降のクリック(' + count + ')');
        };
    }
 
    $(function(){
        $('#btn').on('click', function() { func(); });
    });

countによって処理をわけているけど、毎回countを比較しないので効率がよい
jQueryオブジェクトを入れる変数にはプレフィックスとして$をつけてる

2012/03/24

SaCSS vol.32 CSS3＆CSSアニメーション再！＋スマホサイトコーディングTips

SaCSS vol.32

CSS3＆CSSアニメーション再！＋スマホサイトコーディングTips
h2hamさん

box-shadow

本体をpoisition:relativeにする
before, afterで影を作る
z-indexを使用して、擬似要素の上にbox要素が来るようにする

transition-*

transition-durationで変更にかかる時間を指定できる
transition-delayで変更開始時間を指定
transition-timing-functionでアニメーションの挙動を変更できる
- linear
- ease
- ease-in
- ease-out
- ease-in-out

@-webkit-keyframes

動作時間の割合毎に変化して欲しいプロパティを指定する

/* 移動させるアニメーション */
@-webkit-keyframes move {
    0% {left: 0; top: 0;}
    50% {left: 200px; top: 200px;}
    100% {left: 500px; top: 500px;}
}

-webkit-animation-* で作成したkeyframeの実行回数、時間等を指定する

UI/ボタン

display:inline-blockが良さげ
- blockだと横に伸びる
- inlineだとmargin等が効かない
グラデーションを入れてそれっぽく
- Ultimate CSS Gradient Generatorで簡単にグラデーションのCSSを作れる
使うタグは用途によって使い分ける

UI/タブ

labelで作りcheckboxと連動させて、アクティブな状態を保持できる
- input自体はdisplay:noneで隠しておく
- 擬似要素の:checkedとnth-of-typeでボタンのCSSを変更する
inputタグはlabelの前に置く
- 前の要素をCSSで指定するのは面倒
- nth-of-typeを使うためにlabelタグの前に置く模様

UI/アコーディオン

checkboxをradioに変更
inputとlabelの並び順も書きやすい用に変更しておく
閉じてる状態では高さは0, 開いてる状態ではautoを指定している
autoではアニメーションさせられないので、高さをちゃんと指定する必要がある

その他

要素によってはアニメーションできないこともある
- グラデーション、角丸とか
- ブラウザ依存なので確認が必要
jQuery Mobileの紹介

2012/03/19

第10回北海道情報セキュリティ勉強会の備忘録

2012/03/17(土)に開催された第10回北海道情報セキュリティ勉強会を行って来ました。

テーマは「バイナリ解析」

メインセッションがeagle0wlさんの「OSS/Java/.NETプログラマが意識すべきバイナリ解析の素養」でした。

最近Androidを触っている
目grep が面白かった

という個人的事情もあり、ホットなテーマなので拝聴してきました。

内容はリバースエンジニアリングとソフトウェアコピーの歴史的な話しで前半が終わり、後半は最近のスマートフォン周りの難読化の必要性、リバースエンジニアリングの前向きな利用方法と言った感じでした。

歴史的な話はそれはそれで面白かったですが、解析技法等が紹介されるわけでもなくイントロダクション的な感じで終わったのが残念でした。

2011/12/15

Hokkaido.pm #6に行ってきました

ブログを書くのが遅れましたが、参加してきました。詳しいレポートはhirataraさんの記事をご覧ください。

今回は関東から5名も参加していただけました。皆様、ありがとうございます！

sugyanさん
nekokakさん
charsbarさん
xtetsujiさん
hirataraさん

Carton使ってみた

YAPC::Asia Tokyo 2011でCartonの発表をみていたので、その後に使ってみた感想を発表してきました。
簡単にまとめるとお手軽で超便利って感じです。使い方が凄くシンプルなので、発表内容があまりなくて焦りました。
今後もcartonを使っていくんじゃないかと思います。

Use Carton

View more presentations from aloelight

感想等

akiymさん

Skype::AnyとAnySan::Providerの話し。
いい感じ！と思ったのですが、Skypeクライアントが起動していないとSkype APIは使えないそうなのでちょっと悩みどころです。

nekokakさん

以前、nekokakさんに「ソフトウェア開発のプロセス」を聞きたいとリクエストしていましたが、スルーされた経緯がありました。
しかし、今回は最近実装した分散JobQueue『Clutch』の開発の話しと合わせて聴かせていただけました。
JobQueueも今回リクエストしていたので、完全に「俺得」な内容でした。ありがとうございます。

懇親会ではTengの話しを聞かせてもらって、やはり今後はDBIx::SkinnyじゃなくてTengだと感じました。余談ですが、JobQueueはSchwartzとGearman、ContainerはScope::Containerを使ってます。

xtetsujiさん

xtetsujiさんは「mod_perl hacks PHP」というタイトルで、PHPがmod_perlの処理フェーズの中でPerlResponseHandlerの部分しか使ってないので他のフェーズはいじり放題という内容でした。この発想はなかったなーと感心してしまいました。尚、発表の内容はフィクションですので、実在の団体とは関係ないそうです。

hirataraさん

PerlのGCがreference counterなので、うっかり循環参照するとメモリリークしたりするわけです。そんな循環参照を見つけたりする方法の話しで、私が主に使うDevel::Cycleも紹介されてました。

sugyanさん

全裸ではありませんでしたが、雪が積もってる中で、なんと雪駄でした！
除雪されてない場所に果敢に突っ込んでいたのが印象的でした。

YAPC::Asia Hokkaidoについて

前からonagataniさんがやりたいと言っていたのですが、ついに動き出すようです。
不安もありますが、可能な範囲でお手伝いしていこうかと思います。

2011/11/20

[Perl][CPAN]動的にsubroutine呼び出しをするSub::Applyを書いてみた

動的にclass methodを呼びたい場合は割と簡単で、以下のように書ける

    package Foo;
    use strict;
    use feature 'say';
    sub new { bless {}, shift }

    sub sum {
        my $self = shift;
        my ( $x, $y ) = @_;
        say $x + $y;
    }

    package main;
    use strict;
    use feature 'say';

    my $obj  = Foo->new;
    my $func = 'sum';
    if ( $obj->can($func) ) {
        $obj->$func( 1, 2 );
    }
    else {
        say "No such method => $func";
    }

しかし、動的にsubroutineを呼びたい場合はちょっと泥臭くなる

    use strict;
    use feature 'say';

    sub sum {
        my ( $x, $y ) = @_;
        say $x + $y;
    }

    my $func = 'sum';

    {
        local $@;
        eval "$func(1,2)";
        if ($@) {
            say "Oops! $@";
        }
    }

    {
        my $code = do {
            no strict 'refs';
            *{$func}{CODE};
        };
        if ($code) {
            $code->( 1, 2 );
        }
        else {
            say "Oops! Undefined subroutine $func";
        }
    }

evalでstringを評価するか、no strict 'refs'してからsymbol tableを確認する方法があります。

速度面を考えるとevalしたくないし、かと言ってno strict 'refs'をして直接symbol tableを触りたくない。
こう言った泥臭いことはmoduleに隠蔽しちゃうのがいいんじゃないかと思ったので、Sub::Applyを書きました。

Sub::Applyの使用例

    use strict;
    use feature 'say';
    use Sub::Apply qw(apply apply_if);

    sub sum {
        my ( $x, $y ) = @_;
        say $x + $y;
    }

    my $func = 'sum';

    {
        # $funcがない場合、croak
        apply($func, 1, 2);
    }
    {
        # $funcがない場合、carp
        local $Sub::Apply::WARNING = 1;
        apply_if($func, 1, 2);
    }
    {
        # $funcがなくても何もしない
        apply_if($func, 1, 2);
    }

CPANとgithubにupしてあります
現在のversion(0.04)では、printf等のcore functionは呼び出せませんので注意してください。

2011/11/19

[Perl][ORM][Teng] Tengでbulk_insertする場合はTeng::Plugin::BulkInsertを使おう (追記: bulk_insertがcoreに取り込まれました)

0.14_01からbulk_insertはcoreに取り込まれました！！

Plugin::BulkInsertはまだ残っているようですが、DEPRECATEDです。load_pluginを使わずに、そのままbulk_insertを使えます

Tengでbulk insertをしたくなったのですが、bulk_insertのmethodがないのでSQL::Makerで書いてしまいました。
後でTwitterでnekokakさんにPluginにあるよと教えていただいたので、再実装しなくて大丈夫です！

ちなみに現在(0.14)のPlugin以下はこんな感じ。

Teng/Plugin
    ├── BulkInsert.pm
    ├── Count.pm
    ├── FindOrCreate.pm
    ├── Pager
    │   └── MySQLFoundRows.pm
    ├── Pager.pm
    └── Replace.pm

使い方は簡単。Tengを継承したクラスでload_pluginを呼ぶだけです。後は普通にbulk_insertを使えます

    package MyDB;
    use strict;
    use warnings;
    use parent 'Teng';
    __PACKAGE__->load_plugin('BulkInsert');

    # in your script 
    my $teng = MyDB->new(...);
    $teng->bulk_insert(
        'tweet',
        [
            { id => 1, tweet => 'hoge' },
            { id => 2, tweet => 'fuga' }
        ]
    );

2011/11/13

[Perl][CPAN] App::pfswatch 0.07をリリースしました

変更点

--pipeオプションの追加

--pipeオプションを付けると実行コマンドのSTDINに変更されたファイル名が渡されます。
後はxargsなりで引数に変換するとかしてもらえるといいんじゃないでしょうか。

    $ pfswatch t/ --pipe --exec xargs prove -lr

しかし、本当に同時に更新されないと複数のファイル名が渡ってこないので微妙。
実行までのintervalをオプションで付けた方がいいかも

Regexp::Assembleを削除

qr//でもいい程度しか使ってなかったので、削除しました。

登録: 投稿 (Atom)