图书馆云翻译书签的设计与实现
刘剑涛
华侨大学图书馆 泉州 362021
摘要

针对用户在访问图书馆数字资源时存在的语言和语义障碍,通过合理选择并集成现有的云翻译、云词典服务,设计一种用开源脚本库jQuery实现的浏览器翻译小书签,并就方案的可行性和关键性技术问题展开深入探讨。实践证明该翻译书签具有较强的实用性和良好的用户体验。

关键词: 数字图书馆; 小书签; 云翻译; 云释义; jQuery
Implement of Translation and Interpretation Bookmarklet in Library Based on Cloud Service
Liu Jiantao
Library of Huaqiao University, Quanzhou 362021, China
Abstract

Due to the language and semantic obstacles when accessing to digital resources in library, this paper uses an open source scripts jQuery to design a browser bookmarklet which is based on cloud translators and dictionaries, and then discusses the feasibilities and technical issues of the proposal in depth. Experiments show that the bookmarklet is practical and full of user experience.

Keyword: Digital library; Bookmarklet; Cloud translation; Cloud interpretation; jQuery
1 引 言

图书馆数字资源规模不断扩大给用户提供了便利,但也带来困扰:用户有机会接触到更多的外文资源的同时却面临无法完全掌握文献中出现的各种专业或新生词汇的问题。语言翻译和语义解释成为用户充分利用文献信息资源的阻碍。借助云服务的弥漫性、分布性和社会性特征,各种依赖云端和多用户协作的翻译和释义服务逐步普及。但是,用户为了获取一个词汇的翻译或解释,往往需要安装特定的软件,或在不同浏览器窗口中切换,不仅效率低下,也缺乏良好的用户体验。秉承“图书馆无处不在”的服务理念[ 1],本文通过比较、选择、集成现有的云服务,利用开源jQuery脚本库[ 2],以网页异步(AJAX)的方式实现了一种通用的嵌入式翻译书签,并在图书馆相关Web资源的实践中证明了其实用性。

2 设计方案及可行性分析
2.1 应用现状

金山快译[ 3]或金山词霸[ 4]等是早期应用较为广泛的翻译和词典桌面工具,但它们往往容量庞大且安装繁琐,无法满足即时应用的需求。随着云服务的兴起,用户只需访问谷歌翻译[ 5]、维基百科[ 6]等相关网站以检索的方式就能从云端海量数据中获取服务。此外,某些浏览器,如谷歌Chrome[ 7]自身集成了翻译功能,360浏览器[ 8]等则以第三方插件的形式集成有道翻译[ 9]。然而,这些应用或者只专注于翻译或是释义单一领域,或者需要将用户与特定软件绑定。图书馆用户迫切需要一种便捷的、集成的工具,不仅能提供语言,甚至还能提供语义上的信息服务。黎邦群[ 10]率先在OPAC系统中通过构建自己的词典库提供划词翻译服务,CALIS也在E读搜索中对检索词进行释义[ 11],但是这些实现方法都存在词库容量小、应用范围窄等问题。

小书签(Bookmarklet)是一种特殊的JavaScript应用程序,是以网址(URL)的形式被存为浏览器中的书签,也可以是网页上的一个链接[ 12],无论小书签以什么形式储存,它们都可以用来对浏览器或是网页添加一些特定的功能。典型的小书签应用如“推荐到豆瓣”[ 13],只需点击一次鼠标就可以将当前页面推荐给豆瓣网的友邻。基于以上分析,本文尝试以浏览器小书签的形式来设计一种图书馆云翻译工具。

2.2 设计方案

翻译小书签所要实现的是将翻译和释义功能无缝地嵌入到各种电子资源的页面中。当用户在各种操作系统使用不同浏览器检索或阅读时,只需要点击收藏夹中的书签启动翻译小书签,翻译小书签再调用开源jQuery脚本库以AJAX的方式向各个云端服务的应用程序接口(API)提交请求,最后云服务以XML、JSON或HTML等格式返回翻译或释义的结果并显示在当前页面。系统运行流程如图1所示:

图1 云翻译书签的运行流程

2.3 可行性分析

