Responsive-Kifu 使い方

 

air
今日は、Responsive-Kifu の導入の仕方を解説するよ♪

 

github からソースを取ってくる

まず https://github.com/air-h-128k-il/Responsive-Kifu にいってソースを取ってきましょう。

git コマンドで取ってきてもいいのですが、普通の windows マシンなどで git コマンドが使えるとは思えないので、zip ファイルをダウンロードします。

ダウンロードフォルダに Responsive-Kifu-master.zip がダウンロードされているはずなので、適当な場所に解凍してください。

Responsive-Kifu-master というフォルダができるはずなので、適当な名前にリネームしてください。名前はなんでもかまいませんが、ここでは Responsive-Kifu とします。

サイトにアップロード

続いて FFFTP などを使ってお使いのレンタルサーバ上にアップロードしてください。アップロード場所はどこでもかまいませんが、ここではドメイン直下とします。このドメインでいえば、http(s)://phazor.info/Responsive-Kifu ですね。

この時点で Responsive-Kifu/html 内のサンプルページ pagagm584.html がブラウザからも見れるはずです。ブラウザで直接覗くとこんな感じ。もちろん操作もできます。

 

なお、局面はアゲアゲさんが飛車を振り直した15手目です、って関係ないか。




ワードプレスに取り込む

Responsive-Kifu をワードプレスの記事に反映させるには、基本的に上記の html ページをインラインフレームというもので取り込むだけです。いたって簡単。

WordPress の編集ページに進み、画面を「テキスト」編集に切り替えます。

ここで

<iframe src="../Responsive-Kifu/html/pagagm584.html" width="620" height="700" frameborder="0" scrolling="no">

と入力。src 以下は、pagagm584.html が指定できているのであれば形式は問いません。実際の画面ではこんな感じです。WordPress ユーザーにはおなじみの画面ですね。

ここでポスト。すると、実際の投稿記事は以下のようになります。

画面のサイズを変えると駒盤や駒もそれにあわせて大きさを変えると思います。
あとは、地の文を加えるなりなんなり、お好きなように編集してください。

とりあえず、サンプルページを表示させるやり方は以上のようになります。

 

お好きな kif ファイルを表示させたい場合も同様で、

 kif ファイルを data フォルダにアップロード

→html ファイル作成

→投稿ページから上記 html ファイルを取り込む

という流れになります。

air-h-128k-il

 

※…上記は WordPress での導入を前提に説明してありますが、iframe が使えるシステムであれば、原則、なんでもいけると思います。

・てんなんさんが、FC2 ブログで動かしています。

『Responsive-Kifuを貼り付けてみる』

・これは力作。ある時期ネット最強であった dcsyi さんの棋譜164局をこれもやはりてんなんさんが Responsive-Kifu で再現。

【dcsyi】Responsive-Kifuで棋譜164局表示してみる【伝説の棋譜】

・レア棋譜。

▲大橋宗桂 vs △本因坊算砂

・『令和時代』というサイトでひろしさんが、Unutu Server での導入の仕方を解説してくれています。

Resposive-Kifu

・moongift というオープンソースのソフトを紹介するサイトで Responsive-Kifu が取り上げられました。

Responsive-Kifu – レスポンシブ対応の将棋棋譜再生ビューワー

・これは画期的。まりんきょさんが、ソースコードを解析して適宜改変。結果、初期配置として任意の駒配置が設定できるようになりました。これで、詰将棋も表示可能となりました。
まりんきょさん自身が、有名な3手詰の詰将棋をサイトにあげています。

ちょっと難しめですが、まりんきょさんがおこなった改変の技術的な解説は

Responsive-Kifu の紹介

をご覧ください。

 

 


にほんブログ村 その他趣味ブログ 将棋へ

nkif と DB と検索

今日は、JSKifuForWP (その後のResponsive-Kifu)のコードをいじる。

コメント出力も可能になった。

JSKifuForWP は読み込むことのできるデータ形式は、nkif 形式のみである。nkif というのは、私が勝手に名付けた名称で、その出自が某放送局のためこの名前となっている (笑)。

今日の作業でそのデータ構造はほぼ理解した。

nkif は一局面を例えば

p=1b191716101617191b0014000000000012001d1d1d1d1d1d1d1d1d0000000000

00000000000000000000000000000e000000000000000e000e0e0e0e0e0e

0e0003000000000005000c0a08070207080a0c26;

h1=;

h2=;

という形で表す。p は盤面の駒配置、h1 は先手の持ち駒、h2 は後手の持ち駒、である。

p はここでも調べていた。1一が 1b で香、2一が 19 で桂、‥‥というのはわかっていたのだが、これだと 81 * 2 = 162 文字で盤面の駒配置はすべて決定されるはずだが、実際には、164 文字ある。最後の 26 が余計だ。

今までこれがわからなかったのだが、わかってみればなんことはない、これは着手位置を表すマーカー画像の位置そのものだった。初手▲2六歩と飛車先を突いたので、こうなっている次第。余計な情報なので落としてもいいのかもしれない。

そこまでわかったので、テスト的にデータベースも作ってみた。とりあえず三局ほどデータを挿入。

この状態で

SELECT * FROM tbl_kifu where kifu like ‘%p=1b19171610161719‥(略)‥0a0c26;%’

を実行(SQL文はいつまでたっても慣れないっす)。

結果は、


と同一局面(初手▲2六歩)を正しく2件ひろってくる

問題の処理時間は、

と約 30 ms 。

これだと100局程度でも、同一局面をひろってくるのに数秒かかりそう。

んー、ちょっと遅いかな。

感想としては

・それっぽいシステムは組めそう

・が、「こなれた」システムをつくるのはそれなりのノウハウが必要

と思った。

やはり、データベースとか検索とかは苦手だ。

 

air-h-128k-il

将棋 NHK 杯サイトのデータ形式

ちょっと解析してみました。

初手が

p=1b191716101617191b00140000000000120……. ;

となっていて最初何のことかわからなかったが、これは局面表示のようです。

1. 最初の2文字を切り出し、16進数として解釈。 ( ‘1b’→27 )

2. 次の2文字も同様に。( ’19’→25)

以下同様

で、27 は後手香車、25 は後手桂馬と別の場所で定義されているので、これは「1一, 2一, … のマスに置かれている駒の種類を 9×9 まで書き出したもの」ということになります。 sfen に似てますが、駒記号の解釈がわかりやすく、ブラウザ(JavaScript)を用いたクライアント・サーバシステムには相性の良い形式といえるのではないでしょうか。

 

air-h-128k-il