Home > 2009年11月

2009年11月

JavaScriptでカードをめくるアニメーション

2009-11-24 (Tue)
JavaScript

ふと思いついたのでやってみました。
こういうのこそCanvasでやれよ、なんですが今回はDOMです。

JavaScriptでカードをめくる

めくるのところに何てキーワードを使えばいいかわからず、
参考文献探し（検索）に苦労しました。
※ 裏返すとか反転とか回転とか・・・。

最終的に以下のFlashコミュニティに助けられました。感謝。

FLASH-JP.COM - フォーラム

cosでできるんですねー。
自力（算数できない）じゃ絶対思いつかんなぁ。

何はともあれ、うまくいってよかったです。
※ まぁ結局移植しただけなんですけどね^^

Comments: 0
TrackBack: 0

慶應義塾大学SFC ORF2009に行ってきた。

2009-11-23 (Mon)
日記

友達に誘われるがまま、
慶應義塾大学SFC ORF2009【Gardens for Ingenuity -断面の触感-】
に行ってきた。

正直そこまで興味なかったけど、
文具王の話とかなりおもしろくて、行って良かった。
※ どうしても自分だとプログラミングよりセミナーしか選ばないしね。

あと、

w3cのステッカーもらた＼(^ｏ^)／

Comments: 0
TrackBack: 0

sortcss.plが素晴らしかったのでコードリーディングを兼ねてJavaScriptに移植してみた

2009-11-22 (Sun)
Perl

hail2u.net - Weblog - CSSのプロパティをソートするPerlスクリプト
本エントリ執筆時の最新スクリプト→sortcss.pl

いやぁ、ホントにこういうのを待ってました！
いつも自分の中で何となく、marginの次はpaddingでその次はborderで・・・とか書きながら、
決まった順番に簡単に並べ替えてくれるやつないかなぁと思ってたんですよねー。
（自分で作れよ、という話は置いといて）
これからはこのスクリプトを使って、仕様順に並んだスマートなcssを書いていきたいと思います。

さて、このお役立ちスクリプトはPerlで書かれています。
perl勉強中の身の僕としてはコードリーディングするっきゃないということで読んでみました。

あと、便利さを体感してもらうためにJavaScriptへの移植版も作ってみます。

それでは、久しぶりに長文エントリのはじまりはじまり。
※ エントリ書いてる途中に元のソースが何回か変わって
　　断念＆放置しかけたのは秘密です。

Perlを読む

それでは順に読んでいきましょう。

     1  #!/usr/bin/perl
     2  
     3  # Author:   Kyo Nagashima , http://hail2u.net/
     4  #           xaicron, http://blog.livedoor.jp/xaicron/
     5  # License:  MIT license (http://opensource.org/licenses/mit-license.php)
     6  # Modified: 2009-11-17T23:09:27+09:00

1〜6行目はshebang（インタプリタの指定）とスクリプトに関するコメントです。
ライセンス代わり（？）に引用しておきます。

     8	use strict;
     9	use warnings;

次も問題ないですね。
strictなスクリプトのお約束です。

    11  # CSS2.1
    12  my @property_order = qw(
    13  margin
	：
	：
   128  speak-header
   129  );

11〜129行目はCSS2.1のプロパティ一覧の配列を作成しています。
qw()は文字列リスト演算子といい、クォートとかを書かずにリストを簡単に作成できます。

   131  # CSS3 and vendor extension for CSS3 
   132  push @property_order, qw(
   133  background-clip
   	：
   	：
   364  -webkit-animation-delay
   365  );

   367  # Vendor extension
   368  push @property_order, qw(
   369  -moz-background-inline-policy
   	：
   	：
   469  -ms-zoom
   470  );

   472  # Other CSS extensions (without vendor prefix)
   473  push @property_order, qw(
   474  image-rendering
   475  ime-mode
   476  pointer-events
   477  text-rendering
   478  );

131〜478ではcss3やブラウザ拡張のプロパティをpush()でproperty_order配列に追加しています。

さて、ここからいよいよロジック部分に入りますので、
丁寧に見ていきます。

   480  # Create hash: key => property, value => index
   481  # See also: http://blog.livedoor.jp/xaicron/archives/50913074.html
   482  my %property = do {
   483        my $i = 0;
   484          map { $_ => $i++ } @property_order;
   485  };

480〜485では各プロパティと順序を対応づけたハッシュを作成しています。
と、これじゃコメントを和訳しただけか。

doブロックで囲んでるので最後の文の処理結果が変数に返ります。
で、その最後の文であるmapでは、
プロパティ配列の各要素を取り出してkeyに、
iをカウントアップしたもの（つまり、並び順）をvalueに持つハッシュを作成しています。

   487	my $css = join "", <STDIN>;

さて、そろそろぱっと見で何をしてるか理解できなくなってきました。
自分のperl能力の向上してなさに愕然とします。

とまぁ自虐はいいとして、487では標準入力の内容を一気に読み込んでます。
通常は1行ごとに読み込みますが、リストで評価してやれば全部読み込むということになってます。

つまり、こういうことですね↓

#!/usr/bin/perl

use strict;
use warnings;

# これだと一気に読んじゃって比較にならない。
# printはリストコンテキストで評価するので。
# print <STDIN>;

# 1行読み込み
#my $input = <STDIN>;

# 全部読み込み
my $input = join "", <STDIN>;

print $input;

ただ、下記のコードの方が良いという記述もちらほらとありました。
（区切り文字を変えて読んだ方がjoinで処理しない分速いのかな？）

my $data = do { local $/; <STDIN> };

参考：
　「Perl, Python, Ruby の比較」があまりにもいい加減な件 - odz buffer

