• 沒有找到結果。

搜-Go FireFox瀏覽器套件

N/A
N/A
Protected

Academic year: 2021

Share "搜-Go FireFox瀏覽器套件"

Copied!
51
0
0

加載中.... (立即查看全文)

全文

(1)

國立台灣科技大學 資訊管理系

實務專題研究報告

搜-Go FireFox 瀏覽器套件

指導教授:楊傳凱 老師 學生姓名:B9409027 林珮妤 B9409028 盧琬潔 B9409042 許秀霞 B9409056 杜維芬

中 華 民 國 九 十 七 年 十 月

(2)
(3)

目錄

第一章 緒論 ... 4

第一節 研究動機與目的... 4

第二節 研究問題與方法... 5

第三節 研究流程圖 ... 7

第二章 開發工具 ... 8

第一節 使用者介面開發工具 ... 8

第二節 伺服器端程式開發工具 ... 10

第三節 實際開發情況... 11

第四節 執行環境需求... 17

第三章 規則及系統使用說明 ... 18

第一節 系統架構圖 ... 18

第二節 規則說明 ... 19

第三節 系統使用說明 ... 21

3-1 安裝方式... 21

3-2 輸入方式... 24

3-3 顯示查詢結果... 25

3-4 複製反白文字... 34

3-5 關閉視窗... 35

3-6 停用「搜Go」... 35

第四章 經驗談 ... 36

第五章 討論 ... 38

第六章 結論 ... 40

第七章 未來展望 ... 41

參考資料... 43

誌謝... 48

(4)

圖表索引

圖 1-3 研究流程圖 ... 7

圖 2-3-1 xpi 套件架構... 10

圖 2-3-2 install.rdf 檔 ...11

圖 2-3-3 Chrome.menifest 檔...11

圖 2-3-4 xul 檔內容... 12

圖 2-3-5 js 檔處理滑鼠事件 ... 12

圖 2-3-6 js 檔取反白字串 ... 13

圖 2-3-7 js 檔過濾反白字串 ... 13

圖 2-3-8 js 檔介面顯示設計 ... 14

圖 2-3-9 js 檔單字處理介面 ... 14

圖 2-3-10 功能處理流程 ... 15

圖 2-3-11 news.php 程式碼內容 ... 15

圖 2-3-12 qnews.php 程式碼內容... 15

圖 2-3-13 js 檔與 php 檔連結方式 ... 16

圖 3-1-1 系統架構圖 ... 17

圖 3-3-1 首先先下載好搜-GO套件(.xpi檔) ... 21

圖 3-3-2 拖曳.xpi檔到紅色方框內... 21

圖 3-3-3 出現軟體安裝畫面,等待讀秒結束... 22

圖 3-3-4 安裝完成,重開Firefox。... 22

圖 3-3-5 按功能表列上的「工具」,再選取附加元件... 23

圖 3-3-6 可以看到搜-Go已安裝完成。 ... 23

圖 3-3-7 反白要查尋的文字,軟體會自動送出查尋。... 24

圖 3-3-8 在輸入框中輸入文字,點選「搜Go」後,會自動送出查詢.... 24

圖 3-3-9 自動送出查詢,會顯示所查的第一個單字的字典... 25

圖 3-3-10 點選「字典」 ... 25

圖 3-3-11 再點選「單字」,會顯示所查的第一個單字的字典 ... 26

(5)

圖 3-3-12 再點選「片語」,會顯示其中有可能包含的動詞片語... 26

圖 3-3-13 點選「GOOGLE翻譯」 ... 27

圖 3-3-14 再點選「CE」,會將中文段落翻譯成英文 ... 27

圖 3-3-15 再點選「EC」,會將英文段落翻譯成中文... 28

圖 3-3-16 再點選「CEC」,會將中文文章的文法做修改... 28

圖 3-3-17 再點選「ECE」,會將英文文章的文法做修改... 29

圖 3-3-18 點選「新知」 ... 29

圖 3-3-19 再點選「Yahoo知識」,,會將字串送至Yahoo知識查詢 ... 30

圖 3-3-20 再點選「Google新聞」,會將字串送至Google新聞查尋... 30

圖 3-3-21 再點選「維基百科」,會將字串送至維基百科查尋... 31

圖 3-3-22 點選「休閒」 ... 31

圖 3-3-23 再點選「YouTube」,會顯示YouTube查尋到的第一筆影片 .. 32

