勘兵衛ノート

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

Kifu for Flash V1.22 の設置方法 ~swfobject.jsを使わない方法~

Kifu for Flash V1.22
WEB上で棋譜を再現するフリーソフト。
設置方法は複数存在し、各ブログによってどの方法が良いかは異なります。

先日、 『swfobject.jsを使う方法』 が良いと書きましたが、ブログでは扱いづらいことがわかりました。
1つの記事の中で複数の盤面を表示する場合は <div id="flashcontent"> のid部分を変える必要があるのですが、
カテゴリ表示とかで複数の記事(盤面)を開いたときにidがかぶってしまって正しく表示されません。
idをユニークにするには前回のid+1とかしていけば良いのですが、最後の番号をメモしておかなければならなくて面倒です。
「記事番号+連番」とか「日付+連番」とかにするのもありですが、いずれにしても毎回変更しなきゃなりません。
なので、 『swfobject.jsを使わない方法』 についても設置方法を解説します。
<<設置例>>




<<設置方法>>

■はじめに
Kifu for Flash は見た目が大きいので、記事の部分が狭いテンプレートを使用している場合は
右端が切れてしまったり、ブログのレイアウトが崩れてしまいます。
設置後に、おかしく表示されていたら、それも疑ってください。
事前にテンプレートを変えておくのも良いですが、設置後に正しく表示されるテンプレートを探すのも手かと。
(ちなみに、animalcookingのテンプレートは右端が切れます。)


■ステップ1.
Kifu for Flash をダウンロードして解凍する。
※この記事は バージョン1.22 について説明します。

柿木の将棋ソフトウェア
http://homepage2.nifty.com/kakinoki_y/


■ステップ2.
Kifu.swf (※1)、kifuf_help.html (※2) をサーバーにアップロードする。
その際、アップロードした場所をメモしておく。

例)FC2ブログの場合、管理ページ⇒ツール⇒ファイルアップロード。

※1 バージョン1.22 の Kifu.swf のサイズは310KB。
※2 ヘルプファイルは必須では無いけど、あった方が親切なのでついでに設置します。

アップロードした場所はそれぞれこんな感じになりました。
http://blog-imgs-29.fc2.com/k/a/m/kambei/Kifu.swf
http://blog-imgs-29.fc2.com/k/a/m/kambei/kifuf_help.html


■ステップ3.
棋譜ファイルをサーバーにアップロードする。
その際、アップロードした場所をメモしておく。

例)FC2ブログの場合、管理ページ⇒ツール⇒ファイルアップロード。

棋譜ファイルは多くの場合、kif と言う拡張子になっています。
しかしFC2ブログでは、kifファイルはアップロードが許可されていません。
そこで、あらかじめ拡張子を .kif から .txt に変えておく必要があります。

棋譜ファイルは、どこかのサイトから拾ってきても良いですし、
Kifu for Windows」 というソフトで作成することも出来ます。

棋譜ファイルの名前は、解かり易い(探し易い)名前にしておくことを忘れずに。
FC2ブログではディレクトリ(フォルダ)が無いので、ごちゃごちゃになります。
対局日かブログ投稿日などを入れておくと良いかと。各自のルールで。

アップロードした場所はこんな感じになりました。
http://blog-imgs-29.fc2.com/k/a/m/kambei/090618.txt


■ステップ4.
example.html をメモ帳(Notepad)などで開き、それを修正する。

例)example.html には、こう記述されています。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="Kifu" width="580" height="480"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="Kifu.swf" />
<!-- *** パラメータを記述する ***-->
<param name="FlashVars" value="kifu=henka.kif&no_mokume=1&minute=1" />
<param name="quality" value="high" />
<param name="bgcolor" value="#f0f0f0" />
<param name="allowScriptAccess" value="sameDomain" />
<!-- *** パラメータを記述する ***-->
<embed src="Kifu.swf"
FlashVars="kifu=henka.kif&no_mokume=1&minute=1"
width="580" height="480" name="Kifu" align="middle"
quality="high" bgcolor="#f0f0f0"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>

まず、Kifu.swf の部分を、先ほど自分がアップロードした場所 http://blog-imgs-29.fc2.com/k/a/m/kambei/Kifu.swf に変更します。(2ヶ所)

次に、henka.kif の部分を、先ほど自分がアップロードした場所 http://blog-imgs-29.fc2.com/k/a/m/kambei/090618.txt に変更します。(2ヶ所)

あと、ヘルプファイルの記述がないので、先ほど自分がアップロードした場所を設定したパラメータを加えます。henka.kif の行。(2ヶ所)
&help=http://blog-imgs-29.fc2.com/k/a/m/kambei/kifuf_help.html


以上を変更すると、こんな感じになります。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="Kifu" width="580" height="480"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="http://blog-imgs-29.fc2.com/k/a/m/kambei/Kifu.swf" />
<!-- *** パラメータを記述する ***-->
<param name="FlashVars" value="kifu=http://blog-imgs-29.fc2.com/k/a/m/kambei/090618.txt&no_mokume=1&minute=1&help=http://blog-imgs-29.fc2.com/k/a/m/kambei/kifuf_help.html" />
<param name="quality" value="high" />
<param name="bgcolor" value="#f0f0f0" />
<param name="allowScriptAccess" value="sameDomain" />
<!-- *** パラメータを記述する ***-->
<embed src="http://blog-imgs-29.fc2.com/k/a/m/kambei/Kifu.swf"
FlashVars="kifu=http://blog-imgs-29.fc2.com/k/a/m/kambei/090618.txt&no_mokume=1&minute=1&help=http://blog-imgs-29.fc2.com/k/a/m/kambei/kifuf_help.html"
width="580" height="480" name="Kifu" align="middle"
quality="high" bgcolor="#f0f0f0"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>

