ブラウザにお手軽に逆さ駒を表示する方法0.3

なんとか簡易に将棋盤を表示させようという試みがうまくいかないので、ひとまず普通に将棋盤を表示してみます。

987654321
後手香.PNG後手桂.PNG後手銀.PNG後手金.PNG後手玉.PNG後手金.PNG後手銀.PNG後手桂.PNG後手香.PNG
後手飛.PNG後手角.PNG
後手歩.PNG後手歩.PNG後手歩.PNG後手歩.PNG後手歩.PNG後手歩.PNG後手歩.PNG後手歩.PNG後手歩.PNG
先手歩.PNG先手歩.PNG先手歩.PNG先手歩.PNG先手歩.PNG先手歩.PNG先手歩.PNG先手歩.PNG先手歩.PNG
先手角.PNG先手飛.PNG
先手香.PNG先手桂.PNG先手銀.PNG先手金.PNG先手玉.PNG先手金.PNG先手銀.PNG先手桂.PNG先手香.PNG

上の図で使われている駒フォントの画像は、ごく普通の透過つきPNGファイルですが、画像のもとになっているSVGファイルにリンクしています。SVGファイルは今まで通り、SVG対応のブラウザやSVG対応プラグインをインストールしたブラウザで閲覧することができます。

このSVGファイルと、これを他のファイル形式に変換した画像に対する一切の権利上の制限を主張しないことにいたしますので、どなたもご自由にお使いください。特に、画像の改良版の発表を歓迎いたします。実は成駒をまだ作っておりませんので、やってみたい方は是非。また、SVGの素材サイトはそう多くないでしょうから、技術的なお問い合わせやご要望も歓迎いたします。

これらの画像は、当ブログ主がOugishiで下地を作ってInkscapeで整形したものです。ツールの使い方が若干間違っている気もしますが、追加予算ゼロでコンピュータ将棋協会のページに居候している当ブログとしてはこんなものでご勘弁を。

あえてSVGを使う最大のメリットは、拡大・縮小に強いベクターグラフィックが使えることです。図の駒のサイズを変える場合、PNGやJPEGのようなよくあるラスターグラフィックの幅と高さを変えて表示する代わりに、もとのSVGファイルをサイズの異なるラスターグラフィックファイルに変換することで、文字のジャギー(ギザギザ感)を最小限に抑制することができます。ラスターグラフィックへ変換する方法は、たとえば上記のInkscapeが透過PNGへの変換機能を持っています。

と、このシリーズも結局は面倒な話になってしまいましたが、これからもWebで将棋を扱うのにそこそこ使えるネタを引き続きやっていく予定です。それと、駒の字形は今後微調整すると思いますので、知らないうちに変わっていても、そんなもんだと思ってください。

5 Comments »

  1. 太助 said

    こんにちは。
    今月からですが、将棋観戦WEBなるサイトを作って私もいろいろと試してます。

    で、やはり特定の局面が簡単にWEBに表示できないのではやりにくいので
    棋譜ファイルと指し手Noを指定するとその局面が画像で表示されるような仕掛けを作りました。

    ※ まあ当然うちのサイトにある棋譜しか表示できませんが
    http://dbm.cc/bn/Mc.exe?Parm=sgu!NSColumnT&Init=CALL&SYSKEY=0008

    駒と盤面はテキストで作ったごく貧弱なものなので、ご紹介の駒画像がフリーということであれば(笑)、ぜひ使わせていただきたいと思います。

  2. 当ブログのSVG画像につきましては、関連の方々の諸権利に配慮していただく範囲において、ご自由にダウンロード・加工・編集してお使いください。
    サイトを拝見いたしました。ベクターグラフィックの駒を使うと、複数のサイズの盤面を用意するのに便利かもしれませんね。
    成駒のグラフィックもできるだけ早めに作りたいと思います。グラフィックのご提供もお待ちしております。

  3. 太助 said

    お返事どうもです。
    成駒の方はお暇なときでけっこうです。
    (今月は将棋にいろいろ時間を使い過ぎてまして)
    それからCSAの例会にも一度出席してみたいと思います。
    (同時に入会できるんでしたっけ?)

  4. CSAに入会される場合は、入会申込の手続きをお願いいたします。
    コンピュータ将棋協会の案内をお読みの上、メールにて記入済の入会申込書をお送りください。

    入会申込手続きは例会の直前の理事会にて承認されますので、その後の例会に参加していただけます。
    よろしくお願いいたします。

  5. 番外編: ブラウザで森九段の名を正確に表記する方法…

    SVGというあまり流行っていない形式を使って将棋盤を表現するという試みを何度かに分けて行なってきましたが、今回はその脱線ネタです。流行らないといっても、SVGはWebで (more…)

RSS feed for comments on this post · TrackBack URI

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です