經驗分享：用 Javascript 實作注音輸入法

#COSCUP 2013

「JS注音」是使用前端 Web 技術實作自動選字注音輸入法的嘗試。 要在瀏覽器實作輸入法，API 設計、搜尋演算法、詞庫設計、記憶體使用等都需要許多考量。此程式作為獨立的 library，已經有獨立網頁、Firefox 附加元件、FxOS 鍵盤三個使用案例。本次演講將報告實作進度與開發經驗，未來可行方向，希望能和其他開源輸入法開發夥伴切磋、交流。

Source code of the project can be found at https://github.com/timdream/jszhuyin

Blog: http://blog.timc.idv.tw/posts/coscup2013-jszhuyin-talk/
Keyword: Javascript, DOM, IndexedDB, IME, AppCache

Transcript

1. 經驗分享：

   View Slide

2. 聽說 COSCUP 投影片⼀一定要放貓…
   

   View Slide

3. 輸入法
   ㄔㄞ
   

   View Slide

4. 拆
   

   View Slide

5. 功能更多，當然不只查表
   有吃的嗎？
   還有什麼？
   

   View Slide

6. DEMO
   http://timdream.org/jszhuyin/"
   JS 注音 Firefox 附加元件
   

   View Slide

7. JS注音：自動選字手機輸入法
   •  自動選字：ㄔㄞ ㄓㄥˋㄈㄨˇ → 拆政府
   
   
   •  首碼／聲符輸入：ㄔㄓㄈ → 插枝法
   
   
   •  混合：ㄔㄞㄓㄈ → 拆政府
   
   •  建議：政府 → ~機關、~機構
   
   •  連續選字
   

   View Slide

8. 詞庫
   

   View Slide

9. 詞庫來源
   •  小麥注音 McBopomofo @mjhsieh
   •  MIT Licensed"
   •  ~14 萬字詞，TXT：6.2M"
   •  JSON：6.5M
   "
   ./McBopomofo/Source/Data master$ make data.txt
   bin/cook.py PhraseFreq.txt BPMFMappings.txt BPMFBase.txt data.txt
   cat BPMFPunctuations.txt >> data.txt
   cat Symbols.txt >> data.txt
   ./McBopomofo/Source/Data master$ wc –l data.txt
   148060 data.txt
   

   View Slide

10. 我今天要  
    5MB  的飼料
    

    View Slide

11. IndexedDB
    •  Implementation-independent, key-value storage for the Web"
    •  Very verbose and complex API, intend to be wrapped by
    libraries."
    window.indexedDB.open(‘database’).onsuccess =
    function (evt) {
    evt.target.result.transation(‘store’)
    .objectStore(store).get(‘key’).onsuccess =
    function (evt) {
    console.log(evt.target.result);
    };
    };
    •  以上範例還不包含錯誤處理、版本升級、新建 object store …"
    

    View Slide

12. 插播：DOMRequest
    var req = doSomething();
    req.onsuccess = function …
    req.onerror = function …
    req.addEventListener(‘success’, handler);
    "
    •  目前新設計的 API 會偏向使用 Promise / Future"
    •  別忘了 ECMAScript 6 還會有 yield
    

    View Slide

13. 選字
    

    View Slide

14. 窮舉法
    
    明|天拆政府
    明天拆|政府
    明天拆政|府
    明|天拆|政府
    明天|拆|政府
    

    View Slide

15. Composition of a number
    h&ps://en.wikipedia.org/wiki/Composi8on_%28number_theory%29#Examples
    

    View Slide

16. Composition of a number
    •  2: [1,1], [2] (2 sets) "
    •  3: [1,1,1], [1,2], [2,1], [3] (4 sets) "
    •  4: [1,1,1,1], [1,1,2], [1,2,1], [2,1,1], [2,2], [3,1], [1,3], [4] (8 sets)"
    •  …"
    •  n: (2n-1 sets)"
    •  通通丟進去查，加總積分來比就對了！"
    

    View Slide

17. 遞迴查詢，連續選字
    •  ㄌㄧㄥˊㄕˊㄓㄥˋㄈㄨˇ"
    •  零食政府
    •  零食
    •  零時
    •  零
    •  靈
    •  玲
    •  …
    •  輸出「零時」，扣掉兩個
    發音繼續查詢
    

    View Slide

