Kifu for JS (ver. 2.0.0)をブログに貼り付ける

このブログで動く将棋盤として使わせていただいているKifu for JS。
JavaScriptのみで動いているので、スマホでも表示できます。

以前は動く将棋盤といえば勝田将棋盤やKifu for Java、ブログに載せるならkif2swfやフラ盤などが主流でしたが、JavaやFlashはサポートが停止されることになっており(注:あまり詳しくないので正確には違うかも)、これらはすべて将来的に閲覧できなくなる可能性が高いです。
そういうわけで各所の詰将棋サイトでは、Kifu for JSの導入が少しずつ進んできているようです。

このブログで2年ほど前に、Kifu for JSをブログに貼り付けるという記事を書きました。
当時はKifu for JSを実際に使っているサイトがほぼ皆無で、この記事をきっかけにおそらく少しずつ広まっていったのではないかと思います。
使い方が少し難しく、このブログでも初めはかなり不格好な見た目になってしまっています。

しかしそれからKifu for JSがバージョン2.0.0にアップデートされ、大幅に使いやすくなりました。
そこでもう一度、ブログへの貼り付け方をここにまとめておきたいと思います。

なおブログはFC2を想定していますが、他のブログでもおそらく同様にできると思います。



1. Kifu for JSをダウンロード
配布ページに行き、右側の緑色の「Clone or Download」ボタンをクリックして「Download ZIP」を選択。ダウンロードしたzipファイルを解凍します。
また、配布ページの中央あたり、「4 releases」のタブをクリック。下にスクロールしていき「kifu-for-js-2.0.0.min.js」というファイルをクリックしてダウンロードします。

2. jQueryをダウンロード
jQueryの配布サイトに行き、「Download jQuery」というオレンジ色のボタンをクリック。
「Download the compressed, production jQuery 3.3.1」というファイルを保存します。右クリックから「名前を付けてリンク先を保存」などでいけるはずです。
もし新しいバージョンが出ていたならそれでもいいかも知れません(?)。

3. ファイルを整理
ダウンロードしたファイルから必要なものを選んで整理します。
まず1つフォルダを作ります。「Kifu for JS貼り付け用」など、適当に名前を付けておきます。
1.でダウンロードして解凍したフォルダから、「css」フォルダの中にある「kifuforjs.css」というファイルをコピーし、さっき作った「Kifu for JS貼り付け用」フォルダ内に貼り付けます。
また同様に、1.でダウンロードした「kifu-for-js-2.0.0.min.js」および、2.でダウンロードした「jquery-3.3.1.min.js」も、「Kifu for JS貼り付け用」フォルダ内に移動しておきます。

4. ブログにスクリプトをアップロード
FC2ブログで言えば「ファイルのアップロード」です。ブログに写真を載せるときなどと同じ操作です。
「Kifu for JS貼り付け用」フォルダに入れた「kifuforjs.css」「kifu-for-js-2.0.0.min.js」「jquery-3.3.1.min.js」の3つのファイルを、ブログのサーバー上にアップロードします。
このとき、FC2ブログだとファイル名に拡張子以外で「.(ピリオド)」が含まれているとエラーが起きるので、「kifu-for-js-2.0.0.min.js」は「kifu-for-js-2.js」に、「jquery-3.3.1.min.js」は「jquery3-3-1.js」などに、それぞれ適当に名前を変更しておくといいでしょう。

5. 載せたい棋譜をテキストファイルで作成、アップロード
柿木将棋を使うなら、載せたい棋譜を開いて、「編集」→「棋譜のコピー」→「KIF形式」。これを「メモ帳」などの適当なテキストエディタに貼り付けます。
お好みで棋譜情報を編集します。例として、「開始日時」「終了日時」「手合割」の行を削除。また、「先手:」「後手:」のところも、詰将棋なら関係ないので削除しておきます。
サンプルとして、こんな感じです→「kifuforjs-sample
拡張子を「.txt」にして保存したら、これもまた4. と同じくブログのサーバーにアップロードします。

6. ブログにKifu for JSを読み込ませる
この部分は、他にもやり方があると思いますが、いろいろ実験した結果この方法が一番不具合がなかったです。
ブログのHTMLを編集します。FC2ブログで言えば、管理画面の左袖の「設定」→「テンプレートの設定」。
「〇〇のHTML編集」というところがあると思いますが、そこのコードで、最初のほうに<head>と</head>で挟まれたある程度広い領域があるはずです。
その領域の終わりのところ、すなわち</head>の直前に、以下のコードをコピペして挿入してください。

