NGINX ん、じんくす? 違わい、エンジンXだい!

nginxと書いてエンジンエックスと読むそうである。webサーバーとして動くことは勿論だが、その他, リバースプロキシとしてはWEBのみならず、mailも扱えるということなので、 今回raspberry piにインストールしてみた。 徐々に使い方を覚えていき、他のサーバーからの移行を画策していこうと思う(狙いは省電力化)が、とりあえずはPHPおよびmysql を一緒に実装し Lamp ではなく、LNMPとして動かすことをやってみる。 Wikipediaの解説によれば非同期のイベント駆動モデルを使っており、プロセス・スレッド駆動のapacheなどのサーバーに比べると高負荷になっても動きが鈍くならない、という利点があるらしい。なんとなくraspberry pi にぴったりのサーバーのような気がしてきたが、実際は如何に。

実装後のテスト画面は以下。ごらんのとおり、PHPが実装でき、phpmyadminが動いている、という証拠スナップ。

phpinfo()をRPi上で実行。

phpinfo()をRPi上で実行。クリックすると拡大画面になり、raspberry piのバージョン情報などが見える。

以下のconfig file を参照。

以下のconfig file を参照。

いくつかネット上の記事を参照したが、メインはこちらの記述に従った。 上記サイトのコピー記述になるのでどうかとも思うが、とりあえず実行したコマンドだけ羅列すると以下になる。
なお、ヘッドレスでアクセスをしているので、入力はすべてsshによるリモートターミナル経由だ。

mysql-server をまずインストール

sudo apg-get install mysql-server [Enter]

mysql のルートパスワードを要求されるので入力したパスワードは忘れないようにしよう。

次にnginx本体をインストール。 ところで、サイトによっては、「ディストロについてくるnginxは0.6とえらく古いのでソースを落としてきてコンパイルしよう、」とその方法を詳しく説明してるところがあったが、apt-get update; apt-get upgrade 後にインストールしたバージョンは1.2.1であった。 ソースをみるとすでに1.51がリリースされているが、ものすごく古い、というわけでもなかったので、パッケージ品をそのまま使うことにする。 自分も齢60歳。いちいち凝っている時間はもうないので次に次にと進むのである。

sudo apt-get install nginx [Enter]
sudo service nginx start [Enter]
sudo apt-get install php5-fpm [Enter]
sudo apt-get install php5-imagick [Enter]
sudo apt-get install php5-curl [Enter]
sudo nano /etc/php5/fpm/php.ini [Enter]

最後のコマンドではnano editor が起動するので、Ctl-W で、以下の部分を探し、修正。
“upload_max_filesize=2M” => “upload_max_filesize=10M”
Dynamic Extentions のセクションに 以下を追加

extension = imagick.so

あとはCtrl-O でセーブし、Ctrl-x で終了。

phpmyadminをインストール

sudo apt-get install phpmyadmin [Enter]

Web-server selection の画面でApache か lighttpdかどちらのサーバーかと、と聞いてくるが、どちらでもないので、チェックを外しておく。 次の画面でパスワードを設定。

sudo service php5-fpm restart

以上すべてsudo で暫定ルート権限で実行しているが、面倒であれば、sudo su でルートになれば、sudoは省ける。

ここまでで必要なサービス(nginx,mysql,PHP5)はすべて導入された。 ちなみにこの状態でRPiのIPアドレスをブラウザで見ると”Welcome to NGinx”という簡単なメッセージが出て、nginxが無事動いているということがわかる。

ただし、この状態では静的なファイルしか表示しない。 PHPファイルを認識させるにはconfig file をいじる必要があるが、その前にサイト用のダイレクトリを設定しておく。
ルートフォルダにある/srvにフォルダーツリーを作っていく.

sudo mkdir /srv/www [Enter]
sudo chown -R USER1:www-data /srv/www [Enter]
sudo chmod -R 755 /srv/www [Enter]
mkdir /srv/www/site1 [Enter]
cd /srv/www/site1 [Enter]
mkdir logs [Enter]
nano logs/access.log (ファイルを作るだけなので、カラのファイルをセーブして即クローズ)
nano logs/error.log (ファイルを作るだけなので、カラのファイルをセーブして即クローズ)