圖 3-3-24 .再點選「圖片」,會顯示Google查尋到的第一張JPG圖片 .... 32

圖 3-3-25 再點選「鈴聲」,會顯示Yahoo鈴聲查尋到的可試聽的鈴聲 .. 33

圖 3-3-26 再點選「歌詞」,會顯示歌詞帝國查尋到的前五歌詞... 33

圖 3-3-27 再點選「eBay」,會顯示eBay查尋到的拍賣物品結果... 34

圖 3-3-28 反白後,只需點選「複製」按扭即可... 34

圖 3-3-29 點選右上角的「close」即可... 35

圖 3-3-30 點選狀態列上「close the search-go(N)」的按扭即可 ... 35

(6)

第一章 緒論

第一節 研究動機與目的

在資訊爆炸的網路時代裡,資訊的取得可以說是輕而易舉,只要 打開瀏覽器,資訊多到讓你目不暇給,在面臨大量資訊的同時,我們 又該如何快速且正確的吸收呢?舉例來說,相信很多人都有英文閱讀 的困難,尤其是正在學習英文的使用者,當閱讀一篇英文文章時,可 能會用到線上字典,使用者必須不斷的更換頁面,反覆地做查詢,如 此一來大大的降低了學習的效率。再舉例來說,當我們在瀏覽網頁 時,可能對網頁中提及的文字或資訊感興趣,想要再進一步地了解,

甚至想要查詢相關資訊時,使用者必須再次切換頁面,使得使用者思 緒不能連貫、反覆的重新讀取。如果我們能讓使用者不需離開目前閱 讀的網頁就能順暢地瀏覽資訊,那不是更省時方便嗎?

於是我們有了這個構想,來因應使用者的需求,我們特別打造了 一個講求實用、方便又快速的瀏覽器套件-『搜-GO』,並以簡單的反 白方式操作、簡潔明瞭的方式呈現,讓使用者在瀏覽網頁時,透過『搜 -GO』不需切換頁面就能得到查詢的結果,大大的提升了使用者的工 作效率。

(7)

我們推出的『搜-GO』,主打的是能解決英文學習者的困擾,不論 是英文的單字、片語、段落翻譯、甚至是中文皆能做處理,有別於一 般的套件,此外更替使用者新增許多額外的功能,例如:Yahoo 知識+、

Google 新聞、維基百科,這些都是使用者常用來做查詢的網頁,如此 一 來 使 用 者 不 費 吹 灰 之 力 就 能 得 到 新 知 , 最 後 我 們 也 新 增 了 YouTuBe、圖片、鈴聲、歌詞、ebay 來供使用者做搜尋,提供了讓使 用者可以一邊學習、一邊育樂的介面。

我們是以直覺式的介面呈現給使用者,並以圖片顯示方式,來表 示各個功能,讓使用者能輕易的點選所要項目,輕輕鬆鬆就能獲得資 訊,而在資訊顯示方面,我們主要是講求簡單、清楚的呈現,讓使用 者一眼就能看到所要資訊,不會被一些額外的框架或廣告給干擾。

第二節 研究問題與方法

著手進行的同時,我們必須選擇,我們要運用哪一個瀏覽器、要 用什麼程式語言、要有哪些功能、要如何處理英文片語、介面及資訊 要以什麼方式呈現,都是需要研究的問題。我們比較了一些瀏覽器及 現有瀏覽器套件,從中了解套件在瀏覽器中運作的方式,並開始研究 使用者在使用時,可能會需要哪些功能,我們也整理出英文片語的大

(8)

致規則,以便日後我們能用程式語言來表示,最後並決定介面呈現的 方式。

選擇瀏覽器及語言:經由一些瀏覽器的比較,最後我們選擇了 Mozilla Firefox 瀏覽器,我們之所以選擇它,是因為它是開放式的,

易於其他人開發使用,同時它也允許用戶根據個人需要去添加各種擴 充套件來滿足每個人的要求,而且市占率也僅次於微軟的 IE,而撰 寫此擴充套件需要用到 HTML、JavaScript、XUL、CSS 等語言。

內建功能:我們模擬了使用者在瀏覽網頁時可能會需要的功能,

並了解哪些查詢網頁是使用者常用的,及哪些網頁會讓使用者感興 趣,進而內建了近十多個功能,提供使用者使用。

英文片語判斷:我們先假設,使用者一開始從英文動詞開始選 取,一次可選取數個字,並運用空白來進行斷字,再將這數個字排列 組合,則可以整理出可能出現片語的演算法,再將演算法轉換成程式。

