2012/03/31

Sapporo.js-20120331

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の読み合わせ

遅延再定義 @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等が効かない
  • グラデーションを入れてそれっぽく
  • 使うタグは用途によって使い分ける

UI/タブ

  • labelで作りcheckboxと連動させて、アクティブな状態を保持できる
    • input自体はdisplay:noneで隠しておく
    • 擬似要素の:checkednth-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プログラマが意識すべきバイナリ解析の素養」でした。

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

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

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

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