JavaScriptな囲碁の棋譜ビューア WGo.js

2015.02.10  |  JavaScript, ウェブ制作, 囲碁  |  Comments (3)

このブログでは囲碁の棋譜ビューアとしてGoswfという、Flashのソフトを使っていたのですが、自分でiPadを使っている時にも当然見ることができなくて、さすがにそろそろまずいかなあと思っていました。ところが、じゃあJavaScriptなので何かないかと探しても、意外なことに適当なのがぜんぜん見つからないんですね(最初に探し始めたのは、1年ぐらい前だったような気がする…)。せいぜいちょっとオールドファッションなEidoGoぐらいで、これは9路、13路、19路以外はちゃんと対応していないみたいです。というわけで、時間は掛かりましたが、ようやく見つけたのが今回のWGo.jsです(正確には、WGo.jsを利用したWGo.js Playerで棋譜再生ができます)。

WGo.js – javascript library for game of go
http://wgo.waltheri.net/

SGF Player | WGo.js
http://wgo.waltheri.net/player

こんな感じで表示させることができます。

Sorry, your browser doesn’t support WGo.js.

クリックしないと対局結果が表示されないのは気が利いていますし、コメントに座標が含まれていれば、その座標にマウスオーバーすると、その場所が画面に示されるのは、ちょっとおしゃれです。

以下、簡単に使い方の解説をします。

まず、ファイルをダウンロードしてきます。正式版では、パス(着手放棄)の扱いがおかしかったりするので、こちらから開発版を落としてきたほうが良いと思います(最新の開発版はこれはまたこれで、本当はできるはずの碁石の大きさの変更ができないような気がしますが…)。必要なファイルは、wgo/wgo.min.jswgo/wgo.player.min.jswgo/wgo.player.csswgo/wood1.jpgだけです。単色の碁盤、もしくは自前の碁盤の画像を使う場合は、wood1.jpgも必要ありません。その場合は、後で説明するように、碁盤の設定をしてください。

次に、ファイルをサーバにアップロードして、headタグ内で、wgo.min.jswgo.player.min.jswgo.player.cssをロードします。

<script type="text/javascript" src="path/to/wgo.min.js"></script>
<script type="text/javascript" src="path/to/wgo.player.min.js"></script>
<link type="text/css" href="path/to/wgo.player.css" rel="stylesheet" />

CMSなどを利用する場合は、絶対パスの方が良いかもしれません。wood1.jpgwgo.min.jsと同じところに置いておきます(もしくは、後で説明するように、パスを設定してください)。

最後に、ウェブサイトの棋譜ビューアを表示させたい所に、このように記述します。

<div
style="width:650px"
data-wgo="(;GM[1]FF[4]SZ[9];B[aa];W[bb];B[cc];W[dd];B[])"
>
Sorry, your browser doesn't support WGo.js.
</div>
Sorry, your browser doesn’t support WGo.js.

外部ファイルを読み込むこともできます。

<div
style="width:650px"
data-wgo="path/to/sgf-file.sgf"
>
Sorry, your browser doesn't support WGo.js.
</div>

初手以外を初期局面としたい場合は、このように記述します。

<div
style="width:650px"
data-wgo="(;GM[1]FF[4]SZ[9];B[aa];W[bb];B[cc];W[dd];B[])"
data-wgo-move="3"
>
Sorry, your browser doesn’t support WGo.js.

デフォルトでは、碁盤の画像はwgo.min.jsと同じ場所に置かれているwood1.jpgが使用されますが、それ以外の画像を使いたい場合は、このように記述します。

<div 
style="width:650px"
data-wgo="(;GM[1]FF[4]SZ[9];B[aa];W[bb];B[cc];W[dd];B[])"
data-wgo-board="background:'path/to/image.png'"
>
Sorry, your browser doesn't support WGo.js.
</div>
Sorry, your browser doesn’t support WGo.js.

碁盤を単色にすることもできます。

<div 
style="width:650px"
data-wgo="(;GM[1]FF[4]SZ[9];B[aa];W[bb];B[cc];W[dd];B[])"
data-wgo-board="background:'#bbccbb'"
>
Sorry, your browser doesn't support WGo.js.
</div>
Sorry, your browser doesn’t support WGo.js.

スタイルシートのwidthプロパティで、表示サイズを変更することができます。ただし、レイアウトも変わってしまう時があります(ちゃんと調べてないので、ちょっとよく分かっていません)。

これ以外にも、WGo.jsはかなりいろいろとカスタマイズすることができ、この手のソフトに求められる機能は、ほぼ網羅されている気がします。詳しくは本家サイトで調べてみてください。

WGo.jsは最低でも向こう5年、もしかすると向こう10年、問題なく使い続けることができるソフトだと思います。廃墟(笑)のようになったJavaを使ったウェブサイトとか、もう見たくありません(作られた時はものすごい労力がかかったでしょうに…)。今このタイミングで、Java、Flash、EidoGoからWGo.jsにみんなで移行しませんか?

jQuery 2.0を使い始めます

COSUMIのHTML5版ではjQueryを使用しているのですが、先日正式にリリースされたバージョン2.0に切り替えました。

オンライン囲碁ゲーム COSUMI
http://www.cosumi.net/

jQueryは現在、1.9系と2.0系という2つの系列があって、1.9系が通常版で2.0系がIE6~8に非対応なスペシャル版的な位置付けになっているんですが、COSUMIのHTML5版はもともとIE6~8では動かなかったので、割り切って2.0系を使い始めることにしました。たぶん、なんの問題も発生しないと思いますが、なにかあってもすぐに直せると思います。

