:::

單機版簡易網頁標註外掛:Rangy Highlighter Cookie / Standalone Web Annotation Pluing: Rangy Highlighter Cookie

image

很多人會希望在閱讀網頁的時候也能像是紙本一樣畫重點。雖然我以前做過閱讀知識合作標註學習系統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>

image

接著請開啟網頁並試著用滑鼠選取網頁上的文字。如果正常運作的話,應該就會出現「標亮」的圖示了。

開放原始碼 / Open Source

感謝GitHub Page自訂Domain Name以防止HTTPS跳轉的功能,我把Rangy Highlighter Cookie主要程式放在GitHub上,要使用的人就可以直接引用。

線上展示 / Demo

2016-11-23_022529

我在CodePen上做了一個線上展示的網頁。下半部是可以直接操作RHC的展示網頁,左上角則是它的HTML原始碼。有興趣的人可以直接玩看看。


使用Rangy Highlighter Cookie / Instruction

RHC的功能很簡單,只有「標亮」跟「刪除(標亮)」兩種。

標亮 / Highlight

image

選取網頁文字之後,滑鼠旁邊就會顯示「標亮」的按鈕。

2016-11-23_023650

按下「標亮」按鈕之後,該段文字就會加上黃色的背景。這樣就完成標亮的動作。

刪除(標亮) / Remove (Highlight)

image

刪除標亮的方法一樣是選取網頁文字,但是選取範圍是之前標亮的位置。有重疊到標亮範圍的話,就會在原本的標亮按鈕顯示「刪除」。

image

按下「刪除」按鈕之後,標亮就會被刪除了。

資料保存 / Storage

這個標亮的資料保存在瀏覽器的Cookie中,下次再重新造訪該網頁時,依舊會顯示上次標亮的位置。標亮資料Cookie到期的期限是2年,僅供個別瀏覽器使用,不支援跨瀏覽器、跨電腦。


結語 / Conclusion

受惠於新形態的選取函式庫Rangy,建立RHC這種輕量型的網頁標註工具大概只花了我2小時左右──其中一大部分是在試著把標註按鈕加上拖曳功能,但後來覺得沒必要在這個強調輕量、簡單的工具上添增太多花俏的效果而作罷。

image

在之前的KALS系統中,我花費相當多苦心在標註定位的功能上。舉例來說,當我選取網頁第一個字時,系統必須要知道它選的文字的位置索引。而現在有了Rangy,我們可以直接用rangy.serializeSelection()來取得選取位置的索引,非常方便。

這種選取的核心概念從根本顛覆了原本KALS的基本架構,讓我心動不已。而Rangy的說明頁面還有更多有趣的功能值得探索,建議大家可以先從它的展示頁面Demos來瞭解功能。我把它的展示頁面備份到RHC的保存庫中,讓我們可以直接從下面網址查看:

本篇以Rangy函式庫試做了單機版簡易網頁標註外掛Rangy Highlighter Cookie,雖然它只有標亮與刪除標亮的功能,但卻是發展複雜功能的一個很好的起點。不論是只想要為網頁加上簡單標註的人,還是有心想要發展複雜標註功能的人,希望這篇都能幫得上大家的忙。

0 意見:

留言工具: