以電子書發展身心障礙者職涯分析之研究

全文

(1)國立台灣師範大學資訊工程研究所碩士論文. 指導教授：. 葉耀明. 博士. 以電子書發展身心障礙者職涯分析之研究 CDES expansion research by using E-Book. 研究生：吳明憲中華民國. 101. 年. 撰 6. 月.

(2)

(3) 摘要近年來電子書快速的發展，群眾看書吸收資訊的方式也有所改變。電子書擁有便於攜帶、具有多媒體格式、互動等等優點。各家廠商紛紛推出不同的電子書閱讀器以及電子書格式，新穎的電子書格式具有多樣化的多媒體呈現與使用者互動能力，可以為使用者帶來良好的電子書閱讀體驗。在蘋果公司所推出的 iBooks 電子書當中可以放入 HTML5 所架構出來的小工具，用意是可以讓電子書的提供者在電子書當中可以放入這些與書相關的小工具讓讀者使用。職涯發展探索系統提供了一個線上平台，讓身心障礙者根據自已的現況做問卷，並且輔導社工可以對身心障礙者做出適當的輔導策略。本研究利用職涯發展探索系統，將此系統架構在 iBooks 之上，利用 widget 所可以達到的功能，擴展此系統的能力。將職涯發展探索系統不只侷限在網路之上，也可以利用電子書便於攜帶的特性，讓此系統也可以隨處帶著走並且使用，並且我們要更多探討，HTML5 以及 Javascript 所結合而成的 widget，再加上 iPad 此硬體本身具有的能力，能為這個系統帶來什麼更多的改變與擴展。. 關鍵字: HTML5, SVG, iBooks, widget, ebook.

(4) Abstract E-‐Book spreads wide in recent years, the way of absorbing information of people has been changed. The advantages of E-‐Book are easy-‐carried, including multimedia format and including interactive functions. However, the manufacturers release several E-‐Book Readers and E-‐Book formats one after another. The novel E-‐Book formats have the abilities to implement multimedia displaying and user interactive abilities that bring well experiences of reading E-‐Book for users. The widgets made by HTML5 which be put in iBooks E-‐Book and be published by Apple Inc. are managed to provide some tools for readers to use. CDES, Career Developing and Exploring System, is a platform for disabilities do questionnaires according to themselves’ situations. Then the counseling social workers provide appropriate strategies to the disabilities. This thesis implements the CDES on the iBooks platform. By using the abilities of widget, expands the abilities of CDES. Making CDES work on not only Internet but no network environment. Due to the characteristic of easy-‐carried of E-‐Book, CDES can be carried everywhere and be used. And we explore more changings and expansions by combining HTML, Javascript, E-‐Book and iPad. . Keywords: HTML5, SVG, iBooks, widget, ebook.

(5) 誌謝本篇論文得以完成，首先歸功於葉耀明教授的細心帶領。葉老師在此篇論文撰寫的過程當中給予許多的協助與建議，並在研究所就讀的過程當中給予眾多的支持，對於未來網路應用的發展也有獨到的眼光，並在學生有疑難的時候不吝指教，感謝葉老師的教導。再來感謝研究所同學的支持與協助，永倫、慶瑞、瀧濱、芝華、惠迪、孝倫、冠緯，在研究所就讀的過程當中，有你們當我的同學實在是很幸福。我有許多不明白與不成熟的地方有賴你們彌補，感謝你們。感謝我的女朋友，子新一路的陪伴，謝謝有你在我事情煩雜，身心靈軟弱的時候成為我的支柱，能夠做回應式的傾聽，讓我不會有壓力，並在許多時候給予我鼓勵，有妳真好。感謝上帝，使我這個不成材的學生也能夠將論文寫完順利畢業，因為祢的恩典使我在不知道怎麼辦的時候，還能夠有出路，因為祢的救恩使我無罪，使我的心歡喜，我的肉身也可以安然居住。感謝上帝。吳明憲謹誌國立台灣師範大學資訊工程研究所民國 101 年 6 月 .

(6) 目錄摘要 ............................................................................................................................................................ 3 Abstract ..................................................................................................................................................... 4 誌謝 ............................................................................................................................................................ 5 目錄 ............................................................................................................................................................ 6 圖目錄 ........................................................................................................................................................ 8 第一章緒論 ........................................................................................................................................... 9 1.1 研究背景與動機 ................................................................................................................. 9 1.2 研究目的 ............................................................................................................................. 10 第二章文獻探討 ................................................................................................................................ 11 2.1 HTML5 ..................................................................................................................................... 11 2.1.1 HTML5 的各種新興結構標籤 ......................................................................... 11 2.1.2 互動式標籤 .......................................................................................................... 13 2.1.3 新的輸入類型標籤及表單驗證 ................................................................... 13 2.1.4 瀏覽器對 HTML5 的支援差異 ........................................................................ 14 2.2 SVG ......................................................................................................................................... 15 2.3 iBooks .................................................................................................................................. 16 2.4 Tumult Hype ...................................................................................................................... 16 第三章職涯發展探索系統 ............................................................................................................ 18 3.1 職涯發展系統的目標 ..................................................................................................... 18 3.2 職涯發展系統流程 .......................................................................................................... 19 3.3 問卷題型 ............................................................................................................................. 20 3.3.1 文字題型填答說明 ........................................................................................... 20 3.3.2 文字題型題目 ..................................................................................................... 21 3.4 結果圖呈現 ........................................................................................................................ 23 第四章系統開發與設計 ................................................................................................................. 25 4.1 iBooks 架構 ....................................................................................................................... 25 4.1.1 iBooks 的好處 .................................................................................................... 25 4.1.2 iBooks 端架構流程圖 ..................................................................................... 27 4.2 Widget 的設計 .................................................................................................................. 32 4.2.1 inputUserData.widget ................................................................................. 34 4.2.2 outputUserData.widget ............................................................................... 36 . 6 .

(7) 4.2.3 question.widget ............................................................................................. 37 4.2.4 result_diagram.widget ............................................................................... 42 4.3 伺服器端網站架構 .......................................................................................................... 46 4.4 整體連結架構 ................................................................................................................... 49 4.4.1 輔導個案專用電子書的改良 ........................................................................ 49 4.4.2 輔導社工專用電子書的改良 ........................................................................ 54 第五章結論與未來展望 ................................................................................................................. 55 5.1 結論 ....................................................................................................................................... 55 5.2 未來展望 ............................................................................................................................. 55 參考文獻 ................................................................................................................................................. 57 . . 7 .

(8) 圖目錄圖 2.1 <nav>結構標籤........................................ 11 圖 3.1 職涯發展系統流程圖................................... 19 圖 3.2 職涯分析系統結果圖................................... 23 圖 4.1 iBooks 端架構流程圖 .................................. 27 圖 4.2 widget 與 localStorage 關係圖 ......................... 29 圖 4.3 輔導社工專用 iBooks 電子書............................ 31 圖 4.4 結果圖部分區塊....................................... 32 圖 4.5 兩本書架構........................................... 32 圖 4.6 個人資料輸入介面圖................................... 34 圖 4.7 個人資料輸出介面圖................................... 36 圖 4.8 題目 widget 說明頁面.................................. 38 圖 4.9 題目 widget 35 題題目頁面............................. 39 圖 4.10 題目 widget 完成頁面................................. 39 圖 4.11 系統結果圖.......................................... 42 圖 4.12 伺服器端網站架構圖.................................. 46 圖 4.13 線上問卷系統........................................ 47 圖 4.14 線上問卷系統完成頁面................................ 48 圖 4.15 改良版輔導個案專用電子書............................ 50 圖 4.16 輔導社工專用電子書改良架構.......................... 54 . . 8 .

