JSON::Syckで改行を含むデータをダンプすると改行の後にスペースが2個入る

Ajaxる時のサーバとのデータ交換フォーマットとして、JSONを使う時、perlでサーバ側を実装する際にはJSONとかJSON::Syckというモジュールを使うとperlのデータ構造をJSONフォーマットに変換してくれるので便利です。

昨日これを使って、サーバからデータを取得し、textareaに取得したデータを入れるということをしたところ、改行を含んだテキストだと、改行の後にスペースが2個入ってしまうという現象に遭遇しました。
要はこうなってほしいところが、

><br/>foo<br/>bar<br/>baz<br/><

こうなってしまうんです。

><br/>foo<br/>bar<br/>baz<br/><

調べてみると、クライアントで受け取ったJSONデータをevalした段階ですでにスペースを含んでいたので、サーバ側でJSONデータを作成するところに問題がありそうだということがわかりました。
そこで以下のようなスクリプトを書いて、JSON,JSON::SｙｃｋがどんなJSONデータを吐き出すか見てみました。
>

#!/usr/bin/env perl
use strict;
use JSON::Syck;
use JSON;

my $data = {
key => "foo\nbar\nbaz\n"
};

print "# Dumped by JSON::Syck $JSON::Syck::VERSION:\n";
print JSON::Syck::Dump($data), "\n";

print "# Dumped by JSON $JSON::VERSION:\n";
print objToJson($data), "\n";

<

結果は以下のとおり。

>

# Dumped by JSON::Syck 0.12:
{"key":"foo\n\
bar\n\
baz\n"}
# Dumped by JSON 1.05:
{"key":"foo\nbar\nbaz\n"}

<

どうやらJSON::Sｙｃｋを使ってダンプしたデータは、整形のため、改行の後に、スペースが2個入っているようです。それでこれをJavaScriptでevalするとこのスペースもデータとして含まれてしまうため、上記のような現象が起きたみたいです。
そもそも改行後にスペースが入ってしまうのが問題なのか、スペースが入るのは問題なくて、クライアント側のJavaScriptでのパースに問題があるのかわかってませんが、試した限りだと、IEとFirefoxでスペースつきのデータの扱い方が異なるようで、挙動が変わってしまい、困りました。

とりあえず、サーバ側で改行コードを[BR]とかに変換しておいて、クライアント側でそれを改行コードとか、<br />に変換するという風にして対処しましたが、ちょっと付け焼刃的ですかねー。

OOなJavaScriptの勉強がてら、ボタンの2度押し禁止機能を簡単に実現するライブラリを作ってみました

ちょっと時代に乗り遅れている気もしますが、最近prototype.jsをつかったOOなJavaScriptを書くのにはまっています。

今日はbindとbindAsEbentListenerの勉強がてら、これまたかなり昔話題になった「2度押し禁止ボタン」を実現するコードを書いてみました。

input.js

使い方はこんな感じです。

>

　// prototype.jsとinput.jsをロードします。
　<script type="text/javascript" src="/path/to/prototype.js"></script>
　<script type="text/javascript" src="/path/to/input.js"></script>
　<script type="text/javascript"><!--
　// windoのロード時に2度押し禁止機能を有効にします。
　Event.observe(window, 'load', function(){
　    // ボタンのIDか要素のオブジェクトを渡せばクリックすると押せなくなります。
　    new Input.DisableAfterClick('myButton');
　}, false);
　 --></script>

<

ボタンのテキストを変えたい場合は2番目の引数に代替テキストを渡します。
画像の場合は代替画像のURLを渡します。
>

new Input.DisableAfterClick('mySubmitButton2', '送信中です');
new Input.DisableAfterClick('myImageButton2', '/path/to/image2.gif');

<

一定時間経過後にボタンを再度有効にしたい場合は、3番目の引数に有効にするまでの時間をミリ秒単位で渡します。
>

new Input.DisableAfterClick('myButton', '1秒後にまた有効になります', 1000);

<

サンプルページにサンプルがあります。

また、input.jsの中身はこんな感じです。画像ボタンの扱いはもっといい方法があるのかなーとも思うんですが、おかしなところがあったら突っ込んでください。

>

var Input = new Object();
Input.DisableAfterClick = Class.create();
Input.DisableAfterClick.prototype = {
initialize : function(input, alt, timer){
this.input = $(input);
this.alt   = alt;
this.timer = timer;
this.org   = this.input.type == 'image'
? this.input.src
this.stopEvent = this._stopEvent.bindAsEventListener(this);

Event.observe(this.input, 'click', this.disable.bind(this));
},
disable : function() {
this.input.blur();
if (this.input.type == 'image'){
if ( this.alt )
this.input.src = this.alt;
Event.observe(this.input, 'click', this.stopEvent);
} else {
if ( this.alt )
this.input.value = this.alt;
this.input.disabled = true;
}
if (this.timer)
setTimeout(this.enable.bind(this), this.timer);
},
enable : function() {
if (this.input.type == 'image'){
if ( this.alt )
this.input.src = this.org;
Event.stopObserving(this.input, 'click', this.stopEvent);
} else {
if ( this.alt )
this.input.value = this.org;
this.input.disabled = '';
}
},
_stopEvent : function (evt) {
evt.stop();
return false;
}
};