資訊呈現:我們內建有許多功能,而呈現這些資訊時,主要是以 簡單、清楚的畫面呈現,所以我們必須先去除,一些原有網頁不必要 的 tab 及框架,達到一致性,然後才呈現在我們的介面上,這裡主要 使用的技術為 php 程式語言。

介面呈現:主要是用 JavaScript 語言寫出介面,並以標籤頁方 式將功能分門別類,而介面呈現大小,可依資訊內容多寡而自動調 整,並以直覺、圖片顯示的方式,讓使用者選擇所要的功能。

(9)

第三節 研究流程圖

確立研究目的 以及研究問題

系統需求探討

研究方法內容

資料蒐集

功能需求探討

決定功能並實作

決定介面呈現方式

劃分功能區塊

決定連結伺服器方式

架設伺服器

連結伺服器

功能分類 介面整合

系統修正與整合

文件製作與美工

專題研究成果發表 專題研究

圖 1-3 研究流程圖

(10)

第二章 開發工具

開發工具大致上可分為兩個部分:,使用者介面開發工具和伺服 器端程式開發工具,在使用者介面的部分,我們是利用 JavaScript、

XML、CSS、HTML、XUL 等技術,製造一個在 Mozilla Firefox 上執行 的擴充套件。而在伺服器端的部分,是利用 Apache 架設了一個伺服 器,伺服器內是使用 PHP 來開發,當使用者利用反白或輸入,送出需 求後,透過 JavaScript 會連接到伺服器端執行,之後再將結果傳回 JavaScript,最終傳達給使用者。

第一節 使用者介面開發工具

1. JavaScript

是美國 Netscape 和 Sun 合作開發的一種跨平台、物件導 向的敘述式語言,它可以用來製作動態網頁,提升網頁的互動 性。它的程式碼可以直接內嵌於網頁的 HTML 碼中,不必編譯就 可直接執行,是一種直譯式的敘述性語言。依其功能可分成伺 服器端和客戶端。用戶端:預設的網頁程式語言,可用於 IE、

FireFox 或 Chrome 等各大瀏覽器。伺服器:適用於微軟 IIS 網頁伺服器的 ASP 語言環境,可在網頁送到客戶端之前,進行 各種處理,或和資料庫進行資料存取。在此部分,我們是利用 其用戶端的特性,製作一個動態的 tab 頁面。

(11)

2. HTML

HTML 的全名是 HyperText Markup Language(超文本標 記語言)。是用於設計 Web 頁面的標準標記語言。它被用來結 構化資訊——例如標題、段落和列表等等,也可用來在一定 程度上描述文檔的外觀和語義。其目的是為了能跨平台執行。

3. XML

XML 代表 Extensible Markup Language(可擴展標記語 言)。就像 HTML 一樣,是用於設計 Web 頁面的,是一種功能 強大的新型標記語言。XML 藉著不使用特定的語言,來達到與 平台無關的目的。其標籤不是預先定義的,它可允許開發者 自行定義自己的標記或格式化命令。

4. XUL

XUL 是為開發更快更簡單的 Mozilla 瀏覽器而開發的。

這是一個基於 XML 的語言,所以 XML 的所有特性都適用於 XUL。它是一個跨平台的語言,被設計出用於創建可移植的用 戶介面,使用 XUL,介面可以被快速方便地製作和修改。

5. CSS

CSS 的全名是 Cascading Style Sheets(串接樣式表)

(12)

它是由許多樣式名稱和樣式指定值所組成的字串,我們可以 利用設定好的樣式表,指定給某一種 HTML 標籤,或某一群組 HTML 標籤來使用。而被套用的 HTML 標籤,將會依據所套用的 CSS 來顯式它的外觀。CSS 可說是 JavaScript 物件模型的一 個 重 要 部 份 , 因 為 在 CSS 設 定 之 後 , 我 們 還 可 以 利 用 JavaScript 重新指定不同的值給元件,而達成動態改變的效 果。CSS 的最大好處是提供了 HTML 所不支援的屬性。

第二節 伺服器端程式開發工具

1. Apache

Apache 全名為 Apache HTTP Server,是 Apache 軟體基 金會的一個開放源碼的網頁伺服器,可以在大多數作業系統 中運行,由於其多平台和安全性被廣泛使用,是最流行的 Web 伺服器端軟體之一。它快速、可靠並且可通過簡單的 API 擴 展,將 Perl/Python 等編譯到伺服器中。

