指導対局自戦記
 駒落ちならプロにも勝てる!   はずなんだけどなぁ・・・

スポンサーサイト

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

棋譜再現への道 【4】  Kifu for Flash の設置

『 Kifu for Flash 』のフォルダの中に『 kifu_man.html 』というファイルがあります。
これがマニュアルです。
このマニュアルの『5.設置法』の通りにすれば棋譜再現出来るはずです。
が、なかなかうまく動かないんですよねぇ…(苦笑)。
先日『サンプルページ』を作った時も Flash アプリケーションを認識してくれなくて、2時間以上時間を無駄にしました。
その時の原因はファイル名が違っていたのです。
『 Kifu.swf 』をサーバーへアップロードしたのですが、FC2ホームページではファイル名を勝手に全部小文字にしてしまう様なんです。
アップされたファイルは『 kifu.swf 』となっていました。
この違いで、ファイルが見つからずに動かなかったのです。
実際に棋譜再現に成功するまでは、タイプミスなどが無いように慎重に記述していってください。

それでは Kifu for Flash の貼り付け方を説明していきます。
作業用としてデスクトップに空のテキストファイルを二つ用意します。
[デスクトップで右クリック]-[新規作成]-[テキスト ドキュメント]をクリックします。
わたしは『アップロード棋譜ファイル.txt』と『棋譜貼り付けテンプレ.txt』というファイル名にしています。




Kifu for Flash の設置方法

 1)解凍した『 Kifu for Flash 』のフォルダの中にある『 Kifu.swf 』をアップロードします。
   『サンプルページ』では ¥kifusaigen/kifuforflash/kifu.swf になります。
   このファイルを正しく相対パスで指定出来ないと動かないので気をつけてください。
   わたしの失敗例もあるので、ファイル名はすべて小文字に統一した方がいいと思います。
   『 Kifu.swf 』を『 kifu.swf 』というファイル名でアップロードしましょう。

 2)棋譜ファイルをアップロードします。
    kifu for windows で、棋譜再現する棋譜を開きます。
   準備しておいた『アップロード棋譜ファイル.txt』をクリックして開きます。
   ツールバーの[編集]-[棋譜のコピー]-[時間付き(KIF形式)]をクリックします。
   マウスポインタを『アップロード棋譜ファイル.txt』に持ってきて左クリックして、
   『アップロード棋譜ファイル.txt』をアクティブにします。
   [ctrl]+[V]で『アップロード棋譜ファイル.txt』に棋譜ファイルをペーストします。
   このファイルを『 kifu1.txt 』というファイル名でアップロードします。
   同一ページに複数の Kifu for Flash を貼り付ける場合は、『 kifu2.txt 』『 kifu3.txt 』
   を同じようにアップロードします。

 3)以下のタグを『棋譜貼り付けテンプレ.txt』にコピペしてください。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="Kifu" width="580" height="500"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="../kifuforflash/kifu.swf" />
<param name="FlashVars" value="kifu=kifu1.txt" />
<param name="quality" value="high" />
<param name="bgcolor" value="#f0f0f0" />
<param name="allowScriptAccess" value="sameDomain" />
 <embed src="../kifuforflash/kifu.swf"
 FlashVars="kifu=kifu1.txt"
 quality="high" bgcolor="#f0f0f0"
 width="580" height="500" name="Kifu" align="middle"
 play="true"
 loop="false"
 quality="high"
 allowScriptAccess="sameDomain"
 type="application/x-shockwave-flash"
 pluginspage="http://www.adobe.com/go/getflashplayer">
 </embed>
