第17回 テーブルを使ったシンプルなドット絵エディタを作ってみる – jQuery入門
2009 年 10 月 17 日 投稿者: naga3
エクセルを方眼紙のようにして書類を書く人いますよね・・・自分はエクセルを方眼紙のようにしてドット絵を描いていたタイプです。そんなわけで今回はテーブルを使ったドット絵エディタを作ってみましょう。
ドット絵エディタのデモ
16×16ドット限定です。下に一列に並んだパレットから色をクリックして塗ります。ソース
必要なら右クリックから保存してください。dot.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(function() {
var pals = ['000', '088', '00d', '438', '800', '888', '8cf', 'aa2', 'b82', 'c18', 'fbb', 'e00', 'fd0', 'feb', 'ddd', 'fff'];
var pushed = false;
var color = '';
var s = '';
for (var y = 0; y < 16; y++) {
s += '<tr>';
for (var x = 0; x < 16; x++) {
s += '<td> </td>';
}
s += '</tr>';
}
$('#canvas').html(s);
s = '<tr>';
for (var x = 0; x < 16; x++) {
s += '<td style="background-color: #' + pals[x] + ';"> </td>';
}
s += '</tr>';
$('#palette').html(s);
$('#canvas td').mousedown(function() {
pushed = true;
$(this).css('backgroundColor', color);
return false;
}).mousemove(function() {
if (pushed) $(this).css('backgroundColor', color);
return false;
});
$().mouseup(function() {
pushed = false;
});
$('#palette td').click(function() {
$(this).css('borderColor', 'yellow').siblings().css('borderColor', 'gray');
color = $(this).css('backgroundColor');
}).eq(0).click();
});
</script>
<style type="text/css">
table {
border-collapse: collapse;
margin-bottom: 16px;
}
td {
border: 1px solid gray;
width: 16px;
line-height: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<table id="canvas"></table>
<table id="palette"></table>
</body>
</html>
プログラムの解説
変数定義
var pals = ['000', '088', '00d', '438', '800', '888', '8cf', 'aa2', 'b82', 'c18', 'fbb', 'e00', 'fd0', 'feb', 'ddd', 'fff'];
var pushed = false;
var color = '';
palsはパレットの色を16進数3桁（CSSの定義方法）で定義しています。16個のパレットがあるので配列も16個です。pushedはマウスのボタンが押されているときだけtrueになるフラグです。colorには現在選択している色が入ります。キャンバス生成
上部のキャンバスを生成している部分です。
var s = '';
for (var y = 0; y < 16; y++) {
s += '<tr>';
for (var x = 0; x < 16; x++) {
s += '<td> </td>';
}
s += '</tr>';
}
$('#canvas').html(s);
空のセルを16行16列作ってidがcanvasのテーブルに入れています。パレット生成
s = '<tr>';
for (var x = 0; x < 16; x++) {
s += '<td style="background-color: #' + pals[x] + ';"> </td>';
}
s += '</tr>';
$('#palette').html(s);
空のセルを1行16列作ってidがpaletteのテーブルに入れています。その際、配列palsの色を背景色として設定しています。キャンバスの色塗り処理
$('#canvas td').mousedown(function() {
pushed = true;
$(this).css('backgroundColor', color);
return false;
キャンバスのセル上でマウスが押下されたとき、pushedフラグを立てて背景色を現在選択中のパレットの色にしています。
}).mousemove(function() {
if (pushed) $(this).css('backgroundColor', color);
return false;
});
さらにメソッドチェーンを使い、キャンバスのセル上でマウスを移動したとき、マウスが押下されているときのみ背景色を現在選択中のパレットの色にしています。
$().mouseup(function() {
pushed = false;
});
$()は$(document)の略です。画面のどこであっても、マウスのボタンを離したときに、pushedフラグをクリアしています。パレットの選択処理
$('#palette td').click(function() {
$(this).css('borderColor', 'yellow').siblings().css('borderColor', 'gray');
color = $(this).css('backgroundColor');
パレットのセル上でクリックしたときの処理です。まずクリックしたセルのボーダー色を黄色にし、それ以外のセルを灰色にしています。siblings()は自分の兄弟要素、つまり自分以外のセルということになります。次に変数colorにパレットの背景色をセットしています。
}).eq(0).click();
初期状態として、一番左のセルをクリックした状態にします。注意点とおまけ
ちなみに、このドット絵エディタには致命的な欠点があります。気づいているかも知れませんが「保存」ができないのです。JavaScriptのみで動かすと保存が難しいのですが、ひとつ解決策を考えました。ドット絵エディタ（保存付き）
保存ボタンを押すとテキストエリアに文字列が出てくるので全選択して、拡張子ppmのファイルで保存してください。ppmファイルは様々なビュアー、たとえばIrfanViewなどで見ることができるので適当な画像形式に変換するなりすれば使えます。
2009 年 10 月 19 日 1:28 PM
[...] 第17回 テーブルを使ったシンプルなドット絵エディタを作ってみる – jQuery入門 [...]