Kifu for JSをブログに貼り付ける

このブログでは、詰将棋を再生するツールとして、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 JSjsShogiKifu
このどちらかを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.html

7. インラインフレームでブログに埋め込み
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にお世話になりそうです。

コメントの投稿

管理者にだけ表示を許可する

No title

本題と関係ないコメントで恐縮ですが、保育園の作品というのは私のものではないと思います。

どんな作品か気になりますね。もし図面や作者さんなど分かりましたら是非ご教示くださいm(_ _)m

No title

最近の保育園で変同に狙いがある作にうえたにさんの作は記憶になかったのであれって思っていましたが、おそらく2016年8月号の志賀さんの作ではないでしょうか?

No title

ごめんなさい、志賀さんと盛大に勘違いしていました。
上谷さんの短コンの7手詰も飛角の焦点というところで印象がごちゃまぜになっていました。
全国大会で話をしていたのも志賀さんです 笑。

No title

桃燈さん、鈴川さん、ありがとうございましたm(_ _)m

Kifu for JS をブログで動かす

Kifu for JS、うまく表示できるようになって、よかったですね。
当方の「Kifu for JS をブログで動かす」、内容を更新しました。
https://docs.google.com/document/d/12Oa7lPmqueWqf-qVlmOkSh2ivIRcN5K34JqPiRdTJPQ/edit?usp=sharing
インラインフレームで縮小するのではなく、CSSを修正して縮小する方が、よいのではないかと思うのですが、いかがでしょう。(インラインフレームで縮小すると、ブラウザによっては将棋盤の罫線が変な表示になるので)

No title

>おかもとさん
次の記事で縮小盤のcssを使わせてもらいました!
見栄えも良くなり、感謝です。

あと、cssの競合問題ですが、これが解決したとしてもfc2ブログの場合、ファイルをアップロードするサーバーが違うためにkifuload関数が動かないのが辛いところです。
それでも、kifloadstring関数のほうで動くなら、トータルで考えてブログに直接貼ったほうがよさそうですね。
僕のほうでも、もう少しcssを勉強して試行錯誤してみます。
カレンダー(月別)
08 ≪│2017/09│≫ 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
FC2カウンター
About
my cubeへようこそ。詰将棋のブログです。駒を並べてアートが表現できるって素敵なことじゃありませんか? 詰キストの方もビギナーの方も楽しんでいってください。

管理者:鈴川優希
月刊誌「詰将棋パラダイス」を活動拠点とする詰将棋作家。石川県のド田舎育ちですが、大学進学とともに東京へ。詰工房などの会合に顔を出したり、解答選手権などのイベントを運営したりしてます。詰将棋は小学生の時から作り始め、2009年5月に詰パラ初入選。2015年12月に最年少同人入り(入選100回達成)。半期賞受賞6回。2016年4月より詰パラ連載「ちえのわ雑文集」の世話役に就任。現在、第一作品集を執筆中。出版は今夏を予定していましたが果たして……。

第n回裏短編コンクール
2015年11月に開催した企画で、7手詰を募集して17作を出題しました。45名もの方に解答していただき感謝です。順位発表はニコ生で放送するという新しい試み。

第φ回裏短編コンクール
2016年、裏短コン2回目の開催。9手詰25作出題の大盛況でした。結果稿はいずれもブログ右袖のカテゴリーからどうぞ。

たのしく、うつくしく。
難解? 複雑? そんなものとは無縁な「易しいからこそ楽しい」作品を紹介していく連載です。不定期更新。

解付き出題
自作を解付きで出していた企画で、現在#120をもって休止中。在庫整理の意味合いが強いので質より量です。

今週の詰将棋・
詰将棋ウィークリー

今週の詰将棋は2009年7月からの2年間100題。詰将棋ウィークリーは1012年3月からの50週は幻想咲花さんとのコラボ、それ以降は鈴川単独の出題で2014年3月まで、#100をもって終了しました。解答して頂いた方に感謝します。
※81puzzler閉鎖につき詰将棋ウィークリーの記事にはリンク切れが多いです。

このブログはリンクフリーです。Sine 2009.6.
メールアドレス
makugaeru●yahoo.co.jp
●を@に替えてください。
全記事数表示
全タイトルを表示
最新記事
最新コメント
カテゴリ
検索フォーム
リンク
詰将棋あるあるbot