2. PHP

PHP 的全名為 Hypertext Preprocessor,它是個被廣泛 運用在網頁程式撰寫的語言,尤其是它能適用於網頁程式的開 發及能夠嵌入 HTML 文件之中,它的語法和 C、Java 及 Perl 等語法相似,且學習起來更容易上手。PHP 的程式碼是在伺服

(13)

器上執行,其目的是為了能使網站開發者可以快速地撰寫動態 網頁。

第三節 實際開發情況

我們的整個程式是由幾個部分所組成的,在使用者端,是做成一個 XPI 的套件,而在伺服端,是用 Apache 加上 php。若是將 xpi 展開來看,

裡面包含了一個安裝檔(install.rdf)--描述檔案安裝資訊、一個資訊檔 (chrome.manifest)和一個 chrome 的目錄—存放主程式。

圖 2-3-1 xpi 套件架構

(14)

install.rdf 內包含作品 id、作品出處、和作品的版本,只要安裝 了此 xpi,以後當此作品有更新檔時,firefox 都會自動去提醒你,同時,

裡面還包含了所適用的 firefox 版本,用以確認此軟體和 firefox 的版 本相不相容。除此之外,也可以在裡面寫入作者的姓名、Email 等資訊。

指明要安裝的應 用程式和適用的 firefox 版本

套件資訊:

包含套件名 稱、作者等 作品版本

圖 2-3-2 install.rdf 檔內容

Chrome.manifest 內是敘述檔案是放在哪個資料夾下,讓程式可以找 到檔案的位置,以便安裝。

而 content 資料夾下又分成了.xul 檔和.js 檔。.xul 檔是設計我們 的程式介面顯現的方式(描述程式介面),其內容是用 xul 語法和 xml 語

圖 2-3-3 Chrome.menifest 檔

(15)

法所寫成的。而 xul 會連結到後面的.js 檔(描述程式的主功能),內部詳 細的寫出互動性的 tab 介面,其內容是用 javascript 和 css 寫成。

圖 2-3-4 xul 檔

接下來列出.js 檔部分內容:

圖 2-3-5 js 檔處理滑鼠事件

1. 使用者將滑鼠鍵由按下再放開則觸動 function mouseUp 2. function mouseUp:

z 擷取滑鼠反白的字串並將之傳到 function trim 作處理,如果 非空值則處理 function inlineTrans

(16)

圖 2-3-6 js 檔取反白字串 3. Function trim:

z 取出反白字串中的中文及英文

圖 2-3-7 js 檔過濾反白字串

4. function inlineTrans:

z q2:取反白字串中的中文、英文與數字 z yq:取反白字串中第一個空白之前的字

(17)

5. function tooltip:

圖 2-3-8 js 檔介面顯示設計

z 介面顯示與設計

6. 介面功能之一舉例說明:單字功能

圖 2-3-9 js 檔單字處理介面

z 使 用 者 點 擊 圖 片 時 觸 動 function wordtest , 並 用 new XMLHttpRequest()來讀取奇摩字典網頁,當 readyState=4 表示 返回結果已經全部取到,並顯示查詢結果,否則的話顯示讀取中 圖示。而取得的結果會經過 function filteryahoo 來去除奇摩 字典網頁中不必要的資訊(如廣告),以方便使用者閱讀。

(18)

而在 Server 端有存放有套件相關功能所對應的 PHP 檔,它主要 用來修改原有網頁的格式,使之更為簡單、明瞭,才呈現給使用者瀏 覽,所以說我們所呈現的畫面都是經由我們所寫的 PHP 程式語言加以 處理,以最清楚及重點提示的方式顯示給使用者,以下為圖示說明:

使用者點選功能 PHP 簡化處理 顯示結果 顯示於.xpi 介面上 透過.xpi 傳到 Server

而每個功能都對應到兩個 PHP 檔,例如:Google 新聞的功能就 會對應到,qnews.php 及 news.php 檔來做處理,以下圖為檔案的格 式及內容如下:

news.php

qnews.php 圖 2-3-10 功能處理流程

圖 2-3-11 news.php 程式碼內容 圖 2-3-12 qnews.php 程式碼內容

(19)

而在介面 search-go.xpi 檔下的 js 檔中,所連結到 server 端所 對應的 PHP 檔寫法如下:

Search-go.xpi 中的.js 檔

