2017-09

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

クラウド将棋盤ジェネレーターにHIDETCHI さんの新国際駒の追加 & ponanza_shogiの局面を国際駒で閲覧するブックマークレット

このエントリーをはてなブックマークに追加
クラウド将棋盤ジェネレーターに国際駒(新デザイン)が追加になりました。
追加の際には国際駒の作者であるHIDETCHIさんに縮小版駒を作成して頂くという多大な協力をお願いし、快諾していただきました。
この場を借りてお礼を申し上げます。

例として、全ての駒を閲覧出来る局面図を作成しました。

通常の将棋の局面としてはありえない図ではありますが、全ての駒が閲覧出来るものとなっております。

ちなみに旧デザインはこちらです。どこが変わっているのか調べてみるのも面白かもしれませんね。

また、国際駒に追加に際して、@ponanza_shogiが出力する局面図を国際駒で閲覧するブックマークレットを用意しました。

以下のリンクを右クリックでブックマーク、またはドラッグ&ドロップでブックマークツールバーに登録して、@ponanza_shogiの局面図が表示されている時にブックマークのボタンを押すと局面図が国際駒になります。

国際駒で閲覧


以下はGoogleChromeの例ですが、ブックマークツールバーはアドレスバーのすぐ下にあります。どのブラウザでも大体同じです。
bookmarklet.png

上記の方法でも追加出来ない方は以下の文字列をリンク先のURLとして登録してください。
javascript:(function(){if(location.host!='sfenreader.appspot.com'){return;}location.href+='&piece=international';})();


このブックマークレットを登録して、ponanza_shogiの画面を見ている時に「国際駒で閲覧」を押すと国際駒で局面を見ることが出来ます。王位戦の投了図はこんな感じになります。
international.png

IE9、Firefox7、Google Chrome14、Opera11、Safari5.1で動作を確認しています。
スマートフォンについては未確認ですが、Androidの標準ブラウザはブックマークレットを使えないという情報もあるそうです。変わりに、Android版Firefox等の別ブラウザでお使いください。

国際駒で局面を眺めるとまた違った趣があります。個人的には龍のデザインがお気に入りです。

同時に拙い英語ではありますが、英語ページも公開しました。ただ、Web上で局面図を作成するページに国際駒を足してないので修正はこれからになります。(そんなに大きな修正では無いはずです)
スポンサーサイト

Canvasの描画(drawImageとputImageData)について

このエントリーをはてなブックマークに追加
3分くらいで読めます。

局面図をWebで作成するページがFirefox7だと後手の駒が全部歩になってしまうという問題が出てしまいました。
http://sfenreader.appspot.com/create_board.html

HTML5のCanvasに描画する方法については、drawImageとputImageDataという2つのメソッドがあります。
前者はHTMLImageElementやHTMLCanvasElement、果てはHTMLVideoElementが描画できるので万能に見え、これだけを使っていれば良いように思えます。

しかし、HTMLCanvasElementの内容をdrawImageした時に、実際にdrawされる内容はdrawImageが実行された瞬間ではない実装があるようです。実際にはFirefox7やFirefox5がそうでした。なので、drawImageしたCanvasの内容を頻繁書いたり消したりしていると、望む結果が得られないことがあります。

クラウド将棋盤ジェネレータでは、後手の駒を180度回転させて描画する時に、隠しCanvasに書いてからそれをdrawImageするという手法を使っていましたが実際にdrawImageされるタイミングが異なるためにFirefox7では全て同じ駒になるという問題が生じていました。

そこで、getImageDataとputImageDataを組み合わせることにしました。この方法だと実際にイメージを取得した瞬間の画像が描画されることが保証されるようです。実際に、各ブラウザ、(IE9、Firefox7、Chrome14、Opera11、Safari5)等で動かしてみましたが特に問題ないようです。

getImageDataで得られるデーターはHTMLImageElementとは互換性がないため若干使いづらいのですが、現状はこの実装で行こうと思います。例えば、普通にImageを読み込んで書く時でもputImageDataを使う場合(ImageDataで書く場合)どこかのCanvasに描画してからgetImageDataでImageDataを取得するという2度手間になってしまいます。またputImageDataはexCanvasやFlashCanvasでの使用に難があるという情報もあります(実際には未確認)

getImageDataのImageDataはピクセル毎にアクセス可能であるというメリットもあるのですが、現状この機能は使わないのでとりあえず一時的に画像を保管できる機能としてしか使っていません。

(2011/09/11:追記) これ以上に重大な問題があって、getImageDataは別ドメインを描画したキャンバスのデータの取得がセキュリティ的に許されていないという問題があります。いわゆるクロスドメインな場所にある画像へのアクセスが禁止されているということです。これは悪意のある攻撃者が個人情報を含む画像からデータを抜き取ることを防ぐ目的だとされています。あるいはCaptcha的な画像認証を解析するコードを埋め込まれることなどを懸念しているのかもしれません。

