Hamliteの貼り付け方

オセロ棋譜再生ブログパーツ「Hamlite」のダウンロードサイト


Hamliteをブログの記事や掲示板に貼り付ける方法を紹介します。

①iframeタグを利用してブログに直接張り付ける
②Aタグを利用してHamliteへのリンクを貼り付ける
③オセロ盤サイズの変更方法

【ブログの場合】

①の方法で記事に直接Hamliteを貼り付け表示できるブログがお勧めです。お使いのブログによってはセキュリティ的な制限のために①が使えない場合もあります。うまく貼れない場合はお使いのブログがiframeの使用を許可しているかどうか確認してください。①が利用できない場合は②の方法を試してみましょう。

【掲示板の場合】

セキュリティ的な制限のために①の方法が使えないところが多いと思います。その場合は、掲示板にHamliteのURI(URL)を貼り付ける②の方法を試してみましょう。
②の方法は、HTMLのAタグを使ってHamliteのオンラインページにリンクを貼る方法です。リンクをクリックすると、別のページが開き棋譜が表示されます。

iframeタグを利用してブログに直接貼り付ける

【貼り付けコード例】 ※Hamlite v1.61 用

  • ↑テキストエリアです。サンプルコードをコピーして利用してください。下記の説明通り、棋譜の部分を入れ替えて使います。

【貼り付けコードの説明】

貼り付けコードは、「固定コード部分」と「パラメータ指定部分」に分かれます。
灰色の囲みの部分は「固定コード部分」です。「Hamliteのサイズを変更する
や「Hamliteをバージョンアップする場合以外は変更の必要がありません。

<iframe width="195" height="245" marginwidth="0" marginheight="0" 
frameborder="0" scrolling="no" allowtransparency="true" 
src="http://reversi-ai.appspot.com/v1.61/hamlite.html?

  &kifu=f5d6c3d3c4b5b4f4c5b3f3c6b6e6a4a6a5f6e3g6g5a3d2h5c2g4e7
  f7g3h2c7e1c1e8d7f2e2f1h3h4d1b1h6h7g2d8c8b8b7g7f8a8a7g8h8h1
  g1a1a2b2

"></iframe>

貼り付けコードで、白の部分が「パラメータ指定部分」です。ここに棋譜などのHamliteの動作を設定するためのパラメータを指定します。上記例では、棋譜パラメータ(kifu)を使って、Hamliteで再生する棋譜を設定しています。
※パラメータの詳細については、「カスタマイズ」メニューを参照ください。

棋譜を指定する

kifu=f5d6c3d3c4b5b4f4c5b3f3c6b6e6・・・・・・・
↑          ↑
パラメータ      設定値(テキスト形式棋譜)

パラメータ書式(パターン1) ※基本書式

"パラメータ文字列" + "=" + "設定値"  + ”&”

棋譜の指定ほか、その他のHamliteの動作/デザインを指定ときは、パラメータを使います。「パラメータ=値」の形式で指定します。オプション(省略可能)で”&”があります。これはパラメータを複数指定する場合の区切り文字として、以下のように使います。

パラメータ文字列(1)=設定値(1)パラメータ文字列(2)=設定値(2)

《複数パラメータ指定例1》

board_color=00AA00&ah18_color=FFFFFF&start_mode=kifu

パラメータ書式(パターン2) ※推奨書式

"&パラメータ文字列" + "=" + "設定値"
 ↑先頭に&をつける

Hamlite v1.11以前の説明では、基本書式のみを説明していました。覚えやすさを配慮して、パターン2を推奨書式として紹介します。本サイトのサンプルは、この推奨書式ですべて記載しています。

《複数パラメータ指定例2》

&kifu=f5d6c3d3c4b5b4f4c5b3f3c6b6e6・・・・・・・
&board_color=00AA00
&ah18_color=FFFFFF
&start_mode=kifu

パラメータ文字列の先頭に”&”を付加し、”&パラメータ文字列”をパラメータとして扱う方法です。上記の例のように、一行毎にパラメータを指定して見やすく書く場合に綺麗書ける特長があります。
『すべてのパラメータ文字列の先頭に”&”をつける』と覚えましょう。

Aタグを利用してHamliteをリンクで貼り付ける

【貼り付けコード例】 ※Hamlite v1.61 用

  • ↑テキストエリアです。サンプルコードをコピーして利用してください。下記の説明通り、棋譜の部分を入れ替えて使います。

【貼り付けコードの説明】

iframeタグ版と同じく「固定コード部分」と「パラメータ指定部分」に分かれます。aタグを使ったリンク貼り付けでは、「固定コード部分」がaタグの指定に置き換わります。「パラメータ指定部分」の記述は同じです。

<a href="http://reversi-ai.appspot.com/v1.61/hamlite.html?

  &kifu=f5d6c3d3c4b5b4f4c5b3f3c6b6e6a4a6a5f6e3g6g5a3d2h5c2g4e7
  f7g3h2c7e1c1e8d7f2e2f1h3h4d1b1h6h7g2d8c8b8b7g7f8a8a7g8h8h1
  g1a1a2b2

" target="_blank">リンク用の文字列を指定</a>

【実際の例】

棋譜の表示はここをクリック!

Hamliteのオセロ盤サイズを変更する

【iframeタグ/Aタグ利用共通】

《サイズパラメータ》

&size="設定値"
     ↑6段階の大きさを設定可能


《各設定値と実際の大きさ(ピクセル)》

パラメータ 設定値 横幅(width) 高さ(height) 備 考
&size SS 175 px 225 px ブログサイドバー向け
&size S 195 px 245 px サイズ省略時の初期値
&size M 215 px 275 px ブログ本文向け
&size L 240px 300px やや大きめ
&size XL 280px 345px 大きめ
&size EL 325px 390px 最大

v1.30以降のコメント表示機能を使用する場合には、コメント表示専用の横幅サイズの設定が必要です。詳細は、「カスタマイズ」メニューのコメント表示パラメータのところを参照ください

※v1.11以前のバージョンではサイズ変更ができず、Sサイズ相当の大きさで表示されます。
 →v1.11以前: width="190" height="245" (widthが5ピクセル短い)

【iframeタグ利用の場合】

<iframe width="195" height="245" marginwidth="0" marginheight="0" 
frameborder="0" scrolling="no" allowtransparency="true" 
src="http://hamlet-ajax.appspot.com/v1.60/hamlite.html?
&size=S

上記はHamliteのSサイズを指定した場合の例です。iframeタグのwidthとheightに表に記載の値を設定します。加えてsizeパラメータに設定値を記載します。

【Aタグ利用の場合】

<a href="http://hamlet-ajax.appspot.com/v1.60/hamlite.html?
&size=S

上記はHamliteのSサイズを指定した場合の例です。Aタグの場合はsizeパラメータのみを指定します。

|1|2|3|4|5|6|7|8|9|10|
updated 2015-07-10

Copyright (C) 2009-2015 K.Kawami (HN)
All Rights Reserved.

milk_btn_next.png

milk_btn_pagetop.png

以下、貼り方不明か、貼れなかった大手ブログサイト。
(iframeタグ方式の貼り付けができなかったサイト)
・Yahoo!ブログ
 →iframeが使えない模様。
・gooブログ
 →非公式ブログパーツ不可。
・エキサイトブログ
 →iframeは利用禁止タグ。
・amebaブログ
 →iframeは利用禁止タグ。

ここに掲載していないその他ブログサイトについては、各自で調査お願いします。