圖 2-3-13 js 檔與 php 檔連結方式

如此一來我們就能將使用者欲查詢的字串,傳送到 Server,再 經過 PHP 檔作處理之後,將處理過後的簡化頁面,傳回給使用者。

第四節 執行環境需求

” Microsoft Windows XP 以上版本

” Firefox 2.0 以上版本

” 支援網路連線的電腦

” 支援播放 Adobe Flash Player 格式的影片

(20)

第三章 規則及系統使用說明

第一節 系統架構圖

字 典

| GO

YouTuBe 鈴 聲 歌 詞 圖 片 eBay Google 翻譯

新 知

休 聞

單 字 片 語

中翻英 中翻英後再翻中

英翻中 英翻中後再翻英

Yahoo 知識+

Google 新聞

維基百科

圖 3-1-1 系統架構圖

(21)

第二節 規則說明

*輸入框或反白的字串在此以「搜尋字串」稱之

項目 規則

單字 會查詢搜尋字串至第一個空白的單字。

字典

片語

搜尋字串需以「英文動詞」開頭,查詢字串 可能含有的英文動詞片語。

中翻英 將「中文」的搜尋字串翻譯成英文。

英翻中 將「英文」的搜尋字串翻譯成中文。

中英中

將「中文」的搜尋字串翻譯成英文,再轉回 中文。(修改中文的文法)

G o o g l e 翻譯

英中英

將「英文」的搜尋字串翻譯成中文,再轉回 英文。(修改英文的文法)

維基百科 將搜尋字串送至維基百科查詢。

Yahoo 知識 將搜尋字串送至 Yahoo 知識查詢。

新知

Google 新聞 將搜尋字串送至 Google 新聞查詢。

(22)

YouTuBe

將搜尋字串送至 YouTuBe,查詢第一筆影片查 詢結果。

圖片 將搜尋字串送至 Google 圖片,查詢第一張圖片。

鈴聲

將搜尋字串送至線上鈴聲試聽網站「鈴~鈴圖 鈴分享」,查出可試聽的鈴聲。

歌詞

將搜尋字串送至歌詞帝國,查詢前五筆相關 的歌詞。

休閒

eBay 將搜尋字串送至 eBay,查詢相關的拍賣商品。

項目 規則

(23)

第三節 系統使用說明 3-1 安裝方式

圖 3-3-1 首先先下載好搜-GO 套件(.xpi 檔)

圖 3-3-2 拖曳.xpi 檔到紅色方框內

(24)

圖 3-3-3 出現軟體安裝畫面,等待讀秒結束

圖 3-3-4 安裝完成,重開 Firefox。

(25)

圖 3-3-5 按功能表列上的「工具」,再選取附加元件

圖 3-3-6 可以看到搜-Go 已安裝完成。

圖 3-3-1-4 安裝方式

(26)

3-2 輸入方式

圖 3-3-7 反白要查尋的文字,軟體會自動送出查尋。

圖 3-3-8 在輸入框中輸入要查詢的文字,點選「搜 Go」後,會自動送出查詢。

(27)

3-3 顯示查詢結果

圖 3-3-9 自動送出查詢,會顯示所查的第一個單字的中英/英中單字字典

圖 3-3-10 點選「字典」

(28)

圖 3-3-11 再點選「單字」,會顯示所查的第一個單字的中英/英中單字字典

圖 3-3-12 再點選「片語」,會顯示其中有可能包含的動詞片語

(29)

圖 3-3-13 點選「GOOGLE 翻譯」

圖 3-3-14 再點選「CE」,會將中文段落翻譯成英文 *需選擇「中文」段落

(30)

圖 3-3-15 再點選「EC」,會將英文段落翻譯成中文 *需選擇「英文」段落

圖 3-3-16 再點選「CEC」,會將中文文章的文法做修改 *需選擇「中文」段落

(31)

圖 3-3-17 再點選「ECE」,會將英文文章的文法做修改

*需選擇「英文」段落

圖 3-3-18 點選「新知」

(32)

圖 3-3-19 再點選「Yahoo 知識」,,會將搜尋字串送至 Yahoo 知識查尋

圖 3-3-20 再點選「Google 新聞」,會將搜尋字串送至 Google 新聞查尋

(33)

圖 3-3-21 再點選「維基百科」,會將搜尋字串送至維基百科查尋

圖 3-3-22 點選「休閒」

(34)

圖 3-3-23 再點選「YouTube」,會顯示 YouTube 查尋到的第一筆影片

