Multi language input method framework built in Javascript

1. Kunihiko MIYOSHI
http://colspan.net/
http://hangulime.com/
Twitter ID : @colspan
1

2. JS_IM Features
 Light-weight multilanguage input method framework
 Japanese IME (53kb)
 Korean IME (46kb)
 Built in purely JavaScript
 Firefox
 IE (5.5 - 8)
 Chrome / Safari (Webkit)
 Easy implementable
 For any textboxes
 Bookmarklet
2

3. Statistics – Hangul IME
 First release on February 2006
 18000 sessions per a month
 From U.S., Canada, South Korea, Australia …
3

4. Public Responce
 Tweet
 감동의 한글입력기. . http://hangulime.com/
http://twitter.com/DongwooKim/status/3380912930
 Links
 http://cafe.naver.com/appleiphone.cafe?iframe_url=/Ar
ticleRead.nhn%3Farticleid=367588
 http://bumjin.egloos.com/4281726
 http://sambulsik.tistory.com/46
 http://warpgate.tistory.com/25
4

5. Working even on…
 WebOS (Webkit)
 Sigmarion 3 (Mobile IE 5)
 iPad / Kindle
5

6. Architecture
 JS_IM Method
 Language inherent process
 Transform string
from keycode JS_IM Method
 JS_IM Core (15kb)
 Hook element
 Caret control JS_IM Core
 Event handling
 String Buffer
 User Interface Cross Browser Library
 Relay keycode to method
 Cross Browser Library (15kb)
 common.js
 caret.js Web Browser
 keycode.js
6

7. Working Sequence - Core library
1. Hook HTML element (input or textarea) of web page
2. Detect key input event and get keycode
3. Relay keycode to language method library
4. Update buffer string by transformed result
5. Insert buffer string to HTML element if user
accepted
key event keycode
JS_IM core
HTML element JS_IM method
buffer string
buffer string transformed string
accepted string 7

8. Working Sequence - Hangul IME
1. Transform keycode to Hangul character using
johab.js
2. Update buffer string
3. Output Hangul to JS_IM core by 1 character at a time
JS_IM_hangul
keycode
JS_IM core
transform to Hangul
buffer string johab.js
new buffer string
accepted string
8

9. Working Sequence – Japanese IME
1. Transform alphabet to hiragana string using roma.js
2. Update buffer string
3. Throw hiragana string to web API by user direction
4. Get transformed candidate strings from API
5. Display candidates as list
6. Output string to JS_IM core if user accepted
keycode JS_IM_vje hiragana string
JS_IM core
transform to hiragana Yahoo! API
buffer string (external)
roma.js
new buffer string
accepted string transformed candidates 9

10. Similar Services
 Framework
 http://debugger.ru/projects/virtualkeyboard
 Japanese
 http://ajaxime.chasen.org/
 http://jime.sourceforge.jp/javascriptime/
(branch project of mine )
 Korean
 http://www.hantype.com/
10

11. About author @colspan
 Name : Kunihiko MIYOSHI (三好 邦彦)
 Nationality : Japanese (TOPIK 4th grade)
 Birthdate : 1983/11/12
 Occupation : Engineer of CANON Inc.
 Web site : http://colspan.net/
 Twitter ID : @colspan
11