(9) 第一章緒論 1.1 研究背景與動機電子書的推出已經行之有年，使我們可以透過電子書閱讀裝置來閱讀電子書籍，閱讀電子書讓我們降低了紙張和墨水的消耗，並且一個電子書的閱讀裝置通常可以儲存多本電子書籍，也省下了人力搬運的消耗。現在市面上電子書有許多的格式，例如：TXT、DOC、EPUB、CHM、HTML 等格式，各種電子書閱讀器支援的格式也不相同，西元 2010 年，Apple Inc.在自家推出的產品 iPad 上面推出了 ibooks 電子書專用的閱讀軟體：iBooks，iBooks 軟體可以閱讀 EPUB 格式、PDF 格式以及 ibooks 格式的電子書。並且 iPad 內建的 VoiceOver 軟體可以朗讀電子書中所選定的文字。在 2012 年 2 月 19 日，Apple Inc.進一步推出了電子書的編輯軟體：iBooks Author，此軟體的推出，讓一般民眾也能夠輕易的編輯製作電子書，並且能夠將寫出來的電子書放到 iBookstore 上面販賣，這代表了編輯出版這樣工作已經愈來愈平民化，一般的民眾就可以做到電子書籍的編輯與出版。讓我們在意的是，ibooks 格式的電子書，除了文字圖片以外，可以嵌入影片音樂，還有一個很重要的特點，它可以嵌入 widget。我們可以使用 HTML 與 Javascript 來撰寫 widget 軟體，這些被寫出來的小工具，可以放進 ibooks 格式的電子書當中，當我們閱讀書籍時，可以把這些書中附加的小工具也點出來使用。Widget 的彈性很大，只要技術允許，我們可以要它做所有前端網頁技術做得到的事情，在 iBooks Author 當中內建了一些 widget，有播放 Keynote 製作出來的投影片的 widget、也有能夠看很多圖片的圖庫 widget、 . 9 .

(10) 能夠播放 3D 模型的 widget，還有能夠做測驗題的 widget。以上這些是內建的 widget 就已經這麼多樣，我們想，這些 widget 還能夠做到什麼事情，這些 widget 能夠對傳統的電子書帶來什麼改變？. 1.2 研究目的我們選了一個系統素材，職涯發展系統，我們想要將 iBooks widget 的技術應用在建構職涯發展系統上，看看我們能夠對這個系統帶來什麼創新的改變與改進。並且在這過程當中，挖掘電子書能夠有什麼創新的應用，能夠對讀者閱讀電子書的現有模式帶來什麼樣的改變。. . 10 .

(11) 第二章文獻探討 2.1 HTML5 於 2004 年，WHATWG 提出了 HTML5 的草案，Web Application 1.0，然後又在 2007 年獲得 W3C 所採納，從此，HTML5 開始展現它的威力。愈來愈多的瀏覽器支援 HTML5，它已經開始成為一個全新的標準。HTML5 透過將工作轉移的方式，有效的減輕了網頁程式設計師在製作網頁時的負擔，。可以想見，在未來會有愈來愈多網頁程式設計師選擇使用 HTML5 來製作網頁。. 2.1.1 HTML5 的各種新興結構標籤在 HTML5 當中定義了許多的新標籤，這些標籤的出現，是為了要更清楚的定義許多標籤在網頁中的角色，比如說<nav>標籤，網頁中常常會有一行的 navigation 行，比如說在圖 2.1 中，某個個人網誌的右邊欄，裡面包含了許多的連結，這些連結可以帶你到各個頁面去，在圖 2.1 的範例當中，這些連結可以帶你到各篇文章去。. 圖 2.1 <nav>結構標籤 . 11 .

(12) 在以往，要區分這樣的區塊可能必須是使用<div>標籤，然後以<div id=”nav”></div>的方式來定義這樣的 navigation 區塊，因為<div>標籤是一個意義不明的標籤，它需要被定義角色，當然<div>的功用就在這裡，但在 HTML5 當中，就把這些常用的標籤角色，把它們確實的區分獨立出來，形成新的標籤，這不只是讓網頁程式設計師更能一目了然的知道這些區塊的角色和功用，也實在地提供了瀏覽器和網路爬蟲機器人一個公訂的標準，讓程式了解，我現在讀取到的這個標籤大概會是有什麼樣的功用，因為在網頁中同樣都是 navigation 的區塊，也許有的設計師不會去定義它，有的設計師可能會定義它是<div id=”nav”>，有人可能會定義它是<div id=”navigation”>，但這些不同的定義方式都代表著同一個類型的區塊，就是 navigation 區塊，既然如此，HTML5 就把它定義得清清楚楚的，瀏覽器或是爬蟲機器人就能夠更了解那些區塊會是有什麼屬性的，以便能做出相應的動作。類似的新定義標籤還有： 1.. <header>. 2.. <footer>. 3.. <article>. 4.. <section>. 5.. <aside>. 這些都屬於結構型的新標籤，這都是為了標籤的語意能夠更好的被發揮及使用。. . 12 .

(13) 2.1.2 互動式標籤在 HTML5 當中也新增了許多好用的互動式標籤，比如說重要的影音處理。在 HTML5 中增加了<video>以及<audio>標籤，這是一個很重要的革新，這兩個標籤的出現，代表了程式設計師負擔的轉移。以往程式設計師必須要費神尋找可用的 video 或是 audio 的網頁播放工具來嵌入 HTML 程式碼當中，這時會使用到<embed> 標籤，然後在標籤中描述此段影片許多的屬性。但如今，製作 video 撥放器以及 audio 撥放器的工作都交給瀏覽器來做，瀏覽器負責確保此類工具的功能完善，並且 HTML5 提供了一套可以控制這些工具的 API，讓程式設計師可以不用額外擔心工具的選擇與使用，只要在<video>及 <audio>標籤當中放入適當的影片路徑，還有需要的屬性，比如說 poster 屬性，可以讓影片顯示某一個影格的影像；loop 屬性，可以讓影片循環撥放；preload 屬性，可以建議瀏覽器在載入頁面的時候預先載入影片，不過當然，這些都取決於瀏覽器是怎麼來實作這些功能的。. . 2.1.3 新的輸入類型標籤及表單驗證輸入類型標籤也就是<input>標籤，在 HTML5 當中定義了許多新的 input 類型：. . 1.. email. 2.. url. 3.. date 13 .

(14) 4.. time. 5.. month. 6.. number. 7.. range. 以往在輸入日期的 input 當中，網頁程式設計師必須費神去製作一個小日曆 UI，或是尋找小日曆的 javascript 套件，這是為了讓使用者可以方便的選擇日期，不過現在這類的標籤已經被定義了，所以這個部分的負擔就交給了瀏覽器，目前有實作出小日曆的瀏覽器有 Opera，其他的瀏覽器也在陸續跟進中，但其實這也牽扯了另外一個問題，也就是瀏覽器對 HTML5 標籤支援程度不同的問題，在下一個小節會來談談這個部分。這些 input 屬性的出現，也讓網頁的表單設計更加有彈性，並且在 HTML5 規範當中，加入了表單驗證的功能，應該說，是定義了表單驗證的功能，它要求瀏覽器來做到這件事，可以用比如 required 此類的屬性來讓瀏覽器替我們達到檢查表單與禁止表單送出的工作。. 2.1.4 瀏覽器對 HTML5 的支援差異雖然在 HTML5 中定義了各種好用的功能，好用的標籤，但這都僅止於定義規範的範疇，若是瀏覽器並不支援，這些新功能還是無法使用。現在瀏覽器對於 HTML5 標籤的支援能力不一，比如只有 Opera 實作了小日曆的功能，而<input type=range />目前也只有 google chrome 有將它實做出來，所以使用者在面對一些使用 HTML5 建立的網頁時，有可能會面臨有些功能可以作用，但是有些功能無法作用的景況。 . 14 .

