ファン猛のブログ

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

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

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

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

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

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

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

・国際駒で閲覧


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


上記の方法でも追加出来ない方は以下の文字列をリンク先のURLとして登録してください。

javascript:(function(){if(location.host!='sfenreader.appspot.com'){return;}location.href+='&piece=international';})();

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


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

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

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

3分くらいで読めます。

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

HTML5のCanvasに描画する方法については、drawImageとputImageDataという２つのメソッドがあります。
前者は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を取得するという２度手間になってしまいます。またputImageDataはexCanvasやFlashCanvasでの使用に難があるという情報もあります（実際には未確認）

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

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

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

3分くらいで読めます。

先のエントリで将棋の局面図を作るWebUIをアップデートしたと書きましたが、一番の問題はCanvas要素上でクリックされた座標を取得する方法がブラウザによって異なることでした。

ここでのポイントはページ内座標ではなくCanvas要素上でクリックされた座標の取得ということです。ページ内座標だとHTMLをいじくっているうちに座標がうまく取れない、なんてことが起こり得るのでCanvas上の座標でクリックされた場所を取得したいのです。

そのために、マウスクリック時のイベントオブジェクトではlayerXとlayerYというそのものずばりのプロパティがあるのですが、これだとFirefox6や64bit版ブラウザでうまく動作しないという問題がありました。

そこで検索した所、クリック時のページ内座標の取得についてはブラウザ別でも安定して取得する方法があるので、ページ内座標の取得→Canvasが配置されている座標のxy座標を引いて計算するという戦略でCanvas上の座標を取得するという方法が載っていました。Stack Overflowさまさまです。

以下はその引用です。

var x;
var y;
if (e.pageX || e.pageY) { 
  x = e.pageX;
  y = e.pageY;
}
else { 
  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
  y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

しかし、クロスブラウザ対応ってクロスプラットフォーム対応より大変なんじゃないかという気がしてきました。まず主要ブラウザだけで、Internet Explorer、Firefox、Google Chrome、Opera、Safariと5つあり、このうちInternet Explorerはバージョン違いを考慮する必要があります。またFirefoxも4.0で大幅にUIを変えたり、アドオンの対応状況が微妙だったりということもあってアップデートに慎重な人もいたりします。ただ、これらに64bit版というのが掛け算でかかってくると頭の痛いところです。スマートフォンやタブレットに搭載のブラウザで動くというのは大きな魅力ではあるのですが、解像度のことを考えると画面デザインの変更は必須ですし…

ネイティブアプリの64bit対応ならば、APIの有無とかそもそも書き方が間違っている(例えばポインタのサイズ計算が間違っている)ということで解決できるのですが、ブラウザの対応についてはその時々のブラウザの実装状況というものに大きく左右されるので一瞬しか有用な情報ではなくバッドノウハウの最たるものではないかと思います。HTML5になってウェブアプリがリッチになったとは言え、完成されたライブラリの充実を待たないと修羅の道に足を踏み込むことになりそうです。

ページはこちら

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

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

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

ページはこちら


ブラウザ上で局面図を作るページを暫定的に公開しました。これで、クラウド将棋盤ジェネレーターは局面図を作るための全ての機能がWeb上で完結したことになります。Kifu for Windowsが無いOSでも局面図を作ることが出来るようになります。

局面図を作るUI部分が一部のブラウザ等に対応していない、などの問題点があることがわかっていますが、今後対応していく予定です。推奨環境はGoogle Chromeですが、64bit版で問題があることがわかっています。問題とは盤面をクリックした時に、期待した駒が選択されない（クリック時のマウス座標の取り方がうまくいってない）ことです。

また、駒の種類変更にダブルクリックを使ってますが、余計な範囲選択が起きるというのも悩みどころです。右クリックも検討しましたが、どうも右クリック時はマウス座標を取ることが出来ないようなのでダブルクリックにしました。

Webで作成した以下の局面図は、この前天下一将棋会でゴキゲン中飛車をやろうと思って、間違って四間に飛車を振ってしまった時、「戦法：ダイレクト四間飛車！」と力強いナレーションが入った時の盤面です。この棋譜ではその後、中飛車に振りなおして純粋に一手損して負けました（泣）。



このWebの局面図作成UIは、独自棋譜ビューワーを作るための試験的実装も兼ねています。構想としては、iPhoneの将棋ブックスやiPadの将棋世界みたいに、タッチすると局面図が動くものを作って個人のブログに貼れるようにしたいと思っています。今までのJavaアプレットを使ったものや、FLASHを使ったものと違い、スマートフォンでも見られるものにしたいというのが最大の目標です。