經驗分享：用 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. 經驗分享：
2. 聽說 COSCUP 投影片⼀一定要放貓…
3. 輸入法 ㄔㄞ
4. 拆
5. 功能更多，當然不只查表 有吃的嗎？ 還有什麼？
6. DEMO http://timdream.org/jszhuyin/" JS 注音 Firefox 附加元件
7. JS注音：自動選字手機輸入法 •  自動選字：ㄔㄞ ㄓㄥˋㄈㄨˇ → 拆政府 •  首碼／聲符輸入：ㄔㄓㄈ → 插枝法 •  混合：ㄔㄞㄓㄈ → 拆政府 •  建議：政府 → ~機關、~機構 •  連續選字
8. 詞庫
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
10. 我今天要   5MB  的飼料
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 …"
12. 插播：DOMRequest var req = doSomething(); req.onsuccess = function … req.onerror = function … req.addEventListener(‘success’, handler); " •  目前新設計的 API 會偏向使用 Promise / Future" •  別忘了 ECMAScript 6 還會有 yield
13. 選字
14. 窮舉法 明|天拆政府 明天拆|政府 明天拆政|府 明|天拆|政府 明天|拆|政府
15. Composition of a number h&ps://en.wikipedia.org/wiki/Composi8on_%28number_theory%29#Examples
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)" •  通通丟進去查，加總積分來比就對了！"
17. 遞迴查詢，連續選字 •  ㄌㄧㄥˊㄕˊㄓㄥˋㄈㄨˇ" •  零食政府 •  零食 •  零時 •  零 •  靈 •  玲 •  … •  輸出「零時」，扣掉兩個 發音繼續查詢
18. 遞迴查詢，連續選字 •  ㄓㄥˋㄈㄨˇ" •  政府 •  政 •  正 •  證 •  症 •  鄭 •  … •  選擇「政府」
19. 經驗分享
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"
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
22. 踩雷 •  IndexedDB 重複查詢，每次回傳的 object 互為 copy 而非 reference" •  Key •  “ㄊㄞˊ-ㄅㄟˇ-ㄕˋ” …? •  很有結構的物件結構 •  [["台",-2.946], ["臺",-3.501], ["抬",-4.771], ["颱",-4.809], … ];
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 讀書！
24. JSZhuyin v.2013JUL •  Client-Server 架構，用 postMessage() 溝通 Script  in   Browser  context Script  in     Web  Worker/iframe           .   JSON/IndexedDB   Data  Storage UI/Event   Listeners
25. Conference Driven Development" 研討會死線式開發
26. Conference Driven Development
 （暈）
27. Classes •  BopomofoEncoder" •  StorageBase" •  JSONStorage" •  IndexedDBStorage" •  HybirdStorage" •  CacheStore" •  JSZhuyinIME …" •  IMEPostMessenger …" •  JSZhuyinLoader … ⁉- •  JSZhuyinWorkerLoader" •  JSZhuyinIframeLoader" •  JSZhuyin … " •  JSZhuyinLayoutMapper" •  WebJSZhuyinIME … "
28. Classes •  BopomofoEncoder" •  StorageBase" •  JSONStorage" •  IndexedDBStorage" •  HybirdStorage" •  CacheStore" •  JSZhuyin! •  JSZhuyinServer" •  JSZhuyinServerLoader" •  JSZhuyinServerWorkerLoader" •  JSZhuyinServerIframeLoader" •  JSZhuyinClient! •  JSZhuyinLayoutMapper" •  JSZhuyinWebIME
29. 挑戰 •  無法延遲目前的 keyboardEvent，必須要提供 sync response" •  Race condition" •  IndexedDB in worker thread is not available in Firefox (yet, bug 701634)" •  … 說不定全部做完
30. meta •  Mozilla is hiring in Taipei, for Firefox OS!" •  MozTW 志工招募中！" •  Code: https://github.com/timdream/jszhuyin" •  Demo: http://timdream.org/jszhuyin/" •  貓：