PGNとはPortable Game Notationの略で,チェスの棋譜を記録する一般的な記法。PGNViewerはこれを解析して,JavaScriptを用いて棋譜再生を実現している。WordPress用のプラグイン pgnviewer.php は次のようなHTMLを生成して制御をJavaScriptプログラム jsPgnViewer.js に任せる。
[Event "16/11/2007 1:44:40 PM"]
[Site "?"]
[Date "2007.11.16"]
[Round "?"]
[White "Chess Genius"]
[Black "Sukarabe"]
[Result "1-0"]
[ECO "B99"]
1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6
6. Bg5 e6 7. f4 Be7 8. Qf3 Qc7 9. O-O-O Nbd7 10. g4 b5
11. Bxf6 Nxf6 12. g5 Nd7 13. a4 bxa4 14. Nxa4 Bb7
15. Nc3 Rc8 16. Be2 Nc5 17. Rhf1 Nxe4 18. Nxe4 e5
19. fxe5 dxe5 20. Qxf7+ Kd8 21. Ne6+ 1-0
適当に書き直した所もあるが,基本的には,PGNはid付きのdivブロックで囲むことにより JavaScript に渡されるようだ。このブロックはCSSにより表示されないよう設定されている。上の例では id=”9999″ なので,JavaScriptがこれを読めるように,Board(9999, options) と書かれている。JavaScriptはこのようにid付きのブロックの内容にアクセスできる。Board関数はもう一つの引数をもっているが,ここでは駒の画像が置いてあるURLをimagePrefixという名前でJavaScriptに渡している。optionsという引数はこのように連想配列(ハッシュ)になっていて,必要な情報を簡単に渡すことができる。