2012/12/04
JSからstyleの設定のメモ
JavaScriptから style プロパティでスタイルを設定するのに
軽くはまったのでメモ。
要素にスタイルを設定する時って style["test-align"] と
style["testAlign"] のどっちでも良いと思ってたが
違うらしい。
DOMとjQueryで４パターンを各ブラウザで試してみた。
Cheome,Safari:
Firefix(ESR10),IE8:
結論としてはブラウザ依存らしい。
確認していないがキャメルが正式な仕様なんだろう。 jQuery が頑張ってくれちゃうので勘違いしてたんだろうね。
また、やりそうだなこれ (^^;
getElementById(id).style["backgroundColor"]="red"
getElementById(id).style["background-color"]="red"
$("#id").css("backgroundColor","red");
$("#id").css("background-color","red");
実行結果。Cheome,Safari:
Firefix(ESR10),IE8:
結論としてはブラウザ依存らしい。確認していないがキャメルが正式な仕様なんだろう。 jQuery が頑張ってくれちゃうので勘違いしてたんだろうね。
また、やりそうだなこれ (^^;
2012/11/25
jQueryのテーブル・プラグインを作ってみた
jQueryのテーブル・プラグインはググれば一杯出てくるんだけど
細かい動作が思った通り行かなかったり、
デザインが合わなかったり、
で以外とカスタマイズにコストがかかる。
と言うわけで自分の好みのテーブル・プラグインを作ってみた。
基本方針はエクセルっぽい雰囲気 (^^;。
こんな機能で
使い方：<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ExTable</title>
<script src="../jq/jquery-1.8.2.js" ></script>
<link href="../Common/css/Common.css" rel="stylesheet" />
<script src="../Common/js/Common.js" ></script>
<link href="css/ExTable.css" rel="stylesheet" />
<script src="js/ExTable.js" ></script>
<link href="css/RateBar.css" rel="stylesheet" />
<style>
html,body{
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
</style>
<script>
$(function(){
// 「進捗」表示用カスタムカラム関数
function rateSetter($elem,data,index) {
var val = data[index];
$elem.html("<div class='RateBar'><span></span></div>");
$elem.find(">div>span").css("width",val+"%");
}
// カラムメタ情報
var columnMetas =[
{title:"番号", width:36, style:{textAlign:"right"}},
{title:"氏名", width:100 },
{title:"生年月日", width:100 },
{title:"進捗", width:30, setter:rateSetter},
{title:"住所", width:"100%", style:{whiteSpace:"normal", height:"auto"}}
];
// テーブルデータ
var data = [
[1,"田附 昌宏" ,"1946/10/12",0,"神奈川県 横浜市鶴見区 仲通 50丁目6952-5264"],
[2,"信宮 淳師" ,"1981/07/16",13,"新潟県 柏崎市 上方 91丁目3500-1101"],
[3,"江羅 清紹" ,"1978/01/21",75,"広島県 安芸郡海田町 寿町 81丁目2602-5544"],
[4,"中宿 巳代志","1955/06/19",45,"徳島県 那賀郡那賀町 丈ケ谷 98丁目3767-9635"],
[5,"蟹山 稔大" ,"1951/10/24",53,"宮城県 亘理郡亘理町 下茨田 99丁目3076-2003"],
[6,"金坂 又治","1990/05/08",21,"福岡県 福岡市南区 多賀 97丁目7522-4953"],
[7,"常雪 晋大","1989/05/10",4,"長崎県 佐世保市 吉井町春明 43丁目9868-3882"],
[8,"渡瀬 冨貴美","1987/09/11",67,"石川県 白山市 幸明町 66丁目6911-4432"],
[9,"芳家 久登美","1978/05/01",67,"兵庫県 姫路市 飾磨区英賀東町 39丁目5646-4202"],
[10,"波入 常林","1974/08/18",93,"大阪府 堺市堺区 海山町 24丁目4004-8405"],
[11,"子末 滋富","1986/06/19",38,"愛知県 愛知郡長久手町 井堀 81丁目7801-9934"],
[12,"杭本 大仁","1972/10/16",51,"千葉県 長生郡長南町 山内 81丁目3983-9220"],
[13,"江寺 華林","1970/10/26",83,"京都府 福知山市 下紺屋 32丁目9109-7172"],
[14,"黒森 徳","1954/06/01",3,"広島県 安芸高田市 吉田町多治比 38丁目7966-5842"],
[15,"民井 祐宏","1961/12/14",5,"香川県 坂出市 文京町 97丁目7763-5388"],
[16,"苅間澤 己蔵","1955/02/28",52,"神奈川県 川崎市川崎区 観音 94丁目6213-9307"],
[17,"元川 茉由美","1975/05/03",67,"千葉県 柏市 松ケ崎新田 45丁目3309-7161"],
[18,"石加 将王","1989/12/24",0,"愛知県 蒲郡市 西迫町 50丁目1806-5805"],
[19,"矢草山 開次郎","1990/01/01",38,"愛知県 犬山市 木津 78丁目565-5209"],
[20,"堤野 逸行","1965/02/06",6,"岐阜県 美濃加茂市 下米田町山本 58丁目4887-8192"],
[21,"穂元 勝視","1969/09/20",41,"北海道 釧路市 海運 54丁目3726-9813"],
[22,"木引 安吉","1971/02/03",68,"青森県 五所川原市 唐笠柳 38丁目2452-2323"],
[23,"平体 惇","1979/11/14",58,"神奈川県 足柄下郡箱根町 木賀 99丁目1389-5725"],
[24,"本屋敷 泉希","1990/01/17",93,"北海道 沙流郡平取町 荷菜 51丁目8471-9191"],
[25,"入砂 初元","1992/04/22",84,"長崎県 南松浦郡新上五島町 鯛ノ浦郷 60丁目7499-3486"],
[26,"松ノ木 倉蔵","1963/02/27",52,"鹿児島県 南さつま市 加世田宮原 37丁目1600-6786"],
[27,"末釜 八久","1950/05/11",9,"島根県 松江市 千鳥町 71丁目6310-1694"],
[28,"用原 松琴","1967/07/16",65,"熊本県 菊池市 七城町台 44丁目3007-3259"],
[29,"石岬 紳也","1985/02/08",41,"栃木県 矢板市 平野 97丁目6245-5288"],
[30,"潤米 耕一良","1982/02/04",70,"兵庫県 豊岡市 但東町正法寺 39丁目748-8259"]
];
// テーブル生成
var exTable = new ExTable("#exTable");
exTable.header(columnMetas).data(data);
});
</script>
</head>
<body>
<div id="exTable" class="ExTable"></div>
</body>
</html>
IE8 でも一応動いてる。 IE6,7はギブアップ (^^; 扱えるレコード数は IE8 前提なら 100レコードくらい。
Chromeなら500くらい有っても何とかしてくれる。 コードは結局、CSSが150stepくらいで、JSが 600step くらい。
カスタマイズするのにお手軽って程でも無い感じ。
ソースが見たい人は以下からどうぞ。( っ・ω・)っﾄﾞｿﾞｫ タウンロード：
こんな機能で
- カラム幅の動的変更
- カラム順序の動的変更
- ソート
- ヘッダ固定
- カラム幅に合わせたセル内での行の折返し
- セルの表現方法のカスタマイズ
使い方：
IE8 でも一応動いてる。 IE6,7はギブアップ (^^; 扱えるレコード数は IE8 前提なら 100レコードくらい。
Chromeなら500くらい有っても何とかしてくれる。 コードは結局、CSSが150stepくらいで、JSが 600step くらい。
カスタマイズするのにお手軽って程でも無い感じ。
ソースが見たい人は以下からどうぞ。( っ・ω・)っﾄﾞｿﾞｫ タウンロード：
- http://code.google.com/p/kotemaru/downloads/list
-> ExTable-demo.tgz
2012/10/08
RedmineのREST機能を使ってみた
今の案件は Redmine を使ってる。
実は Redmine を本格的に使うのは初めてだったりする。
で、使ってみた感想、「チケットに埋もれる...w」
使い方の問題のような気もするのだが、
基本的にチケットの重み付けがプロジェクト全体の物しか無く
ユーザ毎の重み付けが無いのでチケットの管理がしづらい。
ぶっちゃけ、他人に振られたチケットとか興味無いし、
自分にとってのチケット意味付けが欲しいんだよね。
ウォッチャーとかは有るけども「管理責任のあるチケット」も
「単なるオブサーバのチケット」もごちゃ混ぜなのであまり使えない。
で、前置きが長くなったが Redmine には WebAPI で XML や JSON
でチケットの情報を取得できる機能が付いていることに気がついた。
これを使って俺様的チケット管理が出来るんじゃ無いかと思い調べてみた。 API の仕様はこの辺{
"issues": [
{
"id": 1117,
"project": {
"id": 9,
"name": "Wiki Extensions"
},
"tracker": {
"id": 2,
"name": "Feature"
},
"status": {
"id": 1,
"name": "新規（New）"
},
"priority": {
"id": 4,
"name": "通常（Normal）"
},
"author": {
"id": 3,
"name": "Haru Iida"
},
"assigned_to": {
"id": 3,
"name": "Haru Iida"
},
"fixed_version": {
"id": 187,
"name": "0.6.0"
},
"subject": "Compatible with redmine 2.1",
"description": "",
"start_date": "2012-10-07",
"done_ratio": 0,
"created_on": "2012-10-07T09:10:27Z",
"updated_on": "2012-10-07T09:10:27Z"
},
…
],
"total_count": 240,
"offset": 0,
"limit": 25
}
サマリ的に必要な情報は一通り取得できるようだ。
デフォルトでは25件単位にページングする。
これを使って俺様的チケット管理が出来るんじゃ無いかと思い調べてみた。 API の仕様はこの辺
- 英語:
http://www.redmine.org/projects/redmine/wiki/Rest_api - 日本語(古い):
http://www.r-labs.org/projects/r-labs/wiki/Redmine_REST_API
実際に動かしてみる
- http://www.r-labs.org/issues.json
実際に使いそうな機能を確認
- プロジェクト指定:
/issues.json?project_id={id} - ステータス制限:
/issues.json?status_id={open|closed}{id} - 更新日範囲指定:(*1)
/issues.json?updated_on=><2012-03-01|2012-03-07 - 更新日ソート:(*1)
/issues.json?desc=updated_on - ウォッチャー指定:
出来ない
- カスタムクエリ指定:
/issues.json?query_id={id}
その他
ちなみに更新機能もあるようだが今回はそこまで考えていないのでパス。 こんな感じで Web-Mail 風にチケット管理したいなーと思って鋭意作成中。 今の案件には間に合いそうも無いけどw
2012/09/02
enchant.js向けマップエディタ
enchant.js 向けマップエディタを 9leap に上げて有ったのだが
こっちに書くのを忘れてたんで書いとく。
enchant.js には一応、マップエディタがあるのだがあまりに貧弱で
ゲームを作るのに支障をきたすので自前で作ってみた。
方針としては
- UNDO,REDOが効く。
- レイヤーが使える。
- 複数チップを矩形で切り貼りできる。
- ブラウザの localStrage に保存できてダウンロードできる。
- フォーマットはJSON形式。
- マニュアルレスでもなんとなく使える。
(画像は縮小してます)
2012/07/15
Google Mapでカスタムの吹き出し その２
最近 Google Mapでカスタムの吹き出し の記事にアクセスが多い。
内容が外部サイト紹介だけでは体裁が悪いので自分でもすこし汎用に使えそうな
コードを書いてみることにした。
とりあえず 角丸に尻尾(ひげ)付きの有りがちなマンガ風の吹き出しを CSS だけで作ってみた。
Chrome:
function GMapBalloon() {this.initialize.apply(this,arguments);}
(function(Class){
Class.prototype = new google.maps.OverlayView(); // extends
var OPTS = {
tailW: 12, tailH: 12, tailColor: "black",
round: 6, padding: 6,
border: "1px solid black",
background: "white",
closeImg: "close.png", closeSize: 8
};
Class.prototype.initialize = function(map, $innerElem, opts) {
var self = this;
this.opts = $.extend(OPTS, opts);
$innerElem = $innerElem ? $innerElem : $("<div/>");
$innerElem.css({
position: "relative",
top: "0px", left: "0px"
});
// 外枠
var $outerElem = $("<div></div>");
$outerElem.css({position: "absolute"});
// 本体
var $body = $("<div></div>");
$body.css({
position: "relative",
background: this.opts.background,
padding: this.opts.padding+"px",
borderRadius: this.opts.round+"px",
border: this.opts.border
});
// 尻尾(ひげ)
var $hige = $("<div/>").css({
position: "relative", width:0,
margin: "-1px auto 0 auto",
borderLeft: this.opts.tailH+"px solid "+this.opts.tailColor,
borderBottom: this.opts.tailW+"px solid transparent",
});
var $innerHige = $("<div/>").css({
position: "absolute", width:0,
marginLeft: -(this.opts.tailH-1)+"px",
borderLeft: (this.opts.tailH-3)+"px solid white",
borderBottom: (this.opts.tailW-3)+"px solid transparent",
});
// ×ボタン
var $close = $("<div>×</div>").css({
position: "absolute",
top: "1px", right:"4px",
cursor: "default",
font: "bold 12px fixed", color:"red"
});
// 画像用
//$close.attr({
// "src": this.opts.closeImg,
// "width": this.opts.closeSize,
// "height":this.opts.closeSize,
//});
$close.bind("click", function(ev){self.close()});
$body.append($innerElem);
$hige.append($innerHige);
$outerElem.append($body);
$outerElem.append($hige);
$outerElem.append($close);
this.outerElem = $outerElem[0];
this.innerElem = $innerElem[0];
this.close();
this.setMap(map);
}
// Map から callback.
Class.prototype.onAdd = function() {
// レイヤーにこのdivを張り込む
var panes = this.getPanes();
panes.floatPane.appendChild(this.outerElem);
}
// Map から callback.
Class.prototype.draw = function() {
if (this.marker == null) return;
// 経度緯度から画面座標系に変換
var pos = this.getProjection().fromLatLngToDivPixel(this.marker.getPosition());
if (!pos) return;
var icon = this.marker.getIcon();
var iconH = icon ? icon.size().height : 32;
var w2 = this.outerElem.offsetWidth/2-this.opts.tailW/2;
var h2 = this.outerElem.offsetHeight+iconH;
$(this.outerElem).css({
visibility: "visible",
left: (pos.x-w2)+ "px",
top: (pos.y-h2) + "px"
});
}
Class.prototype.open = function(tgtMarker, html) {
this.close();
this.marker = tgtMarker;
if (html) $(this.innerElem).html(html);
this.draw();
}
Class.prototype.close = function() {
$(this.outerElem).css({visibility: "hidden"});
}
Class.prototype.isVisible = function() {
return $(this.outerElem).css("visibility") != "hidden";
}
Class.prototype.addEventListener = function(type, func, cap) {
this.innerElem.addEventListener(type, func, cap);
}
})(GMapBalloon);
実行サンプル：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>GMap test</title>
<script src="../jq/jquery-1.7.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>
<script src="GMapBalloon-v0.1.js"></script>
<style>
#mapCanvas {
width: 500px;
height: 500px;
background: black;
}
</style>
<script>
var DEFAULT_CENTER = new google.maps.LatLng(35.681382, 139.766084);
var OPTIONS = {
zoom: 14,
center: DEFAULT_CENTER ,
scaleControl: true,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$(function(){
var $mapCanvas = $("#mapCanvas");
var map = new google.maps.Map($mapCanvas[0], OPTIONS);
var marker = new google.maps.Marker({
map:map, position:DEFAULT_CENTER, title:"東京駅"
});
var balloon = new GMapBalloon(map, $("#balloon"));
google.maps.event.addListener(marker, 'click', function() {
balloon.open(marker);
});
});
</script>
</head>
<body>
<div id="mapCanvas"></div>
<div id="balloon"><nobr>東京駅<br>バルーンのテストです。</nobr></div>
</body>
</html>
以上。
2012/05/27
9leapに投稿してみた
昔作ったシューティングゲームをHTML5に移植して 9leapに投稿してみた。
結局 enchant.js は使っていない。
enchant.js は DOM ベースで実装されている為、
iPhone 等で実行するとかなり遅い。
fpsを表示するゲームが投稿されていたので iPod4
で実行してみたところ 10fps 程度しか出ていなかった。
シューティングにはちょっと厳しい。
なので Canvas でフルスクラッチしたのだがこれだと
30〜40ms/frame で 20fps を余裕を持って確保できた。
結構遊んでもらえて色々コメントも付くので 9leap は結構楽しいかも。
ソースに興味有る人はここからどうぞ、なのだけど未整理なのでホントに参考程度です。
- http://kotemaru.googlecode.com/svn/trunk/k-games/war/tatesyu/
2012/05/21
9leapのHTML5ゲームコンテスト
HTML5のゲーム用フレームワークに enchant.js
と言うのを見付けた。
iPhone/Android向けなのだがこれの開発元がゲームコンテストを
開いていて数百の投稿が有る。
- http://9leap.net/
2012/05/11
html5のDOMとCanvasの描画性能
「ビー玉ころころ」でDOM(imgタグ)とCanvasを使った場合の
描画速度に差があるのか気になったので調べてみた。
こんなサイトを見付けた。
で、PCでの結果を見ると Canvas 圧勝。
テストコードが公開されていたのでiPodTouch4で試してみた。 テストコード：指定した個数の矩形画像が下に流れ落ちる。
- 参考：HTML5はFlashの3倍重かった! 描画パフォーマンスの比較
http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/
で、PCでの結果を見ると Canvas 圧勝。
テストコードが公開されていたのでiPodTouch4で試してみた。 テストコード：指定した個数の矩形画像が下に流れ落ちる。
20年勤めた会社がリーマンショックで消滅、紆余曲折を経て現在はフリーランスのSE。
失業をきっかけにこのブログを始める。