Canvasが出てからまだしばらく経つのにブラウザ間の実装がこなれてない感じがしますね。そろそろライブラリが出てきてもいいような気がするのですが…

Web上で将棋局面図を作るページがクロスブラウザ対応になりました

このエントリーをはてなブックマークに追加
ページはこちら

過去バージョンでは32bit版Firefox6と64bit版ブラウザでは正常に動作しないことがわかってましたが、今回の修正でどちらも正常に動くようになりました。
Firefox5については逆向きの駒が正常に描画されないという問題があることがわかっていますが、すぐにFirefox6にアップデートされることがアナウンスされていますので今後対応する予定はありません。

@na2hiroさんの協力を頂いてMac版Google Chromeでも動作することを確認しました。恐らくですがLinux版でも同様だと思われます。

あと対応していないブラウザはWindows XPでも動作するIE8ということになるのですが、作者の手元に動作環境が(用意しないと)ないということと、IE8が使える人はKifu for Windowsが使えるという代替手段があること、サポートするためにはかなりの労力が必要とされることから、仮にサポートするとしてもかなり後回しになることをご了承ください。

将棋局面図WebAPIに対局者名等を入れられるようになりました

このエントリーをはてなブックマークに追加
第52期王位戦の初戦は△広瀬王位の勝ちになりました。

先日公開した将棋局面図WebAPIですが、日本語を画像化する方法がわかったので「先手名」「後手名」「タイトル」を入れることに対応しました。

http://sfenreader.appspot.com/

「タイトル」については「第52期王位戦第1局」みたいなのでも「図は▲5二銀まで」みたいな局面の説明でもOKなので、汎用的な用途を想定しています。
日本語フォント的に潰れているのが作者としても気に入りませんが、他のフォントを埋め込む方法がわかるまではこれでいこうと思います。
注意点として「タイトル」にはUnicodeで既定されている駒のマーク、☗☖が使えませんので注意してください。代りに▲△を使ってください。

以下にサンプルとして王位戦の封じ手の局面と投了図を書いておきます。



コード



コード


次の一手は、オープンソース、短縮URL対応(さすがにimgタグが長すぎる)、国際駒の追加、矢印を入れる機能(次の一手、手順の説明)の追加などです。

将棋局面図WebAPIに対局者名等を入れられるようになりました »

将棋局面図WebAPIを作りました

このエントリーをはてなブックマークに追加
PONANZAの作者の@issei_yさんが、局面図をTwitter botから貼ることが出来ないと嘆いておられたので作ってみました。

http://sfenreader.appspot.com/

Twitter bot だけではなく、通常のブログの局面図を貼ることにも使えるのが大きな特徴です。
上記のリンク先には、Kifu for Windows の局面図から画像を生成するスクリプトもありますので試してみてください。

@ginsho さんSFEN Readerにヒントを得て作っていますが、ブラウザ拡張ではなくWebAPIにした理由は「ブラウザを選ばない」「スマートフォン環境でもみられる」「直接ブログに貼れる」「Chrome使っててもTwitterは別クライアントでやっている(自分がそう)」などの理由で画像WebAPIにしました。
もちろんそれなりの負荷はあると思うのでそこはGoogle App Engine頼みです。

以下にサンプル図を貼っておきます。羽生善治 対 加藤一二三戦の伝説の▲5二銀の瞬間です。


imgタグはこうなります。
<img src="http://sfenreader.appspot.com/sfen?sfen=ln1g5%2F1r2S1k2%2Fp2pppn2%2F2ps2p2%2F1p7%2F2P6%2FPPSPPPPLP%2F2G2K1pr%2FLN4G1b%20b%20BGSLPnp%201&lm=52">

最後に着手したマスを強調表示出来ないかとのリクエストも頂いてますので、そのうち対応したいと思います。
対応しました。lm というパラメータを指定することで特定のマス目を強調出来ます。

おしむらくは、(前の意見と矛盾しますが)TwitterのWeb画面上で画像として展開されないことなんですよね。twitpicとか見ていると、拡張子で判断しているわけじゃなさそうだし、どうやっているんでしょうか?

«  | ホーム |  »

プロフィール

fantakeshi

Author:fantakeshi
Web:ここ
Twitter ID:fantakeshi
自作物やプログラムやまとまった技術的メモについて

RSSに追加

自作物

最新記事

Twitter

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

自作物 (26)
一般 (1)
将棋 (12)
BONANZA (1)
ponanza (1)
HTML5 (2)
Chrome (1)
WebAPI (1)
Webサイト (2)
プログラム (2)
Tips (1)

カウンター

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。