将棋棋譜中継・再現 JavaScript アプリケーション "Kifu for JavaScript Free"(フリー版)

2021/2/6 柿木 義一

1.ソフトの概要

Web上で将棋の棋譜や詰将棋の中継・再現を行う JavaScript アプリケーションです。

特徴:

2.制限

3.動作環境

HTML 5

動作確認ブラウザ:

Windows:

Mac

iOS

Android

4.ファイルの構成

(1) 動作に必要なファイル

kj_free/ のディレクトリ

 kj_free/kj_free.js  JavaScript アプリケーション
 kj_free/free_help.html  HELPファイル
 kj_free/*.gif, *.jpg, *.png  画像
 kj_free/*.mp3  サウンド

(2) データ等

 example_free.html  使用例
 henka.kif  変化手順のある棋譜の例
 no_henka.kif  変化手順のない棋譜の例
 tume.kif  詰将棋の例

5.設置法

(1) ファイル

(2) HTMLファイル(1)

添付の example_free.html を元に、以下のように記述します。
文字コードは、UTF-8 とします。

<script language="javascript" type="text/javascript">
// 指定が必要
// kj_free.js のディレクトリィ:サーバ上の絶対位置、または、html ファイルからの相対位置
// 最後に/を付ける

const KJ_DIR = "/test_kakinoki/kj_free/"; // 絶対位置で指定
//const KJ_DIR = "./kj_free/"; // html のディレクトリィに kj_free/ がある場合

// 棋譜ファイル名:サーバ上の絶対位置、または、 html ファイルからの相対位置
const KIF_FILE_NAME = "henka.kif";

// const KJ_LEFT = true; // 左寄せ表示の場合、左端の // を削除

const UPDATE_TIME = 1; // 自動更新の初期設定 0:自動更新しない, 1:30秒毎

// ページを開いた時の手数指定
// const START_TESUU = 10; // 10手の局面を表示
// const START_TESUU = "LAST"; // 最終局面を表示
</script>

<!- kj._freejs をディレクトリィ付きで指定、サーバ上の絶対位置、または、 html ファイルからの相対位置 ->
<script src="/test_kakinoki/kj_free/kj_free.js"></script>

(3) HTMLファイル(2)

ブログ等、レイアウトが複雑な場合は、次のように div タグ(id="KJ_DIV")で囲むことが必要な場合があります。

<div id="KJ_DIV" style="width:580px;">
<script language="javascript" type="text/javascript">
// 指定が必要
// kj_free.js のディレクトリィ:サーバ上の絶対位置、または、html ファイルからの相対位置
// 最後に/を付ける

const KJ_DIR = "/test_kakinoki/kj_free/"; // 絶対位置で指定
//const KJ_DIR = "./kj_free/"; // html のディレクトリィに kj_free/ がある場合

// 棋譜ファイル名:サーバ上の絶対位置、または、 html ファイルからの相対位置
const KIF_FILE_NAME = "henka.kif";

// const KJ_LEFT = true; // 左寄せ表示の場合、左端の // を削除

const UPDATE_TIME = 1; // 自動更新の初期設定 0:自動更新しない, 1:30秒毎

// ページを開いた時の手数指定
// const START_TESUU = 10; // 10手の局面を表示
// const START_TESUU = "LAST"; // 最終局面を表示
</script>
<!- kj._freejs をディレクトリィ付きで指定、サーバ上の絶対位置、または、 html ファイルからの相対位置 ->
<script src="/test_kakinoki/kj_free/kj_free.js"></script>
</div>

(4) 起動パラメータ

機能 パラメータ 説明
 kj_free/ のディレクトリ  const KJ_DIR = "ディレクトリ/kj_free/";  kj_free/ のディレクトリ
 左寄せ  const KJ_LEFT = true; 左の記述で、盤面を左寄せで表示する。
左の記述が無い場合、中央に表示する(false)。
棋譜ファイル名  const KIF_FILE_NAME = "(棋譜ファイル名)"; 棋譜ファイル名
HTMLファイルのあるディレクトリからの相対表現とします。
http: での指定もできます。
棋譜ファイルとHTMLファイルは同じサーバにある必要があります。
拡張子が .kifu なら、文字コードをUTF-8 とします。Unicode の文字でコメント等を書くことができます。Kifu for Windows は、V7以降を使います。
開始手数  const START_TESUU=(手数) ページを開いたとき、指定手数の局面を表示します。
(手数)は半角数字、"LAST"で最終局面
指定しないとき、終局していれば、初期局面、それ以外では最終局局面を表示します。
自動更新  const UPDATE_TIME = 1; 30秒毎に自動更新する
UPDATE_TIME=2; 60秒毎に自動更新する
UPDATE_TIME=3; 3分毎に自動更新する
UPDATE_TIME=0; 自動更新メニューを表示しますが、自動更新はしません。
一定時間毎に棋譜ファイルを読み込み、最新の棋譜を表示する自動更新機能です。
対局の中継等で使用します。
UPDATE_TIMEの記述がないとき、自動更新の選択を表示しません。
UPDATE_TIME を記述すると、自動更新設定の選択を表示します。また、START_TESUU の指定がないとき、自動更新時、最終局面を表示します。
コメント行数 comment_line=(行数)
(行数) は半角数字→未実装
コメント行数を指定します。
0だと、コメントを表示しません。
指定なしは、7行となります。

(5) 対局中継例:

30秒毎に自動更新、自動更新設定メニュー表示、最終局面表示

<script language="javascript" type="text/javascript">
const KJ_DIR = "/test_kakinoki/kj_free/"; // kj_free.js のディレクトリィ
const KIF_FILE_NAME = "joryu_ouza202005160101.kif"; // 棋譜ファイル
const UPDATE_TIME = 1; // 自動更新 30秒毎
</script>
<script src="/test_kakinoki/kj_free/kj_free.js"></script>

6.棋譜ファイル

棋譜ファイルは、フリーソフトの Kifu for Windows、または、柿木将棋等で作成できます。
拡張子が .kif は、SHIFT JIS の文字コードです。
拡張子が .kifu は、UTF-8 の文字コードです。

チェスクロック使用かストップウォッチかは、消費時間から自動判別します。秒の単位の時間があれば、チェスクロックとし、秒単位で時間を表示します。

平手の初期配置から始まる CSA 形式の棋譜も読めます(読めない場合もあります)。

7.情報の表示

右上の欄には、次の情報を表示します。

開始日時  
棋戦名     
場所      
持ち時間


手合割 (駒落ちの場合)

8.詰将棋情報の表示

棋譜に詰将棋情報の「作者」が設定されているとき、次の情報を表示します。

作者
作品名
出典 or 発表誌
発表年月
持ち駒制限(持ち駒制限時)→未実装

9.残り時間の表示

残り時間を表示するためには、棋譜ファイルの棋譜情報で、「持ち時間」を設定する必要があります。
持ち時間は、全角(または半角で)で「N時間」と記述します。分がある場合は、半角2桁で「NN分」と記述します。
「各*時間」という書き方にも対応しています。


棋譜の指し手に消費時間が記録されているとき、各指し手の消費時間から残り時間を計算し、表示します。
チェスクロック使用かストップウォッチかは、消費時間から自動判別します。秒の単位の時間があれば、チェスクロックとし、秒単位で時間を表示します。消費時間のグラフは分単位で表示します。
棋譜の指し手に消費時間が記録されていないとき(すべての指し手の時間が0の場合)、棋譜情報の「消費時間」の情報から、手数と残り時間を表示します。
消費時間は、次の形式で記述します。

手数▲先手の消費時間(分)△後手の消費時間(分)
※いずれも半角の数字を使います。
例:
---------- 棋譜ファイル --------------
消費時間:159▲347△359
持ち時間:4時間06分
-----------------------------------

10.コメント

コメントに※(感想)があるとき、棋譜の * を # と表示します。

URL をリンクにします。

コメントに HTML のサブセットが使えます。例えば、次が使えます

<FONT color="#ff0000">赤</FONT>
<B>ボールド</B>

11.スタイルシートによる表示の変更

スタイルシート(CSS)によって、表示を変更できます。

背景の色

canvas {
background: #ECECEC !important;
}

12.うまくいかないとき

確認項目

コンソール

エラー等は、ブラウザのコンソールに表示されます。

バージョンアップしたとき

本アプリケーションをバージョンアップし、サーバ上の JavaScript を更新したとき、ブラウザを再起動しないと反映されません。
ブラウザのキャッシュを削除しないと、それが反映されない場合があります。
FireFox3.0なら、次の操作でキャッシュを削除できます。

  1. ツールメニューのオプションを実行
  2. 詳細タブを表示
  3. オフラインデータの今すぐ消去を実行

棋譜保存ボタンを押しても保存できない場合

13.履歴

2020/12/4 V0.51β

2020/12/7 V0.60β

2020/12/27 V0.90β

2021/1/4 V0.92β

2021/1/5 V0.93β

2021/2/4 V0.96β

2021/2/6 V0.97β