iOS6ではページをスクロール中に発生したタッチイベントからJavaScriptのタイマーがセットされない?

このブログ記事で問題にしているiOSのバグは、iOS6.1ですでに修正されています

– – – – – – –

先日公開したCOSUMIのHTML5版には、「iPad3でページをスクロール中に碁盤や碁盤の周りのクリッカブルな所をタップするとその後の動作がおかしくなる」という不具合がありました。私もいまだによく分かっていないところがたくさんあるのですが、原因とそれに対してとった対策を簡単に書いておきたいと思います(このブログ記事には私の勘違いが含まれている可能性が高いです。すべてを鵜呑みにはしないでください)。

この不具合に気づいた時、まず最初に思ったのは、これはフェードイン・フェードアウトが絡んでいるのでは、ということでした。スクロール中のフェードイン・フェードアウトは、描画がたいへんなのではないかなと。しかし、必ずしもそうだと言い切れないような感じだったので、少しネットで検索してみると、こんな情報が見つかりました。

javascript – setInterval pauses in iphone/ipad (mobile Safari) during scrolling – Stack Overflow
http://stackoverflow.com/questions/11177774/setinterval-pauses-in-iphone-ipad-mobile-safari-during-scrolling

おおこれだと思いました。jQueryの.fadeIn()/.fadeOut()はJavaScriptのsetIntervalを使っているようです。しかしちょっと腑に落ちないのは、なぜタイマーが止まっただけで、その後の動作がおかしくなるのかです。再開さえしてくれれば問題無いはずですが… そこで、もう少し調べてみると、こちらのブログのコメント欄に、ちょっと気になることが書いてありました。

There is one more bug I haven't seen anybody writing about. If a touch event causes a setTimeout, but that same touch event causes scrolling, that timer will never fire.

More information and a workaround here: https://gist.github.com/3755461

あれっ? なんかおかしい… 「止まる」のではなく「発火しない」と書いてあります。そしてリンク先のios6-timers.jsをCOSUMIのに試させてもらうと、不具合が完全に起こらなくなりました。

簡単なサンプルページを用意してみました。モバイル端末から試してみてください。Startボタンをタップすると、赤と青の四角が右に動きます。赤い方はJavaScriptのsetIntervalを使っていて、青い方はCSSのtransitionを使ってのアニメーションです。

http://www.perfectsky.net/misc/20121002.html

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=640px">
<title>iOS6 Timer Test</title>

<style>
div{
  position : absolute;
  left     : 20px;
  width    : 100px;
  height   : 100px;
}
#div1{
  background-color : #ee4444;
  top              : 20px;
}
#div2{
  background-color : #6666bb;
  top              : 140px;
}
button{
  display   : block;
  margin    : 300px auto 0;
  font-size : 200%;
}
</style>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){

  var pos = 20;

  $("#div2").css("transition", "left 10s linear");

  $("button").on((window.ontouchstart === null) ? "touchstart" : "mousedown",
                 function () {

                   $(this).remove();

                   var timerId = setInterval(
                     function(){
                       $("#div1").css("left", ++pos);
                       if(pos >= 520){
                         clearInterval(timerId);
                       }
                     }, 20);

                   $("#div2").css("left", "520px");

                 });
});
</script>

</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<button type="button">Start</button>
</body>
</html>

まず最初は、Startボタンをタップして赤と青の四角が右に動き始めたらそこでページをスクロール(ピンチイン/ピンチアウトでもいいです)してみてください。たぶん、両方の四角が停止すると思います。そしてスクロールしていた指を離すとまた動き始めます。これは、iOSやAndoidではよく知られた挙動のようです。

そして次は、まずページをスクロールし、その指を離さないままStartボタンを押して、最後にスクロールしていた指を離してみてください。私の持っているiOS6のiPad3では(SafariでもChromeでも)、下の青い四角は動きだしますが、上の赤い四角は動き始めません。これはどうやらiOS6のバグのようです。そして先ほどのios6-timers.jsを使うとこの不具合は起きません。

肝心のCOSUMIへの対策ですが、最初はjquery.animate-enhanced pluginを使えばそれだけで直るかなと思ったのですが、よくは調べてませんがそれではうまくいかなかったので、最終的にはjQueryの.fadeIn()/.fadeOut()をすべて.show()/.hide()に書き換えることによって解決しました。他にも書き換えないといけないところがありそうでしたが、とりあえずCOSUMIの場合は、すべてjQueryの.fadeIn()/.fadeOut()に絡んでいたようです。ios6-timers.jsの使用は副作用があってもいやなのでちょっと控えました。将来的にはできればもうちょっとましな対策をしたいと思いますが、とりあえず今はこれでいきます。

今回のバグは、ページのスクロール中という限られた状態でしか発生しないためか、当初は全くといっていいほど情報がありませんでしたが、すこしずつ気づいた人がでてきたようです。

javascript – iOS 6 safari, setInterval doesn't get fired – Stack Overflow
http://stackoverflow.com/questions/12683510/ios-6-safari-setinterval-doesnt-get-fired

setTimeout while scrolling in iOS 6 doesn’t work, works in iOS 5 – Google グループ
https://groups.google.com/forum/?fromgroups=#!topic/phonegap/3Xe_M79qHEM

[追記 2013/1/29]
今回のiOSのバグは、iOS6.1で修正されたようです。COSUMIの方もまた今度元に戻しておきます。

[追記 2013/2/7]
.fadeIn()/.fadeOut()に戻しておきました。たったこれだけのことで、リッチな感じになるんですよね。