日々の日記です
JavaScript関連メモ。某所から囲碁の棋譜再現JavaScriptを入手して、ローカルで再現しようとしたのだが、何故か画像が表示されない。うーむ・・・。画像へのパスなどもちゃんとチェックしたのだが。
ふと、セキュリティの関係かな、と思い、全体をMAMPサーバーに放り込んでみたところ、ちゃんと表示された。サーバー上とローカルで何が違うのか？ファイルの場所を表すURLの書き方とかの問題だろうか。それとも、安全上の理由か。依然として謎。もっとも、MAMP上で実験すれば良いことが分かったので、一件落着ではあるが。
チェスがあるなら囲碁もあるだろうと探してみたが、多くはJAVA Appletであり、JavaScriptは少なかった。いくつか試してみたのだが、チェスのPGNViewerのように洗練されてない。表示に関してもだが、実装についても。とある新聞社などは、棋譜再生のページ毎に、JavaScriptコードが全部埋め込んであったりする。 😯 いや、ソースコードを研究するには便利なんだが。 
という状況なので、WordPress用のプラグインなど望むべくもない。うーむ、勉強を兼ねて作ってみるか？いやいや、そんな暇がどこにあろうか。 👿
PGNとはPortable Game Notationの略で，チェスの棋譜を記録する一般的な記法。PGNViewerはこれを解析して，JavaScriptを用いて棋譜再生を実現している。WordPress用のプラグイン pgnviewer.php は次のようなHTMLを生成して制御をJavaScriptプログラム jsPgnViewer.js に任せる。
適当に書き直した所もあるが，基本的には，PGNはid付きのdivブロックで囲むことにより JavaScript に渡されるようだ。このブロックはCSSにより表示されないよう設定されている。上の例では id=”9999″ なので，JavaScriptがこれを読めるように，Board(9999, options) と書かれている。JavaScriptはこのようにid付きのブロックの内容にアクセスできる。Board関数はもう一つの引数をもっているが，ここでは駒の画像が置いてあるURLをimagePrefixという名前でJavaScriptに渡している。optionsという引数はこのように連想配列(ハッシュ)になっていて，必要な情報を簡単に渡すことができる。
実は、JavaScriptを勉強しようと思ったきっかけは、WordPressでチェスの棋譜を再生するPlugInであった。PGNViewerというのがそれである。運用例はPGNViewerのサンプルページで見ることができる。
素晴らしいプラグインであるが、画像がいささかショボイことは否めない。サンプルページのコメントを読んでいくと、これを改良した人が居るらしい。画像だけで実際に稼働しているページはないのだが、この位の改造なら自分でもできそうだと思ったのが身の程知らずというか、あさはかであった。
とりあえず、必要な画像と元々のプラグインのソースコードをダウンロードし、解読開始。pgnviewer.js というJavaScriptプログラムがほとんどの作業を行っているのだが、2500行ほどの規模なのである。もっとも、PGNの解析部分と差し手の表示部分は完全に分離されているので、案外と読みやすい。そうではあるが、それでもさすがに苦労した。試行錯誤を経て、駒の画像と思しき部分を変更し、さらに背景色を設定する部分を背景画像に差し替えることでほぼ目的を達成した。これを通して、JavaScriptの文法やオブジェクト処理についても、基本的な事柄を学んだ。もっとも細部まで完全に理解しているわけではなく山勘で改造しているので、多分まずい点があるとは思う。さし当たっては無事に稼働している。
JavaScript初心者としてはまずまずのスタートだと思うが、一つ困ったことがある。実際のHTML&CSS出力がどうなっているのか分からないので、デバッグに困るのだ。何かツールがあると良いのだが。
久し振りにジュンク堂に寄って、コンピュータのフロアに行く。目的はJavaScriptの教科書ないし入門書なのであるが、ついでにあちこち眺める。相変わらずCは一定の領土を確保しているが、我が母国語であるPascalは「その他の言語」としてLispやHaskellなどのマイナー言語たち(いや、Lispをマイナーと言っては申し訳ないが)と一緒に小さくなっている。うーむ、悲しい 🙁
こういう古典的な言語ではなく、今の時代はいわゆるスクリプ言語というものが隆盛を極めている。その中でも最初に流行ったPerlは今も廃れることなく活躍している。このWordPressの記述言語でもあるPHPや日本生まれのRubyというのもある。Rubyと言えば、ちょっと前はまだまだマイナーだと思っていたが、驚くなかれ、おびただしい分量のRubyの本、中でもRuby on Railsの本が出版されている。善悪は別にして、Ruby on Railsは正に旬の言語なのであろう。PHPの方でも負けじとRails流のフレームワークCakePHPの本が出ている。
JavaScriptの本を探しに行ったのだが、存外少ない。JAVAの本なら沢山あるのだが。JavaScriptの本の面白い所は、必ずJavaScriptはJavaとは違う言語であること、JavaScript開発ならびに命名の由来などがけっこう詳しく書かれているところだ。どうやら不幸な生い立ちの言語らしいのであった。ブラウザと一体化して便利そうであるのだが、Microsoftが嫌がらせに互換性のないバージョンJScriptを作ったりと、いろいろあった模様。少ない選択肢の中から、オライリーの本を選んだ。
それにしても、よくぞ作ったというか、いろんな言語があるものだ。門外漢からすると、PerlとRubyなど、さほど違わないように思うのだが。
11月から使っている日記ツールWordPressがPHPとMySQLで作られていることもあり、その環境をローカル(自分のパソコン内)に実現できるMAMP(Mac+Apache+MySQL+PHP)を導入してみた。幸い少し前に「MAMPではじめるMac OS Xサーバサイドプログラミング」という本を買っていたので、これを読みながらPHPの勉強、そしてWordPressのカスタマイズなどをやっている。なかなか良くできた入門書で、非常に分かりやすい。
自宅のMacの中でローカルにWordPressが作動しているのは不思議な感覚。レンタルサーバーと違って、必要なものは何でもインストールできるので、LaTeXRenderも試せる。久し振りに楽しい玩具を手に入れた気分だ。
今までMovableTypeなる日記ツールで書いてきたが(http://njet.oops.jp/mt/ )、再構築が面倒だとか、それ以外にも理由はあるが、WordPressという日記ツールに変更することにした。しばらく前から、数式記述のための自家製プラグインを入れたりとか、いろいろ調整していたが、なんとか使えるようになったと思うので、今日から移転することにした。まだもうちょっとあちこち改善してから、という気持ちもあるのだが、思い切って移転しないと何時できることやら、という気持ちもあるし。
テキストのフィルターを最低限にしているものだから、引用とか箇条書きとか、さまざまなタグを使うと、変なマークアップになってしまうのだが、とりあえず普段の日記を書く上では支障がなさそう。
とりあえず、しばらく使ってみよう。
ローカルで実験していたが、自作のWP-MimeTeXプラグインも、最低限の機能は果たすようになったので、いよいよサーバーにファイル全部をアップする。これからしばらくは試運転。