ブログ用のチェス局面図の作成方法 その3 (続・自作してみた)

チェスアプリ

前回書いたプログラムは白が透けてしまって見栄えが良くないので、透けないようにしてみました。Wikimediaにあるチェス駒(Category:SVG chess pieces – Wikimedia Commons)を使っています。

ブログ用のチェス局面図の作成方法 その2 (自作してみた)
前回、Arenaを使ってブログに載せる局面図(diagrams)を作成する方法を書きましたが、ファイルサイズを小さくする手間暇がかかるのが面倒です。もっと簡単に作成する方法を探しましたがどうにも見つからないので、自分でプログラムを書いてみました。局面図の作成方法...

ブログ用のチェス局面図の作成方法 その1 (Windows/Arena)
ブログに載せる局面図(diagrams)をどうやって作成するか試行錯誤しています。chess.comなりArenaを動かしてスクリーンショットを取るのが簡単で分かりやすいのですが、毎回同じ位置を切り出すのが難しく、ブログに掲載すると微妙に位置がずれているのが気になります...



今回作成した画像

SVGとPNG画像です。SVG駒のサイズに合わせて、盤も少し小さくなっています。ファイルサイズはSVGが18KB(圧縮後13KB)、PNGが30KB(圧縮後6KB)です。

駒画像の情報が多いので、SVGのファイルサイズがずいぶん増えました。

SVG


PNG


現在、PNGはSVGと同じサイズ(上図は410×410)なのですが、Retinaディスプレイでの表示を考えると倍サイズで作成して表示時に縮小した方が綺麗なので、試しに作成してみました。圧縮後10KBほどになります。

PNG倍サイズ


座標(1-8,a-g)も入れた方がいいのかな? 少し悩んでいます。

チェスアプリ

Posted by