NIME: 使用 nodejs 快快樂樂開發輸入法

自我介紹

• Lee
• 一位上班被 Pointer 荼毒、下班陷入 Callback 地獄的工程師。
• 新手前端工程師 @ 新芽網路 25sprout
• jessy1092 @ Github
• 閒暇之餘在 g0v 填坑。

大綱

• 緣起
• 原理
• Live Demo
• 結語

緣起

• PIME - 用 Python 快速開發 Windows 的中文輸入法 (COSCUP 2015)
• 史上首次用 python 開發 TSF 輸入法
• 不需要了解 Windwos TSF 或 IMM32
• 不需要寫 C++
• Server/Client 架構
• 支援 Windows Vista - 10(32 & 64 bit)

Why NodeJS?

PCMan: 我不會寫 node.js

• 開發簡單快速
• PIME IPC 使用 json 做溝通
• 可以使用眾多 node modules
• 吸引 JS 工程師寫輸入法

JS 離統一世界又邁進了一步

原理

st=>start: Application
e=>end: IME Server
op=>operation: Windwos TSF
op2=>operation: PIMETextService.dll
op3=>operation: libpipe.dll
op4=>operation: nodejs named pipe server

st->op->op2->op3->op4->e

• libpipe.dll
  • C named pipe server
  • 隱藏 named pipe server 細節，讓 js/python 可以簡單啟動 named pipe server
• lib/pipe.js
  • 使用 node-ffi binding dll

Application -> IME Server: filterKeyDown: "A"
Note right of  IME Server: 決定要不要處理
IME Server -->Application: return : true
Application -> IME Server: onKeyDown: "A"
Note right of  IME Server: 處理 A -> B
IME Server -->Application: CommitString: "B"
Note left of Application: Application 顯示 B
Application -> IME Server: 下一次 key event

輸入法狀態

st=>start: init
e=>end: onDeactivate
op=>operation: onActivate

st->op->e

每個應用程式切換到輸入法，即建立連線( ->init->onActivate )，切離輸入法，即斷掉連線(->onDeactivate)。

第一個 request

{
  "method": "init",
  "id": "{f80736aa-28db-423a-92c9-5540f501c939}",
  "isWindows8Above": True,
  "isUiLess": False,
  "isConsole": False, 
  "isMetroApp": True, 
  "seqNum": 1
}

response 範例

{"success": True, "seqNum": 1}

第二個 request

{
  "method": "onActivate",
  "seqNum": 0, 
  "isKeyboardOpen": True
}

response 範例

{
  'customizeUI': {
    'candPerRow': 3, 
    'candFontSize': 16, 
    'candFontName': 'MingLiu', 
    'candUseCursor': True
  }, 
  'seqNum': 0, 
  'setSelKeys': '1234567890', 
  'addPreservedKey': [{
    'modifiers': 4, 
    'keyCode': 32, 
    'guid': '{f1dae0fb-8091-44a7-8a0c-3082a1515447}'
  }],  
  'success': True, 
  'addButton': [{
    'id': 'switch-lang', 
    'icon': 'icon file path', 
    'commandId': 1, 
    'tooltip': '中英文切換'
  }, {
    'id': 'windows-mode-icon', 
    'icon': 'icon file path', 
    'commandId': 4, 
    'tooltip': '中英文切換'
  }, {
    'id': 'switch-shape', 
    'icon': 'icon file path', 
    'commandId': 2, 
    'tooltip': '全形/半形切換'
  }, {
    'id': 'settings', 
    'icon': 'icon file path', 
    'type': 'menu', 
    'tooltip': '設定'
  }]
}

按鍵狀態

st=>start: filterKeyDown
e=>end: onKeyUp
op=>operation: onKeyDown
op1=>operation: filterKeyUp

st->op->op1->e

按下 a 按鍵

{
  "seqNum": 2,
  "charCode": 97,
  "keyCode": 65, 
  "method": "filterKeyDown",
  "isExtended": False,
  "keyStates": [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 129, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0], 
  "scanCode": 0, 
  "repeatCount": 1
}

NIME 初始化設置

ime.json

{
  "name":"emojime",
  "version": "0.3.0",
  "guid": "{A381D463-9338-4FBD-B83D-66FFB03523B3}",
  "locale": "zh-TW",
  "icon": "icon.ico",
  "win8_icon": "",
  "moduleName": "index",
  "serviceName": ""
}

• GUID 可以使用 GUID Generator 產生
• moduleName 為 NIME 讀取的 js 檔案名稱

index.js

module.exports = {
  textReducer(request, preState) {
    return preState;
  },

  response(request, state) {
    return {success: true, seqNum: request['seqNum']};
  }
}

The case convertor. Part 1.

if (request['method'] === 'filterKeyDown') {

  let {charCode, seqNum} = request;
  let char = String.fromCharCode(charCode);

  let response = {return: false, success: true, seqNum};

  if ((char >= 'a' && char <= 'z') || (char >= 'A' && char <= 'Z')) {
    response['return'] = true;
  }
  return response;
}

https://github.com/jessy1092/nime-demo

The case convertor. Part 2.

if (request['method'] === 'onKeyDown') {

  let {charCode, seqNum} = request;
  let char = String.fromCharCode(charCode);
  let commitString = '';

  if (char >= 'a' && char <= 'z') {
    commitString = char.toUpperCase();
  }
  if (char >= 'A' && char <= 'Z') {
    commitString = char.toLowerCase();
  }
  return {success: true, commitString, seqNum};
}

https://github.com/jessy1092/nime-demo

server.js

let nime = require('nime');

let service = require('./index');
let config  = require('./ime.json');

config['textService'] = service;

let server = nime.createServer(undefined, [config]);

server.listen();

Live Demo

• 大小寫轉換輸入法

輸入法呈現區塊

• Commit: 輸出字
• Composition: 組字框
• Candidate: 選字框

Commit

• commitString: 決定要輸出的字樣

{
  "success":true,
  "seqNum":50,
  "commitString":"❤️"
}

Composition

• compositionString: 決定組字框的字樣
• compositionCursor: 決定組字框的游標位置

{
  "success":true,
  "seqNum":92,
  "compositionString":":rock",
  "compositionCursor":5
}

Candidate

• showCandidates: 決定是否顯示選字框
• candidateList: 決定選字框的選單
• candidateCursor: 決定選字框的游標位置

{
  "success":true,
  "seqNum":50,
  "candidateList":[
    "☘️ :shamrock:","☘ :shamrock:","� :rocket:"
  ],
  "showCandidates":true
}

Live Demo

• emoji 輸入法
• JS 注音

結語

JS 開發輸入法元年！！！

• 撰寫文件
• 更好的 IPC 架構 (issue #11)
• NIME 支援更多輸入法功能。語言列、偏好設定等等。
• 台語輸入法
• NIME web 模擬器
• 跨平台

Reference

• PIME - 用 Python 快速開發 Windows 的中文輸入法
• https://github.com/EasyIME/PIME
• https://github.com/EasyIME/NIME
• https://github.com/EasyIME/emojime
• https://github.com/jessy1092/nime-demo
• https://github.com/jessy1092/nime-jszhuyin
• libIME 架構說明
• https://github.com/chewing/libchewing
• KeyCode