カテゴリー: JavaScript

 

 

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 – レスポンシブ対応の将棋棋譜再生ビューワー』

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

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

『Responsive-Kifu の紹介』

をご覧ください。