(1)从资源角度看,小书签依赖的是各种云端翻译或释义服务,服务的稳定性和开放性至关重要。云计算使计算分布在大量的分布式计算机上,而非本地计算机或远程服务器中,因此不会出现单机或网络局部故障而引起的服务中断;同时,开放性和社会性是当今网络发展的趋势,维基百科和豆瓣网的发展证明,将资源开放并吸引用户参与共建是一个资源平台快速发展的源动力,由此也为翻译和释义的数据源提供丰富的选择。

(2)从方案架构看,小书签是一种轻量级脚本程序,仅在用户浏览页面并产生翻译请求时才调用执行,运行快速、零安装和跨浏览器等特点不会给用户和服务器增加额外负担。

(3)从实现角度看,jQuery是现今非常流行的开源脚本库之一,它在操作跨浏览器的文档对象模型(DOM)、事件处理、样式更换,特别是AJAX异步通信进行了封装,开发量比纯粹的JavaScript节省三分之二,加之只有几十KB的超轻巧和较高的执行速度,非常适合小书签便捷的特点。

3 云翻译书签的实现
3.1 云服务的选择

云翻译书签实现的主要功能是翻译和释义,其中翻译又分为全文翻译和划选翻译。另外,为了让用户更贴近图书馆,小书签还以分页标签的形式集成了一个信息窗口,显示从图书馆网站数据库中提取的最新动态。为了从众多云服务中挑选以集成到翻译小书签,笔者对常用翻译和释义云服务进行了横向比较,结果如表1所示:

表1 翻译和释义云服务接口功能对比

综合考虑服务开放性、数据规模和翻译语种,笔者选择微软翻译AJAX接口[ 14]作为翻译功能的云服务,而QQ云词典[ 15]除基本解释,还集成了网络解释、用法、例句和百科知识,成为释义数据源的较好选择。

3.2 关键技术的实现

(1)全文翻译

使用微软翻译之前必须注册并获取合法的应用程序ID。全文翻译的流程主要包括:获取翻译候选语言的代码列表,分析用户翻译原文的语种,根据用户的选择将源语言翻译为目标语言,最后修改网页DOM并显示翻译结果。实现翻译功能的接口可以参考文献[14]中的GetLanguagesForTranslate、Detect和Translate方法。

ajaxTranslate函数描述了jQuery实现翻译的过程:将所申请的AppID、源语言、目标语言、待翻译文本以JSON格式提交给jQuery.ajax中的data参数,同时指定翻译的URL接口和返回格式,即可在success函数中获取翻译结果,或者在error中得到错误提示,简化代码如下:

function ajaxTranslate(textToTranslate, fromLanguage, toLanguage) {

var p = {}; //定义参数集p

p.appid = AppId; //初始化应用程序ID

p.to = toLanguage; //设定目标语言

p.from = fromLanguage; //设定源语言

p.text = textToTranslate; //待翻译文本

jQuery.ajax({

data: p, //参数赋值

url: 'http://api.microsofttranslator.com/V2/Ajax.svc/Translate', //指定翻译接口地址

dataType: 'jsonp', //返回数据格式

//翻译成功将结果展现在指定页面

success: function(result, status) {

jQuery('#tabs-1-1_hqulib').html(result) },

//翻译失败弹出错误提示

error: function(request, status, error) {

alert('error: status-'+status+':'+error); }

});

}

(2)划选释义

不同于微软翻译,经QQ云词典API处理后返回的数据格式是JSON,其定义灵活的树形结构常被用来表示非结构化数据,小书签从其中抽取相应的节点就能获取词汇的基本解释、网络解释和百科解释。但是JSON格式并不支持浏览器跨域传输[ 16],即不允许AJAX异步访问的地址脱离当前网页所在的域,而这恰好是小书签正常工作的必要条件。解决方法有两种:在用户端降低浏览器的安全设置或将数据格式转换为JSONP。前者需要用户手工操作,不仅不符合用户的使用习惯,而且也降低了用户的使用体验;后者需要在服务器端进行格式转换,尽管降低了部分速度,但对于用户而言是一种无障碍的透明服务。本文采用第二种方法,并使用.NET在服务器端实现格式转换,转换流程如图2所示:

图2 .NET实现JSON到JSONP格式的转换流程

以上方法也适用于其他信息的整合,如本馆动态页从图书馆网站数据库中提取新闻封装成JSON格式后再转换成JSONP,以满足跨域访问的需求。JSONP转换的核心是在JSON最外层加上“包装”[ 17],即把JSON数据包封装在函数callback中,从而拼接成一条JavaScript语句,JSON数据则变成函数调用的参数。转换语句如下:

