電卓アプリ

電卓ですって?with(Math)してからevalすればいいんだよ。
<input>=<b>
<script>
with(Math) {
function $(tag){
return document.getElementsByTagName(tag)[0];
};
$("input").addEventListener('keyup', function() {
$("b").innerHTML = eval(this.value);
});
}
</script>
posted by 右京 | javascript

[backbone.js]Backbone.Collection.fetchにパラメータを生やす その2

やっぱりこっちのがいいかなぁ。
var MyCollection = Backbone.Collection.extend({
baseURL: "/modelname",

addParam: function(key, value) {
if(!this.params) this.params = [];
this.params.push(key + "=" + value);
return this;
},

url: function() {
var url = this.baseURL;
if(this.params) url += "?" + this.params.join("&");
this.params = null;
return url;
}
});

使い方:
var Message = Backbone.Model.extend({});

var Messages = MyCollection.extend({
baseURL: "/messages",
model: Message
});

var messages = new Messages();

messages.addParam("page", "1")
.addParam("order", "created")
.addParam("user", "taro")
.fetch();
posted by 右京 | javascript

[backbone.js]Backbone.Collection.fetchにパラメータを生やす

Backbone.jsのfetchはデフォルトだとパラメータを設定できないらしい?で、ちょっと小細工したら、とりあえず動いた。

解説:
元々のBackbone.Collection.prototype.fetchを_fetchに非難させて、新しく作ったfetchから呼び出す。そのときにparamsを設定できるようにする。そして、url生成時にパラメータを生やすということをやってる。


具体的なソース(一般化できそうだけど):
var Messages = Backbone.Collection.extend({

_fetch: Backbone.Collection.prototype.fetch,

fetch: function(params, options) {
this.params = params || {};
this._fetch(options);
},

model: Message,

url: function() {
var url = "/messages";
if(this.params) {
var params = [];
for(k in this.params) {
params.push(k + "=" + this.params[k]);
}
url += "?" + params.join("&");
}
return url;
}
});

使い方:
var messages = new Messages();

//http://example.com/messages?page=1を呼ぶ
message.fetch({
page: 1
});
posted by 右京 | javascript

メタプログラミングRubyの「動的にメソッドを生成する」をjavascriptで

メタプログラミングRubyの動的ディスパッチのやつをJavascriptでやるとどうなるかな。とりあえずDSはこんな感じ。
(function(window){
var DB = {
mouse: [{info: 'micresoft', price: 32},
{info: 'legetec', price: 120},
{info: 'micresoft', price: 15}],
keyboard: [{info: 'devil board',price: 12},
{info: 'God UI', price: 14},
{info: 'Great board', price: 490}],
cpu: [{info: '100 Ghz', price: 23210},
{info: '3.0 Ghz', price: 123},
{info: '1.6 Ghz', price: 10}]
};

var DataSource = function(){
this.db = DB
};

var p = DataSource.prototype;

p.get_mouse_info = function(id){ return this.db.mouse[id].info; };
p.get_mouse_price = function(id){ return this.db.mouse[id].price; };
p.get_keyboard_info = function(id){ return this.db.keyboard[id].info; };
p.get_keyboard_price = function(id){ return this.db.keyboard[id].price; };
p.get_cpu_info = function(id){ return this.db.cpu[id].info; };
p.get_cpu_price = function(id){ return this.db.cpu[id].price; };

window.DataSource = DataSource;
})(window);

やばいね。ここからパーツの値段が100ドル以上だったら*をつけるようなやつを作るにはこんな感じで。
(function(window){
var Computer = function(id, dataSource){
this.id = id;
this.dataSource = dataSource;
for(getter in this.dataSource){
if(getter.match(/^get_(.*)_info$/)){
this.defineMethod(RegExp.$1);
}
}
};

var p = Computer.prototype;

p.defineMethod = function(name){
this[name] = function(){
var info = this.dataSource['get_' + name + '_info'](this.id);
var price = this.dataSource['get_' + name + '_price'](this.id);
var label = name + ': ' + info + ' ($' + price + ')';
label = price >= 100 ? '* ' + label : label;
return label;
};
};

window.Computer = Computer;
})(window);

javascriptだとfoo.barとfoo['bar']が同じってところがポイントかな。でも、javascriptでこういうことするのはなんか不毛な気がする。
posted by 右京 | javascript

スタイリッシュなタグ入力欄のjQueryUIプラグイン Tag-it

Tag it! | jQuery Plugins

そのままでも十分に使えるんだけど、name属性が変更できない、デフォルト値を設定できない部分を修正してフォークしておいたのでよろしければどうぞ。

使い方:
$(function(){
$("#hoge").tagit({
inputName: "tags",
defaultValues: ["foo", "bar"]
});
});

<ul id="hoge"></ul>

ソース:
ukyo/tag-it - GitHub
posted by 右京 | javascript

clippyというクリップボードを使うためのswfファイル

