hyperanchor形式仕様

hyperanchor形式のアンカーの仕様を以下に示します。

生成するアンカー

生成するアンカーはhyperanchor形式のバージョンとマークアップする場所の選択方法により異なります。

ノードを直接選択した場合

画像やリンク等右クリックでノードを直接選択した場合に生成されるアンカーは以下の形式となります。

通常のURL + # + hyperanchor形式バージョン + hyperanchor形式パス + & + hyperanchor形式スタイル(※１)

※１： hyperanchor形式スタイルはスタイルが設定されている場合のみ生成されます。

文字列を範囲選択した場合

文字列を範囲選択した場合に生成されるアンカーは以下の形式となります。

通常のURL + # + hyperanchor形式バージョン + 文字列の先頭を表すhyperanchor形式パス + & + 文字列の末尾を表すhyperanchor形式パス + & + hyperanchor形式スタイル(※１)

※１： hyperanchor形式スタイルはスタイルが設定されている場合のみ生成されます。

【ご注意】
バージョン1.3では、上記アンカー部分（「#」以降）全てを「encodeURIComponent」でエンコードして出力します。

hyperanchor形式

hyperanchor形式のアンカーはhyperanchor形式のバージョンをあらわす「hyperanchor形式バージョン」と、マークアップされた文字列/ノードまでの位置を表す「hyperanchor形式パス」、マークアップされた文字列/ノードをどのように表示するかの「hyperanchor形式スタイル」で構成されます。

hyperanchor形式バージョン

項目	説明	形式	例
バージョン	hyperanchor形式のバージョンを表します。	hyperanchor + バージョン	hyperanchor1.3:

hyperanchor形式パス

以下の表の連結順序の順番に項目が連結されマークアップされた文字列/ノードまでの場所を表すパスを生成します。

連結順序	項目	説明	形式	例
1	一意な属性	マークアップされたノードや同レベルのノードの前方(上方)、親ノードをたどってページ中で一意となる「id」か「name」属性がある場合、その情報を示します。	// + タグ名 + [@ + 属性名 + =" + 属性値 + "]	//DIV[@name="contents"]
2	検索方法	一意な属性がある場合の検索方法。以下の検索方法がございます。・following-sibling ：マークアップされた文字列/ノードが一意な属性と同レベルの後方(下方)に存在することを表します。	/ + 検索方法 + ::	/following-sibling::
3	パス	マークアップされた文字列/ノードまでのパスを表します。一意な属性がある場合はそこからのパスとなります。	/ + タグ名 + [ + 同名のタグの数(※1) + ] マークアップされた文字列/ノードまで繰り返します。	/DIV[3]/P[2]/SPAN[2]
4	位置	パスで示されたタグのマークアップされた文字列の開始・終了位置を表します。	( + 文字位置 + )	(0)
5	ノードタイプ	マークアップされた文字列・ノードの型を表します。以下の型がございます。・要素ノード： 1 ・テキストノード： 3	( + ノードタイプ + )	(3)
6	コンテンツ (Ver1.2で必須)	以下値を表します。設定された値はアンカー表示時に以前マークアップしたものと同じかを判定するために使用します。以下のいずれもhttpエンコード、UTF-8でのURLエンコード済みの値を設定します。【要素ノードの場合】ノードに含まれる属性値を現します。　例）画像の場合、src属性を設定。アンカーの場合、href属性のURL部分のみを設定。【テキストノードの場合】先頭パスの場合は文字列の先頭数文字、末尾パスの場合は文字列の末尾までの数文字を現します。 ※この項目を使用しない場合はhyperanchor形式バージョンを「1.1」で生成してください。	【要素ノード】 ( + 属性名 + : + 属性値 + ) 【テキストノード】 ( + %E6%96%87 ・・・+ )	【要素ノード】 (href%3A http%3A//www ・・・) 【テキストノード】 (%e5%bd%a2%e5 ・・・)

※1 ：ノードと同じレベルの前方(上方)にある同名のタグの数。

hyperanchor形式スタイル

項目	説明	形式	例
スタイル	マークアップされた文字列/ノードのスタイルをcssのスタイルで設定します。	cssのスタイル	padding-left:16px; background ・・・

出力例

http://www.hyper-anchor.org/tutorial/sample.html#hyperanchor1.2://DIV[@id="contents"]/following-sibling::TABLE[1]/TBODY[1]/TR[1]/TD[2](2)(3)(%E3%83%97%E3%83%AB%E6%96%87)&//DIV[@id="contents"]/following-sibling::TABLE[1]/TBODY[1]/TR[1]/TD[2](6)(3)(%E3%83%AB%E6%96%87%E5%AD%97)&background-color:rgb(255,255,153);border:thin%20dotted%20rgb(204,204,204);

※上記以外の出力例については後述の「出力結果例」をご参照ください。