(15) 在這樣的過渡時期，還是需要網頁程式設計師的幫忙，在製作 HTML5 網頁時，就必須加入一些 javascript 的方式來檢查此功能是不是能夠在使用者的瀏覽器上完整作用，若不能，就必須提供一些備用的資訊讓使用者讀取。上述不支援功能的瀏覽器包含了老舊的瀏覽器，老舊的瀏覽器沒有更新很可能完全不支援 HTML5 的任何一個標籤。在過渡時期當中我們可以使用 WAI-ARIA 來輔助，WAI-ARIA 可以在標籤中加入此標籤的角色(role)，讓舊版瀏覽器知道這大概是什麼東西，以此來改善過渡時期瀏覽器支援度不足的問題。. 2.2 SVG SVG(Scalable Vector Graphics)是架構在 XML 語言之上的一種技術，使用標籤來描述所要畫的圖的各樣特徵，瀏覽器就會替你畫出來，並且畫出來的圖是向量圖，SVG 可以畫出下列常用的圖形： 1.. Rectangle. 2.. Circle. 3.. Line. 4.. Curv. 並能夠為這些圖形加製動畫，在 HTML5 中有一個<canvas>標籤，它也是擅長繪製 2D 圖形，但它所畫出來的圖形是點陣圖，而且它並不擅長製作動畫，而 SVG 很適合拿來製作動畫。 Canvas 製作位移的動畫，它需要在目的地畫出圖形，然後還必須把之前畫的圖形給刪掉，因為 canvas 在畫好圖形後，位置就固定了，它無法移動，所以只好這種增刪的方式來達到動畫的效果。 . 15 .

(16) SVG 有許多動畫的標籤，有些標籤是從 SMIL(Synchronized Multimedia Integration Language)結合來的，包含的動畫標籤比如有： <animate> <animateTransform> …這裡並沒有列出所有的標籤來，這些標籤可以讓圖形物件旋轉(rotate)、位移 (translate)，或是沿著某條線移動。 SVG 就是一個善於製作動畫的理想工具，並且現今的網頁技術 HTML5 有很好的發展空間，因此在第三章系統中所提到的結果圖，就要用 SVG 來製作，以便跟 HTML5 有好的結合。. . 2.3 iBooks iBooks 是 Apple Inc.於 2010 年 1 月 17 日發佈的一款電子書閱讀軟體，可以讀取 ePub 格式、PDF 格式以及.iBooks 格式的電子書，其中.iBooks 是 Apple Inc. 自己推出的電子書格式，擁有令人驚豔的多媒體呈現功能，讓讀者除了閱讀傳統的文字與圖片之外，還可以在書中閱讀影像、音樂、互動功能、做題目…等，讓使用者可以有多方面的體驗。 iPad 裡面內置的 Voice Over 功能可以朗讀電子書中的段落文字，讓電子書成為一本有聲書，有利於視障的使用者使用。. 2.4 Tumult Hype Tumult Hype 是一款在 OSX 作業系統上推出的軟體，Tumult Hype 可以製作網頁，支援拖拉的方式來擺放網頁上的各樣物件，並且可以很輕易的在網頁上加 . 16 .

(17) 入動畫效果。更重要的是，Tumult Hype 可以製作 iBooks 可接受的 widget，好讓我們將製作出來的 widget 很好的結合進 iBooks 電子書當中。整體而言，在這裡是比 Xcode 理想的軟體。. . 17 .

(18) 第三章職涯發展探索系統 3.1 職涯發展系統的目標職涯發展系統被設計出來的目標，是要藉由輔導個案回答系統中被設計過的問卷，讓輔導社工根據輔導個案所提供的答案，來分析此輔導個案目前對於職涯的追尋，是不是有遇到什麼困難，或是需要什麼幫助，讓輔導社工決定此個案需要怎麼樣的輔導策略，進而可以對輔導個案提出適當的幫助。此系統必須要有線上(Online)版本，以及離線(Offline)版本，線上版本使用架設伺服器的方式，讓一般使用者可以透過瀏覽器上網去使用；而離線版本需要有不依賴網路傳輸也能夠達到分析的能力，讓輔導個案與輔導社工不需透過網路也可以進行溝通與輔導。但是當離線版本系統有網路可以用時，要能夠有將離線資料同步於線上版本之伺服器的能力。. . 18 .

(19) 3.2 職涯發展系統流程. 圖 3.1 職涯發展系統流程圖. 職涯發展系統的流程如圖 3.1 所示，此系統的使用者有兩種不同的角色，輔導個案在這個系統當中擔任被輔導的角色，輔導個案需要在觀看此系統所提供之問卷的填答與分析說明之後，開始填答問卷。題目分為文字題型與情境題型兩種，文字題型為單選題，而情境題型為多選。在填答問卷之後需要輸入使用者的資料好作為了解輔導個案與追蹤使用。輸入的資料如下：. . 1.. 姓名. 2.. 性別. 3.. 出生年（民國）. 4.. 障礙類別. 5.. 聯絡方式（電話號碼或電子郵件地址）. 19 .

(20) 在填答結束之後資料經過系統存入資料庫，並且產生職涯分析結果圖，此結果圖的功用在於使用圖形的介面，讓輔導社工可以對此輔導個案有一目瞭然的了解，相較於顯示純作答結果，使用圖形來表示會對輔導社工決定輔導策略比較有效果。此結果圖之表示方式在 3.4 中會有更詳細的說明。輔導社工決定了輔導策略之後，可以透過系統的介面將輔導策略存入系統的資料庫當中，並且可以讓其他的輔導社工隨時讀取出來看，讓其他的輔導社工知道要怎麼去跟進輔導個案。. 3.3 問卷題型問卷題型分為兩種，文字題型與情境題型。這些題型是經由國立臺灣師範大學復健諮商研究所的邱滿豔副教授的團隊，根據以往的輔導資料與經驗設計出來的，透過題目來分析使用者。. 3.3.1 文字題型填答說明. 以下的文字，是文字題型的填答說明：. 針對下列 35 個題目，就自己本身想跟專業服務人員討論的需求程度來做選擇，填完之後請記住序號並告知中心服務人員。選項欄中的 1 表示「非常不需要(非常不願意)」，2 表示「不需要(不願意)」，3 表示「需要」(願意)，4 表示「非常需要(非常願意)」。請就自己目前的感受狀況，在選項欄中圈選。若在填寫過程中有任何疑問，可以隨時請教中心的服務人員協助你。 . . 20 .

(21) 3.3.2 文字題型題目題參考題目號. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17. . 非非常不需常不需要需需要要要. 我需要(我願意)和專業人員討論「我目前的能力、興趣和 1 限制？」我需要(我願意)和專業人員討論「我從教育課程與工作經 1 驗中習得或熟練哪些工作技巧？」我需要(我願意)和專業人員討論「我和家庭成員認為什麼 1 是生涯計畫中最重要的？」我需要(我願意)和專業人員討論「我有沒有足夠的工作經 1 驗或目前可發展的興趣？」我需要(我願意)和專業人員討論「我的(工作)能力可以如 1 何增進？」我需要(我願意)和專業人員討論「我如何讓我的限制減 1 少？」我需要(我願意)和專業人員討論「家庭、社區背景如何影 1 響我的工作機會選擇與責任負擔？」我需要(我願意)和專業人員討論「教育如何協助或促進我 1 瞭解自己的潛能？」我需要(我願意)和專業人員討論「我工作的誘因(經濟動 1 機)是什麼？」我需要(我願意)和專業人員討論「我如何看待自己的工作 1 能力？」我需要(我願意)和專業人員討論「我期望從就業準備或職 1 業重建服務中獲得甚麼樣的成果？」我需要(我願意)和專業人員討論「我和家庭在(與教育、工 1 作有關的)文化及宗教上的信念是甚麼？有差異？」我需要(我願意)和專業人員討論「我和家庭面臨的負面刻 1 板印象與歧視是甚麼？」我需要(我願意)和專業人員討論「我工作的職場文化如 1 何？」我需要(我願意)和專業人員討論「我在之前的工作或學校生活中表現如何？在我的工作環境中有沒有特別容易造成 1 適應困難的現象？」我需要(我願意)和專業人員討論「我如何(便利地)到達工 1 作地點與完成工作任務？」我需要(我願意)和專業人員討論「我的工作職場中產生負面工作壓力的狀況如何？如：我對工作任務與環境有多少 1 操控權？有多少壓力？工作的重複性？」. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 21 .