あと、<STDIN>とかはエスケープしないとタグと解釈されちゃうので注意です。

・・・しまった、ただでさえ長文の予定なのに脱線した。
次、行きます。

   488	$css =~ s/{(.*?)}/"{".sort_properties($1)."}"/imgse;
   489	
   490	print $css;

488がソート処理の呼び出しです。
{〜}で囲まれた部分をsort_properties()の結果に置換しています。
（eオプションがあるので置換後の文字列をperl式として評価）
あと、sは"."を改行にもマッチさせるフラグです。JSにもこれが欲しいですね^^

結果を490でprintで標準出力にoutputしてこのスクリプトは終了です。

それでは、sort_properties()は何をしているのでしょうか？

   492  sub sort_properties {
   493    # Remove leading line-breaks
   494    (my $rules = shift) =~ s/^\n+//;
   495  
   496    # Orcish Maneuver
   497    # my %temp;
   498    # my @sorted_rules = sort {
   499    #   ($temp{$a} ||= check_order($a)) <=> ($temp{$b} ||= check_order($b))
   500    # } split "\n", $rules;
   501  
   502    # Schwartzian Transform
   503    # See also: http://gist.github.com/236860
   504    my @sorted_rules
   505      = map  { $_->[0] }
   506        sort { $a->[1] <=> $b->[1] }
   507        map  { [ $_, check_order($_) ] }
   508        split "\n", $rules;
   509  
   510    return "\n" . join("\n", @sorted_rules) . "\n";
   511  }

まず、494でshiftで取り出した引数から{直後の改行を削除しています。
（と思ってますが実はこの部分、よくわかってません。なので移植も適当です^^）

504〜508がシュワルツ（シュウォーツ）変換によるソート処理です。
シュワルツ変換とは、ソートに必要な計算を比較の都度やらずに、
事前に一度だけ処理して保持しておくことで、無駄をなくす方法です。

今回の場合は、「改行でsplit()した各行」と「計算した順序」を事前に配列に入れておき、
その配列を2列目（順序）でソートして、
1列目（各行の内容）を返すという流れになっています。

その結果を再び改行区切りに戻せば並び替え完了というわけです。

それでは、最後に並び順を計算するcheck_order()です。

   513  sub check_order {
   514    my $line = shift;
   515    my $order = 10000;
   516  
   517    if ($line =~ /^\s*(.+?)\s*:/) {
   518      if (defined $property{$1}) {
   519        $order = $property{$1};
   520      }
   521    # } else {
   522    #   warn "Unknown property: $1";
   523    }
   524  
   525    return $order;
   526  }

この関数は、cssのプロパティ名を正規表現で抽出し、
propertyハッシュから順序を取り出すという単純なものです。
（なければ10000を返し、最後とする）

さて、これでこのスクリプトの全貌がわかりました（つもりです）。
※ 間違ってたらご指摘をお願いします・・・。

JavaScriptへの移植

以下に置いておきますのでご自由に。
ライセンスはオリジナルと同じくMIT。

いつも通り適当実装なので、突っ込み歓迎です。
※ ちょっと修正[2009/11/23]
　　→無駄なグローバル変数を削除。
　　　CssSorter.sort()をsortcss()に。

cssSorter

長文すぎるのでコードの説明は割愛しておきます。
やってることは同じですしね。

ちなみにプロパティ配列のJSON変換はこんな感じでやりました。

sudo cpan
cpan[1]> install JSON
cpan[2]> q

cp sortcss.pl sortcss2json.pl
vi sortcss2json.pl

 10 use JSON;

491 #print $css;
492 my $json = JSON->new->encode(\%property);
493 print $json;

perl sortcss2json.pl > property.js

本日のエントリは以上です。
Perl使いへの道のりはまだまだ遠いですね！

Comments: 0
TrackBack: 0

Macでjetpack.notificationsがエラーになる

2009-11-15 (Sun)
Firefox

jetpackでnotifications.showってやると、
「Unable to display notification」ってエラーが出てずっと動かなかった。


// 試してたのはこんなコード
jetpack.future.import('menu');

(function() {

jetpack.menu.context.page.add({ 
    label: 'test', 
    command: function() { 
        jetpack.notifications.show({
            title: 'test',
            body: 'test'
        }); 
    }
});

})();

まぁ開発中だしそんなこともあるか、と思って気にしてなかったんだけど・・・。
どうもそんな類いのバグ情報は聞かないので、
僕の環境のせいなんじゃないかと思って調べてみた。

すると、Googleグループにエラーメッセージそのまんまのスレッドが。
Unable to display notification - mozilla-labs-jetpack | Google グループ

で、そこに、

自己解決。
Growlの問題っぽかったから再インストールして、
Firefox再起動したら直ちゃった^^（意訳）

との記載が。

んっ？再インストール？
入れた覚えすらないぞ・・・。

通知ソフトが標準で入っていると思い込んでいただけというオチ。

以下からインストールして、Firefoxを再起動で完了。

Growl

なんて無駄な時間を・・・。

Comments: 0
TrackBack: 0

今さらだけど、canvasでCAPTCHAを書いてみた

2009-11-15 (Sun)
Canvas

既にそこらじゅうでやられてるだろうし、
CAPTCHAという存在自体失敗とか言われてる状況ですが・・・。

夜勤の暇つぶしに考えてたプログラムを書いてみたら、
珍しく思った通りに動いたので、公開してみます。

本当は文字を歪ませたり、表示位置を変えたりしなきゃなんですが、
その辺りは無視で。

あと、判定がOKになった後どうするかを考えてなかったので、
とりあえずsubmitボタンをappendして、押したらOKとalertしてます。

CANVTCHA

何に使えるかって？
えっ、それは・・・。