圖 3-3-24 .再點選「圖片」,會顯示 Google 圖片查尋到的第一張 JPG 圖片

(35)

圖 3-3-25 再點選「鈴聲」,會顯示 Yahoo 鈴聲查尋到的可試聽的鈴聲

圖 3-3-26 再點選「歌詞」,會顯示歌詞帝國查尋到的前五歌詞

(36)

圖 3-3-27 再點選「eBay」,會顯示 eBay 查尋到的拍賣物品結果

3-4 複製反白文字

圖 3-3-28 反白後,只需點選「複製」按扭即可

(37)

3-5 關閉視窗

圖 3-3-29 點選右上角的「close」即可

3-6 停用「搜 Go」

圖 3-3-30 點選狀態列上「close the search-go(N)」的按扭即可

(38)

第四章 經驗談

專題在全組花了許多時間和心血下,總算完工了。一剛開始,我 們真的很害怕做不出來,畢竟,我們大部分所學的,都只是學校教的,

從來沒有真正去完成過一個實際的成品,根本不知道該從何下手,後 來經過慢慢的摸索和老師的指導,使我們大致上知道要前進的方針,

再依照網路和書本上的知識,將之做出來。

起先,專題難在構想,如何把構想實現出來;這個構想是否可行;

都要我們需要去注意的,接著就是要依照網路上的資源來實現目標。在 此階段,我發覺:如何在現在這個資訊發達的時代,找到想要的資源是 很困難的。社會上的資源有很多,包括網路、書籍、朋友、師長、論文 等等,可是往往找出來的東西,都不是我們所需要的,要如何找到關鍵 字,有什麼網站又是提供這方面的專家,這都是很重要的。如果能快速 的找到想要的,那我相信,這一定能成為未來在社會上的資本。

剛開始老師給了我們一個大主題-「網頁程式」,並給我們一 些想法,而我們再根據這個主題、想法加以延伸,而形成了初步 的構想,就如前述,專題難在構想,如何把構想實現出來,一方 面也擔心是否真的可以實作出成品,這時就如同賭注般,有可能 我們能順利的完成,但也可能最後發現構想不可行,我們就抱著 這種忐忑不安的心情進行著,但值得高興的是,經由不斷的找資

(39)

料、不斷的嘗試,而漸漸有了雛形。

在做專題的過程中,我們也體會到了效能的重要,要如何在一定 的時間之內,將訊息反饋給使用者,如果時間太久,使用者可能會認 為軟體當機或等等情況,我們可能需要一步一步的找出到底是哪個環 節太花時間,再想有沒有其他的替代方案,或者是有沒有什麼方法來 解決,想辦法將時間縮到最短。

另外,團隊精神也是很重要的,一個專題,是需要一些人來共同 完成的,如果其中有某個部分沒弄好,後面所要進行的也會沒辦法執 行,如果團隊中的每個人的工作都如期完成,後面也就會更順利的進 行下去。

做完專題之後,我們發現,經過一次的實際操作,我們對如何去 做一個 Firefox 的軟體套件有個比較完整的了解,也能對一些沒遇過 的程式語言或開發工具去更深入的使用;學校所學的,只不過是這方 面的一小部分,其他沒學過的,需要我們自行去摸索,在出社會之後,

這些經歷會讓我們有自行去學習的能力;而在團隊精神方面,我們也 較知道該如何去相互配合,我覺得這是一個很好的經驗。

(40)

第五章 討論

斷詞程式

在原先的設計其實有加入詞性標注程式去判斷使用者選取的字 的詞性,經由片語常見的詞性組合來提供準確的片語搜尋結果,但是 由於詞性標注程式本身執行的速度及接收到詞性標注結果後的處 理,所花費的時間依據選取的字的長短而有所影響,平均至少要等待 十秒鐘左右,於是後來為了追求效能,改用較為簡單的排列組合,將 可能的片語組合送到奇摩字典查詢,如果查得到的話就顯示在程式的 頁面上。雖然速度變快了,但是顯示的結果並不完全都是片語,可能 只是一個片語的片段。

Google 地圖

原本的構想是讓『搜-Go』也可以直接連到 Google 的地圖,但是 因為『搜-Go』的介面是由 JavaScript 所撰寫的,實際連結到地圖出 現的地圖部分只能顯示灰色的方塊,因此仍需研究 JavaScript 是否 可以支援用 AJAX 程式語言寫的 Google 地圖,此外,由於 Google 地 圖不支援直接利用網址列傳遞參數,必須經由網頁中的輸入框接受參 數,所以仍需再研究其他的解決辦法。

