Born Neet

今日、外からこのブログを見たら、
記事タイトルの濁点が文字化けしてた。
（本文は正常）

なんじゃこりゃ！？
・・・Mac OS X 上での濁音半濁音の文字コードに注意 – 1/4dot Blogを読んでわかりました。

僕は以下のようなステップでブログを書いています。

1. 下書き用のhtmlテンプレートファイルをコピー
2. ファイル名を記事タイトルにrename
3. テンプレート内のh1要素にファイル名をコピペ ← ！
4. 記事を書き終わったら、忍者ブログ上にコピペ

はい、完全にステップ3のせいでした。

というわけで、
今後は編集中にファイル名を変更できるmacの特性（？）を活かし、
ステップ2、3を入れ替えて作業することにします。
（日本語ファイル名やめれ）

ご迷惑をおかけしました_ _
（Vistaでは起きない為、発見が遅れてしまいました・・・。）
※ 一応直したつもりですが、まだ化けてるところがあったら
　教えてもらえるとありがたいです。

macbook用のケース（↓）を買ったんだけど、
当然ながらPC以外のものが一切入らない。



デザインは気に入ってるんだけど、さすがに不便なので、
こいつと一緒に持てるカバン（肩掛けタイプか、気軽に持てるサイズの）を探してた。

そんな中だったので、
電車の中刷り広告に釣られてまんまと買ってしまった・・・。

（620円）

横に並んでたのもついつい手に取ってしまった。

（こっちも620円）

雑誌の内容とか全く見てないけど、
結局ついでに買ったstreet jackとやらの方が好みでした。

勉強会でこれを背負いながら、
w3cのステッカー付きのmacか、
初期型のeeepcをいじってる引きこもりがいたら、
僕かもしれません。

皆さんも付録にはご注意を。
（まぁ合計しても、HTML5関連の記事につられたSoftware Designより安いんだけどね。）

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

JavaScriptでカードをめくる

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

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

FLASH-JP.COM - フォーラム

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

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

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

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

あと、



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

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使いへの道のりはまだまだ遠いですね！