Hamliteの貼り付け方

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

【ブログの場合】

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

【掲示板の場合】

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

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

<iframe width="195" height="245" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allowtransparency="true" src="https://reversi-ai.appspot.com/v1.62/hamlite.html? &kifu=f5d6c3d3c4b5b4f4c5b3f3c6b6e6a4a6a5f6e3g6g5a3d2h5c2g4e7f7g3h2c7e1c1e8d7f2e2f1h3h4d1b1h6h7g2d8c8b8b7g7f8a8a7g8h8h1g1a1a2b2 "></iframe>

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

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

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

　　&kifu=f5d6c3d3c4b5b4f4c5b3f3c6b6e6a4a6a5f6e3g6g5a3d2h5c2g4e7
　　f7g3h2c7e1c1e8d7f2e2f1h3h4d1b1h6h7g2d8c8b8b7g7f8a8a7g8h8h1
　　g1a1a2b2

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

棋譜を指定する

パラメータ書式（パターン１）　※基本書式

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

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

ﾊﾟﾗﾒｰﾀ文字列（１）=設定値（１）＆ﾊﾟﾗﾒｰﾀ文字列（２）=設定値（２）

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

パラメータ書式（パターン２）　※推奨書式

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

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

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

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

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

<a　href="https://reversi-ai.appspot.com/v1.62/hamlite.html? &kifu=f5d6c3d3c4b5b4f4c5b3f3c6b6e6a4a6a5f6e3g6g5a3d2h5c2g4e7f7g3h2c7e1c1e8d7f2e2f1h3h4d1b1h6h7g2d8c8b8b7g7f8a8a7g8h8h1g1a1a2b2" " target="_blank">適当な文字列を指定</a>

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

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

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

　　&kifu=f5d6c3d3c4b5b4f4c5b3f3c6b6e6a4a6a5f6e3g6g5a3d2h5c2g4e7
　　f7g3h2c7e1c1e8d7f2e2f1h3h4d1b1h6h7g2d8c8b8b7g7f8a8a7g8h8h1
　　g1a1a2b2

【実際の例】

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

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

《サイズパラメータ》

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

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

パラメータ	設定値	横幅（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タグ利用の場合】

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

【Aタグ利用の場合】

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

|1|2|3|4|5|6|7|8|9|10|
updated 2020-09-20

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