(41)

Wiki 維基百科

由於維基似乎對於遠方連線抓捉取頁面有做特殊的管理機制,導 致有些常用的查詢,如:Knowledge、天空都無法正常顯示結果,只 能藉由搜-Go 介面中提供的連結連到 wiki 去查詢,因此希望將來可 以改善這個問題,在搜-Go 內也能正常顯示常用的字詞查詢結果,讓 使用者不用再點選連結到 wiki 的介面查詢。

(42)

第六章 結論

透過「搜-GO」,可以達成以下的需求:

1. 瀏覽英文網頁時可即時查詢單字、段落的中文意思。

2. 直覺的用滑鼠就可以查詢想知道的資訊。

3. 整合多個常用的知識性網頁,節省開啟多個網頁查詢的時間。

4. 針對看不懂的字,提供維基和 Yahoo!奇摩知識+即時查詢。

5. 此外還有相關的新聞、YouTuBe、圖片、鈴聲、歌詞、ebay 查詢。

一般在瀏覽英文網頁時,難免都要查一些不懂的單字,雖然網路 上關於英文字典的資源相當的多,但是每查一個單字就必需先複製,

再貼到字典查詢的頁面是相當浪費時間的。如果能夠直接選取自己不 懂的單字,即時知道單字的中文意思相信能夠節省不少時間。

除了查詢單字以外,本系統還提供片語、整段翻譯的功能,讓使 用者瀏覽英文網頁時能夠快速掌握自己所需要的資訊。還提供多種不 同資訊查詢的介面,讓使用者不再需要開很多視窗查詢自己所需要的 資訊,達到事半功倍的效果!

(43)

第七章 未來展望

介面方面

在剛開始著手查詢相關的資料的時候,原先的構想是做一般瀏覽 器(包含 IE)的外掛程式,後來卻因為這部分的資訊太少,所以轉 而尋找 Firefox 的套件相關教學及可以參考的套件的原始碼。因此本 系統目前只能在 Firefox 的平台下執行,希望將來可以做到在瀏覽器 外也可以查詢,例如可以在 Word 的環境下執行。因為時間的關係,

我們沒有做讓使用可以自行更改背景顏色和樣式的功能,而是採白色 的介面,希望將來可以加上此功能。

功能方面

由於時間有限,就如前述,我們原本想要在『搜-GO』套件中,

加入 Google 地圖的功能,但未能即時的做出來,留有遺憾,希望未 來還可以再增加類似 Google 地圖及跟電子郵件連結的功能,將查詢 到的資料可以透過 E-mail 分享與傳送。

其實每個人對搜尋網站的需求並不相同,如果是醫生,可能較常 搜尋醫院、疾病等資料;如果是研究生,可能較常搜尋論文等研究資 料,所以希望以後可以讓使用者新增、自訂網頁連結,讓此套件更能 符合個人化的需求。

(44)

執行效率方面

由於所有的查詢都是透過網路,所以網路的速度是關鍵。目前速 度平均是 1~3 秒,希望能再加以改善為平均一秒,減少使用者使用時 的等待時間。

執行效能方面

目前我們的『搜-GO』,並沒有辦法達成100%的成功搜尋機 率,希望以後能達成100%的成功搜尋。

快捷功能方面

由於時間的關係,我們沒有在『搜-GO』套件中做比較多的快捷 鍵,讓使用者可以利用快捷鍵更便利的去執行,希望未來可以加入較 多的快捷鍵,讓使用者使用起來更加的便利。

(45)

參考資料

書籍

(一) 書名:JavaScript 網頁程式設計

原著:William B. Sanders,譯者:夏雲浩

初版,台北市,碁峰資訊,2002 年

(二) 書名:JavaScript 實用範例辭典

蔡哲明編著

初版,臺北市,文魁資訊出版,2006 年

(三) 書名:JavaScript 範例程式集

李樂群、凱際資訊工作室編著

初版,臺北市,文魁資訊出版,2004 年

(四) 書名:PHP 5 學習手冊

原著:David Sklar,譯者:莊惠淳

初版,臺北市,歐萊禮,2005 年

(46)

(五) 書名:PHP5:500 個應用範例技巧大全集

原著:高島優作,譯者:柯志杰、柳聖綸

初版,台北縣汐止市,博碩文化,2005 年