上でやっているのは、nano で空のファイルを二つ作るということだが、空のファイルを作る技としてはほかに

touch filename

さらには

> filename

なんてのもある。最後のコマンドは無入力をfilenameにリダイレクトする、という技で、20年前に感心して覚えたのをすっかり忘れてた(爆)


mkdir public [Enter]

上の例では自分はUSER1というユーザー名でログインしてると仮定し, /srv/www/というフォルダーにsite1というフォルダーを作成する。 srv/www/site1/pulicを、作ろうとしているサイトのルートとしてここにWeb 構造を展開して使う魂胆である。ホストできるサイトは一つだけではないので、その場合はsite2, site3など、任意名のフォルダーを作って割り当てていけばよい。
次にCONFIG FILE で上の情報をつなぎ合わせるわけだ.
デフォルトのCONFIG FILE は /etc/nginx/nginx.conf というファイルで、これはすでに存在している。 ネット上の多くの説明では、このファイルを直接いじるような印象だが、 今回インストールされたnginx.conf を見てみると、ほとんどコメントアウトされていてコメントを抜くと、フレームワークがあるだけで、ほとんど何も実際のコマンドになっていない。 ただ、webサーバーを指定しているhttpブロックをよく見てみると 以下の記述があることに気付く。

include /etc/nginx/sites-enabled/

で、このsites-enabled のフォルダーを眺めてみると、default というファイルを見つけたわけだが、このファイルは実体のないソフトリンクされているポインタであり、実際のファイルは/etc/nginx/sites-available/default というファイルだったりする。

このsites-available, sites-enabled というフォルダーはapache2 でもおなじみで、サイトの構成ファイルをsites-available のほうに、one site= one file 単位でセーブしておき、 有効にしたいサイトのみ、ソフトリンクでsites-enabledにソフトリンクする、という仕組みになっているようだ。 ”welcome to nginx”というメッセージはこのdefault の中に以下の記述がある。

root /usr/share/nginx/www;
index index.html index.htm;

これは「このサイトのルートページはローカルマシンの/usr/share/nginx/www フォルダーですよ、html とhtmのエクステンションを探して表示しましょうね、」と言っている。 ちなみに、このフォルダーをみてみると、index.htmlというファイルがおいてあるので、その中身をみると、やはり”welcom to nginx”とhtml で書いてあるわけだ。
今回は/srv/www/site1/public/をルートにしようとおもっているので、別のconfig ファイルをつくり、そのファイルをsites-availableにセーブし、ソフトリンクでsites-enableに登録するという作業を行う。 ファイルの名前をsite1として話を進める。

sudo nano /etc/nginx/sites-available/site1 [Enter]

実際のファイルの中身は以下のようになる。