(22) 18 19 20 21 22. 23 24 25 26 27 28 29 30 31 32 33 34 35. . 我需要(我願意)和專業人員討論「我的職場中有沒有獎勵 1 的氣氛或是做法？如果有，是甚麼？」我需要(我願意)和專業人員討論「我的工作技巧與工作行 1 為表現符合職場需求嗎？」我需要(我願意)和專業人員討論「職場所提供的獎勵氣氛 1 或做法，符合我的需求嗎？」我需要(我願意)和專業人員討論「我曾經面臨工作壓力 1 嗎？我如何處理與工作有關的壓力？」我需要(我願意)和專業人員討論「我自己有想到可能的職務再設計(工作調整)或是輔助工具嗎？任何可能的輔助或 1 調整都有考慮到嗎？」我需要(我願意)和專業人員討論「其他人在對我做評估時，有沒有考量我障礙的因素而作適當的調整？ (如：做 1 問卷時，字體大小要讓視障者比較方便看...)」我需要(我願意)和專業人員討論「社經地位或自我效能會 1 影響我在職種上的選擇嗎？」我需要(我願意)和專業人員討論「我自己在做決定與想獨立自主時，受文化的影響是甚麼？我的家庭(成員)在做決 1 定與想獨立自主時，受文化的影響又是甚麼？」我需要(我願意)和專業人員討論「我作決定時的技巧和經 1 驗是什麼？」我需要(我願意)和專業人員討論「我的障礙會限制我的(生 1 涯)發展嗎？」我需要(我願意)和專業人員討論「我在社交發展上有受限 1 嗎？」我需要(我願意)和專業人員討論「我的工作人格與工作能 1 力發展，有沒有受到阻礙？」我需要(我願意)和專業人員討論「「社會化」如何影響我現 1 在及未來的角色？」我需要(我願意)和專業人員討論「我瞭解機會來了嗎？我 1 抓住機會了嗎？」我需要(我願意)和專業人員討論「我準備好面臨更多競 1 爭、流動率高的勞動市場嗎？」我需要(我願意)和專業人員討論「我能面對因景氣不好而 1 失業的狀況嗎？」我需要(我願意)和專業人員討論「教育或是職業重建等服 1 務的輸送系統健全嗎？」我需要(我願意)和專業人員討論「服務輸送系統會造成我工作選擇上的困難嗎？會讓我產生依賴性或是無法增能 1 嗎？」. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 2. 3. 4. 22 .

(23) 3.4 結果圖呈現. 圖 3.2 職涯分析系統結果圖. 圖 3.2 是職涯分析系統的結果圖，身心障礙者的就業影響因素主要有三個大因素：個人因素、環境因素及與個人有關環境因素。在探討身心障礙者的就業影響因素時需很謹慎。以下依（一）個人因素、（二）環境因素、（三）與個人有關的歷程因素以及與環境有關的歷程因素三部分簡要說明。（一）個人因素模式中的個人因素包括的次級因素包括：個人特質、個人背景、個人信念等，這些次級因素會隨著個人的發展、做決定、學習、想去符合社會規範的歷程而改變，使人看起來各有獨特的樣子。 . 23 .

(24) （二）環境因素模式中的環境因素涵蓋的次級因素包括：職場文化、工作條件、工作內容等，這些會受到外在大環境的就業機會的多少、勞動市場的變化、相關政策的施行等歷程因素的影響，而形成職場環境的樣子。（三）歷程因素 1、內在歷程因素（如：發展、社會化、自我抉擇、促使個人與環境一致的作為等）會影響個人的狀態，而有些內在歷程常是發生在身心障礙者邁入成人階段或職業生活之前就開始了，相對呈顯家庭支持與學校教育的重要性。 2、外在歷程因素（如：勞動市場、機會、政策等）會影響環境的狀態，但對個人而言未必是一個不能因應的宿命，面對「勞動市場變化」，若能適當調整、對「大環境中所提供的機會」，若能及時掌握、對「專業引導」等政策，若正確判斷或充分配合，亦能擁有自己職涯的一片天。[1]. . 24 .

(25) 第四章系統開發與設計 4.1 iBooks 架構現在要進行系統的開發與設計，第三章有提到此系統需要有線上(Online)以及離線(Offline)的版本，離線版本的用意，是要讓輔導社工可以在沒有網路連結的情況下也可以執行工作，讓輔導個案觀看說明填寫問卷，在離線版本部分我們選用 Apple Inc.所推出的 iBooks 軟體來製作我們的離線系統，不過 iBooks 我們不只拿來做離線系統的功能，也製作了線上版本的部分系統功能。. 4.1.1 iBooks 的好處 iBooks 是在 iPad 裡面使用的一個電子書的閱讀軟體，iPad 是 Apple Inc. 所推出的一個平板電腦產品。從（1）從使用者的觀點來看： iPad 有易於攜帶的優點，不論是哪一代的 iPad 產品都不超過 730 公克，這對於輔導社工來說，可以很容易帶著走，隨時可以讓輔導個案填寫問卷，做關心。 Apple inc.推出的 iBooks 上面所可以看的電子書，除了傳統的文字與圖片交雜的電子書以外，Apple inc.也推出了自定格式”.ibooks”的電子書，在這種電子書中，除了文字圖片以外，還可以放入影片、音樂、互動式 widget 及 keynote 製作出來的投影片，使的電子書變得多采多姿，讓讀者除了念書以外還可以有很多的輔助工具來幫助閱讀，因為以上這些優點，很多人願意使用 iPad 來做為電子書的閱讀器。（2）從系統設計者的觀點來看： . 25 .

(26) Apple Inc.推出了一個叫做 iBooks Author 的軟體，使用這個軟體可以讓使用者做出高品質的電子書，並且使用拖放（Drag and Drop）的方式，就可以做電子書的排版，這對我們這種不熟書籍排版的人是很容易上手的工具。在 iBooks 當中，可以嵌入各樣的 widget，iBooks Author 提供了一些內建的 widget，有播放影片、播放投影片、圖庫還有測驗題的 widget。測驗題的 widget 可以讓設計者放入題目與解答，讓使用者在看書的時候可以打開 widget 來寫單選類型的測驗題，這對職涯發展系統來說似乎是個福音，但是後來發現，這個 widget 只能檢查使用者的答案與預設的答案相不相符，我沒辦法寫程式來讀取此測驗題型 widget 裡面的資料，意味著我無法知道使用者究竟選擇了哪些答案，這與我們系統的期待是不相符的。因此，我們選用了另一個自由度比較高的 widget，HTML widget。在 HTML widget 當中我們可以執行 HTML code 以及 Javascript code。更好的是，它支援 HTML5 的標籤，與新推出的 Javascript 的 API，這讓我們擁有使用 iBooks 架構職涯分析系統離線版本的能力，所以我們選用 iBooks。但這也讓我們產生許多好奇： 1.. 在一本電子書中可以放入許多的 widget，這些 widget 的資料，例如變數，能不能互相存取，如果可以，要如何存取？. 2.. 不同本的電子書，但是在同一台機器上，這些 widget 的資料是否也能相通，換句話說，在 A 書上存入或產生的變數值，在 B 書中是否能夠讀取？. 3.. 既然 iPad 是一台可以透過 WIFI 或 3G 的方式上網的機器，iBooks 裡面的 widget 是否能夠透過網路來抓取資料，並在電子書裡顯示？. 4. . 如果可以透過網路來抓取資料，我是不是可以在 widget 中引入外部 26 .