string callback = Request["callback"]; //请求jQuery默认的回调参数callback

jsonpdata = callback + "(" + jsondata + ")"; //将JSON数据封装成JSONP

Response.write(jsonpdata); //返回封装后的数据

(3)发布小书签

小书签实质是一段以“javascript:”开头的特殊网页脚本,浏览器把它当作网址保存,并以类似HTTP协议的方式处理。由于不同浏览器支持的网址最大长度不同[ 18]且不允许换行,本文在小书签的设计上采用链接脚本的方式来缩短小书签的长度,各脚本文件由小书签动态调用。方法如下:检查当前网页是否调用过jQuery脚本库,若没有则直接加载jQuery脚本,若已经存在则继续载入jQuery用户界面库的CSS样式表和用户界面JavaScript脚本文件,最后再调用翻译和释义脚本。

由于jQuery本身也在动态调用的脚本之列,发布小书签时必须使用JavaScript原生的DOM操作方法来添加外部脚本。同时,将所有外部文件编码格式统一为UTF-8,才能避免由不同编码网页加载小书签出现的乱码现象。添加脚本的方法如下:

①使用document.createElement创建一个“script”标签;

②调用setAttribute分别指定外部脚本的远程路径和字符编码;

③使用getElementsByTagName查找文档中的“head”标签;

④调用appendChild将该script标签添加为head标签的第一个子节点。

经由上述方法生成的小书签地址发布有两种方式:把小书签脚本手工嵌入到网页代码中,图书馆必须具有网页修改的权限,适合自建或镜像的本地资源;由用户自行添加到收藏夹,同时适用于本地和远程资源的应用,是更为通行的方法。用户在使用前先访问小书签的说明页面,根据不同浏览器使用上述方法即可让翻译小书签出现在书签工具栏,如图3所示:

图3 启用翻译书签的方法

4 应用效果与用户体验
4.1 应用效果

只需点击浏览器中的相应书签,翻译小书签就以窗口的形式浮动于当前页面,实现任意拖动,并且支持窗口的放大、缩小和关闭。当用户选择全文翻译时,可以将当前浏览器页面全文翻译为指定的语种;当用户使用鼠标划选文字时,小书签能自动根据所选内容提供句子翻译或者词汇释义,并且经由词条链接用户还可以获取云服务网站的原始信息,效果如图4所示:

图4 翻译小书签运行效果

4.2 用户体验

为了反映翻译小书签的实际用户体验,本文针对本馆的数字资源站点进行了速度和兼容性测试。速度测试利用IE9附带的调试工具来监视每次网络访问的耗时,数据如表2所示:

表1 小书签速度测试

可以看出,翻译耗时基本上随着接收字符的增加而增加,但即使是翻译字节达到5 000,时间也不超过5秒,充分体现了云服务的优势。需要释义的词条一般长度相当,耗时较为平均,用户完全感觉不到本地服务器处理JSONP转换的影响。

兼容性测试使用主流浏览器访问各个数字资源网页并加载小书签,检测其能否正常显示和运行。结果显示,只有少数几个类型的资源页面出现兼容性问题:

(1)小书签标题栏按钮的位置出现偏差。这主要是由于IE浏览器的不同版本对JavaScript支持不同造成,启用浏览器的“兼容性视图”即可解决。

(2)小书签并不支持使用“框架”(Frame)的网页,所以如果发现网页使用了框架,则提示用户小书签无法使用。

(3)某些脚本库与jQuery存在冲突。如本馆OPAC系统使用与jQuery类似的脚本库Prototype[ 19],导致在非IE浏览器无法正常运行,解决方法是将小书签直接嵌入到OPAC页面中,并优先于其他脚本库运行。

5 结 语

云服务是未来图书馆服务发展的趋势。本文利用开源的jQuery脚本库,将各种在线翻译和词典进行合理的组织与集成,以浏览器书签这种轻巧便捷的服务形式为用户提供语言和语义等信息服务,帮助用户在数字资源的利用和知识的抽取上取得良好的效果。虽然目前机器翻译的质量仍不能和人工翻译相提并论,跨域协议的支持也不尽完善,但是随着技术的发展、协议的升级,在云服务资源上图书馆将会有越来越多的选择。