最後にもう一手順。
<!-- -->の部分はコメントなので、削除してしまいます。
また、改行も削除します。
このとき、文字同士がくっついてしまう場合は、半角スペースで区切ってください。

以上を変更すると、こんな感じになります。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="Kifu" width="580" height="480" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"><param name="movie" value="http://blog-imgs-29.fc2.com/k/a/m/kambei/Kifu.swf" /><param name="FlashVars" value="kifu=http://blog-imgs-29.fc2.com/k/a/m/kambei/090618.txt&no_mokume=1&minute=1&help=http://blog-imgs-29.fc2.com/k/a/m/kambei/kifuf_help.html" /><param name="quality" value="high" /><param name="bgcolor" value="#f0f0f0" /><param name="allowScriptAccess" value="sameDomain" /><embed src="http://blog-imgs-29.fc2.com/k/a/m/kambei/Kifu.swf" FlashVars="kifu=http://blog-imgs-29.fc2.com/k/a/m/kambei/090618.txt&no_mokume=1&minute=1&help=http://blog-imgs-29.fc2.com/k/a/m/kambei/kifuf_help.html" width="580" height="480" name="Kifu" align="middle" quality="high" bgcolor="#f0f0f0" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"></embed></object>

それを名前をつけて保存でもしておいてください。


■ステップ6.
記事を投稿する。
投稿の仕方は通常通りで構いません。
先ほど修正したものをコピペすればOK。

例)
NHK杯史上に残る大逆転劇を紹介します。
羽生マジック炸裂です。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="Kifu" width="580" height="480" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"><param name="movie" value="http://blog-imgs-29.fc2.com/k/a/m/kambei/Kifu.swf" /><param name="FlashVars" value="kifu=http://blog-imgs-29.fc2.com/k/a/m/kambei/090618.txt&no_mokume=1&minute=1&help=http://blog-imgs-29.fc2.com/k/a/m/kambei/kifuf_help.html" /><param name="quality" value="high" /><param name="bgcolor" value="#f0f0f0" /><param name="allowScriptAccess" value="sameDomain" /><embed src="http://blog-imgs-29.fc2.com/k/a/m/kambei/Kifu.swf" FlashVars="kifu=http://blog-imgs-29.fc2.com/k/a/m/kambei/090618.txt&no_mokume=1&minute=1&help=http://blog-imgs-29.fc2.com/k/a/m/kambei/kifuf_help.html" width="580" height="480" name="Kifu" align="middle" quality="high" bgcolor="#f0f0f0" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"></embed></object>
歩の数がぴったりなんですよ!

これで将棋盤が表示されると思います。
・・・たぶん。


■さいごに
2回目以降の記事の投稿は、棋譜をアップロードして、ステップ6 の棋譜の名前(例:090618.txt)を変えるだけ。(2ヶ所)

ステップ5 で改行とコメントを削除した理由は、FC2ブログの場合、『記事を投稿する際の改行の扱い』 を 『自動改行』 にすると正しく表示されないため。
『HTMLタグのみ』 にすれば正しく表示されるけど、そうすると通常の文章の改行にも<br />を入れなくてはならなくて面倒。

相対パスではなくて絶対パスを使っているのは、FC2ブログでは記事とファイルのサーバーが異なるため。

何かわからないところがあったらコメント欄にでも。
Seesaa のブログも持っているので、そっち操作方法もわかるかも。(未設置だけど。)
スポンサーサイト
  1. 2009/06/22(月) 12:16:15|
  2. [将棋]棋譜再現ソフト Web用
  3. | トラックバック:0
  4. | コメント:4
<<小説・エッセイ・漫画のレビュー | ホーム | 先陣を切る玉将>>

コメント

ありがとうございました

勘兵衛 様

WPのブログにKifu for Flashをアップしたかったのですが
そのままでは、HTML仕様でうまくいきませんでした。

そこでググって見たところ、勘兵衛様のサイトに行き当たりました。

おかげさまでできるようになりました。
ご推奨の方法だと、すごく楽です。

かさねてお礼申し上げます。
本当にありがとうございました。
  1. 2011/05/02(月) 16:42:37 |
  2. URL |
  3. ayu #oE717Anc
  4. [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  1. 2013/05/05(日) 22:32:45 |
  2. |
  3. #
  4. [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  1. 2013/07/01(月) 07:27:57 |
  2. |
  3. #
  4. [ 編集 ]

承認待ちコメント

このコメントは管理者の承認待ちです
  1. 2013/08/04(日) 02:42:15 |
  2. |
  3. #
  4. [ 編集 ]

コメントの投稿


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

トラックバック

トラックバック URL
http://kambei.blog45.fc2.com/tb.php/9-348bd7ea
この記事にトラックバックする(FC2ブログユーザー)

プロフィール

勘兵衛

Author:勘兵衛

最新記事

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する

ブロとも申請フォーム

この人とブロともになる

QRコード

QRコード

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。