(27) javascript 套件的連結，例如 jQuery，好讓我可以在 widget 產生各種酷炫的效果？以上的這些好奇，都對我們系統的開發有著重要的影響，關乎著我們的系統可以做到什麼程度。這些好奇，在此篇文章中都會得到解答，我們可以先說結論，這些好奇的答案，都是”可以”，在後面的章節會討論我們怎麼達到這些效果與能力。. 4.1.2 iBooks 端架構流程圖先來談談我們的 iBooks 端系統運作流程，我們希望在一台機器當中我們可以有兩本書，一本給輔導個案使用，一本給輔導社工使用。輔導個案所使用的 iBooks 電子書，在無網路的狀況下，架構是這樣的：. 圖 4.1 iBooks 端架構流程圖 . 27 .

(28) 我們希望輔導個案使用此系統可以很簡單，進入書本，瀏覽一下書本裡關於此問卷的注意事項，開始做問卷，做完問卷後，widget 就會將使用者的答案存入書本裡，正確來說，存入 localStorage 裡。這裡要解開我們的第一個好奇，widget 之間能不能互相存取資料呢？如果我們能夠將資料存進閱讀裝置的某個地方，也能夠從閱讀裝置中讀取這些資料，我們就可以達到 widget 間的互相存取，所以我們要找到方法來做到這些事。經過測試我們選用的方法是使用 localStorage 的技術來達到這個存取的效果，一般 localStorage 的 javascript API 可以讓我們在瀏覽網頁的時候，將一些資料儲存在 client 端，至於要怎麼儲存，儲存在哪裡，就交由瀏覽器來實作。在 iBooks 當中的 widget 是支援 HTML5 的各樣標籤的，經過測試，各樣新穎的與 HTML5 相關的 API 也可以使用，在此研究當中也證實了 localStorage 的可使用，所以我們可以將使用者所回答的問卷答案儲存在 localStorage 當中，並且儲存起來的資料，也可以讓別的 widget 來讀取使用。在 widget 當中，localStorage 就像是一個共享空間，在 iBooks 電子書中任何地方的 widget 都可以來存取這個空間的資料，我們可以用一個突來展示 widget 跟 localStorage 的關係：. . 28 .

(29) 圖 4.2 widget 與 localStorage 關係圖. localStorage 就像是一個資料池（data pool），在同一台機器上，可以讓不同的 widget 來讀取同一個區塊得資料。所以這邊解開我們的第二個好奇，在 A 書中存入或產生的變數值，在 B 書中經過測試的確是能夠讀取的，因為他們的 localStorage 是共通的，但這樣就要小心，若今天有幾本不同作者寫的電子書，他們書裡的 widget 不小心，或根本不知道，就用了相同變數名稱的 localStorage，就很有可能發生資料被覆蓋的問題。 localStorage 的使用很容易，假如我們要儲存一筆資料，變數名稱叫做 name，而值為 Tom 的話，我們可以這樣寫： localStorage.name = ‘Tom’; . 29 .

(30) 要讀取這資料也很容易，使用下面的方式讀取： var name = localStorage.name;. 但要注意的是，對於 localStorage 的型別，在 widget 當中常常會被辨認錯誤，如果你今天期待 localStorage.age 這個值是個整數（Integer），當你讀取它來使用的時候很有可能會被剖析為非整數的型別，而造成程式的錯誤，所以建議，在讀取出任何 localStorage 的值之後，都要將它們轉型比較好，例如你需要的是整數，就如下方寫法： var age = parseInt(localStorage.age);. 這樣，會是比較保險的辦法。那麼，當我們今天處於可以使用網路的環境，我們當然希望這個系統可以好好的利用網路，而不只是在本地端的資料處理與存取，因此我們構想了有網路環境的架構，圖 4.1 表現出了此架構，而這個部分就屬於線上版本的範疇了，我們在 4.3 當中，會繼續談談線上版本的部份。讓我們現在的焦點繼續放在無網路的環境，在輔導社工所使用的 iBooks 電子書，我們的架構如下：. . 30 .

(31) 圖 4.3 輔導社工專用 iBooks 電子書. 也是很簡單直覺的概念，在輔導個案使用完輔導個案專用的 iBooks 電子書後，輔導社工就可以從同一台機器上的輔導社工專用 iBooks 電子書來查看分析出來的結果圖，並且給予輔導策略。結果圖如圖 3.2 所見，結果圖與問卷題目的關係是這樣：每一個題目選擇” 非常不需要”得 1 分，”不需要”得 2 分，”需要”得 3 分，”非常需要”得 4 分，對每一個次級因素計算平均得分，若是 1.5 - 2.5 之間，結果圖相對應的區塊呈現綠色，若是在 2.5 – 3.5 之間，呈現黃色，若是在 3.5 – 4 分之間呈現 . 31 .

(32) 紅色。如下圖表示：. 圖 4.4 結果圖部分區塊. 所以在輔導社工專用的 iBooks 電子書中，會有一個 widget 來負責處理分析問卷答案，並計算產生結果的的工作。所以我們來概略的表示一下，這兩本書的關係：. 圖 4.5 兩本書架構. 4.2 Widget 的設計在此系統當中有相當多的 widget 被設計出來，我們一一的來討論，首先是 . 32 .

(33) 在這系統當中被設計出來的 widgets 的列表： 1.. inputUserData.widget. 2.. outputUserData.widget. 3.. question.widget. 4.. result_diagram.widget 在設計這些 widget，我選用 Hype 這個工具，它除了可以製作一般的網頁以. 外，還可以製作 iBooks 適用的 widget，並且可以在 widget 中加入動畫，因此我選用 Hype。 Hype 當中可以插入內建的物件：Box, Text, Button, Textured Button, Image, Video, HTML Widget。那我們程式碼的核心，也就是我們主要發揮的地方，就是在 HTML Widget 裡面，這裡面可以放入 HTML 以及 Javascript，並且當這個 iBooks Widget 被點開的時候，會執行這些程式碼。. . 33 .

(34) 4.2.1 inputUserData.widget. 圖 4.6 個人資料輸入介面圖. l. widget 位置：輔導個案專用 iBooks 電子書. l. 功用：讓輔導個案在做問卷之前，先將自己的基本資料輸入電子書中. l. 說明：在這個 widget 當中，我們需要讓輔導個案在使用問卷 widget 輸入自己個人的資料，這些資料包含： 1.. 姓名. 2.. 性別. 3.. 出生年（民國）. 4.. 障礙類別. 5.. 聯絡方式（電話號碼或電子郵件地址）. 符合 3.2 所構想的系統內容。 . 34 .