ブラウザでコピペを使うのはけっこう面倒なんだけど、これはシンプルでいいです。javascriptから使用する例をのせときます。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>$( function() {
var url = 'http://hujimi.up.seesaa.net/flash/clippy.swf';
var bgColor = '#FFF';
var initialText = 'sample text';

var changeCopyText = function(text) {
var clippyWidget =
'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"'+
'width="110"'+
'height="14"'+
'id="clippy" >'+
'<param name="movie" value="'+url+'"/>'+
'<param name="allowScriptAccess" value="always" />'+
'<param name="quality" value="high" />'+
'<param name="scale" value="noscale" />'+
'<param NAME="FlashVars" value="text='+text+'">'+
'<param name="bgcolor" value="'+bgColor+'">'+
'<embed src="'+url+'"'+
'width="110"'+
'height="14"'+
'name="clippy"'+
'quality="high"'+
'allowScriptAccess="always"'+
'type="application/x-shockwave-flash"'+
'pluginspage="http://www.macromedia.com/go/getflashplayer"'+
'FlashVars="text='+text+'"'+
'bgcolor="'+bgColor+'"'+
'/>'+
'</object>';
$("#clippy-wrap").html(clippyWidget);
};

$('#clippy-sample').keyup( function() {
changeCopyText($(this).val());
});

changeCopyText(initialText);
});</script>
</head>
<body>
<input type="text" id="clippy-sample" value="sample text"/>
<span id="clippy-wrap"></span><br />
<textarea></textarea>
</body>
</html>

デモ:



ダウンロード:
mojombo/clippy - GitHub
posted by 右京 | javascript

東京電力のcsvをjson、jsonpで出力するやつ

作ってみたが、遅かったかな。
50万アクセス/日くらい耐えられるんじゃないかなー、たぶん。

http://ukyo-web.appspot.com/

ソース
https://github.com/ukyo/tokyo-denryoku-json-jsonp

やっぱりフレームワークを使わずにprintで表示するのが一番高速ですね。
#coding: utf8
from util import get_toden_data_json
from os import environ

print 'Content-Type: text/javascript'
print ''
if environ['QUERY_STRING']:
key, val = environ['QUERY_STRING'].split('=')
if key == 'callback':
print val + '(' + get_toden_data_json() + ');'
else:
print get_toden_data_json()
posted by 右京 | javascript

HTMLで文字詰めするアレをjQueryプラグイン化してみた

これは目の付けどころがすごいなぁ。↓
fladdict ≫ HTMLで文字詰めするタイポグラフィー用JS

とりあえずソースを見てみたら割とすぐjquery拡張にできそうだったのでしてみた。
$.fn.kerning = function(options){
var options = $.extend({
kerningInfo: FLAutoKerning.DEFAULT_KERNING_INFO
}, options);

FLAutoKerning.process(this, options.kerningInfo);
};
こんなかんじのやつをちょろっと付けて、下のようにすれば同じふうになる。
$('h3:not(.no)').kerning();
というお話でした。

ソース:
FLAutoKerning.jquery.js
posted by 右京 | javascript

プレシャスメモリーズのデッキレシピ用ユーティリティ

デッキレシピをみるとき、特にプレシャスメモリーズだと、カード名みただけじゃカードのテキストがわからない。よくある解決方法は通称で書くことだと思うけど、これがけっこう分かりづらい(JC梓とかね)。

そこでプレシャスメモリーズ -Precious Memories- Wiki - トップページの個別ページに自動的にリンクを設定するユーティリティを作成したよ。

使い方は以下。

まずは準備。headタグの最後辺りに以下のコードを貼り付けて保存する。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="atwiki.js"></script>
<script>
$(function(){
$(".atwiki").atwikiLink();
});
</script>

つぎにマークアップ。wikiでは各々のカードを識別するため「カード名(数字)」となっていると思うんだけど、それを正確に書く必要がある。具体的には以下のようになる。マークアップの仕方は三種類用意したので自分がやりやすいものを使えばいいとおもうよ。ブログだと改行を<br>に変換してくれるので一番下のやり方が楽かな。

マークアップ(リスト):
<ul class="atwiki">
<li>平沢 唯(001)</li>
<li>平沢 唯(002)</li>
<li>平沢 唯(003)</li>
<li>平沢 唯(004)</li>
<li>平沢 唯(005)</li>
</ul>

マークアップ(単体):
<div class="atwiki">平沢 唯(001)</div>
<div class="atwiki">平沢 唯(002)</div>
<div class="atwiki">平沢 唯(003)</div>
<div class="atwiki">平沢 唯(004)</div>
<div class="atwiki">平沢 唯(005)</div>

マークアップ(改行):
<div class="atwiki">
平沢 唯(001)<br>
平沢 唯(002)<br>
平沢 唯(003)<br>
平沢 唯(004)<br>
平沢 唯(005)
</div>

Demo:
atwiki.html

ダウンロード:
atwiki.js

Enjoy:-)
posted by 右京 | javascript

そういえば、$.eachは便利ですよね

