アンカーの生成方法

アンカーは以下のような流れで生成されます。

前提条件

Webページの中の文字列が範囲選択されている状態で、以下を実行します。

Internet Explorerの場合

マウスの右クリックで「Bookmark here (HYPER-ANCHOR)」もしくは、「Bookmark selection (HYPER-ANCHOR)」、「Copy to clipboard here (HYPER-ANCHOR)」もしくは、「Copy to clipboard selection (HYPER-ANCHOR)」を選択するか、HYPER-ANCHORツールバー( )の「」 ボタン、もしくは「」ボタンをクリックすることでhyperanchor形式のアンカー生成が実行されます。

Firefoxの場合

マウスの右クリックで「この位置をブックマーク(HYPER-ANCHOR)」もしくは、「この位置をクリップボードにコピー(HYPER-ANCHOR)」を選択するか、HYPER-ANCHORツールバー( )の「」ボタンをクリックすることでhyperanchor形式のアンカー生成が実行されます。


生成の流れ

HYPER-ANCHORのアンカー生成が実行されると以下の流れでアンカーを生成します。

内容
1 現在選択されている文字列の先頭文字があるタグノード情報を取得し、そのタグから選択されている文字列が何文字目から始まっているかのオフセットとノードタイプ、コンテンツとして先頭・末尾文字列数文字(Ver1.2以降)を保持します。
※文字列が選択されていない場合は、オフセットを保持せずコンテンツは属性名と値を保持します。
2 ノード情報に「id」や「name」属性がある場合、その値がページ全体から一意であるかを検索します。
3 一意である場合、アンカーパスの先頭に // + タグ名 + [@ + id or name + =" + 値+ "]を追加します。
例) //DIV[@id=""]
4 一意でない場合、同じレベルにあるタグをノードの位置から前方(上方)に「id」や「name」属性を走査し、一意になる値を検索します。
5 一意である場合、アンカーパスに「/following-sibling::」を追加し、9に進みます。
例) //DIV[@id=""]/following-sibling::
6 一意でない場合、同じレベルのノードがなくなるまで「4、5」を繰り返し、ノードと同じタグ名をカウントします。
7 / + タグ名 + [ + 同じタグのカウント数 + ] をアンカーパスの先頭に追加します。
8 「2」〜「7」を親ノードに対して繰り返し、「id」や「name」属性の値が一意になるノードが見つかるか、HTMLタグが現れるまでおこないます。
9 「1」で取得したオフセットとノードタイプをアンカーパスの末尾に次のように追加します。( + オフセット + )( + ノードタイプ + ) ( + コンテンツ + )
例) /TABLE[3]/TBODY[1]/TR[1]/TD[1] (0)(3)(あいう)
10 現在選択されている文字列の末尾文字についても同様に「1」〜「9」をおこないます。
11 指定されたスタイルを適用する場合はcssのスタイルの文字列を取得しておきます。
例) padding-left:16px;background:transparent scroll no-repeat top left url(http:/ ・・・
12 最後にページのURLに「#hyperanchor1.3:」を追加し、先頭文字のアンカーパスと末尾文字のアンカーパス、スタイルを「&」でつなげて、アンカー全体(「#」以降)を「encodeURIComponent」でエンコードするとhyperanchor形式のアンカーパスの生成が完了します。

例) 
http://www.hyper-anchor.org/tutorial/sample.html#hyperanchor1.3%3A%2F%2FDIV[%40id%3D%26quot%3Bcontents%26quot%3B]%2Ffollowing-sibling%3A%3ATABLE[1]%2FTBODY[1]%2FTR[1]%2FTD[2](2)(3)(%E3%83%97%E3%83%AB%E6%96%87)%26%2F%2FDIV[%40id%3D%26quot%3Bcontents%26quot%3B]%2Ffollowing-sibling%3A%3ATABLE[1]%2FTBODY[1]%2FTR[1]%2FTD[2](6)(3)(%E3%83%AB%E6%96%87%E5%AD%97)%26padding-left%3A16px%3Bbackground%3Atransparent%20scroll%20no-repeat%20top%20left%20url(http%3A%2F%2Fwww.hyper-anchor.org%2Ficon%2Fexclamation.gif)%3Bbackground-color%3Argb(255%2C%20255%2C%20153)%3Bborder%3Athin%20dotted%20rgb(153%2C%20153%2C%20153)%3B