籤資訊動態組成 Javascript 程式碼，目的是要動態組合出 Javascript 變色程式和 Javascript 還原程式，接著把組合出的 Javascript 程式加入最初得到的 Html 內容 的script 標籤中得到新的 Html 內容，最後載入這新的 Html 內容，讓使用者看到 原始配色網頁，如此就完成一系列後端處理作業，這幾個流程在某些網頁中會花
當使用者瀏覽網頁後，當手指滑動後，應用程式會判斷手指滑動動作是否有 進行，若沒有的話，網頁配色維持原始配色網頁，若有的話，網頁畫面將會開始 滑動，應用程式會進行下面兩個步驟，第一個步驟會進行手指滑動速度偵測，第 二個步驟回進行自動搜索標籤，自動搜索標籤流程之後會在本章節繼續介紹，在 手指滑動速度偵測部分，會偵測手指滑動速度是否到達設定標準，若否的話，網 頁配色沒有變動維持原始配色網頁，若是的話，應用程式會呼叫網頁前端的 Javascript 變色程式進行網頁內容變色處理，Javascript 變色程式執行完後網頁配 色將從原始配色網頁變為變色網頁，使用者會看到變色網頁直到畫面停止滑動，
應用程式會偵測滑動畫面是否停止，若否的話，網頁配色沒有變動維持變色網頁，
若是的話，應用程式會呼叫網頁前端的Javascript 還原程式進行網頁內容還原處 理，Javascript 還原程式執行完後網頁配色將從變色網頁變為原始配色網頁。
第二節 讀取網頁內容
讀取網頁內容目的於之後加入Javascript 步驟進行，我們需要得到完整的 Html 內容，Android 內建 Webview 函式沒有支援讀取網頁得到完整的 Html 內容，
所以我們使用JSoup 開放軟體達成目的，JSoup 可以從網址資訊得到讀取後的 Html 內容，可以給 JSoup 設定裝置資訊得到在手機上呈現的網頁，從得到 Html 內容包含了所有標籤資訊，但是並不包含動態網頁內容，例如：Facebook 動態 內容、Youtube 影片清單。
第三節 標籤資料庫
我們選擇使用SQLite Android 內建資料庫來當作標籤資料儲存，它的優點是 儲存空間輕量、本地連線和開發簡單，許多雲端資料庫需要連線資源和額外的硬
class=”main”>的話，標籤名稱會命名為 div[class=’main’]，標籤型態定義有兩種，
一種是背景，另一種是文字，它代表此標籤在網頁前端顯示的型態，顏色為此標 籤在網頁前端中將會改變的顏色，它可以填入各種類型的顏色編碼，但在本文中 我們只會定義使用兩種顏色，分別是背景色和省電色，標籤類型為我們自定義的 類型，方便讀取後分辨其標籤為何種標籤型態和顏色，我們定義三種標籤類型，
分別為背景、背景色文字、省電色文字，我們認定背景和背景色文字為不受注目 內容，省電色文字和沒被儲存在資料庫的標籤資訊(如圖片)為受注目內容。
圖9 標籤資料庫關聯圖
第四節 動態 Javascript 組成
從標籤資料庫取得的標籤資訊，我們可以預期其數量和標籤類型是動態多變 的，我們要根據其標籤類型和標籤名稱動態組成Javascript 變色程式和 Javascript 還原程式，如下圖10，兩種程式都會有三種類型的組合，在 Javascript 變色程式 中我們會判斷標籤類型，分別加入該標籤類型中標籤型態的顏色屬性，在 Javascript 還原程式中們會判斷標籤類型，分別移除之前所加入該標籤類型中標 籤型態的顏色屬性。
圖10 動態 Javascript 程式碼
動態Javascript 變色和還原程式完成後，我們會用 JSoup 開放軟體中的函式 把程式加入之前得到的Html 內容，我們回把程式內容加入 Html 中 script 標籤中，
加入的內容除了之前動態組成的Javascript 變色和還原程式外，還包含了一段動 態網頁內容回傳程式，主要目的要能夠回傳自動搜索標籤所需的Html 內容。
第五節 網頁變色時機
當使用者手指滑動畫面時，會有兩個狀況要進行判斷，一個是手指滑動動作，
另一個是畫面滑動狀況，兩個狀況在Android 中有分別的函式能夠監控，當使用 者滑動螢幕時，應用程式會根據Android 函式中的 onGestureListener 中的 onFing 偵測手指滑動動作，onFing 函式中包含了 X 軸和 Y 軸的速度資訊，我們定義若 Y 軸速度大於 500 像素/秒的話，就會啟動 Javascript 變色程式，使用者手指滑動 螢幕當下畫面滑動同步進行中，而應用程式需要判斷畫面停止滑動的時機，根據 Android 函式中的 setScrollViewListener 中的 onScrollChanged 偵測畫面滑動位置，
和Y 座標資訊，並比較前一毫秒和當下的 X 和 Y 座標，若一樣的話，則會啟動 Javascript 還原程式。
第六節 自動搜索標籤流程圖
JSoup 所取得的 Html 網頁內容並不包含動態網頁的內容，所以無法拿來做 自動搜索標籤的Html 網頁內容來源，但是在 Javascript 的程式語言中，支援取得 完整的Html 網頁內容，所以我們設計一個方案，使用者可以自行選擇是否開啟 自動搜索標籤方法，若使用者選擇開啟，如圖11 所示，會在載入過後的原始配 色網頁偵測手指滑動動作，若是的話，則會從前端回傳Html 網頁內容到後端處 理，在經過處理後取得標籤內容，帶入自動搜索標籤演算法，得到分類過後的標 籤內容後，把它們加到標籤資料庫中。
圖11 自動搜索標籤流程圖
第七節 搜索標籤方法
主要有圖片和短句子兩種類型，這兩種類型可以從Html 內容中判斷，不需要知 道呈現網頁內容，所以我們設計一套演算法來搜索標籤，如下圖12，搜索有 Html 中所有的標籤，先判斷標籤是否有重複判斷過，若是的話，不過任何動作，若否 的話，則先加入背景類型，並再進行是否有文字的判斷，若有的話，則判斷文字 長度，若文字長度大於155 字的話，則加入背景色文字類型，若文字長度小於 155 字的話，則加入省電色文字類型。
圖12 自動搜索標籤演算法