18. 遞迴查詢，連續選字
    •  ㄓㄥˋㄈㄨˇ"
    •  政府
    •  政
    •  正
    •  證
    •  症
    •  鄭
    •  …
    •  選擇「政府」
    

    View Slide

19. 經驗分享

    View Slide

20. Change log
    •  Dec 2011：First version in Firefox OS Gaia"
    •  … optimization"
    •  Feb 2012：Switch to McBopomofo data"
    •  Feb 6th 2012：First rewrite"
    •  … improvements"
    •  Mar 2012：Desktop demo page"
    •  Aug 2012：Announcement on blog"
    •  Dec 2012：Split from Firefox OS Gaia with git filter-branch
    •  Jul 22nd 2013：rewrite2 begin"
    •  Aug 3rd 2013：Talk in COSCUP 2013"
    

    View Slide

21. 已知問題
    •  手機記憶體有限，GC 效能低落
    •  在低階手機完全不堪使用
    •  比 Emscripten 編譯的 libchewing 還要慢！？
    •  Closure/module pattern 內部無法單元測試
    •  從外顯行為測試 ~1300 行的 Javascript：嗯，祝好運。
    •  There is a huge difference between hacking things
    together in a short time and bootstrapping an
    maintainable software project
    

    View Slide

22. 踩雷
    •  IndexedDB 重複查詢，每次回傳的 object 互為 copy
    而非 reference"
    •  Key
    •  “ㄊㄞˊ-ㄅㄟˇ-ㄕˋ” …?
    •  很有結構的物件結構
    •  [["台",-2.946], ["臺",-3.501],
    ["抬",-4.771], ["颱",-4.809], … ];
    

    View Slide

23. 曙光
    •  libtabe 記載的，源自倚天中文系統的編
    碼系統，能將⼀一個音縮為 2 bytes

    （= 1 char in Javascript）
    1st Group 2nd Group 3rd Group Tone
    Symbols
    # of Symbols 21 3 13 5
    # of Bits 6 2 4 3
    •  將功能拆開成為各自的 

    Constructor Function 以及單元測試
    •  將主要的運算放到 Web Workers 執行
    •  打平資料結構
    •  將積分轉為 4 bytes Float32，接在字串裡面
    •  需要用的時候再從字串裡面讀 substring
    讀書！
    

    View Slide

24. JSZhuyin v.2013JUL
    •  Client-Server 架構，用 postMessage() 溝通
    Script  in  
    Browser  context
    Script  in    
    Web  Worker/iframe  
     
     
     
     
    .  
    JSON/IndexedDB  
    Data  Storage
    UI/Event  
    Listeners
    

    View Slide

25. Conference Driven
    Development"
    研討會死線式開發
    

    View Slide

26. Conference Driven
    Development

    
    （暈）
    

    View Slide

27. Classes
    •  BopomofoEncoder"
    •  StorageBase"
    •  JSONStorage"
    •  IndexedDBStorage"
    •  HybirdStorage"
    •  CacheStore"
    •  JSZhuyinIME …"
    •  IMEPostMessenger …"
    •  JSZhuyinLoader … ⁉-
    •  JSZhuyinWorkerLoader"
    •  JSZhuyinIframeLoader"
    •  JSZhuyin … "
    •  JSZhuyinLayoutMapper"
    •  WebJSZhuyinIME … "
    

    View Slide

28. Classes
    •  BopomofoEncoder"
    •  StorageBase"
    •  JSONStorage"
    •  IndexedDBStorage"
    •  HybirdStorage"
    •  CacheStore"
    •  JSZhuyin!
    •  JSZhuyinServer"
    •  JSZhuyinServerLoader"
    •  JSZhuyinServerWorkerLoader"
    •  JSZhuyinServerIframeLoader"
    •  JSZhuyinClient!
    •  JSZhuyinLayoutMapper"
    •  JSZhuyinWebIME
    

    View Slide

29. 挑戰
    •  無法延遲目前的 keyboardEvent，必須要提供 sync
    response"
    •  Race condition"
    •  IndexedDB in worker thread is not available in
    Firefox (yet, bug 701634)"
    •  … 說不定全部做完

    View Slide

30. meta
    •  Mozilla is hiring in Taipei, for Firefox OS!"
    •  MozTW 志工招募中！"
    •  Code: https://github.com/timdream/jszhuyin"
    •  Demo: http://timdream.org/jszhuyin/"
    •  貓：

    View Slide