駒画像の差替えに備えた対応を考える

前回の記事で、駒画像をオリジナルのものに変えようと思っているという話を振ったわけだが、そもそも、駒画像のサイズは横幅60pxで、かつ、高さが64pxであることを前提に画像の位置調整をしていた。

var c = piece[board[i]].cloneNode(true);
var x = file(i);
var y = rank(i);
c.style.left = (30+(x-1) * 60) + "px";
c.style.top = (30+(y-1) * 64) + "px";

 

 サービスは見た目が大事なので……

たとえ、棋力向上に役立つようなコンテンツを集めることができたとしても、結局、使われないことには、そのサービスの価値は無く……使われるためには、ついつい使いたくなるような外観であることが大事だと思う。（この点について、「56shogi」は素晴らしい。）

その点で、駒画像を見直して、つい手にとってしまいたくなるような可愛らしい将棋盤や将棋駒の素材を準備したいわけだが、理想の盤駒ができあがるまでに、何度か差替え作業が発生しそうな気がしている。

それに、モバイル対応のことを考えると、盤駒のサイズについては、とにかく、簡単に変えられるようにしておくのが望ましい。

 

定数に持たせた数字を元に画像の位置を計算する

解決策は、予め定義しておいたサイズ情報を基準にして、画像の位置を計算させることだ。

まずは、グローバルに定義したのが、以下の定数だ。

var BOARD_PADDING_TOP = 30;
var BOARD_PADDING_LEFT = 30;
var PIECE_WIDTH = 60;
var PIECE_HEIGTH = 64;
var CAPTURE_BOARD_PADDING_TOP = 5;
var CAPTURE_BOARD_PADDING_LEFT = 5;
var CAPTURE_BOARD_WIDTH = 318;
var CAPTURE_BOARD_HEIGHT = 238;
var CAPTURE_BOARD_PADDING_BOTTOM =
    CAPTURE_BOARD_HEIGHT - CAPTURE_BOARD_PADDING_TOP - PIECE_HEIGTH;
var CAPTURE_BOARD_COLUMN = (CAPTURE_BOARD_WIDTH - CAPTURE_BOARD_WIDTH % PIECE_WIDTH)/PIECE_WIDTH;

 

この数値を使っている箇所が、以下のような感じ。

for (var i = 0; i <= 110; i++) {
    var c = this.piece[Shogi.board[i]].cloneNode(true);
    var x = file(i);
    var y = rank(i);
    c.style.left = (BOARD_PADDING_LEFT + (x - 1) * PIECE_WIDTH) + "px";
    c.style.top = (BOARD_PADDING_TOP + (y - 1) * PIECE_HEIGTH) + "px";

//以下、省略

上記では、駒台に駒をいくつずつ並べるかも計算しているが、駒台のロジックは省略する。

 

DOM制御をする際に、各要素のサイズをpixcel単位で制御するわけで、よく「神は細部に宿る」等と言うが、妥協は禁物だと思う。