HPの棋譜再現に、ずっと以前は、柿木さんの「Kifu for java」を使っていたが、数年前からセキュリティ設定がやたらと厳しくなってきて、特殊な例外設定をしないと使えなくなってしまった。一般読者にそれを求めるのは無理なのでついにあきらめることになり、その際採用したのが、柿木さんの「Kifu for flash」である。ただし、これはiOSやアンドロイドの標準ブラウザには対応していない、というのが最大の問題でした。それでもdorfinなどの特殊なブラウザを使ってくれさえすれば対応できるので、それでガマンするしかなかったわけです。
さらにここに来て、近々flashのサポート終了という情報がもたらされてきたので、これもあきらめざるを得ない事態となってしまいました。
ここに登場したのが「Kifu for JS」であり、最近ボチボチ、方々のHPやブログで使われ始めたようです。
ついに私もこれを導入することを決意し、勉強を始めたのですが、これがなかなか難しい。
na2hiro/Kifu-for-JS
「ブックマークレット」やら「コード」やら「引数」やら、全然なじみのない言語が並んでいて全然話についていけません。標準的HTML文を何とか理解できる程度の知識ではどうにもなりませんわ・・・・。
「java」や「flash」導入の際は、柿木さんが導入例のHTML文を披露してくれていたので、意味不明のままでもその通りにHTML文を書きさえすればよかったのですが、「JS」はそうはいかないものか悩まされることになった。
結論としては、どなたか、JS版が動いている方のHPのHTML文を研究して、そのマネをするのが手っ取り早い、ということになりました。
今回、再考させていただいたのが、加藤さんのおもちゃ箱でした。
そして数日間、試行錯誤を繰り返して、やっと到達したのがこのページです。何とか動くようになりました。
詰将棋劇場・表紙
以下にこのページに至るまでの手順を記載しますので、もしマネしたい方がおられましたら、どんどんマネしてください。
----------------------------------------------------------------------
①まずは上記「na2hiro」のページの「Clone or download」のバナーをクリックして、「Download ZIP」を選択。 ZIPファイルをダウンロード（DL）して解凍。
できた「Kifu-for-JS-mastaer」というフォルダーと中のファイルを、自分のHPの適当なフォルダーにそのままコピーする。
②jQuery のDL
上記のページの 「Download the compressed, production jQuery 3.3.1」をクリックし、jQuery 最新版をDL。
これを①の「src」フォルダーにコピー
③以下のHTML文を作成し、適当な名前（拡張子：html）を付けて①と同じレベルのフォルダに入れる。
----------------------------------------------------------------------------------------------
<html><head>
<link rel="stylesheet" type="text/css" href="Kifu-for-JS-master/css/kifuforjs.css">
<script src="Kifu-for-JS-master/src/jquery-3.3.1.min.js"></script>
<script src="Kifu-for-JS-master/bundle/kifu-for-js.js" charset="utf-8"></script>
<script>var Kifu = KifuForJS;</script>
</head>
<script>Kifu.load("30.kif");</script>
</html>
----------------------------------------------------------------------------------------------
たったこれだけの文で良いようです。
注意事項ですが、①のフォルダ名を変更していないことが前提です。変更した場合は、変更したフォルダ名に変えてください。
赤のkifファイル名を表示させたいファイル名に変更してください。
ところが、これだけではまだうまく動いてくれません。重要なファイルがまだ1個不足しているのです。
6行目の「kifu-for-js.js」というファイルは、①でDLした中にはないので、どこかで入手しなければいけないのです。
私の場合はおもちゃ箱のサーバーからコピーさせてもらいましたが、今後の方は私のサーバーからコピーしてくださって結構です。
「kifu-for-js.js」
上記のリンクを「右クリック」「対象をファイルに保存」とし、入手したファイルを、「Kifu-for-JS-master」フォルダの下に「bundle」フォルダーを新規に作って、その中にコピーしてください。
（エディターで確認してみましたが、どうやらこれが盤面表示プログラムそのもののようです。）
④表示させたいkifuファイルを①と同じレベルのフォルダに入れる。
その際、kifuファイルをエディター（メモ帳で可）で開いて、開始時間や手合いや対局者名など、詰将棋には無駄な情報は削除して上書きしておくことをお勧めします。
⑤これらのファイルをサーバーにアップロードする。
これでいけるはずです。
③で作成したhtmlにアクセスするだけで、盤面も表示されます。
単に人マネしているだけなので、どうしてこれで動くのか？などは全く理解できておりません。
私にとっては完全なブラックボックスです。
途中で入手した「kifu-for-js.js」の作成者が誰なのか（加藤さんではなさそうです）、本来はどこで入手できるものだったのか、ということすらわかっていませんし、それを勝手に公開することが、著作権上問題があるのかどうかも、全くわからないというのが現状です。
それらの問題も含めて、専門家の目で見て、明らかにおかしいところがあるようでしたら、その場合はご指摘ください。
さらにここに来て、近々flashのサポート終了という情報がもたらされてきたので、これもあきらめざるを得ない事態となってしまいました。
ここに登場したのが「Kifu for JS」であり、最近ボチボチ、方々のHPやブログで使われ始めたようです。
ついに私もこれを導入することを決意し、勉強を始めたのですが、これがなかなか難しい。
na2hiro/Kifu-for-JS
「ブックマークレット」やら「コード」やら「引数」やら、全然なじみのない言語が並んでいて全然話についていけません。標準的HTML文を何とか理解できる程度の知識ではどうにもなりませんわ・・・・。
「java」や「flash」導入の際は、柿木さんが導入例のHTML文を披露してくれていたので、意味不明のままでもその通りにHTML文を書きさえすればよかったのですが、「JS」はそうはいかないものか悩まされることになった。
結論としては、どなたか、JS版が動いている方のHPのHTML文を研究して、そのマネをするのが手っ取り早い、ということになりました。
今回、再考させていただいたのが、加藤さんのおもちゃ箱でした。
そして数日間、試行錯誤を繰り返して、やっと到達したのがこのページです。何とか動くようになりました。
詰将棋劇場・表紙
以下にこのページに至るまでの手順を記載しますので、もしマネしたい方がおられましたら、どんどんマネしてください。
----------------------------------------------------------------------
①まずは上記「na2hiro」のページの「Clone or download」のバナーをクリックして、「Download ZIP」を選択。 ZIPファイルをダウンロード（DL）して解凍。
できた「Kifu-for-JS-mastaer」というフォルダーと中のファイルを、自分のHPの適当なフォルダーにそのままコピーする。
②jQuery のDL
上記のページの 「Download the compressed, production jQuery 3.3.1」をクリックし、jQuery 最新版をDL。
これを①の「src」フォルダーにコピー
③以下のHTML文を作成し、適当な名前（拡張子：html）を付けて①と同じレベルのフォルダに入れる。
----------------------------------------------------------------------------------------------
<html><head>
<link rel="stylesheet" type="text/css" href="Kifu-for-JS-master/css/kifuforjs.css">
<script src="Kifu-for-JS-master/src/jquery-3.3.1.min.js"></script>
<script src="Kifu-for-JS-master/bundle/kifu-for-js.js" charset="utf-8"></script>
<script>var Kifu = KifuForJS;</script>
</head>
<script>Kifu.load("30.kif");</script>
</html>
----------------------------------------------------------------------------------------------
たったこれだけの文で良いようです。
注意事項ですが、①のフォルダ名を変更していないことが前提です。変更した場合は、変更したフォルダ名に変えてください。
赤のkifファイル名を表示させたいファイル名に変更してください。
ところが、これだけではまだうまく動いてくれません。重要なファイルがまだ1個不足しているのです。
6行目の「kifu-for-js.js」というファイルは、①でDLした中にはないので、どこかで入手しなければいけないのです。
私の場合はおもちゃ箱のサーバーからコピーさせてもらいましたが、今後の方は私のサーバーからコピーしてくださって結構です。
「kifu-for-js.js」
上記のリンクを「右クリック」「対象をファイルに保存」とし、入手したファイルを、「Kifu-for-JS-master」フォルダの下に「bundle」フォルダーを新規に作って、その中にコピーしてください。
（エディターで確認してみましたが、どうやらこれが盤面表示プログラムそのもののようです。）
④表示させたいkifuファイルを①と同じレベルのフォルダに入れる。
その際、kifuファイルをエディター（メモ帳で可）で開いて、開始時間や手合いや対局者名など、詰将棋には無駄な情報は削除して上書きしておくことをお勧めします。
⑤これらのファイルをサーバーにアップロードする。
これでいけるはずです。
③で作成したhtmlにアクセスするだけで、盤面も表示されます。
単に人マネしているだけなので、どうしてこれで動くのか？などは全く理解できておりません。
私にとっては完全なブラックボックスです。
途中で入手した「kifu-for-js.js」の作成者が誰なのか（加藤さんではなさそうです）、本来はどこで入手できるものだったのか、ということすらわかっていませんし、それを勝手に公開することが、著作権上問題があるのかどうかも、全くわからないというのが現状です。
それらの問題も含めて、専門家の目で見て、明らかにおかしいところがあるようでしたら、その場合はご指摘ください。