</object>

   これがフラッシュ貼り付けのテンプレートになります。

 4)4行目のvalue="../kifuforflash/kifu.swf"と9行目のsrc="../kifuforflash/kifu.swf"の
   ダブルクォーテーションの中で『 kifu.swf 』を指定しています。
   これはあくまでわたしが作った『サンプルページ』の場合です。
   『 ../kifuforflash/ 』の部分はディレクトリ構造によって違ってくるので、玉頭銀さんが作った
   ディレクトリに合わせて相対パスで指定してください。
   うまく棋譜再現が出来たら、以後ここの部分はこのままで大丈夫です。
   ディレクトリを整理して『 kifu.swf 』を移動した場合は、それに合わせてパスを書き換えます。

 5)5行目のvalue="kifu=kifu1.txt"と10行目のFlashVars="kifu=kifu1.txt"で再現する
   棋譜ファイルを指定します。
   『 index.html 』と同じディレクトリに棋譜ファイルをアップロードすれば、パスはいらないので
   ファイル名だけで指定できます。
   もし棋譜ファイルをまとめて一つのディレクトリに入れて管理する場合は、相対パスを付けて
   再現する棋譜ファイルを指定してください。
   この場合はファイル名を『kifu1.txt』ではなく、分かりやすい名前にした方がいいでしょう。
   ただし、マニュアルに『ファイル名に日本語を使ってはいけません』『ファイル名の大文字と
   小文字の違いがあってはいけません』とあるので、ファイル名を付ける時は気をつけてください。

 6)後は『 index.html 』の<body>と</body>の中で、フラッシュを貼り付けたい場所に
   『棋譜貼り付けテンプレ.txt』をコピペすれば設置完了です。

 7)以後は棋譜フィルをアップロードして、『棋譜貼り付けテンプレ.txt』の棋譜ファイル指定部分
   を書き換えて、テンプレートをコピペするだけです。
   棋譜ファイルを一括管理するのではなく、再現する棋譜を『 index.html 』と同じディレクトリ
   に『kifu1.txt』のファイル名でアップロードするのならば、テンプレートは書き換える事無く
   そのままコピペして使えます。

      

『 kifu.swf 』と『棋譜ファイル』の指定に、ファイル名とパスの間違えがなければ、これで棋譜の再現が出来るはずです。
わからない事があれば気軽に質問コメントを下さい。
あとはマニュアルの『起動パラメータ』を見て、自分なりにカスタマイズしてください。
無事棋譜再現が出来て、玉頭銀さんのサイトがさらに充実した物になることをお祈りいたします。



最後にFC2ブログで棋譜再現をする人の為に。
FC2ブログではファイルをディレクトリ管理出来ません。
その為、『 kifu.swf 』と『棋譜ファイル』を絶対パスで指定する事になります。
たとえばわたしのブログの場合は『value="../kifuforflash/kifu.swf"』の部分は『value="http://blog-imgs-30.fc2.com/r/a/y/rayvaughan1963/Kifu.swf"』となっています。
同じように、棋譜ファイルをアップロードするたびにURLをコピーして、『value="kifu=kifu1.txt"』を『value="kifu=http://blog-imgs-30.fc2.com/r/a/y/rayvaughan1963/20100509172658ccb.txt』のように書き換えています。
HTMLの知識の無いわたしは、 Kifu for Flash をダウンロードしてから、フラッシュを貼り付けて棋譜再現できるまで、試行錯誤を繰り返して二ヶ月くらいかかってしまいました。
ここを見て、自分もブログで棋譜を紹介しようと思われた方は参考にしてください。
また、試してみてうまくいかなかったときはコメントをください。
スポンサーサイト

棋譜再現への道 【3】 局面図の貼り付け

