画像ファイルを使用せずに綺麗な局面図（SVG形式）を載せる方法
ブログやウェブサイトに将棋の局面図を載せたいとき 、「局面図作成」、「Kifu for Windows」などのアプリケーションソフトを使用して局面図画像ファイルを作成しアップロードするか、「クラウド将棋局面図ジェネレーター」などのWebAPIを利用して局面図画像を埋め込む方法が一般的だ。
しかし前者の方法だと、作成した局面図画像ファイルをいったんどこかのローカルフォルダに保存した後所定のサーバにアップする手間が発生したり、ローカルスペース、サーバスペースを少しずつ消費していく欠点が挙げられ、後者の方法だと、WebAPIサービスの提供が終了した場合局面図が表示されなくなるというリスクが伴う。
そこで今回、画像ファイルを使用せず、APIを埋め込むこともなく、カスタマイズ性に優れたSVG形式の美しい局面図を載せる方法を紹介する。
shogizumen.jsを設置しておく
最初にして最大の難関。js(JavaScript)ファイル「shogizumen.js」を、局面図を載せたいブログやウェブサイトに組み込んでおく。「shogizumen.js」は、後述するBOD形式の盤面テキストを、SVGで描いた局面図に置き換えて表示するスクリプトで、下記サイトからダウンロードでき、使い方やスタイルシートによるカスタマイズ方法についても紹介されている。
なおjsファイルを直接設置できない場合の例として、「はてなブログ」に設置する場合を詳しく解説したページを紹介しておく（先日も紹介しているので再掲）。このページでは、スタイルシートについてや、以降の手順のはてなブログにおける解説も詳しく載っているので、とても参考になる。
BOD形式の盤面テキストを作成する
BOD形式、と言われても聞き慣れないかもしれないが、
後手の持駒：なし
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
|v香v桂v銀v金v玉v金v銀v桂v香|一
| ・v飛 ・ ・ ・ ・ ・v角 ・|二
|v歩v歩v歩v歩v歩v歩v歩v歩v歩|三
| ・ ・ ・ ・ ・ ・ ・ ・ ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ ・ ・ ・ ・ ・ ・ ・|六
| 歩 歩 歩 歩 歩 歩 歩 歩 歩|七
| ・ 角 ・ ・ ・ ・ ・ 飛 ・|八
| 香 桂 銀 金 玉 金 銀 桂 香|九
+---------------------------+
先手の持駒：なし
という形式の盤面テキストデータのことで、例えば
- 「Kifu for Windows」なら「編集」－「局面のコピー」
- 「将棋所」なら「編集」－「局面コピー(KIF/KI2形式)」
- 「ShogiGUI」なら「編集」－「局面コピー」－「BOD」
から、現在表示中の局面の盤面テキストを出力可能だ。また、アプリケーションソフトを使用しなくても、「将棋盤局面図を作成」を利用すれば盤面を編集しながらBOD形式の盤面テキストを取得できる。
盤面テキストを貼り付ける
作成した盤面テキストを、「shogizumen.js」を仕込んでおいたブログやウェブサイトに貼り付ける。その後、この盤面テキストの前後に、
<pre class="shogizumen">
後手の持駒：なし
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
|v香v桂v銀v金v玉v金v銀v桂v香|一
| ・v飛 ・ ・ ・ ・ ・v角 ・|二
|v歩v歩v歩v歩v歩v歩v歩v歩v歩|三
| ・ ・ ・ ・ ・ ・ ・ ・ ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ ・ ・ ・ ・ ・ ・ ・|六
| 歩 歩 歩 歩 歩 歩 歩 歩 歩|七
| ・ 角 ・ ・ ・ ・ ・ 飛 ・|八
| 香 桂 銀 金 玉 金 銀 桂 香|九
+---------------------------+
先手の持駒：なし
</pre>
のようにタグを挿入する。
これにより、JavaScriptが盤面テキストに適用され、自動的に綺麗な局面図に変換し、描画表示してくれる。参考例は以下の通り。
後手の持駒：なし ９ ８ ７ ６ ５ ４ ３ ２ １ +---------------------------+ |v香v桂 ・v金 ・v金 ・v桂v王|一 | ・v飛 ・ ・ ・ ・ ・v銀v香|二 |v歩 ・v歩v歩v銀v歩v角v歩v歩|三 | ・ ・ ・ ・v歩 ・v歩 ・ ・|四 | ・v歩 ・ ・ ・ ・ ・ ・ ・|五 | ・ ・ 歩 歩 歩 歩 歩 ・ ・|六 | 歩 歩 角 ・ 銀 金 ・ 歩 歩|七 | ・ ・ 飛 ・ ・ ・ 銀 ・ ・|八 | 香 桂 ・ ・ ・ 金 王 桂 香|九 +---------------------------+ 先手の持駒：なし 手数＝27 ▲３九玉 まで
うまく表示できたら、スタイルシートを使ったカスタマイズに挑戦するのも良いだろう（上の例はオリジナルのスタイルシートを適用済み）。最終手の太字の強調表示や、色、サイズ、フォントの変更など、様々なカスタマイズが可能だ。上述のshogizumen.jsにカスタマイズ方法が載っている。
「そもそもスタイルシートって何？」という方は、ネットで調べたり参考書を読んでみたりすると良いと思う。
改訂新版 スタイルシート ポケットリファレンス 〔CSS3対応〕
- 作者: 藤本壱
- 出版社/メーカー: 技術評論社
- 発売日: 2013/01/24
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
まとめ
はじめに述べたとおり、「shogizumen.js」の設置が一番の難関だと思う。
が、これを乗り越えれば、以降は画像ファイルを作成しアップロードする手間が省け、盤面テキストを貼り付けるだけになるので、局面図の設置がとても楽になるはずだ。
興味を持った方は一度お試しあれ。
SVG局面図のテスト
約５年半ぶりの更新。御多分に洩れず、藤井四段の大活躍に影響されており、将棋熱が再燃してきている。
以前から、狼将棋のブログさんで使用されているSVG（Scalable Vector Graphics、スケーラブル・ベクター・グラフィックス。詳しくは「WEBデザイナーのはじめての「SVG」 - ウェブ企画ラボ」などを参照）形式で描画された将棋図面に興味を持っていたのだが、先日、これを使用するためのjavascriptが公開された。
はてなブログでの使用方法については、コンピュータ将棋研究ブログさんの以下のページを参照にすると良い（このブログを読んでいて、shogizumen.jsの公開を知った）。
はてなダイアリーだとjavascriptの使用が制限されており導入できなかったため、これだけのために2003年から利用してきた「はてなダイアリー」を離れ、「はてなブログ」へ移行した。これについてはまた別の記事で触れたい。
というわけで、SVG局面図のテスト。拡大／縮小しても、文字にギザギザが現れない。
後手の持駒：なし ９ ８ ７ ６ ５ ４ ３ ２ １ +---------------------------+ |v香v桂 ・ ・ ・v玉v角v桂v香|一 | ・v飛 ・v銀v金 ・v金 ・ ・|二 |v歩 ・ ・v歩 ・ ・v銀v歩v歩|三 | ・v歩v歩 ・v歩v歩v歩 ・ ・|四 | ・ ・ ・ ・ ・ ・ ・ ・ ・|五 | ・ ・ 歩 歩 歩 ・ 歩 ・ ・|六 | 歩 歩 銀 金 ・ 歩 銀 歩 歩|七 | ・ ・ 金 ・ ・ ・ ・ 飛 ・|八 | 香 桂 角 玉 ・ ・ ・ 桂 香|九 +---------------------------+ 先手の持駒：なし 手数＝25 ▲３七銀 まで
NHK将棋講座で１月から石田流講座
あけましておめでとうございます。昨年同様更新頻度は低くなる見込みですが、今年もよろしくお願いします。
「戸辺流振り飛車で目指せ！初段」
大活躍中の若手振り飛車党・戸辺誠六段が講師を務め、タレント・つるの剛士（敬称略）が司会を務めていることで話題のNHK将棋講座「戸辺流振り飛車で目指せ！初段」。
戸辺流振り飛車で目指せ！初段
今流行の戦形、中飛車や石田流三間飛車の考え方を半年にわたり伝授していきます。いずれの戦法も振り飛車側から積極的に動けるのが特徴。従来の振り飛車の感覚とはひと味違う、「戸辺流」の攻めをこの機会にしっかりマスターしていきましょう。
つるの剛士効果で、これまで将棋に興味がなかった方々が将棋を始めるきっかけになっているに違いない。とはいえこの講座は初段を目指す方向けの比較的高度な内容となっている。この辺り、司会のチョイスと講座内容の方針がちょっとちぐはぐと言えるかもしれない。
つるの剛士は10年以上前から将棋を指していて、数々の将棋の番組に出演したり、過去には「つるの将棋クラブ」というWebサイトまで持っていた（現在は閉鎖している）本当の将棋好きであり、好感が持てる。
「すっごい破壊力! 石田流三間飛車入門」
講座「戸辺流振り飛車で目指せ！初段」では、ここ数ヶ月間中飛車（ごきげん中飛車）講座が続いていたが、いよいよ１月から石田流講座が始まる。各週のタイトルは以下の通り。
- 1月8日(日) ようこそ! 石田流の世界へ
- 1月15日(日) 7七桂から瞬発力で勝負
- 1月22日(日) 7七銀から機動力で攻略
- 1月29日(日) 最強の攻撃形! 石田流本組み
この講座の効果で、石田流の人気がまた上がることになるだろう。
なお、将棋入門者がいきなり石田流を指しこなすのは相当難しいのではないかと思う。ゴキゲン中飛車以上に激しい展開になりやすいし、持久戦になっても、浮き飛車の戦いは将棋を指し慣れた人にとっても特殊なものだからだ。
将棋入門者の方は、まずは角道を止めるノーマル三間飛車の戦い方を知ってから、石田流を指し始めたほうがよいと思う。
「三間飛車のひとくちメモ」「フラ盤」は移転しています
2011/10/12のエントリーでも述べました通り、「三間飛車のひとくちメモ」および「フラ盤のページ」は以下の場所に移転しています。
以前は「AAA!CAFE」上で運営していましたが、2011/12/01をもってAAA!CAFEのサービスの提供が終了となりました。
10月、11月中は、旧サイト上には新サイトへのリンクページを設置していましたが、12月に入ってからは旧サイトを訪れると「指定されたページまたはファイルは存在しません。」と書かれたページしか表示されません。
Google検索では、「フラ盤」で検索しても新サイトがまだ最上位には来ていない状況です。
ブログ内のリンク集などで、旧サイトへリンクを貼っている方は、お手数ですが新サイトへのリンクに修正いただきますよう、よろしくお願いいたします。
「萌えるチェスクロック」発売
棋士や声優の声が出る対局時計
いつかは出るかも、と想定の範囲内だった商品が、実際に発売になった。
商品の説明
棋士さんや声優さんの声が出る対局時計（チェスクロック）です。将棋、囲碁、チェス、オセロ、バックギャモンなどの公式大会ではもちろん、TCGやボードゲームで利用しても楽しめることうけあいです。
秒読みなどの読み上げだけでなく、対局前後のあいさつにも適用されるようだ。
Amazon掲載の画像に載っている情報によると、様々な対局ルールに対応している。読み上げをしてくれる棋士と声優の名前も載っているのだが、画像が小さくてよく見えない。販売元のWebサイトを少し探してみたのだが、見つけることができなかった。詳細情報が載っているサイトがあるとよいのだが。
値段は12,600円と、通常の対局時計（下図）よりもさらに数千円高い。「萌え」分にそれだけの価値を見出せれば、買いといえるだろう（対局ルールが通常の対局時計よりも豊富なところもセールスポイント）。余談だが、載っているイラストは個人的には上手いとは思えない。
関連エントリー
- 対局時計（チェスクロック）について、一言物申す（2008/11/24のエントリー）
- Android向け対局時計アプリ「チェスクロイド」をAndroid Marketに登録しました（2010/09/20のエントリー）
- おかげさまで、4000ダウンロードを突破しました。
