Chrome App: JSON Pretty Printer をリリースしました

以前作ったJSONを整形するHTMLのツールをChrome Appとして公開しました。Chrome Web Storeに公開されています。

ただ受け取ったJSONを整形するだけのもの凄くシンプルなツールですが、よければ使ってください。

JSONのPritty PrintするHTMLページを作った

ちょくちょく必要になるのでHTML/JavaScriptでJSONをPritty Printするツールというかページを作りました。

• JSON Pritty Printing

内容は単純に入力に対してJSON.stringifyしているだけ。おまけとして、zClipというクリップボード用jQueryプラグインを使って、出力結果をクリップボードにコピーできるようにしてある。prettyprintの部分はこんな感じ。

var src = $('#src').val();
var obj = JSON.parse(src);
var formatted = JSON.stringify(obj, undefined, 2);

ちなみに前にも書いているけど、これを使わない場合はPythonのワンライナーでやっていいる。

$ echo '{"foo":"FOO", "bar": [1, 2, 3]}' | python -mjson.tool
{
    "bar": [
        1, 
        2, 
        3
    ], 
    "foo": "FOO"
}

jQueryでsubmitするとき、name属性があるとうまくいかない

タイトルで全て。

jQueryを使ってフォームをsubmitするとき、submit要素にname属性ががあるとうまく動作しないようなので、使わないようにする。

jQueryでチェックボックス

jQueryでラジオボタン／チェックボックスを操作するとき、attr("checked", "checked")だと２回目以降うまく動かないので、prop("checked", true)を使うのが正解。

// これはOK
$("input[type=radio]").prop("checked", true);

// こっちは２回目以降うごかない
$("input[type=raido]").attr("checked", "checked");

Rails3のviewで、JavascriptのオブジェクトにRubyのオブジェクトをjson(など)で渡す

Rails3のview(erb)で、Rubyのオブジェクトをto_jsonしたものをJavascriptの変数に設定する際は、html_safeメソッドを使う。

var json = <%= {:foo => "FOO"}.to_json.html_safe %>;

Javascriptで年初からの日数／週数を取得する

Javascriptで年初からの日数と週数を数えるメソッドをDateクラスに追加する。週数の方は、日曜を起点とした週数を数える（Rubyの%Uに相当）。

Date.prototype.getDayOfYear = function() {
  var onejan = new Date(this.getFullYear(), 0, 1);
  return Math.ceil((this - onejan) / 86400000);
};

Date.prototype.getWeekOfYear = function() {
  var onejan = new Date(this.getFullYear(), 0, 1);
  var offset = onejan.getDay() - 1;
  var weeks = Math.floor((this.getDayOfYear() + offset) / 7);
  return (onejan.getDay() == 0) ? weeks + 1 : weeks;
};

使い方は:

var time = Date.now();
var today = new Date(time); // Fri Mar 02 2012 16:49:11 GMT+0900 (JST)
today.getDayOfYear(); // => 62
today.getWeekOfYear(); // => 9

参考

• Day of Year
• Week of Year

jQuery+jsonpでエラーハンドリング

jQueryの$.ajaxでjsonpを使うと、errorハンドラが発火しない。jQuery+jsonpでエラーハンドリングが必要なケースは、jquery-jsonpを使う。

$.jsonp({
  url: url,
  dataType: 'jsonp',
  callbackParameter: 'callback', // パラメータ名がjsonpではなくcallbackParameter
  success: function(data, status) {},
  error: function(XHR, textStatus, errorThrown){}
});

参考：jQuery ajax (jsonp) ignores a timeout and doesn't fire the error event

Flash7からJavascriptを呼ぶ

FlashからgetURLを利用してjavascriptを呼ぶ時、Flash Player7の組み合わせでうまく動作しなかった。 原因はobjectタグおよびembedタグのallowScriptAccessが"sameDomain"に設定されていたからで、これを"always"に変更すると正しく動作した。

prototype.js

prototype.jsを使ってPOSTでデータを送信するプログラムを作るとき、methodは'post'のように小文字で書かないといけないので注意。 以下サンプル。 function upload(){ var url="http://address"; var body = "This is body."; var myAjax = new Ajax.Request( url, { method: 'post', postBody: body, onComplete: function(){ alert("complete"); }, onFailure: function(){ alert("failure"); }, onException: function( o, e ){ alert("exception: " + e); }, onSuccess: function(){ alert("success"); } }); }