(35) 我們程式碼的實作如下： <table> <tr> <td>姓名:</td> <td><input type="text" name="userName" /></td> </tr> <tr> <td>性別</td> <td>男<input type="radio" name="sex" value="male"/>女<input type="radio" name="sex" value="female"/></td> </tr> <tr>. <td>生日(民國):</td>. <td><input type="text". name="birth"/>年</td> </tr> <tr> <td>主要障礙別:</td> <td><input type="text" name="handicap"/></td> </tr> <tr> <td>email</td> <td><input type="text" name="email"/></td> </tr> </table>. <button id="send" onclick="send()">send</button> <script> function send() { localStorage.userName = document.getElementsByName('userName')[0].value; localStorage.userBirth = document.getElementsByName('birth')[0].value; . 35 .

(36) localStorage.userSex = document.getElementsByName('sex')[0].value; localStorage.userHandicap = document.getElementsByName('handicap')[0].value; localStorage.userEmail = document.getElementsByName('email')[0].value; } </script>. 當 send 這個按鈕被按下，send()這個 function 就會被執行，這個 widget 最重要的工作就是將使用者的各項資料儲存至 localStorage，因此我們可以看見， send()裡面就有這樣的程式碼 localStorage.userEmail = document.getElementsByName('email')[0].value;. 設定一個變數叫做 userEmail，它的值是從 tag name 叫做 email 的標籤抓取來的，將值存入 localStorage，好讓其他 widget 可以使用這個值。. 4.2.2 outputUserData.widget. 圖 4.7 個人資料輸出介面圖 . 36 .

(37) l. widget 位置：輔導個案專用電子書、輔導社工專用電子書. l. 功用：顯示剛剛使用者輸入的個人資料. l. 說明：這個 widget 可以讓輔導個案查看剛剛輸入的個人資料有沒有錯誤，也可以讓輔導社工在分析結果圖之前，先看看這個輔導個案的個人資料。. 這個部分比較簡單，就只是把資料從 localStorage 讀取出來而已，程式碼如下： var var var var var. name sex birth handicap email. = = = = =. localStorage.userName; localStorage.userSex; localStorage.userBirth; localStorage.userHandicap; localStorage.userEmail;. 從 localStorage 把資料讀出來，存在自己 widget 的 local 空間，再來就是把它顯示出來，顯示很簡單，所以這邊只打出讀取資料的核心程式碼。. 4.2.3 question.widget 先看一下這個 widget 的頁面進行流程：. 說明頁面. . 35題題目頁面. 完成頁面. 37 .

(38) 一打開 widget，先進入說明頁面，然後開始做題目，做完題目後出現結束畫面。. 圖 4.8 題目 widget 說明頁面. . 38 .

(39) 圖 4.9 題目 widget 35 題題目頁面. 圖 4.10 題目 widget 完成頁面. l . widget 位置：輔導個案專用電子書。 39 .

(40) l. 功用：讓輔導個案可以根據自身的狀況來回答問卷，好讓輔導社工可以分析，並提出合適的輔導策略。. l. 說明：這個 widget 可以讓輔導個案作答問卷，widget 會詳細記錄使用者每一題輸入的答案，並將之存入 localStorage 在這個 widget 當中，所有題目的資料都內建在 widget 當中，不是儲存在. localStorage，而是在設計此 widget 的時候，就將題目輸入在 widget 當中，一旦我們題目有更新的時候，就會需要使用者去更新這本書。這樣看起來，似乎沒有那麼的靈活，因此，我們會搭配網路架構，來讓此 widget 動態更新內建的題目，這個部分，在 4.4 整體連結架構會說明。在圖 4.9 題目 widget 說明頁面看的開始按鈕，按下以後，就會開始問卷的填答，問卷題目還有 radio button 都是用 HTML 產生的，重點在於，當我們按下 radio button 時，會觸發一個 s_click()的函式，這個函式可以將我們所選擇的答案給儲存起來，存進 localStorage 當中，以下是程式碼： function s_click() { var v = document.getElementsByName('ques'); var length = v.length; for(var i=0; i < v.length; ++i) { if(v[i].checked) eval('localStorage.ques' + localStorage.quesNum + ' = v[' + i + '].value'); } }. 當使用者按下選項按鈕的時候，就會觸發 s_click()，並且使用 for 迴圈來檢查現在所選的是哪一個選項，並且把結果存入相對應的 localStorage 當中， . 40 .

(41) localStorage 的命名方式是這樣：quesNum+題號，所以如果我今天要儲存第一題的答案，我就會存在 quesNum1 當中，第二題就存在 quesNum2 當中以此類推，在 javascript 中，想要把變數跟程式碼結合，並且執行此結合後的程式碼，可以使用 eval()這個函式來達到這個神奇效果。在執行此 widget 的說明頁面的時候，我們設定一個值， localStorage.ques_amount，這個值儲存了我們這個問卷總共有幾題，這個變數很重要，當我們需要讀出問卷資料時可以用： var ques = new Array(); for(var i=1; i<=parseInt(localStorage.ques_amount); ++i) { eval('ques['+(i-1)+'] = localStorage.ques'+i+''); }. 有了 localStorage.ques_amount 我們可以確知有多少題目，所以只需要用一個 for 迴圈就可以把所有需要的資料讀取出來，一樣地，我們需要用 eval()函式將我們的程式碼組合起來。把資料讀取出來儲存在一個本地端的陣列裡，這樣就可以很好的來取用。. . 41 .

(42) 4.2.4 result_diagram.widget. 圖 4.11 系統結果圖. 這邊要談談我們要怎麼分析並且將結果圖顯示出來，在這個 widget 中，我們必須輸入 SVG 的標籤來畫出我們需要的幾何圖形，並且使用內建的 SMIL （Synchronized Multimedia Integration Language）來製作動畫。 l. widget 位置：輔導社工專用電子書。. l. 功用：系統分析問卷資料，並且編排成結果圖的方式，讓輔導社工一目瞭然。. l. 說明：我們需要先用 javascript 分析資料，然後再將結果圖產生變化。. 以下是 SVG 的畫圖部分程式碼： <g id="topGroup" transform="translate(450, 50) scale(0.7, 0.7)" > <circle id="middleBackCircle". cx="100" cy="100" r="170". fill="white" stroke-width="3" stroke="blue" /> . 42 .

(43) <circle id="middleTopCircle". cx="100" cy="0" r="70" fill="red". stroke-width="3" stroke="black" /> <circle id="middleDownCircle". cx="100" cy="200" r="70" fill="red". stroke-width="3" stroke="black" /> <circle id="middleLeftCircle". cx="0" cy="100" r="70" fill="red". stroke-width="3" stroke="black" /> <circle id="middleRightCircle". cx="200" cy="100" r="70" fill="red". stroke-width="3" stroke="black" />  <text x="80" y="9" dx="0" fill="black" font-size="20" font-weight="bold" >發展</text> <text x="-40" y="109" dx="0" fill="black" font-size="20" font-weight="bold" >自我抉擇</text> <text x="170" y="109" dx="0" fill="black" font-size="20" font-weight="bold" >一致性</text> <text x="70" y="200" dx="0" fill="black" font-size="20" font-weight="bold" >社會化</text> </g>. 以上只貼出了一部分的程式碼，全部標出來會太長，這部份我們可以看見這是畫出結果圖裡面，上面一個大圓圈包含了四個小圓圈的部份，為了可以整體改變屬性，先用一個<g>標籤將整個大圓圈包含小圓圈都包起來，當我們想要同時對這五個圓圈有什麼屬性上的變動，只要更動<g>標籤裡的屬性就好。然後使用<circle>標籤畫出圓圈，cx, cy 的屬性給出了圓圈左上角在整張畫布裡的位置，r 屬性給出了這個圓圈的半徑長短，在 fill 屬性當中我們定義了這個圓圈是什麼顏色，stroke-width 定義了畫出這個圓圈的外框有多粗，並且 stroke 定了這個外框是什麼顏色。在文字方面用<text>標籤來定義，x, y 屬性定義了這段文字的左上角會是 . 43 .

