2017-08

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ショートコーディングで遊ぼう

・概要

javascriptでショートコーディングをやってみた。

・登場人物

Yoshimura Ryogo: 僕。KYな蒸し返し役。
: 後輩くん。プログラミングはjavascriptから入ったとか。(http://d.hatena.ne.jp/staebchen/)
Eastren and Little Nature Deity: 後輩くん。今回は空気。
BLUEεAPPLEλLOQUAT: 後輩くん。偉大な質問者。

・背景

3月3日。ひな祭りの日。
ぼくら暇人(仕事ありすぎて逆に暇な可能性も)はチャットでだべっていた。

[13:31:08] BLUEεAPPLEλLOQUAT: ちょっと質問があります。
TOP_
と記述したところにマウスポインタを置いたら、_だけが点滅するようなスクリプトを作りたいのですが。
[13:31:25] : HTML?
[13:31:39] BLUEεAPPLEλLOQUAT: すいません。HTMLのはなしです。
[13:31:53] : CSSで…とか考えたけど、
[13:32:05] : JavaScriptのほうがいいやね
[13:32:26] : 教えるより作ったほうがはやい気がした
[13:32:34] : というわけで作る。ちょっと待ってて
[13:32:47] BLUEεAPPLEλLOQUAT: ありがとうございます。
[13:33:51] BLUEεAPPLEλLOQUAT: あとオンマウスの範囲はTOP_の全体でお願いします。
[13:35:35] : おk

[13:37:48] Yoshimura Ryogo: 職人仕事はえーよってレベルだな。
[13:47:45] : いかにprototype.jsに頼ってたかを思いしった。めんどくせーw
[13:49:43] : あれ、<style>でidで指定した色って、styleからとれないんだっけ。。
[13:51:13] Yoshimura Ryogo: 普通にelementからとるんじゃね?
[13:51:53] Yoshimura Ryogo: (それ以外の方法をやったことがない
[13:52:01] : なぜかdocument.getElementById(x).styleに入ってなくて、あれー?となってます
[13:52:17] Yoshimura Ryogo: あれー?
[13:52:21] : 直接style属性に指定すると入ってるのですが
[13:56:26] : できたっ
[13:56:32] Yoshimura Ryogo: おー
[13:56:40] BLUEεAPPLEλLOQUAT: ありがとうございます!!!
[13:56:56] : 超絶趣味全開
[13:57:06] Yoshimura Ryogo: w
[13:57:31] :
<script type="text/javascript">
var timer;
function start(x, y) {
var i = 0;
timer = setInterval(
function(){
var elem = document.getElementById(x);
var hoge = document.getElementById(y);
if (i == 0) {
elem.style.color = hoge.style.backgroundColor;
i = 1;
} else {
elem.style.color = hoge.style.color;
i = 0;
}
},
500
);
}
function stop(x, y) {
clearInterval(timer);
timer = undefined;
var elem = document.getElementById(x);
var hoge = document.getElementById(y);
elem.style.color = hoge.style.color;
}
</script>
<span id="hoge"
onmouseover="start('c','hoge')"
onmouseout="stop('c','hoge')"
style="background:black;color:white">
TOP<span id="c">_</span>
</span>

[13:57:48] Yoshimura Ryogo: ラムダw
[13:58:37] BLUEεAPPLEλLOQUAT: ありがとうございます!!! 非常に助かります!!!

きれいなコードを書いてくれた箸くんに、僕があらぬことを吹き込む。

[14:07:49] Yoshimura Ryogo: これをもうちょっと短く書くとどうなるだろう。
[14:10:35] :
var timer;
function start(x, y) {
var i = 0;
timer = setInterval(
function(){
if (i++&1)
document.getElementById(x).style.color
= document.getElementById(y).style.backgroundColor;
else
document.getElementById(x).style.color
= document.getElementById(y).style.color;
},
500
);
}
function stop(x, y) {
clearInterval(timer);
timer = undefined;
document.getElementById(x).style.color
= document.getElementById(y).style.color;
}

[14:10:56] BLUEεAPPLEλLOQUAT: ありがとうございます!!

こうして、へんてこショートコーディングの会は突発的にはじまった。

・目的

「TOP_」と記述したところにマウスポインタを置いたら、「_」だけが点滅する(こんなの)ようなhtmlでjavascriptをできるだけ短く書こう。

・経過

※は、あとで書いたやつ。
バイト数は、改行とか無駄な空白とかを取り除いた長さ。

[14:11:02] Yoshimura Ryogo: document.getElementById(x)ha
[14:11:07] Yoshimura Ryogo: はそとに出してみるとか
[14:11:25] Yoshimura Ryogo: むしろstyleまでか
[14:11:32] : それやるとIEで不安定だったような
[14:11:38] Yoshimura Ryogo: そうなのかorz
[14:11:04] : あれ、
[14:12:25] :
var timer;
function start(x, y) {
var i = 0;
timer = setInterval(
function(){
document.getElementById(x).style.color
= (i++&1)
? document.getElementById(y).style.backgroundColor
: document.getElementById(y).style.color;
},
500
);
}
function stop(x, y) {
clearInterval(timer);
timer = undefined;
document.getElementById(x).style.color
= document.getElementById(y).style.color;
}

[14:12:44] : 三項演算子使えるじゃんwという
[14:12:50] Yoshimura Ryogo: w
[14:12:55] : ん?
[14:14:08] :
<script type="text/javascript">
var timer;
function start(x, y) {
var i = 0;
timer = setInterval(
function(){
document.getElementById(x).style.color
= document.getElementById(y).style[
(i++&1)?"backgroundColor":"color"
];
},
500
);
}
function stop(x, y) {
clearInterval(timer);
timer = undefined;
document.getElementById(x).style.color
= document.getElementById(y).style.color;
}
</script>
<span id="hoge"
onmouseover="start('c','hoge')"
onmouseout="stop('c','hoge')"
style="background:black;color:white">
TOP<span id="c">_</span>
</span>

※styleの属性を連想配列で表現。

[14:14:39] : 連想配列なんだから、これで十分だた
[14:14:43] Yoshimura Ryogo: なる。
[14:14:56] BLUEεAPPLEλLOQUAT: いろいろありがとうございます
[14:16:35] Eastren and Little Nature Deity: -1
[14:19:30] Yoshimura Ryogo: んー、$を使っても237byteか
[14:22:13] Yoshimura Ryogo: varをとるとどうなるんだっけ。
[14:22:33] : var i以外はグローバルですかねたぶん
[14:22:47] : var iはとるとどうなるんでしょう
[14:22:56] Yoshimura Ryogo: さすがにそれは。。。
[14:23:05] Yoshimura Ryogo: あ、だいじょうぶかもしれん
[14:23:22] : 動かないw
[14:23:26] Yoshimura Ryogo: おh
[14:23:36] Yoshimura Ryogo:
<script type="text/javascript">
c="color";
t;
function $(x){
return document.getElementById(x).style;
}
function b(x,y){
i=0;
t=setInterval(
function(){
$(x)[c]=$(y)[(i++&1)?"backgroundColor":c];
}
,500
);
}
function e(x,y){
clearInterval(t);
t=undefined;$(x)[c]=$(y)[c];
}
</script>
<span id="hoge"
onmouseover="b('c','hoge')"
onmouseout="e('c','hoge')"
style="background:black;color:white">
TOP<span id="c">_</span>
</span>
<span id="fuga"
onmouseover="b('d','fuga')"
onmouseout="e('d','fuga')"
style="background:black;color:white">
G<span id="d">_</span>
</span>

※224
※変数名、関数名を1文字に。

[14:23:46] Yoshimura Ryogo: なんかgjになってるw ※skypeでは(y)がyeshand.pngで表示される。
[14:24:01] : timerはとっても大丈夫ですね
[14:26:13] Yoshimura Ryogo: timerとったら停止できなくね?
[14:26:33] : 定義されなければグローバル変数っていうルールがあったような
[14:26:59] Yoshimura Ryogo: ああ、そういうことか。
[14:27:08] Yoshimura Ryogo: 把握。
[14:28:38] Yoshimura Ryogo: timer=undefinedは消してもいいのか
[14:28:52] : あ、問題ないはずです
[14:29:12] Yoshimura Ryogo: うーん、それでも200文字切らない...
[14:29:20] Yoshimura Ryogo:
c="color";
function $(x){
return document.getElementById(x).style;
}
function b(x,y){
i=0;
t=setInterval(
function(){
$(x)[c]=$(y)[(i++&1)?"backgroundColor":c];
}
,500
);
}
function e(x,y){
clearInterval(t);
$(x)[c]=$(y)[c];
}

※214

[14:32:31] :
c="color";
function $(x){
return document.all[x].style;
}
function b(x,y){
i=0;
t=setInterval(
function(){
$(x)[c]=$(y)[(i++&1)?"backgroundColor":c];
},
500
);
}
function e(x,y){
clearInterval(t);
$(x)[c]=$(y)[c];
}

[14:32:32] : 199
[14:34:21] Yoshimura Ryogo: へーそんな方法が。
[14:34:48] : IEくささが漂いますがw
[14:34:44] Yoshimura Ryogo: 100文字は切れるかしら?
[14:35:22] : 原理を変更しないと難しいですねえ
[14:36:22] Yoshimura Ryogo: blinkってie対応してないのか
[14:36:31] : そうですね
[14:36:48] Yoshimura Ryogo: それ以前にtext-decorationが長いorz
[14:36:51] : blink=NN、marquee=IEっていうイメージが
[14:37:00] Yoshimura Ryogo: なる。
[14:41:40] :
c="color";
function b(x){
i=0;
t=setInterval(
function(){
document.all[x].style[c]=["#fff","#000"][i++&1];
}
,500
);
}
function e(x){
clearInterval(t);
document.all[x].style[c]="#fff";
}

[14:41:42] : 173
[14:42:07] Yoshimura Ryogo: w
[14:42:28] Yoshimura Ryogo: なるほど。賢さを削ったか。
[14:42:48] Eastren and Little Nature Deity: 削ったらどうなる?
[14:43:24] Yoshimura Ryogo: 文字と背景の色を変えるためにjsのプログラムをいじくらなくちゃならない。
[14:43:44] : 元のバージョンでは、点滅させたい文字色と背景色を利用してたけど、その機能を削った
[14:44:47] Yoshimura Ryogo: [,][]のあたりが巧妙だw
[14:45:38] Yoshimura Ryogo: $使うよりもこっちのほうが短いのか。
[14:46:10] : function returnとかあったので、比較して短くなったので除去です
[14:49:46] :
<script type="text/javascript">
c="color";
function b(x,y){
if(y){
i=0;
e=document.all[x].style;
t=setInterval(
function(){
e[c]=["#fff","#000"][i++&1];
}
,500
);
}
else{
clearInterval(t);
e[c]="#fff";
}
}
</script>
<span id="hoge"
onmouseover="b('c',true)"
onmouseout="b('c')"
style="background:black;color:white">
TOP<span id="c">_</span>
</span>
<span id="fuga"
onmouseover="b('d',true)"
onmouseout="b('d')"
style="background:black;color:white">
G<span id="d">_</span>
</span>

※関数を1つにまとめて開始bと終了eを区別するパラメータを外部へ。

[14:50:09] : 160切って157に
[14:50:38] Yoshimura Ryogo: なる。
[14:53:06] Yoshimura Ryogo: .colorにしたほうが短いな。
[14:53:37] : あ、ほんとだ
[14:53:39] :
function b(x,y){
i=0;
e=document.all[x].style;
if(y)
t=setInterval(
function(){
e.color=["#fff","#000"][i++&1];
}
,500
);
else
clearInterval(t);
e.color="#fff";
}

[14:53:41] : 150
[14:54:55] Yoshimura Ryogo: ,演算子とかあったっけ?
[14:55:15] : たしかありますけど
[14:56:52] Yoshimura Ryogo: あ、無理だorz
[14:57:50] :
function b(x,y){
i=0;
e=document.all[x].style;
y
? t=setInterval(
function(){e.color=["#fff","#000"][i++&1];}
,500
)
: clearInterval(t);
e.color="#fff";
}

※ifを三項演算子へ。

[14:57:57] : 142
[14:59:50] Yoshimura Ryogo: なんか点滅がおかしいんですけどw
[15:00:00] : おかしいです?
[15:00:01] :
function b(x,y){
w="#fff";
i=0;
e=document.all[x].style;
y
? t=setInterval(
function(){e.color=[w,"#000"][i++&1];}
,500
)
: clearInterval(t);
e.color=w;
}

※白をw変数で置く。

[15:00:05] : 141
[15:00:31] : 最初のとちがってFirefox以外ではテストしてないです
[15:00:41] Yoshimura Ryogo: こっちもfxだけど...
[15:01:08] Yoshimura Ryogo: さすがにここまでくると環境依存が激しいな。
[15:01:31] Yoshimura Ryogo: そしてwすげー。
[15:01:37] : あー、もうネタ切れです。
[15:01:49] Yoshimura Ryogo: 乙
[15:05:19] BLUEεAPPLEλLOQUAT: ありがとうございました。
[15:06:07] : 一応言っとくけど、最初の3~4つ以外は完全に遊びなのでw
[15:09:04] BLUEεAPPLEλLOQUAT: 分かりました。

終わった雰囲気なのにKYな僕がへんなのを投下

[15:18:50] Yoshimura Ryogo:
<script type="text/javascript">
function b(x,w,y,b){
i=0;
e=document.all[x].style;
y
? t=setInterval(
function(){e.color=[b,w][i++&1];}
,500
)
: clearInterval(t);
e.color=w;
}
</script>
<span id="hoge"
onmouseover="b('c','#fff',true,'#000')"
onmouseout="b('c','#fff')"
style="background:black;color:white">
TOP<span id="c">_</span>
;</span>
<span id="fuga"
onmouseover="b('d','#fff',true,'#000')"
onmouseout="b('d','#fff')"
style="background:black;color:white">
G<span id="d">_</span>
</span>

かなりずっこいけど131
※色をすべて外部へ。

[15:19:28] : なるほどw
[15:20:30] Yoshimura Ryogo:
<script type="text/javascript">
function b(x,w,b){
i=0;
e=document.all[x].style;
b
? t=setInterval(
function(){e.color=[b,w][i++&1];}
,500
)
: clearInterval(t);
e.color=w;
}
</script>
<span id="hoge"
onmouseover="b('c','#fff','#000')"
onmouseout="b('c','#fff')"
style="background:black;color:white">
TOP<span id="c">_</span>
</span>
<span id="fuga"
onmouseover="b('d','#fff','#000')"
onmouseout="b('d','#fff')"
style="background:black;color:white">
G<span id="d">_</span>
</span>

129
※開始と終了を区別するフラグを背景色用の文字列の有無で代用。

[15:20:46] Yoshimura Ryogo: 地味にユーザビリティが上がってるw
[15:21:31] : ほんとだw
[15:25:04] :
function b(x,w,b){
i=0;
e=document.all[x].style;
b
? t=setInterval(function(){e.color=[b,w][i++&1]},500)
: clearInterval(t);
e.color=w
}

※ブロック末のセミコロン省略。

[15:25:10] : そういえば。127
[16:13:53] Eastren and Little Nature Deity: i.oo
[16:15:41] Yoshimura Ryogo: セミコロン省略できるのか。
[16:43:02] Yoshimura Ryogo: 100切れないか?
[16:53:16] Yoshimura Ryogo:
<script type="text/javascript">
function b(x,c,v){
i=0;
e=document.all[x].style;
v
? t=setInterval(function(){e.color=c[++i&1]},v)
: clearInterval(t),e.color=c[0]
}
</script>
<span id="hoge"
onmouseover="b('c',['#fff','#000'],500)"
onmouseout="b('c',['#fff','#000'])"
style="background:black;color:white">
TOP<span id="c">_</span>
</span>
<span id="fuga"
onmouseover="b('d',['#fff','#00f'],500)"
onmouseout="b('d',['#fff','#00f'])"
style="background:blue;color:white">
PROFILE<span id="d">_</span>
</span>

んー、ユーザビリティ下がったのに124
※色の配列を外部へ。さすがにこれはずっこい。

[16:58:53] Yoshimura Ryogo: http://www.hpcc.jp/sacsis/2009/cell/kiteiyosen2009.htm
んー、ざねーん ※Enarisというチーム名でなんとなく参加中

・結論

いまのぼくらには124が限界だた。

・感想

かなりの部分が箸くんパワー。僕だけじゃこんなに短くできなかったさ。
でも short coding おいしいです。
short coding にもってこいな質問をしてくれた blue apple くんに感謝。
そしてhtmlコードに出てくる b('c') とか >_< とかに、地味に萌えた。

・おもしろかった本

Short Coding ~職人達の技法~Short Coding ~職人達の技法~
(2007/08/09)
Ozy


発想と執念がすごいと思った。

スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

コメント

opacityが使えるなら
e.opacity^=1
で切り替えられますね

コメントの投稿


管理者にだけ表示を許可する

トラックバック

http://rydot.blog107.fc2.com/tb.php/97-616a6500
この記事にトラックバックする(FC2ブログユーザー)

«  | HOME |  »

カテゴリー

ブログ内検索

プロフィール

rydot

Author:rydot
かりんととお茶が好物の情報心理学好きのへたれCAD屋さん且つなんちゃってクリスチャン。

twitter @rydotyosh
hatenablog http://rydot.hatenablog.com/

images下およびdropbox下のリソースはccのはず。プログラムはオープンソースのはず。たぶんリンクフリー。

最近の記事

リンク

このブログをリンクに追加する

最近のコメント

最近のトラックバック

月別アーカイブ

RSSフィード

ブロとも申請フォーム

この人とブロともになる

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。