單機版簡易網頁標註外掛：Rangy Highlighter Cookie / Standalone Web Annotation Pluing: Rangy Highlighter Cookie
很多人會希望在閱讀網頁的時候也能像是紙本一樣畫重點。雖然我以前做過閱讀知識合作標註學習系統KALS可以做到這功能，但它太過龐大、老舊，而且畫重點前還需要註冊，使用上諸多不便。我後來發現AnnotateIt之類的新形態網頁標註工具開始採用了Rangy選取函式庫，它使用現代瀏覽器支援的選擇功能，能夠從根本上改善KALS的問題。所以我就用Rangy做了一個簡易的單機版網頁標註外掛：Rangy Highlighter Cookie。網站架設者只要在HTML程式碼中嵌入JavaScript就能夠使用。標註的資料直接儲存在使用者個人的Cookie中，不需要登入或仰賴其他伺服器。雖然功能簡單，但這可以解決大多人在網頁上畫重點的需求，也是為了未來發展複雜功能所做的一個基石。
安裝Rangy Highlighter Cookie / Installation
Rangy Highlighter Cookie (以下簡稱RHC)是一個JavaScript函式庫，僅能在現代瀏覽器中瀏覽網頁時使用。要使網頁具有RHC的功能，必須在網頁的原始碼中嵌入以下程式碼：
<!-- 引用Rangy Highlighter Cookie的語法 -->
<script type="text/javascript" src="//github-rangy-highlighter-cookie.pulipuli.info/rangy-highlighter-init.js"></script>
接著請開啟網頁並試著用滑鼠選取網頁上的文字。如果正常運作的話，應該就會出現「標亮」的圖示了。
開放原始碼 / Open Source
感謝GitHub Page跟自訂Domain Name以防止HTTPS跳轉的功能，我把Rangy Highlighter Cookie主要程式放在GitHub上，要使用的人就可以直接引用。
- Rangy Highlighter Cookie 原始碼保存庫：https://github.com/pulipulichen/rangy-highlighter-cookie
線上展示 / Demo
我在CodePen上做了一個線上展示的網頁。下半部是可以直接操作RHC的展示網頁，左上角則是它的HTML原始碼。有興趣的人可以直接玩看看。
使用Rangy Highlighter Cookie / Instruction
RHC的功能很簡單，只有「標亮」跟「刪除(標亮)」兩種。
標亮 / Highlight
選取網頁文字之後，滑鼠旁邊就會顯示「標亮」的按鈕。
按下「標亮」按鈕之後，該段文字就會加上黃色的背景。這樣就完成標亮的動作。
刪除(標亮) / Remove (Highlight)
刪除標亮的方法一樣是選取網頁文字，但是選取範圍是之前標亮的位置。有重疊到標亮範圍的話，就會在原本的標亮按鈕顯示「刪除」。
按下「刪除」按鈕之後，標亮就會被刪除了。
資料保存 / Storage
這個標亮的資料保存在瀏覽器的Cookie中，下次再重新造訪該網頁時，依舊會顯示上次標亮的位置。標亮資料Cookie到期的期限是2年，僅供個別瀏覽器使用，不支援跨瀏覽器、跨電腦。
結語 / Conclusion
受惠於新形態的選取函式庫Rangy，建立RHC這種輕量型的網頁標註工具大概只花了我2小時左右──其中一大部分是在試著把標註按鈕加上拖曳功能，但後來覺得沒必要在這個強調輕量、簡單的工具上添增太多花俏的效果而作罷。
在之前的KALS系統中，我花費相當多苦心在標註定位的功能上。舉例來說，當我選取網頁第一個字時，系統必須要知道它選的文字的位置索引。而現在有了Rangy，我們可以直接用rangy.serializeSelection()來取得選取位置的索引，非常方便。
這種選取的核心概念從根本顛覆了原本KALS的基本架構，讓我心動不已。而Rangy的說明頁面還有更多有趣的功能值得探索，建議大家可以先從它的展示頁面Demos來瞭解功能。我把它的展示頁面備份到RHC的保存庫中，讓我們可以直接從下面網址查看：
- 核心功能：Core
- 選取範圍的記錄與重建：Selection save/restore module
- 選取範圍序列化：Selection serializer module
- 選取範圍套用Class標籤：Class applier module
- 搜尋並標亮：TextRange module
- 選取並標亮：Highlighter module
- 分析選取位置：Position module (work in progress)
本篇以Rangy函式庫試做了單機版簡易網頁標註外掛Rangy Highlighter Cookie，雖然它只有標亮與刪除標亮的功能，但卻是發展複雜功能的一個很好的起點。不論是只想要為網頁加上簡單標註的人，還是有心想要發展複雜標註功能的人，希望這篇都能幫得上大家的忙。