(44) 在這張畫布的哪個位置，dx 屬性指的是這個文字在 x 軸的位移量，fill 定義了這段文字的顏色，font-weight 定義了它是粗體字。在畫完 2D 圖案之後，我們需要對這些 2D 圖形加上動畫，我們使用 SMIL 標籤，程式碼如下： <animateTransform xlink:href="#topGroup" attributeName="transform" type="translate" begin="b3.click" from="450, 50" to="100, 150" dur="2s" fill="freeze" /> <animate. xlink:href="#topGroup" attributeName="opacity". values="1;1" begin="b3.click" dur="0s" <animate. fill="freeze" />. xlink:href="#downGroup" attributeName="opacity". values="1;0" begin="b3.click" dur="2s" fill="freeze" /> <animate. xlink:href="#rightGroup" attributeName="opacity". values="1;0" begin="b3.click" dur="2s" fill="freeze" /> <animate. xlink:href="#leftGroup" attributeName="opacity". values="1;0" begin="b3.click" dur="2s" fill="freeze" />. 在<animateTransform>標籤當中，定義了物件的位移移動，使用 xlink-href 來綁定作用物件，type 定義了我們要做什麼樣的動作，旋轉（rotate）或是位移（translate），begin 定義了我們要怎麼來觸發此動畫，讓這個物體從（from）到（to）哪個位置，並且歷時（dur）了多久的時間，fill 設定為 freeze 表示在這個動畫結束以後，物體會固定在最後呈現的樣子，不會回到初始狀態。再來我們需要讀取輔導個案的回答資料，並且分析，再讓分析完的資料對結果圖產生影響。程式碼如下：. var sencode_factor = new Array('6', '3', '4', '2', '1', '2', '3', '3',. . 44 .

(45) '2', '3', '1', '1', '2', '2'); var result = new Array(); var index = 1; for(var i=0; i< sencode_factor.length; ++i) { var max_index = parseInt(index) + parseInt(sencode_factor [i]); for(var j=index; j<max_index; ++j) { var sum = 0; eval(‘sum += parseInt(localStorage.quesNum’+index+')'); result[i] = (sum/ sencode_factor [i]); } index = max_index; }. 在 sencode_factor 這個陣列中儲存的是，每一種次因素有幾題，比如說第一種次因素有六題，那麼 sencode_factor[0]就儲存 6，然後我們使用兩層迴圈，來計算每一種次因素當中，輔導個案所得分數的平均值是多少。假設在個人因素這個次因素當中，有六題，根據得分的規則：每一個題目選擇”非常不需要”得 1 分，”不需要”得 2 分，”需要”得 3 分，”非常需要” 得 4 分，有一位輔導個案所得分數分別是 2, 1, 3, 4, 1, 1 分，那麼我們將他總和後取平均所得的值為 2，再根據所得數值影響結果圖的改變顏色規則，可知這個區塊應為綠色，所以我們將個人因素這個區塊設為綠色。因為在 iBooks 的 widget 當中，我們只能使用 HTML 及 javascript 這些前端的程式碼，所以我們必須要先將圖畫出來，再來對物件做改變。. . 45 .

(46) 4.3 伺服器端網站架構在作者沈國隆的” 應用 SVG 設計並實作身心障礙者職涯分析系統之研究” 文章當中，有實作出一個線上版的職涯分析系統，在這裡我們會以它為原型，做了改變與增強。在此系統中區別了輔導個案以及輔導社工，使用不同身分登入可以執行不同的動作，輔導個案能夠填寫問卷，而輔導社工可以觀看結果圖以及給予輔導建議。. 圖 4.12 伺服器端網站架構圖. 上面這張圖是位於職涯發展系統流程的圖，線上版本的系統就根據這個圖製作出來，沈國隆做到的部份是可以讓輔導社工做問卷的填寫、輔導社工可以給予輔導策略、輔導社工可以觀看結果圖。. . 46 .

(47) 而我們做的改變跟增強如下： l. 將問卷作答方式更改為一頁顯示一題的題型，這樣做，是為了更符合 QTI（Question and Test Interoperability）的格式。. l. 於線上系統增加修改題庫功能。. l. 增加線上系統與 iBooks 系統的結合，開啟線上系統主機端的資料輸入輸出，讓 iBooks 系統可以同步線上系統。. 下圖是線上做問卷系統修改後的版本：. 圖 4.13 線上問卷系統. 可以看見開始做問卷以後，一頁只會出現一題，預設的按鈕都在”需要”上面，選完選項，按”下一頁”，就可以進行下一題。這些題目是讀取 mysql server 裡面的資料，所以題目都會動態更新。 if(!isset($_GET["qes"])) $question_number = 1; else $question_number = $_GET["qes"]; if(isset($_GET["radio"])) . 47 .

(48) { $_SESSION["value"][($question_number-1)] = $_GET["radio"]; }. 以上的程式碼，前四行是為了要設定這此顯示的題目的題號，除了第一題以外，從第二題開始都會儲存前一題所回答的答案，並且將之存入 session 的空間裡，直到作答完所有的題目以後，再一次存入資料庫。並且有鑑於題目的數量與內容會變動，所以將答案以字串的方式存入資料庫，假設目前只有 5 題題目，我回答的答案是 1,2,3,4,1 那麼我會將這些答案使用逗號組合成一個字串，變成：”1,2,3,4,1”，再存入資料庫中，這樣不管題目的題數是否有變動，我只要抓取出這個字串，並且用逗號來切割，我就能知道總共有幾題，以及每一題循序的答案。直到所有題目都回答完之後，就會進入完成頁面，頁面如下：. 圖 4.14 線上問卷系統完成頁面. 在完成的頁面會需要使用者輸入姓名、性別、生日、主要障礙別以及 email 或是電話，這邊都跟 widget 裡面的一樣。 . 48 .

(49) 將資料完整存入資料庫後，輔導社工就可以觀看分析結果圖以及建議輔導策略。. 4.4 整體連結架構接下來我們要將 4.1 iBooks 架構做一些改良，我們希望，當 iPad 在有網路連結的情況之下，可以做到更多的事情。這邊要解開我們的第三個好奇， iBooks 電子書裡面的 widget 經過實驗，的確是能夠透過網路抓取資料，所以我們要好好利用這一點。我們要加上一些功能： 1.. 輔導個案專用電子書在進行問卷測驗的時候，要能夠自動去線上版本系統的資料庫抓取資料更新作答題目。. 2.. 在問卷測驗結束以後，除了把答案存入 localStorage 之外，也要能夠將答案資料包含個案個人資料回傳線上版本的資料庫，達到與線上系統同步的效果。. 3.. 輔導社工專用電子書要達到能夠在書中隨意選擇輔導個案，把資料調出來觀看問卷回答結果以及結果圖，輔導個案的選擇包含線上系統以及電子書端的系統記錄之資料。. 4.. 輔導社工觀看輔導個案資料之後，可以輸入輔導策略，並回傳回線上系統資料庫。. 4.4.1 輔導個案專用電子書的改良前兩項功能的架構如下圖： . 49 .

(50) 圖 4.15 改良版輔導個案專用電子書. 在寫問卷之時，讓 widget 可以自動去遠端 server 抓取題目資料，理由是因為這些題目很可能會更改或是增減，如果可以用網路即時更新，就不需要使用 iBooks store 來下載書本的更新，因為它自己就會更新。但之前說過，在 widget 中只能使用 HTML 與 javascript，這意味著我們只能使用 client 端的技術來達成資料交換，在這裡我們採用 AJAX（Asynchronized Javascript And XML）來達成我們和伺服器端的連接。並且在這裡我們解開第四個好奇，經測試，只要在有網路連接的狀態下，我們就可以用<script href=”套件位址”><script>的方式去引入外部函式庫，所以在這裡我們引入了 jQuery，這是一套將 AJAX 處理的很好的函式庫。 AJAX 的核心程式碼如下：. . 50 .

(51) $.ajax({ url:'http://140.122.184.36/ibook/questions_data.php', jsonp: 'json_callback', data:{'ques_num':localStorage.quesNum}, dataType:'jsonp', error: function(xmlHttpRequest,error) { alert(xmlHttpRequest.readyState+','+error); }, success: function(data){ localStorage.ques_amount = data.ques_amount; $('#main').html('第' + data.number + '題 <br/><br/>'+data.question+'<br/><hr/>'); } });. 以上的程式碼在處理自動更新問卷題目，在 iBooks 上使用 AJAX 會遇到一個問題，Javascript 禁止跨網域的動作，所以當我想要從 iBooks 中的 widget 發送資料到伺服器端，並爭取資料的回傳時，就會遇到問題，iBooks 中 widget 的資料是它內建的，怎麼樣也無法讓 widget 中的 Javascript 不跨網域來收取資料，所以這裡我們就需要用到 jsonp 這個型態的連接，jsonp 提供了一個跨網域的解決方案，當今天你使用 jsonp 型態連到伺服器端，並且設定回傳的資料是 json 格式的檔案時，就可以跨網域。因此可以看到 AJAX 的核心程式碼當中，dataType 設定為 jsonp，把題號 ques_num 傳送給伺服器端，讓伺服器端去資料庫中搜尋並將題目內容返回。若 AJAX 成功，就返回兩個參數：ques_amount，在題庫中總共有幾題以及 question 代表題目的內容，並將 ques_amount 儲存在 localStorage 中，將題目內容嵌入 HTML 中輸出給使用者看。伺服器端的程式碼如下：. . 51 .

(52) $sql = "select * from question"; $resource = mysql_query($sql, $link_ID); $ques_count = mysql_num_rows($resource); $ques_num = $_GET["ques_num"]; $sql = "select * from question where ques_num=$ques_num"; $resource = mysql_query($sql, $link_ID); $data = mysql_fetch_array($resource); $result["ques_amount"] = $ques_count; $result["number"] = $ques_num; $result["question"] = $data["content"]; echo $_GET['json_callback'] . '(' . json_encode($result) . ');';. 以上程式碼說明如何連接資料庫，比較值得注意的是，要回傳的資料將它們分類好放在陣列當中，再用 json_encode 把它編碼成 json 格式。. 那麼在輔導個案回答完題目後，我們也是要將這些資料回傳遠端資料庫當中，一樣也是使用 AJAX 來達到這個目的。 $.ajax({ url:'http://140.122.184.36/ibook/receive_ques_data.php', jsonp: 'json_callback', data:{'ques_answer':ques_string, 'name':name, 'sex':sex, 'birth':birth, 'handicap':handicap, 'email':email}, dataType:'jsonp', error: function(xmlHttpRequest,error) { alert(xmlHttpRequest.readyState+', error:'+error); }, success: function(data){ alert('send successfully.'); } });. 以上這段程式碼與剛才的程式碼大同小異，只要將傳出去的資料換掉就好， . 52 .

(53) ques_answer 當中所存的值，就是將各題答案以逗號串起來的字串，跟存入 localStorage 當中的是一樣的格式。接收端的程式碼如下，目的是要將接收到的問卷答案以及個人資料存入資料庫。. $name $sex $birth $handicap $email $ques_answer. = = = = = =. $_GET["name"]; $_GET["sex"]; $_GET["birth"]; $_GET["handicap"]; $_GET["email"]; $_GET["ques_answer"];. if($sex == "male") $sex = 0; else $sex = 1; $sql = "insert into user_answer (answer, name, sex, birth, mainDisable, mailOrPhone, build_time) values('$ques_answer', '$name', '$sex', '$birth', '$handicap', '$email', Now())"; $resource = mysql_query($sql);. 接收端接收到各項資訊後就存到 user_answer 這個資料表當中去。. . 53 .

(54) 4.4.2 輔導社工專用電子書的改良. 圖 4.16 輔導社工專用電子書改良架構. 後兩項的改良，我們讓輔導社工在使用專用電子書時，可以選擇自己想要看的個案資料，也可以為個案資料加上適當的輔導策略。 . . 54 .

(55) 第五章結論與未來展望 5.1 結論在這篇文章當中，我們拿製作職涯分析系統做素材，討論了 iBooks 與 widget 的各種可能性，探討了我們的四大好奇，並且拿這些好奇的結論，成為我們改良系統的能力。首先，使用將問卷系統包裝成電子書的形式，讓輔導社工可以方便得將之拿著走，裡面可以儲存個案的問卷資料，並且可以即時的看見職涯分析結果圖，只要將輔導社工專用電子書打開就可以看見了，將系統架構於電子書當中，這是個新穎的方式，讓電子書不只是一個輸出工具，也讓它成為一個輸入工具，達到系統與人互動之效果。並且透過網路影響線上的系統，讓線上的系統可以跟手持的裝置同步，不會變得線上系統是一套資料，而離線系統又是一套資料。. 5.2 未來展望在此篇文章中討論了 iBooks 與 widget 的各種可能性，也確定 SVG 在 iBooks 能夠正常執行，iBooks 系統與線上系統的連接也完成了，但是我們還是有很多可以改進的地方。在 iPad 有 Voice over 的功能，它能夠念出使用者所框選的文字，這個功能對於視障的人士來說非常重要，我們已經確認我們系統中所編排的文字它可以念，但在 widget 中的文字就無法被念出來，現在的想法是，我們可以利用 HTML5 當中的 audio 標籤，在執行此 widget 的同時，播放事先錄製好的音檔，讓 widget 達到類似 Voice over 的效果，但這樣就無法對特定區塊做唸出，當使用者想重 . 55 .

(56) 聽的時候，要找到重聽鈕也是個問題，但這的確是一個值得去發展的方向。. . 56 .

(57) 參考文獻【1】邱滿艷, 張千惠, 韓福榮, 許芳瑜, 鍾聖音, 貝仁貴, 簡宏生, 陳月霞, 徐文豪, 林婉媛, 傑出身心障礙者的就業歷程與就業影響因. 素. 特殊教育研究學刊 . 2010. 【2】李鎮宇, iBooks Author 上手指南. 麥格辛, 2012. 【3】白石俊平, HTML5&API網頁程式設計 , 旗標, 2011. 【4】沈國隆, “應用 SVG 設計並實作身心障礙者職涯分析系統之研究,”2011. 【5】 Sabah Mohammed, Jinan Fiaidhi and Osama Mohammed. “Securely Streaming SVG Web-Based Electronic Healthcare Records involving Android Mobile Clients,” JOURNAL OF EM ERGING TECHNOLOGIES IN W EB INTELLIGENCE, VOL. 1, NO. 2, NOVEM BER 2009 . . 【6】 Chia-Wei Liao, Huai-Che Lee, Kai-Wei Chen, Zong-Hong Lyu, Jhih-Rong C hen, W en-Jen H o, a nd J ung H ong C huang“SVG E ngine Design and Optimization,” IEEE 14th International Symposium on Consumer Electronics, 2010. . 【7】 Chung-Yuan Su, Ray-I Chan and Jen-Chang Liu, Recognizing “Text Elements for SVG Comic Compression and its Novel Applications,” International Conference on Document . Analysis and Recognition, 2011. 【8】 Injae Lee, Myungseok K, Seongyong Lim, Sanghyun Park, Jihun Cha and Joongyun Lee, “Interactive E-book Contents Authoring System based on MPEG-4 LASeR,” ICACT2011, 2011. 【9】 N Vun, Z C Tee and J Y Lee, “Enhancement of SVG Display for Embedded Applications,” Proceedings of the 2009 IEEE 9th Malaysia International Conference on Communications, 2009 【10】 Bruce Lawson and Remy Sharp, Hello!HTML5, 松崗, 2011. . . 57 .

(58)