ここではブログやホームページについ盤を埋め込む方法や、棋譜の書き方について解説します。
まず、つい盤を埋め込みたい場所に次のHTMLコードを書きます。例えば「はてなブログ」であればHTML編集というモードがあるので、そこで書き込んでください。
<div class="tsuiban">
<a href="https://tsuitateviewer.firebaseapp.com/viewer.html?
&player1=overestimate
&player2=meguru178
&kifu=+7978GI-1314FU+9796FU-2213KA+5756FU-3132GI+1716FU-8242HI+4958KI-6162KI+3736FU-7374FU+5948OU-6273KI+2838HI-7172GI+2917KE-5354FU+3635FU-5162OU+3534FU-4344FU+1725KE-2324FU+3433TO-3233GI+2533KE-2133KE+0034FU-3345KE+0033GI-2425FU+3836HI-4252HI+4746FU-5455FU+4645FU-4445FU+8897KA-5254HI+4857OU+0035KE-7364KI+3344NG-0037FU+3433TO-0096KE-3738TO+5847KI+3938GI-0036FU-0035FU-5556FU+0057FU-6455KI+5756FU-5556KI+3656HI-5456HI+0047KI-5636HI+4837OU+4736KI-0057FU+4857OU-0044KE-1331KA+4454NG-3175KA+5768OU-0038HI-0056KE+6857OU+6879OU-7548UM+0057FU-0037FU+7988OU-3738TO+0061HI-6261OU+3342TO-0052FU+3543KE-0088HI-5668NK+4351NK-6171OU+4252TO-4152KI+5152NK-6878NK+6978KI-4866UM-7182OU+0074KE+0075KE-8292OU+5463NG-0079GI+7879KI-0078GI+0078KI+7978KI-0058HI-0066FU+0072GI+0062KI-6667TO+6272KI-6778TO+8878OU-0079HI+7888OU-0078HI
&comment=(0)第3回ついたて将棋オフ会決勝（2018/9/15、囲碁将棋カフェ樹林にて）
">棋譜はこちら</a>
</div>
href以下の赤字の部分に、棋譜の内容を記述します（記事の後半を参照）。
これで、つい盤へのリンクが表示された状態になります。
PCでブログを見ている人には、つい盤を埋め込んで表示することもできます。やや長いですが、以下のスクリプトをHTML編集モードで記事のどこかに記述してください。
<script>
function judge_device(){
var ua = navigator.userAgent.toLowerCase();
if((ua.indexOf('mobile') > 0 && ua.indexOf('android') > 0) || ua.indexOf('iphone') > 0|| ua.indexOf('ipod') > 0)
return 'sp';
else if(ua.indexOf('android') > 0 || (ua.indexOf('ipad') > 0 || ua.indexOf('macintel') > 0 || ua.indexOf('macintosh') > 0 && typeof document.ontouchstart !== 'undefined'))
return 'tab';
else
return 'pc';
}
function replace_word(text, from, to){
for(var i=0; i<text.length; i++){
if(text.substr(i, from.length) == from){
return text.slice(0, i) + to + text.slice(i+from.length);
}
}
}
document.addEventListener('DOMContentLoaded', function(){
var device = judge_device();
if(device=='pc'){
var tsuiban = document.getElementsByClassName('tsuiban');
var elem, elem2, src;
for(var i=0; i<tsuiban.length; i++){
elem = tsuiban[i].firstElementChild;
src = elem.getAttribute('href');
tsuiban[i].removeChild(elem);
elem2 = document.createElement('iframe');
elem2.setAttribute('src', replace_word(src, 'viewer.html', 'tsuiban.html') + '&board_size=' + 40);
elem2.setAttribute('width', 680);
elem2.setAttribute('height', 540);
elem2.setAttribute('frameborder', 0);
tsuiban[i].appendChild(elem2);
}
}
});
</script>
つい盤を２つ以上載せる場合でも、上記のコードは１回書けば十分です。赤字の数字が盤面の大きさを決めます。board_sizeは将棋盤の１マスの横幅をpxで表したものです。widthとheightはつい盤を埋め込む箱の大きさを指定します。board_sizeに対してwidthを17倍、heightを13.5倍以上取ってください。
上記のコードを実際に実行したものをここに載せています。
ちなみにここで紹介した棋譜はオフラインで行われたものです！白熱した対戦の様子はこちらの動画でお楽しみいただけます。
ここでは棋譜の書き方について説明します。棋譜の骨格部分（&kifuなど）はつい盤のメニューから出力できるので、その利用をお薦めします。全てのパラメータを調節した例を次に示します。これらのうちkifuは必須のパラメータです。他のパラメータは省略すると、デフォルトの値が与えられます。
&player1=overestimate
&player2=meguru178
&kifu=+0033GI-2425FU+3836HI-4252HI+4746FU-5455FU+4645FU-4445FU+8897KA-5254HI+4857OU+0035KE-7364KI+3344NG-0037FU+3433TO-0096KE-3738TO
&comment=(30)コメント0(31)コメント1
&start_board=-KY-KE*ZZ*ZZ*ZZ-KI*ZZ*ZZ-KY*ZZ*ZZ-GI-OU*ZZ-HI*ZZ*ZZ*ZZ-FU-FU-KI-FU*ZZ*ZZ*ZZ*ZZ-KA*ZZ*ZZ-FU*ZZ-FU-FU+FU-FU-FU*ZZ*ZZ*ZZ*ZZ*ZZ-KE*ZZ*ZZ*ZZ+FU*ZZ*ZZ*ZZ+FU*ZZ*ZZ*ZZ+FU*ZZ+FU+FU+FU*ZZ+FU*ZZ+FU*ZZ*ZZ+KA+GI*ZZ+KI+OU+HI*ZZ*ZZ+KY+KE*ZZ+KI*ZZ*ZZ+GI*ZZ+KY
&start_tesuu=30
&start_hansoku=9.9
&start_mochigoma=GI.FUKE
&draw_tesuu=150
&tsuitate=true
&transpose=false
&fix=true
&background_color=f2eedd
まずkifuの書き方を説明します。一手は７文字で構成されており、１文字目は先手（+）か後手（-）を表します。
２、３文字目はどこの駒を動かしたかを表します。持ち駒を指す場合には00を指定します。４、５文字目はどこに動かしたかです。
そして最後の６、７文字目は動かした結果、駒の種類がどうなったかを表します。全て半角で記述してください。
駒と記号の対応関係は次のとおりです。
歩：FU 香：KY 桂：KE 銀：GI 金：KI 玉：OU 飛：HI 角：KA と金：TO 成香：NY 成桂：NK 成銀：NG 龍：RY 馬：UM
反則時は手番が交代しないので、先手もしくは後手の手番が連続するように書いてください。また特殊な指し手に不明な反則と投了があります。
不明な反則は+0000ZZ（-0000ZZ）で、投了は+9999ZZ（-9999ZZ）で書き表すことができます。
以下は、必要なときに記述します。commentの書き方について説明します。(N)テキストと書くと、N手目の場面でテキストが表示されます。(N)は半角で記述してください。コメント内容でかっこを使う場合はなるべく全角（）を使ってください。
次に、初期盤面を指定するstart_boardからstart_mochigomaまでの書き方を説明します。これらは、つい盤のメニューから「現在の盤面を出力」を選択すると取得できます。start_boardの*ZZは駒がないことを意味します。start_tesuuは初期盤面における手数です。またstart_hansokuとstart_mochigomaはともに、先手.後手という表記になっています。これらも半角で記述してください。
draw_tesuuは引き分け手数を表します。tsuitateからfixまでのデフォルト値はfalseです。tsuitateをtrueにすると初期盤面がついたてを立てた状態になり、transposeをtrueにすると後手番が手前に表示されます。fixをtrueにするとtsuitateとtransposeの設定が変更できなくなります。background_colorで背景の色が指定できます。RGB値を0〜fの１６進数６文字で表してください。
最後に、上記のコードを実際に実行したものを以下に示します。