今日は碁盤描画周りです。
間口の一番広いウェブアプリを対象にします。
JavaScriptの碁盤描画のライブラリをまずご紹介します。
- eidogo: HTML5以前では事実上のデファクトスタンダードだったオープンソースのウェブアプリです。DOMで描画します。耳赤サイトでも現役で活躍しています。
- jGoBoard: canvasを使った美しい碁盤ライブラリです。ついー碁や慎始(どちらも私の自作ウェブアプリです)で利用させていただいています。AZ.jsの碁盤もこれです。有料の商用の場合、ライセンスの確認が必要です。
- WGo.js: 同じくcanvasを使った碁盤ライブラリです。AlphaGo Teachで使われています。実装に特徴があって市松模様上に描画したcanvasを2枚重ねることで長いラベルにも対応しています。
- Sabaki: Electronを使った碁盤アプリです。ElectronなのでJavaScriptで書かれておりウェブアプリ版もあります。Leela Zeroにも対応し、今も積極的に開発が続いているこころ強いソフトです。DOMで描画しています。
個人的にはHTML5が安定した現在にあっても碁盤描画はcanvas描画ではなくDOMで構成するのが筋がいいと思っています。
ですが、ちょっと遊ぼうと思うとcanvasが自由ですね。
碁盤になる自家製描画ライブラリをご紹介します。
まずはどんなものかライブラリを使ったウェブアプリから。
(Google Chromeで見てください。Safariだと肝心な部分の描画が欠けます。)
描画に思いっきり特長があるので、あえて囲碁と呼ばずに「アレロ」と呼んでいます。
わかる人にわかると思いますが、ルールは囲碁のTromp-Taylerルールと同値です。Tromp-Taylerルールは純碁から地埋めをなくしたルールでわかれば一番シンプルなのですが、文章で読むと難しい感じがします。
そういう理解のための障壁をなくすため、出来うる限り可視化に努めました。
石と石がくっついたり、呼吸点がなくなったりする様子がわかりますし、なぜ石が盤上から消えるのかもうまく説明できたと思っています。「アレロ」はこれから色々展開していく予定です。乞うご期待。
さて、このウェブアプリの描画ライブラリが、allelo-boardです。
コードはまだ整理されて居ないのですが、HTML template, customElement, WebGLとSVGとHTML5の次の技術を駆使しています^^
描画の実装のご参考になれば幸いです。
(商標やデザインなど今後権利化していく可能性があります。)
今日はこの辺で。
