2019年2月追記この記事は情報が古くなっています。
新しい記事「Kifu for JS (ver. 2.0.0)をブログに貼り付ける」をご覧ください。
このブログでは、詰将棋を再生するツールとして、
kif2swfや
フラ盤を使ってきました。
どちらもたいへん優秀な再生盤で、他のサイトでもよく見られるのですが、前者は棋譜の分岐が作成できないという欠点とちょっとしたバグを抱えており、ここ数年はずっとフラ盤を使っていました。
しかし、つい最近になって、致命的な問題が生じます。
Adobe社がFlashの配布とアップデートを2020年で終了するというのです。また、各webブラウザも、段階的にサポートを終了していくとのこと。
これはつまり、Flashを使った棋譜再生盤が終焉を迎え、このブログに貼られている詰将棋が見られるのも残り5年がいいところになるということ。大問題です。
なおFlashは、そもそも最近のスマホからは見られませんね。スティーブ・ジョブズ氏は2007年にはもうFlashに見切りをつけていたようで、それが時代の流れになっている感じです。
では、これからブログに詰将棋を載せるためには、どうすればいいか。
世の中にはFlashを使用したkif2swfやフラ盤以外にも、「おもちゃ箱」で使われているKifu for Java、「詰将棋博物館」で使われている勝田将棋盤など、さまざまな棋譜再生盤が存在します。
しかし、最近はJavaもオワコン(終わったコンテンツ)になってきており、おそらく皆さんが経験されているようにこれらの将棋盤は閲覧しているPCからJavaを表示する許可をHPごとにしておかないと動きません。また、スマホからでは閲覧不可です。
おそらくJavaも、そのうち完全にサポートが停止される日が近いのではないでしょうか。
というわけで、残された道は、Flashに取って代わるものとしてAdobeも推奨している、HTML5です。もっと言えば、JavaScriptです。
(JavaとJavaScriptは全く別の概念です。念のため。)
JavaScriptを使った棋譜再生盤がないか……とネットの海を探し回って見つけたのが、この2つ。
Kifu for JSと
jsShogiKifu。
このどちらかをmy cubeに導入できないか……と試行錯誤していたのですが、僕のweb知識が乏しく、いろいろ問題があってうまくいきませんでした。
しかし、おかもとさんと桃燈さんの助けを借りて、ようやく、Kifu for JSを貼り付けることに成功しました。
それでは前置きが長くなりましたが成果をご覧ください!
なんで自作じゃないんだよ、とツッコまれるかもしれませんが、棋譜にコメントと分岐があって、かつ短手数の作品にしたかったので……。
上谷志賀さんが保育園に変同を狙いにした作品を発表されていたので、それに関連してこういう作品があるよ、と全国大会で話していました。
10年以上も前に、ダブル回文詰なんてものがあったんですね。
さて、それでは軽く、他の詰将棋(or指将棋)ブロガーのために、Kifu for JSを貼り付ける方法を紹介しておきましょう。
まだまだ普及がなされていないようで、Kifu for JSが貼り付けられているサイトはおそらく、本家の紹介サイト以外に存在しない気がします。
ちなみに、fc2ブログ以外のことは分かりませんので、そのつもりで 笑。htmlほとんどわからない人向けに書きます。
なお僕もhtml超初心者なので、間違っているところなど大いに指摘してください。
1. Kifu for JSをダウンロード Kifu for JSの配布ページに行き、緑色のボタンから「Download ZIP」。解凍して適当な場所に置いておく。
2. jQueryをダウンロード jqueryというのはJavaScriptを簡単にするためのもので、開発者の方はこれを使って将棋盤をプログラミングしているようです。よってこれがないと動きません。公式サイトから最新版をダウンロードし、先ほどのKifu for JSのフォルダのsrcフォルダの中にでも入れておきましょう。
3. fc2ホームページに登録してKifu for JSをアップロード いちばんのツッコミどころはここですね。現段階で、ブログ上だけではKifu for JSを動かすのは無理がありそうです。fc2のアカウントを持っている人なら無料でサーバーを取得することができます。
もちろん、他にサーバーを持っている場合は、そちらを使っても構いません。
そこに、Kifu for JSのフォルダをアップロードしましょう。また、これから作成するhtmlファイルなどを入れておくための適当なフォルダ(「kifuフォルダ」とします)もサーバー上に作っておくといいと思います。
4. kifファイルをアップロード 柿木将棋などで作成したkifファイルをサーバー上に作ったkifuフォルダにアップロードします。
ただ、そのままやってしまうと、対局開始日時や「手合割:平手」、「先手:人」などの詰将棋には不要な情報が入ってしまう可能性があるので、気になる人はいったんkifをコピーしてテキストファイルで編集してから拡張子を.txtでアップロードしてもいいと思います。(僕が上で貼り付けているのもtxtファイルです。「棋譜保存」ボタンから確認できるので参考にしてみてください。)
5. テキストエディタを開いて以下のコードをコピペテキストエディタは「メモ帳」でも何でもお好きなものを使ってください。以下をコピペします。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://makugaeru.web.fc2.com/Kifu-for-JS-master/src/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://makugaeru.web.fc2.com/Kifu-for-JS-master/css/kifuforjs.css">
<script src="http://makugaeru.web.fc2.com/Kifu-for-JS-master/out/kifuforjs.js" charset="utf-8"></script>
<script>
var Kifu = require("Kifu");
Kifu.settings={ImageDirectoryPath: "http://makugaeru.web.fc2.com/Kifu-for-JS-master/images"};
</script>
<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>
</head>
<body>
<script>
Kifu.load("kominato_kaibun.txt", "board1");
</script>
<div id="board1"></div>
</body>
</html>
ここで、
赤色の部分を、さっきアップロードしたKifu for JSフォルダ内のURLに置き換えていきます。「jquery.js」は自分で突っ込んだ場所、「kifuforjs.css」はcssフォルダに、「kifuforjs.js」はsrcフォルダにあります。
駒の画像を読み込む「images」は、フォルダの場所そのものをURLとして書いておきます。
さらに、載せたいkifファイル(もしくはテキストファイル)を
青色のところに
相対参照で指定します。絶対参照と相対参照の違いがわからない方は、とりあえずファイル名だけをここに書いておいてください。
最後に、表示される盤に「board1」など名前をつけて、
ピンク色の2箇所に書いておきます。
こうして作成したテキストを、拡張子を.htmlにして保存し、fc2ホームページにアップロードします。この際、先ほどkifファイルをアップロードしたフォルダと同じ場所(kifフォルダ)に置いておきます。
6. このように動く盤が表示されていればOKサーバー上でそのhtmlファイルを開いてみて、このように表示されていれば成功です。
http://makugaeru.web.fc2.com/kifu/kominato_kaibun.html7. インラインフレームでブログに埋め込みwebサイトに盤を載せるのならこれで完了ですが、ブログに載せるにはもう一手間。以下のコードをブログ記事にコピペしてください。
<iframe class="kifuforjs" src="http://makugaeru.web.fc2.com/kifu/kominato_kaibun.html" flameborder="0" width="580" height="560" scrolling="no" frameborder="0"></iframe>
青色の部分を、自分がアップロードしたhtmlファイルのURLに変更すれば、ブログに埋め込むことができます。
なおインラインフレームの属性については一例ですので、適当にググって自分のブログに合わせてください。
例えば、拡大・縮小したいときはこうします。
<div style="width:530px; height:510px; overflow:hidden;"><iframe class="kifuforjs" src="http://makugaeru.web.fc2.com/kifu/kominato_kaibun.html" flameborder="0" width="590" height="560" scrolling="no" frameborder="0" style="transform:scale(0.9);-o-transform:scale(0.9);-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;"></iframe></div>
赤色の数字が倍率になります。このブログでは、横幅の都合で0.9倍くらいがちょうどいいですかね。
というわけで、Kifu for JS講座、いったん終了。
いやー、面倒くさいですね 笑。
まだKifu for JSのほうにユーザーフレンドリーでない部分が多いので、現段階ではこのように少々手間がかかります。
今後のバージョンアップはあるんでしょうか……?
ともかくこれで、Flashのサポート終了後も詰将棋を載せることができて一安心。
あと、スマホから見られるようになったというのも大きいですね。
今後はKifu for JSにお世話になりそうです。