参考文献
[1] Chad K, Miller P. Do Libraries Matter? The Rise of Library 2. 0[R/OL]. [2012-04-25]. http://www.capita-libraries.co.uk/downloads/white_papers/DoLibrariesMatter.pdf. [本文引用:1]
[2] jQuery Documentation[EB/OL]. [2012-04-25]. http://docs.jquery.com/. [本文引用:1]
[3] 金山快译[EB/OL]. [ 2012-04-25]. 金山快译[EB/OL]. [2012-04-25]. http://ky.iciba.com/.( KingSoft FastAIT[EB/OL]. [2012-04-25]. http://ky.iciba.com/ [本文引用:1]
[4] 金山词霸[EB/OL]. [ 2012-04-25]. 金山词霸[EB/OL]. [2012-04-25]. http://ciba.iciba.com/.(KingsoftPowerWord[EB/OL]. [2012-04-25]. http://ciba.iciba.com/ [本文引用:1]
[5] Google Translate[DB/OL]. [2012-04-25]. http://translate.google.com/. [本文引用:1]
[6] Wikipedia[DB/OL]. [2012-04-25]. http://www.wikipedia.org/. [本文引用:1]
[7] Google Chrome[EB/OL]. [2012-04-25]. http://www.google.cn/chrome/. [本文引用:1]
[8] 360浏览器[EB/OL]. [2012-04-25]. http://se.360.cn/.( 360 Browser[EB/OL]. [2012-04-25]. http://se.360.cn/ [本文引用:1]
[9] 有道翻译[DB/OL]. [2012-04-25]. http://fanyi.youdao.com/.(YoudaoTranslate[DB/OL]. [2012-04-25]. http://fanyi.youdao.com/ [本文引用:1]
[10] 黎邦群. OPAC划词翻译功能的设计与实现[J]. 现代图书情报技术, 2011(11): 84-88.
(Li Bangqun. Design and Implementation of the Zoned Word Translation Function of OPAC[J]. New Technology of Library and Information Service, 2011(11): 84-88. ) [本文引用:1] [CJCR: 1.073]
[11] 中国高等教育数字图书馆E读搜索[DB/OL]. [2012-04-25]. http://www.yidu.edu.cn/.(CALISEReadingSearch[DB/OL]. [2012-04-25]. http://www.yidu.edu.cn/ [本文引用:1]
[12] Wikipedia. Bookmarklet[EB/OL]. [2012-04-25]. http://en.wikipedia.org/wiki/Bookmarklet. [本文引用:1]
[13] 推荐到豆瓣[EB/OL]. [2012-04-25]. http://www.douban.com/service/bookmarklet.( Recommend to Douban. com[EB/OL]. [2012-04-25]. http://www.douban.com/service/bookmarklet [本文引用:1]
[14] AJAX Microsoft Translator V2[EB/OL]. [2012-04-25]. http://msdn.microsoft.com/en-us/library/ff512404.aspx. [本文引用:1]
[15] QQ云词典[DB/OL]. [2012-04-25]. http://dict.qq.com/.(QQCloudDictionary[DB/OL]. [2012-04-25]. http://dict.qq.com/ [本文引用:1]
[16] 什么是跨域访问?[EB/OL]. [2012-04-25]. http://blog.sina.com.cn/s/blog_5d95e3130100l8vt.html.( What is Cross-domain Access?[EB/OL]. [2012-04-25]. http://blog.sina.com.cn/s/blog_5d95e3130100l8vt.html [本文引用:1]
[17] 张子秋. jQuery风暴-完美用户体验[M]. 北京: 电子工业出版社, 2011: 146-149.
(Zhang Ziqiu. jQueryStorm-Perfect User Experience[M]. Beijing: Publishing House of Electronics Industry, 2011: 146-149. ) [本文引用:1]
[18] HTTP协议中URL最大长度是多少?[EB/OL]. [2012-04-25]. http://hqlong.com/2009/12/1164.html.( What is the Longest URL in HTTP Protocol?[EB/OL]. [2012-04-25]. http://hqlong.com/2009/12/1164.html [本文引用:1]
[19] Prototype JavaScript Framework[EB/OL]. [2012-04-25]. http://www.prototypejs.org/. [本文引用:1]