<!--Kifu for JS貼り付け用 ここから-->
<script src="https://blog-----jquery3-3-1.js"></script>
<link rel="stylesheet" type="text/css" href="https://blog-----kifuforjs.css" />
<script src="https://blog-----kifu-for-js-2.js" charset="utf-8"></script>
<script>var Kifu = KifuForJS;</script>
<!--Kifu for JS貼り付け用 ここまで-->

その際、赤字青字緑字の部分を、4. でアップロードした3つのファイル「jquery3-3-1.js」「kifuforjs.css」「kifu-for-js-2.js」のweb上のURLに書き換えておきます。このURLはFC2ブログで言えば先ほどファイルをアップロードした際に「ファイル情報」のところに表示されているはずです。
HTML編集が終わったら、「更新」ボタンを押します。

7. 盤面を表示する
ブログで記事を書いてみましょう。記事中に次のコードをコピペすれば、その位置に動く盤が表示できるはずです。

<script>Kifu.load("https://blog-----kifuforjs-sample.txt");</script>

ここで、ピンク字のところは、5. でアップロードしたテキストファイルのURLになります。



以上となります。動く将棋盤が表示されたでしょうか?
しかし、実はこれだけだとうまくいかない場合があります。
それは、Kifu for JSのcssが、ブログのcssと干渉して、レイアウトが崩れてしまう場合です。
これに関しては、その部分をcssを編集して解消するくらいしか、今のところ方法が分かりません。

参考までに、このブログで現在使っているcssを公開しておきます。→「kifuforjs_revised12.css
以前おかもとさんにいただいたサンプルを、鈴川が微調整して新たに作ったものです。
よく背景のカラーが割り込んできてしまっているものを見かけますが、その類のものはこれで解消できるはずです。
また棋譜コメントの枠が広すぎたのも調整したりしています。
試してみたい方は、このcssを保存して、もとの「kifuforjs.css」と差し替えてみてください。
その際、6.青字の部分を書き換えるのを忘れないようにしましょう。

貼り付け例

詳しい方はよりよい方法を教えていただけたらありがたいです。
また、この記事に書いていること自体に間違いがある場合も、お気軽にご指摘ください。

コメントの投稿

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

No title

初めまして。
「暇人による詰将棋ブログ」というブログをやっているhimatsumeと申します。
記事を読んで試してみたところ、無事動く将棋盤を作成することができました。一言お礼を申し上げたく、コメントした次第です。
ありがとうございました。

No title

ご報告ありがとうございます!
こんな記事を書いておきながらも、他の方が試してできなかったらどうしようかと思っていました。
ブログのほうも、たくさん作品を発表されているようで、楽しみにしています。
カレンダー(月別)
07 ≪│2020/08│≫ 09
- - - - - - 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 31 - - - - -
FC2カウンター
About
my cubeへようこそ。詰将棋のブログです。駒を並べてアートが表現できるって素敵なことじゃありませんか? 詰キストの方もビギナーの方も楽しんでいってください。

Author:鈴川優希
1997年生まれ。月刊誌「詰将棋パラダイス」に作品を発表している詰将棋作家です。詰将棋は小学生の頃から作り始め、2009年5月に詰パラ初入選。2015年12月に最年少同人入り(入選100回)。半期賞8回、看寿賞1回、詰将棋順位戦A級。2016年4月~2020年6月「ちえのわ雑文集」世話役を務めました。現在は入選200回を目指す傍ら、順位戦や短コンの解説をたまに担当しています。

裏短編コンクール
2015年(第n回)・2016年(第φ回)に当ブログで開催。使用駒数11枚以上、タイトル必須という条件で募集した作品を出題し、解答者に評価してもらうという企画です。結果発表はニコ生で行いました。作品の結果稿はブログ右袖のカテゴリーからご覧いただけます。なお、この裏短コンはほっとさんのブログ「詰将棋考察ノート」に受け継がれました。

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

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

解付き出題
自作を解付きで並べていくだけ。現在#120をもって休止中。在庫整理の意味合いが強いので質より量です。

詰将棋あるあるbot
Twitterで、詰将棋あるあるネタを5時間に1回ツイートするbotを作ってみました。ツイート内容は700種類用意していて、たまに更新されます。皆さんもハッシュタグ「#詰将棋あるある」でツイートしてみてください。@TsumeAru_bot

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