JavaScriptでテトリスを作ってみました。
C言語のコードをそのまま移植しただけのでなんか重い。
ソースはこちら
https://drive.google.com/file/d/0B5M9qMMg3tfQOHdHNWp3cWhfNlU/edit?usp=sharing
2014年1月22日水曜日
2014年1月21日火曜日
ビットコインの論文を読んでみた
最近話題のビットコインの論文を読んで、ビットコインの技術を勉強してみました。
http://www.bitcoin.co.jp/docs/SatoshiWhitepaper.pdf
この論文相当面白いです。
仮想通貨だけあって、この論文を書いた中本哲史という人も仮想の人物らしいです。
京都大学の教授だとという噂があります。
http://www.kurims.kyoto-u.ac.jp/~motizuki/
宇宙際幾何学者らしいです。
独身。
もう、この名前や写真の髪型がめちゃくちゃ怪しいんですが、この人マジですごすぎ。
http://www.bitcoin.co.jp/docs/SatoshiWhitepaper.pdf
この論文相当面白いです。
仮想通貨だけあって、この論文を書いた中本哲史という人も仮想の人物らしいです。
京都大学の教授だとという噂があります。
http://www.kurims.kyoto-u.ac.jp/~motizuki/
宇宙際幾何学者らしいです。
独身。
もう、この名前や写真の髪型がめちゃくちゃ怪しいんですが、この人マジですごすぎ。
2014年1月20日月曜日
ブラウザで花火の物理シュミレーションをしてみた
ブラウザとJavaScriptとHTMLのdivタグだけでいろいろな数値計算シュミレーションができるんじゃないかと思って、打ち上げ花火のシュミレーション行うプログラムを作ってみました。
IntenetExplorerでも動かしたいので、あえてcanvasとかは使いません。
コンパイルいらないし、昔のBasicみたいな感じで手軽にいろいろな数値計算をするシュミレーションプログラムが作れて、とっても楽しくていい感じ。
はじめてのプログラム学習とかでも使えそう。
次はライフゲームを作ってみようと思います。
次はライフゲームを作ってみようと思います。
------------
function print(name)
{
if(name==null)return;
$("body").append(name+"<br/>");
}
function myrandom()
{
return Math.random();
}
function mysin(d)
{
return Math.sin(d);
function mycos(d)
{
return Math.cos(d);
}
$(function(){
oninit();
main();
});
var event_no=0;
var event_param1=0;
var event_param2=0;
var quantity=300;
var size = 3;
var circle=0.97;
var gravity=1.1;
var speed=5;
var top=3;
var left=2;
var color=0xffff00;
var Radian = 6.283;
var pos_x=[];
var pos_y=[];
var vel_x=[];
var vel_y=[];
var frame = 0;
function init_hanabi()
{
var i;
for (i = 0; i < quantity; ++i) {
var angle = myrandom() * Radian;
var aspeed = myrandom() * speed;
pos_x[i]=400;
pos_y[i]=100;
vel_x[i]=mycos(angle) * aspeed;
vel_y[i]=mysin(angle) * aspeed;
}
frame = 0;
}
function render_hanabi()
{
var i;
var len;
frame++;
for (i = 0; i < quantity; i++) {
pos_x[i] += vel_x[i];
pos_y[i] += vel_y[i];
vel_x[i] *= circle;
vel_y[i] *= circle;
pos_y[i] += gravity;
}
}
function view_render()
{
var i;
for(i=0;i<quantity;i++){
$("#tag"+i).css({
left: ""+parseInt(pos_x[i])+"px",
top: ""+parseInt(pos_y[i])+"px"
});
}
return 0;
}
function view_init()
{
var i;
$("body").css({
'background-color':"#000000",
});
for(i=0;i<quantity;i++){
$("body").append("<div id=\"tag"+i+"\"></div>")
$("#tag"+i).css({
'background-color':"#ffcc88",
position:"absolute",
border:"solid 1px",
width: "2px",
height: "2px"
});
}
view_render();
return 0;
}
function oninit()
{
var i;
init_hanabi();
view_init();
return 0;
}
function main()
{
var en=0;
while(event_no!=-1){
if(frame>200)return 0;
render_hanabi();
view_render();
setTimeout(main,50);
break;
}
return 0;
}
2014年1月17日金曜日
CSSで画像を中央に表示する その3
InternetExplorer6でも写真を枠にぴったしスペースをいれずに表示する方法を昨日の深夜に考えてみました。
一番外側のタグの中に横幅が3倍のタグを作って、そのなかに横幅を指定しない写真を作ればよかったんです。
タグをこんな風に3つ重ねれば、アスペクト比が33%から300%までの画像ならばどんなブラウザでも表示できます。
$(parent_tag_name).append("<div id=\tag1\"></div>");
$("#tag1").css({
position:"absolute",
width:"200px",
height: "200px",
left: "100px",
top: "100px",
overflow:"hidden"
});
$("#tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"absolute",
width:"600px",
height: "200px",
'margin-left': "-200px"
});
$("#tag2").append("<div id=\"tag3\"></div>");
$("#tag3").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"600px",
height: "200px"
});
$("#tag3").append("<img id=\"tag4\" src=\"0.jpg\"/>");
$("#tag4").css({
'vertical-align': "top",
height:"200px"
});
ソースや試験したデータはここにおいてみました。
https://drive.google.com/file/d/0B5M9qMMg3tfQVWhnNHdCZ1p6WWc/edit?usp=sharing
一番外側のタグの中に横幅が3倍のタグを作って、そのなかに横幅を指定しない写真を作ればよかったんです。
タグをこんな風に3つ重ねれば、アスペクト比が33%から300%までの画像ならばどんなブラウザでも表示できます。
$(parent_tag_name).append("<div id=\tag1\"></div>");
$("#tag1").css({
position:"absolute",
width:"200px",
height: "200px",
left: "100px",
top: "100px",
overflow:"hidden"
});
$("#tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"absolute",
width:"600px",
height: "200px",
'margin-left': "-200px"
});
$("#tag2").append("<div id=\"tag3\"></div>");
$("#tag3").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"600px",
height: "200px"
});
$("#tag3").append("<img id=\"tag4\" src=\"0.jpg\"/>");
$("#tag4").css({
'vertical-align': "top",
height:"200px"
});
https://drive.google.com/file/d/0B5M9qMMg3tfQVWhnNHdCZ1p6WWc/edit?usp=sharing
2014年1月16日木曜日
CSSで画像を中央に表示する その2
ひとつ前に書いた、CSSで画像を中央に表示するのをいちいちCSSファイルとHTMLで書くのはとても面倒です。
そこで、ライブラリをつくってみました。この関数を使って画像を表示するdivタグを自動生成できます。
全関数をInternetExplorer6、InternetExplorer8、InternetExplorer11、Firefox、Chrome、Safariで動くことを確かめる試験もしました。うーん試験がとてもめんどくさい。
----------------------------
function dispimg_create_normal(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}
function dispimg_create_right_left_cut(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "auto "+tag_w+"px"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}
function dispimg_create_top_bottom_cut(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': ""+tag_w+"px auto"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}
function dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
overflow:"hidden"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
$("#"+tag_id).append("<div id=\""+tag_id+"_1\"></div>");
$("#"+tag_id+"_1").css({
position:"static",
'layout-grid-line': ""+tag_h+"px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:""+tag_w+"px",
height: ""+tag_h+"px"
});
$("#"+tag_id+"_1").append("<img id=\""+tag_id+"_2\" src=\""+image_file+"\"/>");
$("#"+tag_id+"_2").css({
'vertical-align': "top",
'max-height':""+tag_h+"px",
width:""+tag_w+"px"
});
return 0;
}
function dispimg_create_top_bottom_cut_ie6(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
overflow:"hidden"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
$("#"+tag_id).append("<div id=\""+tag_id+"_1\"></div>");
$("#"+tag_id+"_1").css({
position:"static",
'layout-grid-line': ""+tag_h+"px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:""+tag_w+"px",
height: ""+tag_h+"px"
});
$("#"+tag_id+"_1").append("<img id=\""+tag_id+"_2\" src=\""+image_file+"\"/>");
$("#"+tag_id+"_2").css({
'vertical-align': "top",
'max-width':""+tag_w+"px",
height:""+tag_h+"px"
});
return 0;
}
function dispimg_create(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
switch(format){
case 0:
return dispimg_create_normal(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 1:
return dispimg_create_right_left_cut(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 2:
return dispimg_create_top_bottom_cut(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 3:
return dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 4:
return dispimg_create_top_bottom_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
default: // default is type3
return dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
}
}
そこで、ライブラリをつくってみました。この関数を使って画像を表示するdivタグを自動生成できます。
全関数をInternetExplorer6、InternetExplorer8、InternetExplorer11、Firefox、Chrome、Safariで動くことを確かめる試験もしました。うーん試験がとてもめんどくさい。
----------------------------
function dispimg_create_normal(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}
function dispimg_create_right_left_cut(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "auto "+tag_w+"px"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}
function dispimg_create_top_bottom_cut(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': ""+tag_w+"px auto"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}
function dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
overflow:"hidden"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
$("#"+tag_id).append("<div id=\""+tag_id+"_1\"></div>");
$("#"+tag_id+"_1").css({
position:"static",
'layout-grid-line': ""+tag_h+"px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:""+tag_w+"px",
height: ""+tag_h+"px"
});
$("#"+tag_id+"_1").append("<img id=\""+tag_id+"_2\" src=\""+image_file+"\"/>");
$("#"+tag_id+"_2").css({
'vertical-align': "top",
'max-height':""+tag_h+"px",
width:""+tag_w+"px"
});
return 0;
}
function dispimg_create_top_bottom_cut_ie6(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;
$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
overflow:"hidden"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
$("#"+tag_id).append("<div id=\""+tag_id+"_1\"></div>");
$("#"+tag_id+"_1").css({
position:"static",
'layout-grid-line': ""+tag_h+"px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:""+tag_w+"px",
height: ""+tag_h+"px"
});
$("#"+tag_id+"_1").append("<img id=\""+tag_id+"_2\" src=\""+image_file+"\"/>");
$("#"+tag_id+"_2").css({
'vertical-align': "top",
'max-width':""+tag_w+"px",
height:""+tag_h+"px"
});
return 0;
}
function dispimg_create(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
switch(format){
case 0:
return dispimg_create_normal(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 1:
return dispimg_create_right_left_cut(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 2:
return dispimg_create_top_bottom_cut(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 3:
return dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 4:
return dispimg_create_top_bottom_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
default: // default is type3
return dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
}
}
CSSで画像を中央に表示する
はじめてJavascriptでWebページを作ると、だいたい最初につまずくところが画像を枠の真ん中、上下左右ともに中央に表示する方法。いろいろなページにいろいろな方法が書いてあるのですが、InternetExplorer6で動かなかったり、position:absoluteで任意の位置に表示できなかったり。どれも一長一短です。
そこで僕も写真を中央に表示する方法をブログに書くことに参戦。
僕の使っている秘伝の方法を書きます。
・一番簡単な方法を取りたいならば1の方法をお勧めします。
・写真を枠のサイズに拡大縮小していれて、スペースを入れずに、はみ出した部分を切り取りたいのならば2と2'の方法を組み合わせることをお勧めします。
・写真を上下または左右にスペースをいれて枠のサイズに拡大縮小してほしいのならば3と3'の方法を組み合わせることをお勧めします。
InternetExplorer6で動く、スペースを入れずに写真を枠内にぴったしと入れる方法は、僕はcssだけではできないと思っています。本当はあるのかなぁ?
1 一番簡単な写真の中央部分を切り出してそのままの倍率で表示する方法
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat"
});
2 横長の写真の左右をきって、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
縦長の写真の左右にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
ただしこの方法はInternetExplorer8以下では1の動作になります。
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "auto 200px"
});
2’ 横長の写真の上下にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
縦長の写真の上下をきって、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
ただしこの方法もInternetExplorer8以下では1の動作になります。
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "200px"
});
3 写真の上下にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示でInternetExplorer6でもうごく方法
この方法は縦長の縮小する写真はだめなので3'の方法と組み合わせるとよい
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
overflow:"hidden"
});
$("tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"200px",
height: "200px"
});
$("tag2").append("<img id=\"tag3\" src=\"hoge.jpg\"/>");
$("#tag3"+n).css({
'vertical-align': "top",
'max-height': "200px",
width:"200px"
});
return 0;
}
3' 縦長写真の左右にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示でInternetExplorer6でもうごく方法
この方法は横長の縮小する写真はだめ
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
overflow:"hidden"
});
$("tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"200px",
height: "200px"
});
$("tag2").append("<img id=\"tag3\" src=\"hoge.jpg\"/>");
$("#tag3"+n).css({
'vertical-align': "top",
'max-width': "200px",
heigt:"200px"
});
----------------------------
そこで僕も写真を中央に表示する方法をブログに書くことに参戦。
僕の使っている秘伝の方法を書きます。
・一番簡単な方法を取りたいならば1の方法をお勧めします。
・写真を枠のサイズに拡大縮小していれて、スペースを入れずに、はみ出した部分を切り取りたいのならば2と2'の方法を組み合わせることをお勧めします。
・写真を上下または左右にスペースをいれて枠のサイズに拡大縮小してほしいのならば3と3'の方法を組み合わせることをお勧めします。
InternetExplorer6で動く、スペースを入れずに写真を枠内にぴったしと入れる方法は、僕はcssだけではできないと思っています。本当はあるのかなぁ?
1 一番簡単な写真の中央部分を切り出してそのままの倍率で表示する方法
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat"
});
2 横長の写真の左右をきって、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
縦長の写真の左右にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "auto 200px"
});
2’ 横長の写真の上下にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
縦長の写真の上下をきって、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
ただしこの方法もInternetExplorer8以下では1の動作になります。
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "200px"
});
3 写真の上下にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示でInternetExplorer6でもうごく方法
この方法は縦長の縮小する写真はだめなので3'の方法と組み合わせるとよい
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
overflow:"hidden"
});
$("tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"200px",
height: "200px"
});
$("tag2").append("<img id=\"tag3\" src=\"hoge.jpg\"/>");
$("#tag3"+n).css({
'vertical-align': "top",
'max-height': "200px",
width:"200px"
});
return 0;
}
3' 縦長写真の左右にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示でInternetExplorer6でもうごく方法
この方法は横長の縮小する写真はだめ
$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
overflow:"hidden"
});
$("tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"200px",
height: "200px"
});
$("tag2").append("<img id=\"tag3\" src=\"hoge.jpg\"/>");
$("#tag3"+n).css({
'vertical-align': "top",
'max-width': "200px",
heigt:"200px"
});
----------------------------
2014年1月15日水曜日
利用者の72%が利用したくないショップで買ってみた。
世の中にはいろいろなネットショップがあります。
サギまないなサイトもありますが、まじめに運営しているにも関わらず、大半の利用者が二度と利用したくないと書いているショップもあります。
http://kakaku.com/shopreview/1819/
真面目にやっていて顧客満足度が異常に低いショップというのはどのようなものなのか、とっても面白そうなので、amazonに出店しているそのショップでモバイルルータを買ってみました。
http://www.amazon.co.jp/gp/product/B00B9F8U5M/ref=oh_details_o05_s00_i00?ie=UTF8&psc=1
まず、そのモバイルルータの価格ですが、1円。
そもそも価格設定が間違っている気がします。
でも送料は500円なので、きっとそこで儲けているのでしょう。
ヤフオクでもひとつ前のモデルの落札価格が500円前後。
そんなもんなのでしょう。
多くのショップは注文して数時間で注文受付のメールが来て数時間で発送されますが、僕の注文したショップは丸一日以上注文受付のメールが来ず、そのあと3日でやっと商品が発送されますメールがきました。
そして注文から待つこと一週間、やっとの思いで商品が届きました。
やっぱり。というか予想通り。モバイルルータなんて届かなく、箱の中には下敷きが入っていました。
まぁ1円だからね。
しかし!一緒に同封されていた注文用紙には、きちんとモバイルルータと書いてあり、検品した判子まで押されています。
うーん。いったいこの人は何を検品しているのでしょう。
間違った商品が届くためには、出品時にまず何回かチェック漏れがあり、さらに商品発送時にチェック漏れがないと届かないはず。この会社、すごいです。
なので、とりあえず、出品者に違う商品が届いたとメールしてみました。
また、待つこと一日。
=====================================================================
お世話になっております。この度は弊社不手際にて大変ご迷惑をお掛けいたしまして、誠に申し訳ございません。
該当商品につきまして確認させていただきましたところ、 弊社の不手際にて、商品の出品間違いをしている事が発覚致しました。 ※商品の出品につきましては、現在出品の取り下げ、修正をさせて頂いております。
この度は大変ご迷惑、ご不快な思いをお掛け致しまして申し訳ございません。
上記理由の為、誠に申し訳ございませんが、弊社にて商品を回収させて頂き、アマゾンよりお支払い頂きました商品代金を全額ご返金にてご対応させて頂きたく存じます。
商品のご返品方法につきましては、ご返送のお手間等 お客様にご迷惑をお掛けしてしまいます為、 弊社にて返送用の着払い伝票をご用意させて頂き、ゆうパックによる集荷の手配をさせて頂きたく存じます。まず弊社から、返送用の着払い伝票を発送致します。
※発送の都合上、封筒に貼り付けされた状態でのお届けとなります。お受け取りいただいた後、お手数ではございますが その場で着払い伝票をお手元のお荷物に貼り付けて頂き 配達に伺いました配達員にそのままお渡し下さいます様お願い申し上げます。 ※お手数ではございますが発送時の梱包を再度ご利用頂き お手元の商品の梱包の程をお願い致します。既に破棄頂いております場合には、簡易のもので構いません為 簡単に梱包の程をお願い致します。 商品の集荷手配にあたり、お客様のご自宅まで配達員を派遣致します為、商品の集荷にご都合の良い日時をご連絡下さいます様お願い申し上げます。※弊社は静岡県からの集荷となります為、お住まいの東京都までは 到着までに3日ほどの日数が掛かります。その為、お時間の猶予をご検討下さいます様お願い申し上げます。お客様からのご連絡を確認でき次第、着払い伝票をご用意させて頂き、集荷の手配をさせて頂きたく存じます。この度は弊社不手際にて大変ご迷惑をお掛け致しております事改めまして深くお詫び申し上げます。ご連絡をお待ちしております。
=====================================================================
長たらしいこちらが何をしてよいか、よくわからないメールが来ました。
最初、返送用の封筒が送られてくるのかと思っていましたが、最後までよく読むと、こちから都合の良い日を返信しないといけないようです。それならばそのことを先に書いてくれないと。
僕は大体夜しか家にいないし、何時から何時までなら大丈夫なのか、土日は集配してくれるのか一切わからず。
いったいなんなんだ!このメールは。
なので返信すること数回。今度は以下のメールが来ました。
===========================================================
アマゾンでは返品による返金期限が設けられております。 一定期間を過ぎてしまうと返品・返金の意志がないものと見なされてしまい、 申し訳ございませんがそれ以降はご要望に応じる事が出来かねます。 そのため、お忙しい所誠に申し訳ございませんが、 本日より一週間程度以内に弊社へとお荷物をお送り頂けましたら 幸いでございます。 何らかの事情により期限内にご返送が無理な場合は、その旨を弊社まで メールにてご連絡頂けましたら、ご返品期間の延長をお受付させて頂きます。 お手数ですが、同封されておりました納品書と 下記内容の書類(メモでも印字でも構いません)を同封願います。
※納品書を破棄されております場合は、下記メモのみで構いません。
取引番号 :250-3424820-8547839
お名前 :吉田 ○○子 様
返品理由 :商品違い
対処 :全額返金
===========================================================
なんか注文番号や名前が違っている。
もうなんの返金手続きをしているのかさっぱりわかりません。
個人情報が流出しています。
相手がこの紙をいれて商品を送れと言っている以上、こちらもおかしいと思いながらも従います。
この紙を印刷して商品を送り返してみました。
予想されることですが、それ以来、まだ何の音沙汰もありません。
この会社、一生懸命やっているのはわかりますが、出品、発送、返金まで何一つ正しく処理できないのです。お金はいつ戻ってくるのでしょう。
きっと、相手を楽しませてくれるエンターテイメントの会社なんです。
支払った501円以上に楽しむことができます。
サギまないなサイトもありますが、まじめに運営しているにも関わらず、大半の利用者が二度と利用したくないと書いているショップもあります。
http://kakaku.com/shopreview/1819/
真面目にやっていて顧客満足度が異常に低いショップというのはどのようなものなのか、とっても面白そうなので、amazonに出店しているそのショップでモバイルルータを買ってみました。
http://www.amazon.co.jp/gp/product/B00B9F8U5M/ref=oh_details_o05_s00_i00?ie=UTF8&psc=1
まず、そのモバイルルータの価格ですが、1円。
そもそも価格設定が間違っている気がします。
でも送料は500円なので、きっとそこで儲けているのでしょう。
ヤフオクでもひとつ前のモデルの落札価格が500円前後。
そんなもんなのでしょう。
多くのショップは注文して数時間で注文受付のメールが来て数時間で発送されますが、僕の注文したショップは丸一日以上注文受付のメールが来ず、そのあと3日でやっと商品が発送されますメールがきました。
そして注文から待つこと一週間、やっとの思いで商品が届きました。
やっぱり。というか予想通り。モバイルルータなんて届かなく、箱の中には下敷きが入っていました。
まぁ1円だからね。
しかし!一緒に同封されていた注文用紙には、きちんとモバイルルータと書いてあり、検品した判子まで押されています。
うーん。いったいこの人は何を検品しているのでしょう。
間違った商品が届くためには、出品時にまず何回かチェック漏れがあり、さらに商品発送時にチェック漏れがないと届かないはず。この会社、すごいです。
なので、とりあえず、出品者に違う商品が届いたとメールしてみました。
また、待つこと一日。
=====================================================================
お世話になっております。この度は弊社不手際にて大変ご迷惑をお掛けいたしまして、誠に申し訳ございません。
該当商品につきまして確認させていただきましたところ、 弊社の不手際にて、商品の出品間違いをしている事が発覚致しました。 ※商品の出品につきましては、現在出品の取り下げ、修正をさせて頂いております。
この度は大変ご迷惑、ご不快な思いをお掛け致しまして申し訳ございません。
上記理由の為、誠に申し訳ございませんが、弊社にて商品を回収させて頂き、アマゾンよりお支払い頂きました商品代金を全額ご返金にてご対応させて頂きたく存じます。
商品のご返品方法につきましては、ご返送のお手間等 お客様にご迷惑をお掛けしてしまいます為、 弊社にて返送用の着払い伝票をご用意させて頂き、ゆうパックによる集荷の手配をさせて頂きたく存じます。まず弊社から、返送用の着払い伝票を発送致します。
※発送の都合上、封筒に貼り付けされた状態でのお届けとなります。お受け取りいただいた後、お手数ではございますが その場で着払い伝票をお手元のお荷物に貼り付けて頂き 配達に伺いました配達員にそのままお渡し下さいます様お願い申し上げます。 ※お手数ではございますが発送時の梱包を再度ご利用頂き お手元の商品の梱包の程をお願い致します。既に破棄頂いております場合には、簡易のもので構いません為 簡単に梱包の程をお願い致します。 商品の集荷手配にあたり、お客様のご自宅まで配達員を派遣致します為、商品の集荷にご都合の良い日時をご連絡下さいます様お願い申し上げます。※弊社は静岡県からの集荷となります為、お住まいの東京都までは 到着までに3日ほどの日数が掛かります。その為、お時間の猶予をご検討下さいます様お願い申し上げます。お客様からのご連絡を確認でき次第、着払い伝票をご用意させて頂き、集荷の手配をさせて頂きたく存じます。この度は弊社不手際にて大変ご迷惑をお掛け致しております事改めまして深くお詫び申し上げます。ご連絡をお待ちしております。
=====================================================================
長たらしいこちらが何をしてよいか、よくわからないメールが来ました。
最初、返送用の封筒が送られてくるのかと思っていましたが、最後までよく読むと、こちから都合の良い日を返信しないといけないようです。それならばそのことを先に書いてくれないと。
僕は大体夜しか家にいないし、何時から何時までなら大丈夫なのか、土日は集配してくれるのか一切わからず。
いったいなんなんだ!このメールは。
なので返信すること数回。今度は以下のメールが来ました。
===========================================================
アマゾンでは返品による返金期限が設けられております。 一定期間を過ぎてしまうと返品・返金の意志がないものと見なされてしまい、 申し訳ございませんがそれ以降はご要望に応じる事が出来かねます。 そのため、お忙しい所誠に申し訳ございませんが、 本日より一週間程度以内に弊社へとお荷物をお送り頂けましたら 幸いでございます。 何らかの事情により期限内にご返送が無理な場合は、その旨を弊社まで メールにてご連絡頂けましたら、ご返品期間の延長をお受付させて頂きます。 お手数ですが、同封されておりました納品書と 下記内容の書類(メモでも印字でも構いません)を同封願います。
※納品書を破棄されております場合は、下記メモのみで構いません。
取引番号 :250-3424820-8547839
お名前 :吉田 ○○子 様
返品理由 :商品違い
対処 :全額返金
===========================================================
なんか注文番号や名前が違っている。
もうなんの返金手続きをしているのかさっぱりわかりません。
個人情報が流出しています。
相手がこの紙をいれて商品を送れと言っている以上、こちらもおかしいと思いながらも従います。
この紙を印刷して商品を送り返してみました。
予想されることですが、それ以来、まだ何の音沙汰もありません。
この会社、一生懸命やっているのはわかりますが、出品、発送、返金まで何一つ正しく処理できないのです。お金はいつ戻ってくるのでしょう。
きっと、相手を楽しませてくれるエンターテイメントの会社なんです。
支払った501円以上に楽しむことができます。
皆様も一度利用してみてはいかがでしょう。
つづく。2014年1月13日月曜日
JavaScriptでCプリプロセッサを使用する
「ハイパフォーマンスJavaScript」の本にも書かれているのですが、JavaScriptでCプリプロセッサを使用するといろいろと便利です。
一つのソースファイルでC言語とJavaScriptの両方で動くものも作れます。
写真をたくさん表示するページなど、表示オブジェクトの動きの多いページを作るときは座標の計算をC言語でやれば、デバッグが早くて、テストコードも簡単に自動化できて便利です。
さらに、googleドライブを使うと、自分の使うPCやスマホでデータをすべて同期できるので、電車の中とかでも自分のソースがみれて便利。
---------------
#ifndef JAVASCRIPT
#include<stdio.h>
#ifdef _WIN32
#include<windows.h>
#endif
#ifdef unix
#include<unistd.h>
#endif
#endif /* JAVASCRIPT */
#ifdef JAVASCRIPT
#define int var
#else
#define null 0
#endif
#ifdef JAVASCRIPT
function print(name)
#else
void print(char* name)
#endif
{
#ifdef JAVASCRIPT
if(name==null)return;
$("#body").append(name+"<br/>");
#else
printf("%s\n",name?name:"null");
#endif
}
#ifdef JAVASCRIPT
function mysleep(ms)
#else
void mysleep(int ms)
#endif
{
#ifndef JAVASCRIPT
#ifdef _WIN32
Sleep(ms);
#endif
#endif
}
//
//
//
int MYEVENTNO_ONKEYDOWN=1;
int MYKEYCODE_RIGHT=37;
int MYKEYCODE_LEFT=39;
int MYKEYCODE_UP=38;
int MYKEYCODE_DOWN=40;
int event_no=0;
int event_param1=0;
int event_param2=0;
int a_x=50;
int a_y=50;
//
//
//
#ifdef JAVASCRIPT
$(function(){
oninit();
main();
});
#endif
//
//
//
#ifdef JAVASCRIPT
function cursor_init()
#else
void cursor_init()
#endif
{
a_x=50;
a_y=50;
}
#ifdef JAVASCRIPT
function cursor_update()
#else
void cursor_update()
#endif
{
if(event_param1==MYKEYCODE_LEFT){
a_x+=50;
if(a_x>500)a_x=500;
}
if(event_param1==MYKEYCODE_RIGHT){
a_x-=50;
if(a_x<50)a_x=50;
}
if(event_param1==MYKEYCODE_DOWN){
a_y+=50;
if(a_y>300)a_y=300;
}
if(event_param1==MYKEYCODE_UP){
a_y-=50;
if(a_y<50)a_y=50;
}
}
//
//
//
#ifdef JAVASCRIPT
function view_init()
#else
void view_init()
#endif
{
//print("view_init");
#ifdef JAVASCRIPT
$("#body").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
overflow:"hidden",
border:"solid",
width:"300px",
height: "300px",
left: ""+50+"px",
top: ""+50+"px",
});
$("#body").keydown(function(evt){ event_no=MYEVENTNO_ONKEYDOWN; event_param1=evt.keyCode;});
#endif
}
#ifdef JAVASCRIPT
function view2_init()
#else
void view2_init()
#endif
{
//print("view2_init");
#ifdef JAVASCRIPT
$("#tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"absolute",
border:"solid",
width:"50px",
height: "50px",
left: ""+a_x+"px",
top: ""+a_y+"px",
});
$("#body").keydown(function(evt){ event_no=MYEVENTNO_ONKEYDOWN; event_param1=evt.keyCode;});
#endif
}
#ifdef JAVASCRIPT
function view2_update()
#else
void view2_update()
#endif
{
//print("view2_update");
#ifdef JAVASCRIPT
$("#tag2").animate({
left: ""+a_x+"px",
top : ""+a_y+"px",
},200);
#endif
}
//
//
//
#ifdef JAVASCRIPT
function oninit()
#else
void oninit()
#endif
{
//print("oninit");
cursor_init();
view_init();
view2_init();
}
#ifdef JAVASCRIPT
function onkeydown()
#else
void onkeydown()
#endif
{
//print("onkeydown");
cursor_update();
view2_update();
}
#ifdef JAVASCRIPT
function main()
#else
int main(int argc,char* argv[])
#endif
{
int en=0;
//print("test");
#ifndef JAVASCRIPT
oninit();
#endif
while(event_no!=-1){
en=event_no;
event_no=0;
if(en==MYEVENTNO_ONKEYDOWN){
onkeydown();
}
#ifdef JAVASCRIPT
setTimeout(main,50);
break;
#else
mysleep(50);
#endif
}
return 0;
}
2014年1月10日金曜日
乾電池の電圧を聞いてみた。
僕、個人的には「東京大学は、『日本の最高学府のうちの一つ。』」だと思っているのですが、世の中にはそうではないと謙遜している方もいらっしゃいます。
http://www.insightnow.jp/article/680
よく読むと、「※弊社の出版物などで、誤用をしているものがあれば、お知らせください(苦笑)。」とも書いてあります。
きっとgoogleのように、入社試験なんですね。
応募すると、この会社に入社できるかもしれないです。
これは大変なことだと思い、日本の理系の最高学府のうちでもっとも偏差値の高い大学院を卒業した数人に乾電池の電圧を聞いてみました。
東大の漢文の入試問題の答えを中国人に聞いてみた以来の実験です。
Aさん:30V
おー、クイズダービーの最終問題の篠沢教授。
Bさん:50V
ついにこういう時がきたか。こりゃー正しい答えが電話。
Cさん:1.5V
インドの大学で教わって、日本に留学に来たそうです。
やっぱ、インディアン嘘つかない。
http://earthlodge.main.jp/wind/log/2007/08/post_97.html
何ボルトだと思います?
コンビニでパナソニックの乾電池エボルタなどをいくつか買って測ってみました。
なんと、1.7Vか1.6V。
http://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%AD%E3%82%B7%E3%83%A9%E3%82%A4%E3%83%89%E4%B9%BE%E9%9B%BB%E6%B1%A0
本当に申し訳ございません。実は最後のオチは実際には計測してないです。ねつ造です。
http://www.insightnow.jp/article/680
よく読むと、「※弊社の出版物などで、誤用をしているものがあれば、お知らせください(苦笑)。」とも書いてあります。
きっとgoogleのように、入社試験なんですね。
応募すると、この会社に入社できるかもしれないです。
これは大変なことだと思い、日本の理系の最高学府のうちでもっとも偏差値の高い大学院を卒業した数人に乾電池の電圧を聞いてみました。
東大の漢文の入試問題の答えを中国人に聞いてみた以来の実験です。
Aさん:30V
おー、クイズダービーの最終問題の篠沢教授。
Bさん:50V
ついにこういう時がきたか。こりゃー正しい答えが電話。
Cさん:1.5V
インドの大学で教わって、日本に留学に来たそうです。
やっぱ、インディアン嘘つかない。
http://earthlodge.main.jp/wind/log/2007/08/post_97.html
何ボルトだと思います?
コンビニでパナソニックの乾電池エボルタなどをいくつか買って測ってみました。
なんと、1.7Vか1.6V。
http://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%AD%E3%82%B7%E3%83%A9%E3%82%A4%E3%83%89%E4%B9%BE%E9%9B%BB%E6%B1%A0
本当に申し訳ございません。実は最後のオチは実際には計測してないです。ねつ造です。
2014年1月9日木曜日
JavaScriptでイベントループを作る。
JavaScriptのイベントコールバック関数って適当に書くと、コードが増えてくると、どんどんぐちゃぐちゃになっていきます。
イベントループを作って処理すると誰でも簡単に読みやすいコードがかけるんじゃないかと思い、ためしに作ってみました。
---------
function print(str)
{
$("#body").append(str+"<br/>");
}
var event_no=0;
function oninit()
{
$("#body").append("<div id=\"tokucyo1\">イベント1</div>");
$("#tokucyo1").click(function(){event_no=1;});
$("#body").append("<div id=\"tokucyo2\">イベント2</div>");
$("#tokucyo2").click(function(){event_no=2;});
$("#body").append("<div id=\"tokucyo3\">イベント3</div>");
$("#tokucyo3").click(function(){event_no=3;});
return 0;
}
function func1()
{
print("event1");
return 0;
}
function func2()
{
print("event2");
return 0;
}
function func3()
{
print("event3");
}
function main()
{
var en=0;
//oninit();
//while(1){
en=event_no;
event_no=0;
//if(en==-1)break;
switch(en){
case 1:
func1();
break;
case 2:
func2();
break;
case 3:
func3();
break;
}
//mysleep(100);
setTimeout(main,100);
//}
}
//main=Concurrent.Thread.compile(main);
$(function(){
oninit();
//Concurrent.Thread.create(main);
main();
});
イベントループを作って処理すると誰でも簡単に読みやすいコードがかけるんじゃないかと思い、ためしに作ってみました。
---------
function print(str)
{
$("#body").append(str+"<br/>");
}
var event_no=0;
function oninit()
{
$("#body").append("<div id=\"tokucyo1\">イベント1</div>");
$("#tokucyo1").click(function(){event_no=1;});
$("#body").append("<div id=\"tokucyo2\">イベント2</div>");
$("#tokucyo2").click(function(){event_no=2;});
$("#body").append("<div id=\"tokucyo3\">イベント3</div>");
$("#tokucyo3").click(function(){event_no=3;});
return 0;
}
function func1()
{
print("event1");
return 0;
}
function func2()
{
print("event2");
return 0;
}
function func3()
{
print("event3");
}
function main()
{
var en=0;
//oninit();
//while(1){
en=event_no;
event_no=0;
//if(en==-1)break;
switch(en){
case 1:
func1();
break;
case 2:
func2();
break;
case 3:
func3();
break;
}
//mysleep(100);
setTimeout(main,100);
//}
}
//main=Concurrent.Thread.compile(main);
$(function(){
oninit();
//Concurrent.Thread.create(main);
main();
});
JavcaScriptでsleep関数を作る
JavaScriptでsleep関数を使いたくなる時があります。
残念ながら、多くのサイトにはsleep関数はないと書いてあります。
でも、そんなときはConcurrentThread.jsがお勧めです。
http://sourceforge.jp/projects/sfnet_jsthread/releases/
関数をコンパイルする関数を呼び出さないといけないのですが、このように簡単にスリープできます。
C言語風に書いてみました。
スリープだけでなく、スレッドも作れます。
---------------
function print(str)
{
$("#body").append(str+"<br/>");
}
function mysleep(ms)
{
Concurrent.Thread.sleep(ms);
}
mysleep=Concurrent.Thread.compile(mysleep);
function main()
{
print("Hello Javascript World!!");
mysleep(1000);
print("Hello Javascript World!!");
}
$(function(){
Concurrent.Thread.create(main);
});
残念ながら、多くのサイトにはsleep関数はないと書いてあります。
でも、そんなときはConcurrentThread.jsがお勧めです。
http://sourceforge.jp/projects/sfnet_jsthread/releases/
関数をコンパイルする関数を呼び出さないといけないのですが、このように簡単にスリープできます。
C言語風に書いてみました。
スリープだけでなく、スレッドも作れます。
---------------
function print(str)
{
$("#body").append(str+"<br/>");
}
function mysleep(ms)
{
Concurrent.Thread.sleep(ms);
}
mysleep=Concurrent.Thread.compile(mysleep);
function main()
{
print("Hello Javascript World!!");
mysleep(1000);
print("Hello Javascript World!!");
}
main=Concurrent.Thread.compile(main);
$(function(){
Concurrent.Thread.create(main);
});
2014年1月7日火曜日
C++でrangeイテレータを作ってみた。
c++14ではforループがPythonのようにレンジベースで操作できるようになるらしいです。
そこで、c++11でPythonのようなrangeイテレータを作ってみました。
イテレータをゼロから作るといろいろと勉強になります。
-------------------------------
#include <stdio.h>
#include <iostream>
#include <algorithm>
using namespace std;
class range{
public:
class iterator {
public:
int operator *() const { return i_; }
const iterator &operator ++() { ++i_; return *this; }
iterator operator ++(int) { iterator copy(*this); ++i_; return copy; }
bool operator ==(const iterator &other) const { return i_ == other.i_; }
bool operator !=(const iterator &other) const { return i_ != other.i_; }
iterator(int start) : i_ (start) { }
private:
unsigned long i_;
};
public:
range(int start,int stop):a_(start),b_(stop){}
iterator begin() const { return iterator(a_); }
iterator end() const { return iterator(b_); }
public:
int a_,b_;
};
int main () {
range i(0,5);
for(int a:i)printf("a=%d\n",a);
return 0;
}
そこで、c++11でPythonのようなrangeイテレータを作ってみました。
イテレータをゼロから作るといろいろと勉強になります。
-------------------------------
#include <stdio.h>
#include <iostream>
#include <algorithm>
using namespace std;
class range{
public:
class iterator {
public:
int operator *() const { return i_; }
const iterator &operator ++() { ++i_; return *this; }
iterator operator ++(int) { iterator copy(*this); ++i_; return copy; }
bool operator ==(const iterator &other) const { return i_ == other.i_; }
bool operator !=(const iterator &other) const { return i_ != other.i_; }
iterator(int start) : i_ (start) { }
private:
unsigned long i_;
};
public:
range(int start,int stop):a_(start),b_(stop){}
iterator begin() const { return iterator(a_); }
iterator end() const { return iterator(b_); }
public:
int a_,b_;
};
int main () {
range i(0,5);
for(int a:i)printf("a=%d\n",a);
return 0;
}
2014年1月6日月曜日
ソート アルゴリズム
最近、日本の大学とアメリカの大学で教える情報教育にものすごい差があることにとても驚かされます。
たとえば、理系の情報学科の学生が大学一年で習う、数値を小さい順に並べるアルゴリズム。
日本の多くの大学生はqsortという関数を教えられますが、スタンフォードの学生はラムダ式で記述。
C++言語やJava言語なんて昔とまったく文法違うんです。
ビジネス的に生産性の高いというか、安く品質の良いコードが書けるようにプログラム言語の記述方法が変わってきています。そして、大学の教育でもきちんと生産性の高い記述方法を教える。
この一貫した体制というか新しいものを常に求める姿勢が本当に素晴らしいです。
C++でのソートの方法を時代ごとに書いてみました。
下に行くほど最新の記述方法になります。
昔はgccでコンパイルしていたものが、いまやMacOSやGoogleではclang+llvmになっています。
スタンフォードではもちろん最新のコンパイラ。
たぶん日本の大学は中国とインドと比べても負けてます。
日本の情報分野の生産性の低さと競争力のなさをとても悲しく思う今日この頃。
------------------------
#include <stdio.h>
#include <iostream>
#include <algorithm>
using namespace std;
int myqfunction (int* i,int* j)
{
return *i-*j;
}
bool myfunction (int i,int j)
{
return (i<j);
}
struct myclass {
bool operator() (int i,int j) {
return (i<j);
}
} myobject;
int main () {
int myints[] = {32,71,12,45,26,80,53,33};
// using qsort
qsort(myints,8,sizeof(int),(int(*)(const void*,const void*))myqfunction);
// using default comparison (operator <):
sort (myints, myints+8);
// using function as comp
sort (myints, myints+8, myfunction);
// using object as comp
sort (myints,myints+8, myobject);
// using rambda
sort (myints,myints+8, [](int x,int y){return (x<y);});
return 0;
}
たとえば、理系の情報学科の学生が大学一年で習う、数値を小さい順に並べるアルゴリズム。
日本の多くの大学生はqsortという関数を教えられますが、スタンフォードの学生はラムダ式で記述。
C++言語やJava言語なんて昔とまったく文法違うんです。
ビジネス的に生産性の高いというか、安く品質の良いコードが書けるようにプログラム言語の記述方法が変わってきています。そして、大学の教育でもきちんと生産性の高い記述方法を教える。
この一貫した体制というか新しいものを常に求める姿勢が本当に素晴らしいです。
C++でのソートの方法を時代ごとに書いてみました。
下に行くほど最新の記述方法になります。
昔はgccでコンパイルしていたものが、いまやMacOSやGoogleではclang+llvmになっています。
スタンフォードではもちろん最新のコンパイラ。
たぶん日本の大学は中国とインドと比べても負けてます。
日本の情報分野の生産性の低さと競争力のなさをとても悲しく思う今日この頃。
------------------------
#include <stdio.h>
#include <iostream>
#include <algorithm>
using namespace std;
int myqfunction (int* i,int* j)
{
return *i-*j;
}
bool myfunction (int i,int j)
{
return (i<j);
}
struct myclass {
bool operator() (int i,int j) {
return (i<j);
}
} myobject;
int main () {
int myints[] = {32,71,12,45,26,80,53,33};
// using qsort
qsort(myints,8,sizeof(int),(int(*)(const void*,const void*))myqfunction);
// using default comparison (operator <):
sort (myints, myints+8);
// using function as comp
sort (myints, myints+8, myfunction);
// using object as comp
sort (myints,myints+8, myobject);
// using rambda
sort (myints,myints+8, [](int x,int y){return (x<y);});
return 0;
}
登録:
投稿 (Atom)