局面図の貼り付け方です。


 1)局面画像保存用のフォルダを作ってください。

 2) kifu for windows で貼り付ける局面を表示します。

 3)[ツール]-[画像の保存]をクリック。

 4)『画像の保存』ウィンドウが開くので、(1)で作ったフォルダを指定して[保存]します。
   ファイル名はそのままでもいいし、管理しやすいように独自のルールで付けてもいいでしょう。

 5)画像ファイルをアップロードして、写真を貼るのと同じように貼り付けます。
   ちなみに『サンプルページ』の『ページ1』に局面図を貼り付けたタグは、
   
   <img border="0" alt="7手目局面" width="580" height="350" p=""
   src="kyokumen1.jif " />
   
   です。
   width と height はページのデザインに合わせて数値を調整してください。
   『サンプルページ』では index.html と同じディレクトリに画像ファイルを置いたので、 src の
   指定はファイル名だけですが、違うディレクトリにアップする時は当然その指定をしてください。
   HTMLの知識が無いので『p=""』が何なのか分かりません。index.html をアップロードしたら
   自動で挿入されていました。
   

これで局面図は貼り付けられたと思います。
基本的には写真の貼り付けと同じなので、これは簡単に出来たと思います。


次はフラッシュ貼り付けの準備です。

『柿木の将棋ソフトウェア』から『 Kifu for Flash 』をダウンロードして解凍してください。

これから棋譜を紹介するページが増える事を考えて、ディレクトリ構造を整理しておいてください。
『サンプルページ』では
 [ Root ]
    ├[ index.html ]
    └[ kifusaigen ]
        │
        ├[ kifuforflash ]
        │    └[ kifu.swf ]
        │
        ├[ page1 ]
        │   ├[ index.html ]        
        │   └[ kyokumen1.jif ]
        │
        ├[ page2 ]
        │   ├[ index.html ]        
        │   └[ kifu1.txt ]
        │
        └[ page3 ]
            ├[ index.html ]        
            ├[ kifu1.txt ]
            └[ kifu2.txt ]

このようになっています。
それぞれのページの[ index.html ]で kifu.swf と棋譜データを相対パスで指定するので、間違えないように分かりやすい位置に[ kifu.swf ]を置いておく方がいいです。
各ページのディレクトリにそれぞれ[ kifu.swf ]を置いておけば間違えないのですが、同じ物をページごとにアップしていてはメモリの無駄なのでこのようにしました。

準備が出来たらコメントをください。
次はいよいよフラッシュを貼り付けて棋譜再現に挑戦です。

棋譜再現への道 【2】 棋譜入力(2)

>出来ました!
>懇切丁寧な解説ありがとうございます。
>再生までできました。軽く感動しました(笑)

とのコメントをいただきました。
とりあえず一歩前進しましたね。

このブログでは棋譜再現出来ていますが、玉頭銀さんはブログではなくホームページです。
「教える」と言ったものの、ホームページでもちゃんと出来るのか確認していないので心配になりました。
わたしはホームページを作った事が無いので、当然HTMLを全く知りません。
検索してみると『ホームページの作り方』などのサイトがいっぱいありました。
そのようなサイトで必要最低限のHTMLの知識を仕入れて、今日一日かけてホームページを作りました。

『棋譜再現サンプルページ』

ど素人が確認の為にとりあえず作ったものなので、見た目も何もあったものではありませんが、リンクを張って、画像を張って、フラッシュを張って棋譜再現が出来ました。
順を追って説明しますから、玉頭銀さんのサイトでも棋譜再現が出来るようになると思います。


今回は棋譜入力の続きです。

『変化手順』の入力

 1) kifu for windows を立ち上げて、入力済みのファイルを開いてください。

 2)[>]ボタンで局面を進めるか、『棋譜ウインドウ』の変化手順の入力局面の
   手数のところをクリックして、変化手順の始まる局面を出します。

 3)ツールバーの[継]をクリックします。時計が動き出すので、変化手順を入力していきます。

 4)変化手順では最後まで指し手を進めるわけではないので、投了の[投]ボタンではなく、
   中断の[中]ボタンを押します。

 5)棋譜の保存を訊ねてくるので[上書き保存]を押して保存します。

 6)今度は右上のボタンが増えていると思います。
   『次の分岐まで進める』と『前の分岐まで戻す』です。

 7)一手ずつ進めて変化手順を入力した局面にくると『分岐』のウインドウが出てくるはずです。

 8)ここでそのまま一手進めると本譜の順を再現していきます。

 9)分岐のウインドウの変化手順をクリックすると棋譜ウインドウがグレーになって、
   変化手順を再現します。