server {
access_log /srv/www/site1/logs/access.log;
error_log /srv/www/site1/logs/error.log;
root /srv/www/site1/public/;
location / {
index index.php index.html index.htm;
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include /etc/nginx/fastcgi_params;
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME /srv/www/site1/public$fastcgi_script_name;
}
location /phpmyadmin {
root /usr/share/;
index index.php index.html index.htm;
location ~ ^/phpmyadmin/(.+\.php)$ {
try_files $uri =404;
root /usr/share/;
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include /etc/nginx/fastcgi_params;
}
location ~* ^/phpmyadmin/(.+\.(jpg|jpeg|gif|css|png|js|ico|html|xml|txt))$ {
root /usr/share/;
}
}
location /phpMyAdmin {
rewrite ^/* /phpmyadmin last;
}
}

このファイルをソフトリンクするついでにdefaultをsites-enabled から削除(リンクを解除) さらにサービスを再スタート

sudo ln -s /etc/nginx/sites-available/site1 /etc/nginx/sites-enabled/site1
sudo rm /etc/nginx/sites-enabled/default
sudo nginx restart

まだルートフォルダにはページをつくっていないので、このままでは何も表示しない。 phpinfo() というphp関数を実行するだけのファイルを作成してルートフォルダーにセーブする。

nano /srv/www/site1/public/index.php

以下の一行を記述

<php? phpinfo(); ?>

ctl-o で書き込み、ctl-x でクローズ

キーボード、モニター付きのRPiなら、あとは”localhost”とブラウザに打ち込むわけだが、外部のマシンからのブラウザアクセスをする場合にはIPアドレスを入力してやる必要がある。自分の環境ではローカルマシンでbind9というDNSをうごかしている。ここに192.168.1.97というローカル固定IPをraspberrypi.home.lanというドメインネームとして登録した。早速これを使って http://raspberrypi.home.lanと入力すると一番上の画面が出てきた。 さらに http://raspberrypi.homel.lan/phpmyadmin と入力してphpMyadminのログイン画面が出た。 このアプリはPHPで動くので、PHPの作動確認OK. さらに ログインしてmysql のデータベースもちゃんと使えることを確認して本日のところは終了。 config の部分についてはnginx.org/document/ のビギナーズガイドが非常に参考になった。
外部からのアクセスができるようにするにはserver_name などのパラメータを追加していく必要があるはずなので、今後ぼちぼち試行錯誤していこうと思う。理屈としてはこれでWordPress などのCMSも導入可能になったはずだ。

IIS のurls rewrite を使ってmodxのfriendly url を有効にする。

たとえIISサーバーを使っていてもHelicon Ape というツールをIISに組み込めば、modxについてくる.htaccess をそのまま使っのfriendly url を活用することはできているわけだが、今回はIISのURL rewrite module (IIS 7 の場合は別途ダウンロードで組み込む)を使って同じことをやってみた。

IISのGUIでルールを作る作業になるが、.htaccess の記述を参考にしてやってみたら動くようになった。

modx に付属する.htfile でfurl に関連するところは 以下の部分と思われる

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

これを解釈すると
条件として、要求されているファイル名がファイルとして存在しない、かつ
フォルダーとしても存在しない場合、それはつまり動的に生成されるHTMLページなので、
以下の書き換えルールを適用する。
書き換えルール: 渡された文字列$1を以下のパターンにして加工する
“index.php?q=$1”
さらに 後ろにクエリーがついている場合はそのまま渡し、 下流の処理を行わない。

IISのGUI上のRuleでは これを Inbound rule として追加するが、その内容は以下のごとくなる。

Matches Pattern, “Regular expression”
“^(.*\.html)$” <= RewriteRule の最初の部分*1 Conditions : "Matches All" {REQUEST_FILENAME} "file does not exist"  {REQUEST_FILENAME} "Directory does not exist" Action type "rewrite" index.php?q={R:1} <= RewriteRule index.php?q=$1 に匹敵 Append ques : yes <= [QSA] に匹敵 Stop Processing: yes <= [L] に匹敵 当たり前ながら、同じ条件を記述しているので、それほど迷わずにできた。 はまりそうになったところはRegular Expression の部分で.htmlを明示している部分。これをやらないとloopしてしまう。 ほかのところの条件付けでもっと綺麗に記述できるかもしれない。 とりあえず、これでOK

subfolder がアクセスできない? IIS

Modxで運用するサイトであるサブフォルダーだけアクセスできない。ManagerからはFile Treeで見ることができるのだが、フォルダーの中のイメージファイルの画像をレンダリングしない。 フロントエンドから見ると、イメージファイルの部分でサーバーエラーになっているようだ。

web.configでエラー出力をONにしてみると、エラー500で以下を表示した。

Configuration Error

Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.

Parser Error Message: It is an error to use a section registered as allowDefinition=’MachineToApplication’ beyond application level.  This error can be caused by a virtual directory not being configured as an application in IIS.

Source Error:

 

Line 36:             に、ASP.NET で使用されるセキュリティ認証モードの構成
Line 37:             を有効にします。-->
Line 38: 		<authentication mode="Windows"/>
Line 39: 		<!--
Line 40:             <customErrors> セクションは、要求の実行中にハンドル


さて、これをどう解釈すればよいのだろう?とくよくよ考えるよりは、グーぐる検索をするのが一番で、この記述に行き当たった。

要約するとこういうことだ。IISサーバーで

 It is an error to use a section registered as allowDefinition=’MachineToApplication’ beyond application level.” というエラー表示が出る理由には二つある。

ひとつはアプリケーションをちゃんとバーチャルダイレクトリとして設定していないこと。 これは設定を見直せばよい。

もうひとつは、サブフォルダーにweb.configがルートのweb.configとバッティングするための不具合、

で、今回の場合、サブフォルダのファイルがアクセスできない、ということで、後者だと考え探したらやはりsubfolderに入っていたweb.configがルートのWebFoldeを発見。 考えてみればあたりまえで、このサブフォルダー、以前のテストでスタティックなサイトをやはりIISで運営していたのをmodxでダイナミックなサイトにしようとそのままコピーしていたのだ、から当然web.configもコピーしてしまっていた、というわけだった。

解決策としては、このサブフォルダーのweb.configをバッサリ削除。

 

たくもう。
後記:サブフォルダーにweb.configが存在すること自体、ありうる話(フォルダーごとに書き換えのルールを変えるなど。たとえばOutboundのurl情報からサブフォルダー情報を取り除く) なのでサイトの設定によっては必要なのだが、IISのGUIを使っていれば、このマネージメントはちゃんとなされて調和のとれたweb.configが作成される。
 

ModX cloud

Modx cloud というのをMODXのサイトで盛んに宣伝していたのは知っていたのだが、前回フォーラムにアクセスした際、「タダでアカウントをゲット」みたいなティッカーが表示され、それなら登録だけでも、とMODXCloud.comに登録してみれば、 Dev Siteを一本無料2本無料で使えることが分かったので、早速sandbox サイトを作ってみた。

これは便利だ。サーバーの構築を気にせず、簡単にサイトをリセットしたり、バージョンアップができるようだ。 スニペットやプラグイン、新しいアイデアを試してみたいときに気軽にアクセスしてイロイロ無茶やれそうな場所ができた。

MODXというのはコアを開発している人が基本的に二人なので、開発が細い。 その分、コニュニティで協力してやらなければならないのだろうが、MODXCLOUDのプロバージョンは他のプロバイダーよりも高めの料金設定なので、Financial なサポートをするのも 覚悟がいる。 バージョンアップの節目節目にdonationをするのが今の自分にできることだ。

modx Snippet を改良したときのメンテ法

昔に作ったmySnippet というスニペットがあるとする。 そしてそれを既にサイトのい何か所にも使っているような場合。

改良バージョンでmySnippet2というコードを作って、置き換えようとしたときに、全てのリソースのレファレンスを書き換える手間を省くために、mySnippetを以下の2行に書き換えて、mySnippetを呼んだときには実はmySnippet2を実行するようにしてしまう。


runSnippet('mysnippet2',$scriptProperties);
return $output

きも:modX のrunSnippetというAPIを呼び出して、パラメーターアレイには$scriptProperties というmodxのシステムアレイ変数を使えばmySnippetのプロパティセット及びタグ内部に使ったパラメーターがすべて新しいスニペットで使える。

簡単、確実。

JavaScript, Object literal で Private Variable を埋め込む

New とかを使わず、Object literal で object を記述するのがクール.。で、プライベート変数を仕込むには Function を使ってLiteral をReturnするパターンが使える。

var myobje=(function() {
// private変数
var name = "my, oh,my";
//この機能定義は即実行され、以下がまとめてオプジェクトリテラルとして返される。
return {
getName : function () {
return name;
}
};
}());

myobje.getName(); //"my, oh my"

おぷじぇくとの外部からはこのname という変数は直接いじれない。 function 内部の変数はファンクションが実行された後でも、内部に残っている、というClosure と呼ばれる性質を使った技。

modx をコマンドラインからアップグレードする。

現在 Official にリリースされているmodxのバージョンは2.2.5-pl だが、結構バージョンアップが煩雑に行われていて、そのたび、バグが取れたり、使い勝手がよくなってきていて、ますます気にいってきたりするわけだけれども、ファイルサイズもだんだんと大きくなってきており、アップグレードするたびに、zipファイルをまずは自分のパソコンにおとしてきてから解凍し、外部のhost server にすべてをftp で転送するとなると、やたらに時間がかかってしまう。

しばらく前にhost 側にsshでログインし、コマンドラインからファイル展開を直接行う方法を説明しているサイトを見つけ、この方法を使って重宝しているので、ここに記しておく。

オリジナルの英文ページはこちら

上記ページはEvoluation 用に記述してあるが、revolution でも作業は同じ。

まずはホストサーバーのssh アクセスを有効にしてコマンドラインを使えるようにしておくのが第一歩。 自分の使っているホストはコンソールパネルからsshを有効にするだけで、コンソールパネル用のユーザーネームとパスワードでアクセスできるようになった。パソコンがLinux であれば、ターミナルから直接sshを起動、 Windows の場合はPuTTYとか、CygWinなどを実装しておく必要がある。

ssh username@server.com

First things firstで、まずは 既存のmodxファイルをサーバーのrootにバックアップしておく。 sshでログインすると最初はrootフォルダーにいるのだが、そのrootの下にpublic-htmlというフォルダーがあり、web アクセスができるのはこのpublic-html フォルダーから下の階層のみという仕組みになっているのを利用してバックアップをweb からはアクセスできないrootフォルダーにzipして保存してしまおうというわけ。(下のコマンドでは’~’ でroot指定している)

zip -r ~/my-modx-folder.bk.`date "+%Y.%m.%d.%H.%M.%S"`.zip my-modx-folder

これでrootフォルダー上に my-modx-folder.bk.date_of_backup.zip というようなアーカイブファイルができる。

次にmysqlのデータベースも念のためバックアップ。(使っている環境によって異なると思うので説明省略)

次にmodxの最新版をダウンロードしてくる。
これはmodxの最新版のダウンロードのページに行って、ダウンロードのリンク先をコピーし、これをターミナル画面上のwget コマンドに張り付けることになる。

wget path-to-the-latest-modx.zip

これをサーバー内部で解凍

unzip modx-2.2.5-pl.zip

modx-2.2.5-pl というフォルダが作成され(何千という)ファイルが展開される。

これをmy-modx-folder にコピーするのは cp -r コマンドを使うわけだが自分の環境ではcp にAlias がかかっているらしく、f parameter をつけてやらないといちいち上書きしますか、ときいてくるはめになる。
cp -rf modx-2.2.5-pl/* my-modx-folder
数分でファイルの展開が終了する。
次にmy-modx-folder/core/config/config.inc.phpのパーミッションを変更して書き換え可能にする

cd core/config
chmod 666 config.inc.php

あとはブラウザでsetupを実行するだけ。

my-domain.com/setup

 

7~8分で全作業が終了する(はず)

わかったつもりになってはいけない

地下室においてあるPCのWEBServerはIISで動いている。 いや、Windwos7がはいっていたので、気軽な気持ちでIISを導入し、うごかしてみたら、設定が簡単だったのと、PHPのサポートが意外と充実していたので、サーバーとして使うことにしたのだ。すでに2年ほど支障なく動いている。

もっとも、アプリケーションはPHPで動くModXだ。 asp、aspx ベースではない。Visual Studioも(タダだし)起動画面までは見てみたのだが、C#もVBも覚えるつもりがなく、 結局JavaScriptやCSSだけでWEBサイトを構築できるPHPベースのModXでうごかしている。

ひとつだけ問題があるとしたら、IISベースではFriendly URLがサポートされていないこと。 IIS自体はFURLはサポートしているのだが、別途設定しなければならない。これがApache ベースのサーバーではModXに付属してくる.htaccess ファイルで簡単に対応できる。

世の中よくしたもので、IISでこの.htaccess をそのまま使えるツールが存在する。 Helicon Ape というユーティリティなのだが、サーバー3本までは無料バージョンでサポートされている。 これを入れて、ModX側のFriendly URLのシステム設定をOnにするだけで、FURLが有効になる。 するとそれまでは
http://mysite.org/index.php? id=36
などという味気ないURLが
http://mysite.org/this_pabe.html
という”読みやすく覚えやすいFriendlyな”アドレスに書き換わる。

この組み合わせで半年ほど快適に使ってきたのだが、ある日突然うごかなくなってしまった。 なぜか、最初はわからなかった。
で、いろいろ調べた結果わかったのが、IISの設定。このサイト、.net frameworkをつかっていないのだからいらないだろうと、.netのサポートをIISのメニューから前の日に外していた。外した途端に動かなくなったわけで、ホームページ自体はPHPがきちんと動いて表示するが、リンクが全部だめになったのは、要するにApeが作動していなかったので、
http:/mysite.org/this.page.html
を Apeが以下に変換、
http://mysite.org/index.php ?q=”this page.html”
さらにこれをModXが読み込んで
http://mysite.org/index.php ?id=36 に変換
という書き換えができなくなっていたわけ。 つまりApe 自体はIISの.net frameworkの上で動いていたわけだ。

で、あらためてHeliconのページを読んでみれば

Helicon Ape is implemented as managed IIS 7 module and can be installed as .NET module on any ASP.NET-compatible IIS version. It works transparently for both server and client and can even be installed on a shared hosting account without administrative access.

.NET module だと、しっかり書いてある。(おい)

わかったつもりになっていてはいけません。

JavaScriptで動く将棋盤のページを作る。コンセプトの整理

あらためて、考え方を整理してみる。

Webページは HTMLファイル、CSSファイル、JavaScriptファイルという三つの構成要素から成り立っている。そこで今回試作したページのすみわけを考えると以下のようになる。

html ファイル:将棋盤の入れ物を定義し、CSS,JavaScriptファイルにリンクさせる。
CSSファイル:将棋盤と駒の表示の仕組みを定義する。これをHTMLのエレメントの属性に対するスタイル定義で行う。
JavaScriptファイル: 将棋盤の初期配置と駒の動きのデータ、および、駒を初期配置の通りに並べて表示し、駒を動かす関数およびボタンの表示。 データ部分と機能部分を分けて二つのファイルで構成するようにする。
JavaScriptでも”描画”作業は行っていない。WebのDOM(DataObjectModel)を操作してHTMLのエレメント属性を変更させているだけで、あとはブラウザにお任せである。
一度画像データをサーバーから読み込めばデータがローカルにキャッシングされる。ブラウザとしては初期画面で盤と駒のデータを読み込んだあとは時々成り駒のデータをダウンロードしにいくだけなので、作画速度で目に見えるような遅れはない。
Web page を表示するためには将棋の盤、マス目、各コマの画像データの他に
filename.html
shogiboard.css
boarddata.js
boardfunction.js
の4つのファイルが必要、boarddata.jsに棋譜データを書き込んで動きを指定する、ということになる。実際にはboarddata01.js, boarddata02.js などと作っておいて、html からのリンク先指定を変えてやるような操作になる。
HTML内部、JavaScriptへのリンク部分
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script src="boardfunction.js"></script> 
<script src="boarddata01.js"></script>
HTML内部、CSSファイルへのリンク部分
<link href="shogiboard.css" rel="stylesheet">
ところで、
この将棋盤、自分のサイトに表示するには少し大きすぎる。
もっと小さい画像データがないかなあ、と思っていたのだが、CSSでイメージをスケーリングすれば解決できることに気が付いた。 Cascaded Style Sheet は変更部分だけ記述すれば、最後に置かれた記述が依然の記述を書き換えるので
約65%のスケールダウンには以下のような内容のCSSファイルをリンク先に追加すればよい。
.board {width:286px; height: 312px;} 
.komadai {width:100px; height:150px;} 
.komadai img,.koma, .marker {width:30px; height:33px;} 
.comment {padding-left:7px; width:450px;min-height:100px;}
#boardbase {width:323px; height:337px;} 
.c1 {left:258px;} .c2 {left: 228px;} .c3 {left:198px;} 
.c4 {left:168px;} .c5 {left: 138px;} .c6 {left:108px;} 
.c7 {left:78px;} .c8 {left: 48px;}  .c9 {left: 18px;} 
.r1 {top:17px;}   .r2 {top:50px;}    .r3 {top:83px;} 
.r4{top:116px;}   .r5{top:149px;}    .r6 {top:182px;} 
.r7{top:215px;}   .r8{top:248px;}    .r9{top:281px;}
このファイル名、shogiboard-small.css とすれば HTML内部、CSSファイルへのリンク部分は
<link href="shogiboard.css" rel="stylesheet">
<link href="shobiboard-small.css rel="stylesheet">
となる。
動くサンプルはこちら
下にファイルと機能のまとめをマインドマップで整理したものをリンクしておく

将棋盤に戻しボタンをつけてみる(JavaScript)

将棋盤の上の駒がボタンを押すごとに一手づつうごくようになって喜んだのもつかの間、手を戻すボタンがないのがひどく問題に見えてきた。 これは機能を追加せねば、と考えたのだが、最初の設計時点で履歴をとるような構想は一切なかったのではたと困った。動きを逆になぞってみても、駒を取る、というアクションがデータ構造上明示されていないので、もとに戻すのが無理なんである。 何か方法があるはずだと思いつつ2~3日、ほおっておいた。

いっそのこと、一手ごとに将棋盤全部のスナップショットを取ってそれを変数配列に格納してはどうだろうと考えついた。 スナップショットとは言っても、画像データをコピーするのではなく、JavaScriptが精製したhtmlのツリー構造をそのまま変数にコピーしてしまおうというわけだ。JavaScript ではinnerHTMLといタグ内の文字列をそっくりコピーできる関数がある。JQueryでは.html()メソッドにファクタリングされているので、これを使えばなんとかなるのではないかと実験してみたらあっさり動いてしまった。
ちなみに40枚駒を並べた将棋盤のスナップショットは文字列の大きさで5キロバイト程度だった。 これなら200手動かしてもでも1メガバイトで収まる。 Z80でプログラミングしている時代なら、5キロバイトとわかった時点で、間抜け扱いだったが、時代は変わったのだ。これでいいのだと自分を納得させる。 ブラウザ上の JavaScript で動いているわけだから、データがネットワークを移動するわけでもなく、単にブラウザの使用メモリーがそれだけ増えるだけ、ということになる。
まずはデータを格納する配列変数を用意する。
var board {
.
.
history:[],
}
という具合にGloval variable に Array としてhistory[]を定義しておき、次に<div id=”snapshot”>…</div> 内のhtml構文をboard.history[]にセーブする関数 takesnapshot()を定義する。
function takeSnapshot(i){
board.history[i]=$('.forSnapshot').html();
}
次に、このboard.history[]配列から現状の<div id=”forsnapshot”>…</div>内に内容をロードする関数を定義する。 同時に”一手進めるボタン”が無効化されていれば、それを有効にする作業も行う。
function setBoardToHistory(i){
$('#aButton').removeAttr("disabled");
$('.forSnapshot').empty().html(board.history[i]);
}

>

次に上記の関数を呼び出して、一手だけ戻る関数 stepback()を定義する。ここでは一応board.index が0以下にならないようにチェックを入れている。
function stepback(){
if(board.index>0)
setBoardToHistory(--board.index);
}
そして、animateBoard() function に太字部分を追加。
function animateBoard(){
var zAction=board.moves[board.index];
takeSnapshot(board.index);
parseAction(zAction);
board.index+=1;
if (board.moves[board.index].charAt(0)=='x') $('#aButton').attr("disabled","disabled")
;

}
ボタン機能を追加
function setupButton() {
$("#aButton").click(function () {animateBoard()}).attr("value","Forward for solution");
$("<input type='button'>").click(function() {stepback()}).attr('value','Step back').appendTo('#buttonBar');
}

 
上のルーチンで、

<div id='buttonBar'>
<input  type="button"  id="aButton" value="Javascript did not load" />
</div>

というエレメントにStep back というボタンが動的に追加される。(aButton のほうも同じように動的に追加したほうがコードがコンパクトになりそうだ)

これでもとに戻るボタンを追加することができた。 デモはこちら