と Gaiaのキーボードアプリ

mozInputMethod
WebAPI
と
Gaiaのキーボードアプリ
by mar
Firefox OS コードリーディングミートアップ #11
2014-11-15
Firefox OS の標準キーボード
● キーボードの種類
● mozInputMethod API
● キーボードアプリの作り方
● アプリの製作例
●
2/18
Firefox OS の標準キーボード
●
Gaia上にJavaScriptで実装。
–
フォーム要素とcontentEditable属性付き要素で有効。
●
ver. 2.2現在、65言語、63種のレイアウトに対応。
●
ブラウザでも試せる。
●
–
http://timdream.org/gaia-keyboard-demo/#en
–
http://janjongboom.com/gaia-keyboard-demo/
キーボードのUX仕様。
–
Bug 983043 - (keyboard-ux-update) [meta] Keyboard
UX update
3/18
キーボードの種類
●
フルキーボード、テンキー
–
各フォーム要素の type 属性に応じて、適切なレイアウトに
切り替わる。
text, url, email, number, password, ...
●
手書き入力
–
●
Bug 1020847 - [Keyboard][Handwriting] Support
handwriting for Simplified Chinese
絵文字入力
–
Bug 993899 - [Keyboard] To support Emoji in keyboard
4/18
mozInputMethod API (1)
●
Geckoに実装された仮想キーボード用WebAPI
–
–
–
–
–
–
Gecko 31 (Firefox OS 2.0) 以降で利用可能。
WebAPI/KeboardIME
mozilla-central/dom/webidl/InputMethod.webidl
W3CのInputMethod Editor APIとは別物。
以前の navigator.mozKeyboard。
'dom.mozInputMethod.enabled', 'true'
5/18
mozInputMethod API (2)
mozIM = window.navigator.mozInputMethod
●
mozIM.mgmt
–
●
mozIM.oninputcontextchange
–
●
キーボード切り替えなど、グローバルメソッドを提供
するプロパティ。
フォーカスされた入力対象の変化を通知するイベン
ト。
mozIM.inputcontext
–
入力を制御するためのプロパティ。重要。
6/18
mozInputMethod API (3)
var mgmt = mozInputMethod.mgmt
●
mgmt.showAll()
–
●
mgmt.next()
–
●
次のキーボードに切り替える。
mgmt.supportsSwitching()
–
●
キーボードリストから切り替える。
切り替え可能か真偽値を返す。
mgmt.hide()
–
キーボードを隠す。フォームをタップすると再表示。
7/18
mozInputMethod API (4)
mozInputMethod.oninputcontextchange
●
inputcontextの状態変更を監視するイベント。
イベントトリガ発火時に・・・
●
アプリのウィンドウサイズ変更に追随しておく
–
●
window.resizeTo()でキーボードアプリの占有
サイズを更新する。
inputContextを再取得しておく
–
キーボード切り替えやinputContextが破棄され
た場合に再取得する。
8/18
mozInputMethod API (5)
var ictx = mozInputMethod.inputcontext
●
ictx.type
–
●
ictx.inputType
–
●
入力フィールドの形式を返す。(type属性)
ictx.inputMode
–
●
入力フィールド名を返す。(要素名、contentEditable)
入力フィールドの入力モードを返す。(inputMode属性)
ictx.lang
–
入力フィールドの言語コードを返す。(lang属性)
9/18
mozInputMethod API (6)
●
●
ictx.sendKey(keyCode,
charCode, modifiers, repeat)
–
フォームに直接入力するメソッド。
–
keyCode: KeyEvent.DOM_VK_RETURN など。
–
charCode: str.charCodeAt(0)
–
modifiers: 修飾キーのコード。
ictx.textBeforeCursor
ictx.textAfterCursor
–
カーソル前後のすべての文字列を返す。
10/18
mozInputMethod API (7)
●
ictx.selectionStart
ictx.selectionEnd
–
●
●
現在のカーソル位置を返す。
ictx.setSelectionRange(start,
–
選択範囲を設定する。
–
start: 文字列の選択開始位置。
–
length: 選択する長さ。
length)
ictx.onselectionchange
–
カーソル位置や選択範囲の変更を監視するイベント。
11/18
mozInputMethod API (8)
●
ictx.replaceSurroundingText(text,
length)
–
●
●
カーソル付近の文字列を置き換える。
ictx.deleteSurroundingText(offset,
–
offset,
length)
カーソル付近の文字列を削除する。
ictx.onsurroundingtextchange
–
カーソル前後の文字列の変更を監視する。
12/18
mozInputMethod API (9)
●
ictx.setComposition(text,
–
編集モードのテキストをセットする。
編集中のテキストはまだフォームに入力されない。
–
編集中のカーソル位置をcursorで指定し、フォームの
カーソル位置と別に管理する必要がある。
編集中のテキストの状態（変換中、選択中の文節？）は
clausesで指定する。
–
●
cursor, clauses)
ictx.endComposition(text)
–
setCompositionによる編集中のテキストを確定
し、textをフォームに入力する。
13/18
キーボードアプリの作り方 (1)
●
●
Customizing the keyboard in Firefox OS
独自のキーボードアプリを作る場合
–
manifest.webappに以下を追加する
“type”: “privileged”,
“role”: “input”,
“permissions”: { “input”:{“description”:{“”}} },
“inputs”: {...}
–
デモアプリのLOL Keyboardを参考にしてコードを書
く。
14/18
キーボードアプリの作り方 (2)
●
標準キーボードにレイアウト追加する場合
–
–
キーボードレイアウト用のJSONファイルを作成す
る。
ラテン語系列の場合、単語リストを作成し、辞書ファ
イルに変換する。
xml2dict.py (.xml → .dict)
–
前述のキーボードデモページで動作を確かめる。
15/18
アプリの製作例 (1)
●
Uninput Keyboard
–
–
–
ユニコードの文字コード入力キーボード
Firefox Marketplace で公開中！
https://marketplace.firefox.com/app/uninput/
次のバージョンから有料化の予定。
16/18
アプリの製作例 (2)
●
2-Touch Keyboard
–
–
–
–
2タッチ方式の日本語入力キーボード
いわゆるポケベル打ち。
ひらがな、英数字、記号を入力可能。辞書なし。
カタカナ変換、半角変換、記号変換、Undo機能あり。
17/18
デモ
18/18

Download Report