10)変化手順の途中でも分岐して違う変化手順を入力できます。

11)最初の分岐のところで更に違う変化手順を入力して分岐を増やすことも出来ます。
   適当に駒を動かして、分岐をいっぱい作って試してみてください。


『コメント』の入力

 1)コメントを入れたい局面で、キーボードの[ctrl]+[D]を押します。

 2)『棋譜のコメント』のウインドウが開きます。

 3)コメントを入力して[OK]をクリックすれば入力完了です。

 4)コメントを追加したい時は、コメントのある局面で[ctrl]+[D]を押せば、
   入力済みのコメントが書かれた状態で『棋譜のコメント』のウインドウが開くので、
   コメントを修正したり追加して[OK]をクリック。

 5)最後にツールバーの[ファイル]-[上書き保存]をクリックして保存します。


これで棋譜入力は終わりですが、[編集]-[対局情報]とクリックしてみてください。
『開始日時』と『終了日時』が棋譜を入力した日時になっていると思います。
ここを実際の対局日に直しておきましょう。
後もう一つ、考慮時間が表示されてしまうので、[編集]-[すべての指し手の消費時間を0に]をクリックして[はい]で時間を0にしておきます。

ここまで出来たらコメントをください。
次回は局面図の貼り付け方です。



ところで、リンクを張ると『<a href=” ~ ~ ”』というコマンド(HTMLではタグというんですね)が出てきます。
『アハレフ』ってなんだろうと不思議に思っていましたが、今日HTMLを勉強していて『a』がアンカーで『href』がハイパーレファレンスの略だと知りました(笑)。





 

棋譜再現への道 【1】 棋譜入力(1) 

玉頭銀さんから「自分のサイトでも棋譜再生をしたいので、方法を教えて欲しい」とのコメントをいただきました。
同じ事を考えている人の参考になればと思い、玉頭銀さんとの連絡をここで行ないたいと思います。

> 一応私のパソにはkifu for windowsというのは入っています。
> 今私がわからないのは、その画面を開いて、
> そっからどうやって手順をいれていったらいいのか、
> それをどうやって保存したらいいのか、
> さらにそれをどうやって自分のサイトに貼ればいいのか、だと思います。

とのことなので、まずは kifu for windows で棋譜入力するところからですね。


【 kifu for windows で棋譜入力する方法 】

1) kifu for windows のアイコンをクリックして kifu for windows を立ち上げます。

2)ツールバーの[対局]をクリックするとプルダウンメニューが出てくるので[新規対局]をクリック。

3)新規対局のウィンドウが開くので、対局者名と棋譜情報を入力します。

4)[OK]をクリックすると kifu for windows の画面が(対局中)になって時計が動き出します。

5)動かす駒をクリックして、棋譜の通りに指していくと棋譜が入力されていきます。

6)最後に[投了]をクリックすると棋譜の保存のウインドウが開くので保存します。
  棋譜を管理しやすいように、前もってフォルダを作っておくと良いと思います。

7)一度 kifu for windows を閉じて、また立ち上げてください。

8)ツールバーの[ファイル]-[開く]とクリックして保存したファイルをクリックします。

9)ツールバー右側にある三角形のボタンで一手進めたり戻したりしてみてください。
  これで駒が動けば入力成功です。
  

ここまで出来たらコメントをください。
わからない事があったら遠慮なく質問のコメントをください。
最新記事
最新コメント
最新トラックバック
カテゴリ
リンク
検索フォーム
RSSリンクの表示
月別アーカイブ
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
プロフィール

Author:RAY
FC2ブログへようこそ!

FC2カウンター
FC2カウンター
現在の閲覧者数:
アフィリエイト・SEO対策
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。