<

CentOS4.3なローカル開発環境がでけた

もう2週間も前になりますが、なかなか時間がなくて作れなかったローカルな開発環境をゴールデンウィークを利用して構築しました。Vmware Player上でCentOS4.3を動かしてます。
CentOSのデフォルトのロケールがja_JP.UTF-8なので、UTF-8な環境の構築も行いました。
さらに、今までbashを使ってたんですが、zshに変更しました。

それにしても環境構築まで長かった。。

最初、colinuxにCentOS4.3を入れようと思って「coLinux 用 インストーラ」を使って、はじめたんですが、OSのインストールに時間がかかるかかる。。最初はスムースに行くんですが、ちょっとすると、真っ青な画面になって、まったく動かなくなりました。固まっちゃったのかなと、何度かインストールをやり直してみましたが、やっぱり、青い画面でとまるので、そのまま放置して寝てみることに。
8時間くらい寝て、起きた後、画面を見てみると、ちょっとインストールが進んでいました。とまっているわけではないのだなと、さらに放置しておいたのですが、なかなか終わる気配がありません。。結局インストール完了するまでに、2日くらいかかりました。。ここまで我慢してがんばってきたんですが、起動してみるとネットワークカードを認識しない。。いろいろ試してみたんですが、うまくいかなかったので、Vmwareでも試してみるかとなりました。

Vmwareへのインストールはすんなりいって、今までの苦労はナンだったんだという感じですが現在が快適なのでよしとします。

Apache::RequestからPOSTデータがとれない!?

うおーーーーー、Apache::RequestからPOSTデータがとれない！！なぜだーと小一時間悩んでいたら、こんなコード書いてました。

>

sub handler {
my $r = Apache::Request->new(shift)
my @keys = qw(foo bar baz);
for my $key ( @keys) {
my $val = $r->param($_);
warn "$val\n";
}
}

<

原因に気づいて愕然としました。。。

livedoor Reader いい！

先日ベータ版がリリースされたlivedoor Readerを使ってみました。

恐ろしく快適です。
記事をバックグラウンドで先読みしてくれていて、動作が軽快です。
さらに、キーボードショートカットが超便利。
s,a,j,k,spaceを使えば記事を次々読んでいけるし、気になる記事はpでピンをうっておいて、oで別ウィンドウで表示できる機能は恐ろしく便利です。
まら、oで別ウィンドウを開く際、ブラウザのポップアップブロックで別ウィンドウが開けないと、その旨をメッセージ欄で教えてくれたり、IMEがオンになっている状態でショートカットキーを使おうとすると、ショートカットを使うにはIMEをOFFにしてくださいと親切に教えてくれます。すごく細かいところまで作りこまれているなーと感動しました。

なんてことをやっていたら、午前中が終わってしまった。。

LWPのバージョンあげたらファイルアップロードが遅くなった

ここ最近AtomPPを使ったサービスを作っているんですが、そのためにXML::Atomをインストールしたら、LWPを使って１０MBくらいの大きいファイルをアップロードすると異常に時間がかかるようになってしまいました。
アップロード時のサーバの様子を見ているとメモリとCPUをやたらと消費しているようです。

LWPのドキュメントを読んでいるとHTTP::Request::Commonのドキュメントに$DYNAMIC_FILE_UPLOADをTRUEにセットすれば大きなファイルをメモリをあまり使わずにアップロードできるよと書いてあったので、これをTRUEにしたところ、劇的にアップロードの時間が短縮されました。

めでたしめでたし。

Sledge::Plugin::FormValidator::Simple-0.02

Sledge::Plugin::FormValidator::Simpleを0.02にバージョンアップしました。



Sledge::Plugin::FormValidator::Simple-0.02


0.01ではリダイレクト先やプロファイルをメソッドを定義することで変更できるようにしていましたが、あんまりかっこよくない気がしたので、メンバ変数として定義するようにしよう変更しました。

それと、valid_before_foo, valid_after_fooを定義することができるようにしました。
使い方はこんな感じです。

>

sub valid_before_foo {
my $self = shift;

# change profile by query param.
if ( $self->r->param('step') == 2 ) {
$self->validator->profile_name($self->profile_name . ".step2");
}else {
$self->validator->profile_name($self->profile_name . ".step1");
}

# change redirection when error is found.
$self->validator->redirect_url('/');
}

sub valid_after_foo {
my $self = shift;
my $results = $self->validator->results;
if ( found some error... ) {
$results->set_invalid('param3' => 'MY_ERROR');
}
}

<

JavaScriptでのバリデーションはまた後日対応したいです。