はてなダイアリーでのフラ盤の設置方法

「フラ盤」とは三間飛車のひとくちメモ様で公開されているとても使いやすい棋譜再生Flashのことだ。FC2ブログなどいわゆる「普通の」ブログサービスへの貼り付け方は多くのページで解説されているのだが、別の技術を要する「はてなダイアリー」への貼り付け方は解説されていないように思う。自分自身への覚書として、長くなるが書いてみよう。

概要

通常ならばタグを使えば済む話なのだが、「はてな」ではこのタグが使えないので一工夫必要となる。先に断っておくがこれは裏技などを利用したものではなく、「はてな」が公式に行っているサービスを利用したものである。
ではどのような技術を用いるのかと言えば、「Google Gadget」という技術である。以下、その詳しい解説に入る。

STEP1--準備

まず、Googleのアカウントを取っておく必要がある。Googleのサイトの右上の「ログイン」から取得可能。
次に、上記「三間飛車のひとくちメモ」様のこちら→フラ盤のページに行き、「フラ盤」をダウンロードする。そのページにある説明は一読することをオススメする。
また、自分が表示させたい棋譜をKIF形式(若しくはCSA形式)で準備しておく。Kifu for Windows 等で作ると便利。
最後に、.swfと.xmlの拡張子のファイルがアップロードできるサーバーを取得する必要がある。「はてな」だとここでつまずく方がいらっしゃるかもしれない。少し難しい話になるが、@PAGESというところを利用することにした。

STEP2--本体の準備

Google Gadget」を利用するためには拡張子が「.xml」のファイルを作る必要があるのだが、ここではその方法について解説したい。
まずはUFT-8が使えるエディタに以下の文を入力する。メモ帳では駄目なので注意。例えばTeraPad等をダウンロードしてご利用ください。改行コードをUFT-8にすることをお忘れなく。

<?xml version="1.0" encoding="UTF-8" ?>
<Module><ModulePrefs title="タイトル" />
<Content type="html"><![CDATA[ 内容 ]]>
</Content></Module>
次に、先ほどの「フラ盤」と「棋譜ファイル」を取得したサーバーにアップロードする。よく分からない方はアカウント登録したサーバーのヘルプなどに解説があるはずですので、そこを参照してください。
次に、そのアップロードしたフラ盤と棋譜ファイルのURLを「フラ盤」タグメーカーのページの中に指定されたとおりにコピペする。私の場合ならフラ盤:http://www19.atpages.jp/kifunet/flaban.swf棋譜ファイル:http://www19.atpages.jp/kifunet/hatena/100522-k.txtとしましたので、最後の「結果」のところには以下のように表示されます。(「盤反転」にチェックを入れたので皆さんのタグとは少し違うかもしれません)
<object data="http://www19.atpages.jp/kifunet/flaban.swf" width="490" height="350" type="application/x-shockwave-flash">
<param name="movie" value="http://www19.atpages.jp/kifunet/flaban.swf">
<param name=FlashVars value="kifuName=http://www19.atpages.jp/kifunet/hatena/100522-k.txt&reverse=true">
<param name=bgcolor value=#ccff99></object>
そしてこのタグを先ほどの文章の中の「内容」というところと置き換える。「title」はそのままでも構わない。
するとこうなる。
<Module><ModulePrefs title="100522-k.txt"/>
<Content type="html">
<![CDATA[
<object data="http://www19.atpages.jp/kifunet/flaban.swf" width="490" height="350" type="application/x-shockwave-flash">
<param name="movie" value="http://www19.atpages.jp/kifunet/flaban.swf">
<param name=FlashVars value="kifuName=http://www19.atpages.jp/kifunet/hatena/100522-k.txt&reverse=true">
<param name=bgcolor value=#ccff99></object>
]]>
</Content></Module>
この内容が記述されたファイルを適当に名前をつけて保存する。その際、拡張子を.xmlにすることをお忘れなく。
このようにして作ったファイルを先ほど取得したサーバーにアップロードする。私の場合はhttp://www19.atpages.jp/kifunet/hatena/100522-k.xmlとなる。

STEP3--Gadget作成

ここまで来ればゴールは目前。ここまでで失敗した方は改行(漢字)コードを再度確認してください。
さて、igoogleにログインし、My Gadgetsに行きます。すると中央部に「今すぐ追加」というボタンがありますので、そこをクリック。
そしてigoogleのページに戻るとMy Gadgetsというガジェットが増えているのがわかる。参考:http://f.hatena.ne.jp/keishogi/20100525204608
この画像の矢印の部分に先ほどアップロードした.xmlファイルのURLをコピペし、最後に「Add」を押す。
するとhttp://f.hatena.ne.jp/keishogi/20100525205416のように端が切れたフラ盤が表示される。
あとはそのフラ盤が表示されている箱の右上にある↓矢印のボタンを押し、「このガジェットについて」をクリック。すると詳しいページに飛ぶが、そこはスルーして右下の「ウェブマスター向け」欄にある「このガジェットを埋め込む」をクリック。
その結果ページにこれまた少し端が切れたフラ盤が表示される。全て入るようにサイズを変更し、一番下の「コードを取得」を押す。その結果表示されたタグを貼り付ければ完了。

すこし大変だが、一回やってしまえばあとは楽。質問などありましたらコメント欄にどうぞ。

更新履歴

2010/05/31 加筆・訂正