(六) 書名:碼上就用 PHP 5

原著:Elliott White III, Jonathan Eisenhamer,譯者:

白季川

初版,臺北市,上奇科技,2007 年

(七) 書名:JavaScript 學習手冊

原著:鮑爾斯 Powers Shelley 譯者:蘇秉豐/陳建勳

初版:歐萊禮 ,2007 年

(八) 書名:JavaScript 與 Ajax 網頁製作徹底研究

原著:陳會安

初版:旗標,2006 年

(47)

(九) 書名:PHP 程式專家必備手冊

原著:休斯 Hughes Sterling /茲米夫斯基 Zmievski Andrei 譯者:黃俊卿

(十) 書名:JavaScript 語法應用範例辭典

原著:林千聖

初版:文魁資訊,2003 年

(十一) 書名:JavaScript 動態網頁設計大全

原著:傅雯彬、蔡承書

初版:旗標,2001 年

(十二) 書名:JavaScript & XHTML 網頁設計

原著:蕭世文

初版: 文魁資訊,2001 年

(48)

網路社群

(一) Firefox 討論區

http://forum.moztw.org/

(二) PHP 線上手冊

http://www.php.net/

(三) PHP 字串處理函式庫

http://vawidea.org/php%20bible/group.php-47.htm

(四) PTT 的 PHP 版

telnet://ptt.cc

(五) Firefox 共筆系統

http://wiki.moztw.org/index.php/%E9%A6%96%E9%A0%81

(六) Quick TransLation (qtl)套件 http://qtl.co.il/

(七) 正規表示式原理及應用

http://irw.ncut.edu.tw/peterju/webslide/re/

(49)

(八) HTML CSS JavaScript 語法教學 - 範例集

http://alps888.myweb.hinet.net/

(九) 套件開發相關資源

http://wiki.moztw.org/index.php/%E5%A5%97%E4%BB%B6

%E9%96%8B%E7%99%BC%E7%9B%B8%E9%97%9C%E8%B3%87%E6%B A%90#CSS

(十) HTML DOM 參考手冊

http://www.w3school.com.cn/htmldom/htmldom_reference.asp

(十一) 藍色小鋪

http://www.blueshop.com.tw/

(50)

誌謝

感謝楊傳凱老師的指導

感謝同學協助

感謝學長姊出借實務專題研究報告

感謝熱心網友的網頁教學

感謝所有同學

感謝所有老師們的指導

本系統尚期許大家不吝指教

(51)

杜維芬 林珮妤 盧琬潔 許秀霞 謹誌於 台灣科技大學資訊管理系 中華民國九十七年十月

數據

圖 2-3-1  xpi 套件架構
圖 2-3-3  Chrome.menifest 檔
圖 2-3-6  js 檔取反白字串  3.  Function trim:  z  取出反白字串中的中文及英文  圖 2-3-7  js 檔過濾反白字串 4.  function inlineTrans:  z  q2:取反白字串中的中文、英文與數字  z  yq:取反白字串中第一個空白之前的字
圖 2-3-8  js 檔介面顯示設計
+7

參考文獻

相關文件

2.熟 悉 Microsoft Windows Server 作 業 系 統 、 Microsoft SQL Server 資料庫伺服器及網 頁伺服器等環境。. 3.具撰寫 JAVA

(二)使用 PHP 語言、MySQL 資料庫與 Apache 伺服軟體開發互

有關 PHP 的敘述何者有誤?①可在 Apache、MS IIS 等 Web 伺服 器執行的 Script②只能在 Linux 或 Unix 作業系統上執行,無法於 Windows 或 Mac

SPCE061A 的開發是通過線上調試器 PROBE 實現的。它既

最後特別提出說明,本研究用戶端作業系統為 Win 2000 Professional,伺服 器端作業系統為 Windows 2000 Server 並啟動 Active Directory

之意,此指依照命令動作的意義。所謂伺服 系統,就是依照指示命令動作所構成的控制

™ 不過, 如果 DHCP 用戶端不接受 DHCP 伺服器 所提供的參數, 就會廣播一個 DHCP Decline (拒絕) 封包, 告知伺服器不接受所建議的 IP位 址 (或租用期限…等)。然後回到第一階段, 再度

  SOA 記錄裏,記載著關於該 域名權責區域的一些主 要網域名稱伺服器 ( primary DNS server) 和其它 相關的次要名稱伺服器 ( secondary DNS server)