Flash 沒你的份!

Source:FoxTrot

用 JavaScript/SVG 作筆順示範

自從 iPad 上市以來,市場似乎不少人對 Apple iPad 上少了 Flash 支援,頗有微詞。姑且不論當下 Flash 在市場上的佔有率與開發工具的普及程度。若我們從另外一個角度來看,從新的 HTML5 規格的推出與新型瀏覽器的 JavaScript 效率戰爭,瀏覽器本身與作業系統的介接程度與效能都有大幅的提昇。

某種程度上,我們隱約可以見到接下來的一兩年,瀏覽器上會出現的應用軟體局面。或許,到時候就已經不需要 Flash 的存在,只靠 JavaScript 與瀏覽器就可以達到現有 Flash 可以完成的效果。

半年前,因緣際會,查找了幾個國內外的筆順示範軟體。筆順這種功能,一般成年人大概用不著,但對於小學生或學習華語的外籍朋友,就很有參考價值。市場上似乎也有不少針對這種需求的筆順軟體

查找了一下免費資源,找到了國語推行委員會常用國字標準字體筆順學習網。這個網站的所有功能都是利用 Flash 開發,為了讓它可以在某些不支援 Flash 的場合使用,我試著查了一下這個網站的技術作法。其實它背後的筆順資料庫只是一組 XML 文件,利用前端的 Flash 逐步的繪出來而已。

於是試驗著用 SVG 重作一組前端,搭配 jQueryjQuery SVG 服用,光用 SVG + Javascript 也做出類似的效果,實際程式碼只約百餘行。

範例與原始碼請見在 Github 上的 Stroke-Order Project. 授權採 GPLv2。

不過除了現在還不支援 SVG 的 Internet Explorer 8 之外,目前這個小程式只有在 Gecko-based Engine (Mozilla Firefox) 上才顯示正常,至於其他的瀏覽器如 Webkit-based 的 Chrome, Safari 在 Windows 上有點異常,繪字遮罩沒有被正確的執行,所以會看到醜陋的畫筆,沒有字型外框。但在 Linux 上用 Chromium 倒是沒有問題,Opera 也頗正常。

短時間內,如果要只用 SVG 作跨瀏覽器的多媒體工具,可能還會看到這種問題,得避開如 SVG1.1 這種大家實做都還不完整的規格,改用 Web Canvas 可能會安全一點。但如果是客製化平台,有自製 Web Runtime,大概就可以避免掉這種討厭的跨瀏覽器相容問題。

日本的 KanjiVG 計畫

另外一個跟筆順有關系的開源專案是 KanjiVG,但 KanjiVG 是針對日文漢字,字體跟筆順可能有所不同,還沒有動畫功能,但有一簡單的筆順檢視工具,論壇也有一些動態檢視工具的討論

基於 KanjiVG 的資料庫,衍生出了如部件組字輸入查詢等應用。KanjiVG 的授權為 Creditive Commons Attribution-Share Alike 3.0,於是你有興趣的話,可以拿這組資料作任何應用。

政府應開放資訊

反觀我所使用的教育部資料,雖然有了開源前端可用,但其實後端筆順資料庫的授權是不開放的。根據國語會的授權條款,只允許大眾使用非商業目的之學術研究、教育推廣用途之「網站連結」,若作其他用途,可能會遭到教育部依法追訴法律責任!不過從筆順學習網上的意見回饋表 (居然是 .doc 格式),看來「數位典藏與學習之學術與社會應用推廣計畫」有意推動將此資源開放使用,但還在詢問使用者意見的程度。

我並不清楚國語會當初建制此資源時,從承作委託者所協議授權為何,但限制此資源成為可自由共享的公共財卻是十分可惜的事情。因為其邊際成本幾乎為零,但民間可做的用途極多,至少可以利用作成英文版 (原筆順學習網為中文版,最需要的外國人士反而難以使用),甚至作到上述 KanjiVG 的其他利用。而筆順資料庫的初期投資不低,若能開放民間利用,對正體中文的推展應該有加成效果。

雖然台灣、美國國情有所差異,但同如同二月所出版的 Open Government 一書提到,許多國家的政府官僚行為其實是大同小異的。像是書中第一章 A Peace Corps for Programmers 中提到,受限層層官僚體制與合約架構,即便是只需五分鐘改變一個國家的名字的事情,也可能得等到幾個月甚至一年後的合約週期到達才能執行。

再加上政府機關總員額管理機制等人力精簡措施,各機關其實已經沒有專職開發人員,幾乎大部分的資訊系統均採外包機制,甚至連 RFP 都由廠商代理,在面對新技術與應用上的反應相對民間遲緩許多。這種體制,甚至連橫向的政府機關想再利用他部門的資訊都難以達成。

基於種種理由,在此響應 ScheeHOpenData 計畫,期待公部門能夠對各項資訊更加開放。

  • to get greatest cross browser compatibility,
    Try Raphael!! http://raphaeljs.com/

    你指筆順的data is not opened?
    oh sosad 咁你個自己個名的筆順demo係hardcode落去?

    字的筆順data 究竟收埋左響邊度? 個format係咩? 點解唔見你parse?

  • Please post your question in English or Vernacular Chinese.

  • sorry sorry.
    如果想IE和FF也能運行的前端的話, 必須試 http://raphaeljs.com/
    筆順資料是用甚麼格式的?
    是你自己手動寫自己的名字動畫上去的?
    你在哪裏解譯了筆順的資料?

    略讀了你的程式碼, 找不到.

  • 當初寫的時候,只想嘗試 Native Support SVG 的瀏覽器,當時 IE 還不支援 SVG, 只能用替代方法如 Flash 等等。

    筆順是使用國語會常用國字標準字體筆順學習網的資料,是 XML 編碼。由於臺灣政府不開放授權,因此我也知取用一個字的資料作為示範。