普通のfor文だとクロージャ書くが面倒なんだけど、$.eachはそのへん楽だねー。
$.each($(".each-closure"), function(){
var count = 0;
$(this).click(function(){alert(++count);});
});

デモ:
posted by 右京 | javascript

とりあえずWebGLで三角形を表示してみた

とりあえず読んで欲しい記事(すごく参考にしました):
OpenGL入門
JavaScript でリアルタイム 3DCG を実現する WebGL の使い方 - WebOS Goodies
WebGL Lesson 1 – A triangle and a square | Learning WebGL
床井研究室 - 第1回 シェーダプログラムの読み込み

以下デモです。んー、三角形ひとつ描くのに100行以上ってのは面倒だな。
webgl-tri.html
posted by 右京 | javascript

javascriptで現在時刻(ミリ秒)を取得

忘れる前にメモ。
new Date().getTime()

newしないと同じ時間になるよ。

で、こんなもんを作っておけば便利。
var TimeUtil = {
getCurrentTimeMillis: function(){return new Date().getTime();},
benchmark: function(callback){
var start = this.getCurrentTimeMillis();
callback();
return this.getCurrentTimeMillis() - start;
}
};


//足し算のベンチマーク
$("#current-time-millis-add-button").click(function(){
alert(TimeUtil.benchmark(function(){
var x = 0;
for(var i = 0; i < 1000000; i++) x++;
}));
});

//掛け算のベンチマーク
$("#current-time-millis-mul-button").click(function(){
alert(TimeUtil.benchmark(function(){
var x = 1;
for(var i = 0; i < 1000000; i++) x *= 1.01;
}));
});


デモ:



posted by 右京 | javascript

Pixiv Ranking Checkerを作った

さっき作った。ダウンロードは以下から。
Pixiv Ranking Checker

まぁ、作ったと言っても、Yahoo pipesでゴニョゴニョしてjsonpしただけですが。詳しくは、下のコードを参照してください。
<style>
html, body{overflow-x:hidden; margin:0; padding:0; width:660px;}
a{border:0; width:160px; height:160px; display:table-cell; text-align:center; vertical-align:middle;}
a:hover{background-color:#ddd;}
</style>
<div id="content"></div>
<script>
function $(json){
var ranking = [];
for(var i = 0; i < 40; i++){
ranking.push(json.value.items[i].content);
if((i + 1) % 4 == 0) ranking.push("<br />");
}
document.getElementById("content").innerHTML = ranking.join("");
}
</script>
<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_id=0c04ece63e7ef52a8a2ea94e877d1176&_render=json&_callback=$"></script>
posted by 右京 | javascript

戦場ヶ原ひたぎさんがクルクル回るよ



HTML5のrangeというフォーム要素を用いて実装してみた。このスライダーはjQueryのchangeメソッドからイベントを取れるのでけっこう楽に実装できたかな。フィギュアのほうは最近買った物。クオリティが高くてついポチってしまった。そのフィギュア(戦場ヶ原ひたぎ)を100均で買った回転テーブルに乗せて、ちょっとづつ回転させながら撮影したものを横にダーっとつなげたものを画像として使ってみた。225px*300px*38枚分で750KB、重いね。あと、携帯で撮ったのでブレが酷い。やっぱり三脚とデジカメが欲しいね。

$(function(){
var width = 225;
var $foo = $("#foo");
var $img = $("#img");
$foo.change(function(){
var val = $foo.val();
$img.css("background-position",-val*width + "px 0");
});
var interval;
var i = 0;
$("#play").toggle(function(){
$(this).text("stop");
interval = setInterval(function(){
i = (i + 1) % 38;
$img.css("background-position", -i*width + "px 0");
}, 100);
},
function(){
$(this).text("play");
clearInterval(interval);
});
});

posted by 右京 | javascript

javascriptでよくやるテクニックその1

返ってきた値がundefinedとかnullだったときに規定値を代入する。
var foo = bar() || "default value";
見やすく書きやすくてグッドだと俺は思う。
posted by 右京 | javascript

重い処理にはtaskQueue

XHR絡みで急に必要になったので作成、多分ありがち。

/**
* taskQueue.js
*
* example:
* var taskQueue = new TaskQueue(function(){
* alert("complete!"):
* }, 5000);
*
* taskQueue.set(hevyFunction1);
* taskQueue.set(hevyFunction2);
* taskQueue.set(hevyFunction3);
*
* taskQueue.start();
*/

(function(window){

var TaskQueue = function(complete, taskInterval){
this.task = [];
if(!taskInterval) this.taskInterval = 1000;
if(!complete) this.complete = function(){};
};

TaskQueue.prototype = {
set: function(callback){
this.task.push(callback);
},

start: function(){
var self = this;
var interval = setInterval(function(){
if(self.task.length > 0){
self.task.shift()();
} else {
clearInterval(interval);
self.complete();
}
}, this.taskInterval);
}
};

window.TaskQueue = TaskQueue;
})(window);
posted by 右京 | javascript
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。