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局表示してみる【伝説の棋譜】

 

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

Resposive-Kifu

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

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

 


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

アゲアゲさんの名局をブログで再現してみる

クロノさん、アユムさんときたら、この方の対局も載せないわけにはいかない。

もとは、雁木対左美濃急戦のこの対局。

雁木 vs 左美濃急戦という戦型も興味深いが、やはり圧巻は最後の寄せ。

 ソフトなどで検討すると、決して最短ではないが、最も実践的な寄せ方をしているのがわかる。
最新の対局はこちら。


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

レスポンシブな棋譜再生ビューア Responsive-Kifu

WordPress 向けのレスポンシブな将棋棋譜再生ビューアつくってみました。
想像していない不具合はあるかと思いますが、以前に比べればかなりマシになったかと。
評判がよければ一般公開を考えますが、誰かメンテしてくれる人が欲しいです!

某所でけっこう「いいね」を集めたのでまずは github 上で公開しました。
https://github.com/air-h-128k-il/Responsive-Kifu

なお、棋譜は将棋実況系 Youtuber の人気者、chrono vs ayumu さんのものです。→ファイル見失いました。絶好調(プロ入りなるか?!)、アゲアゲさんの棋譜に変更。現在は駒表記が英語になっております。外国の方から要望があったので。駒(盤も)は変更できますので、コメント欄を参照してください。

xampp のお手軽感がちょうどいい、からのデバッグ

最近、JavaScript づいているので、ローカルにテスト環境を構築すべく xampp を導入した。Thinble もお手軽でよかったのだが、ディレクトリ掘って複数ファイルつっこんでいくとさすがに不安定になったので。

ついでにサイトのバックアップも取ったが、それでも xampp ディレクトリのサイズは1G 未満。

これは便利。

 

さっそく、将棋山脈というところで生成された kif ファイルを JSKifuForWP で読み込めないか検討。

なんとか、コメントは kif ファイルでも読み込めるようになった。一歩前進。 “xampp のお手軽感がちょうどいい、からのデバッグ” の続きを読む

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

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

初手が

p=1b191716101617191b00140000000000120……. ;

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

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

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

以下同様

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

 

 

JavaScript 関係

・ウェブ上での開発環境はいくつかあるようだが、 Thimble が使いやすい。

・Ajax。「エージャックス」と読むのね。今まで「アヤックス」と認識していた。欧州の名門サッカークラブとは何の関係もなし。