あらためて、考え方を整理してみる。
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
の４つのファイルが必要、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 は変更部分だけ記述すれば、最後に置かれた記述が依然の記述を書き換えるので
約６５％のスケールダウンには以下のような内容の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">
となる。
動くサンプルはこちら。
下にファイルと機能のまとめをマインドマップで整理したものをリンクしておく