Personnaliser le clavier dans Firefox OS

Statut de l'application clavier Gaia intégrée & architecture système

Deux fonctionnalités majeures du clavier ont été implémentées dans Firefox OS depuis octobre 2013 :

• Une option de compilation pour activer ou désactiver l'inclusion du clavier/dictionnaire du vérificateur d'orthographe dans la compilation de l'application clavier Gaia intégrée (voir bug 884752).
• Une fonctionnalité au niveau du système d'exploitation qui permet à l'utilisateur d'installer une application clavier tierce depuis le Firefox Marketplace. Elle sera disponible à partir de Firefox OS v2.0. Voir bug 816869 et bug 964670 pour plus de détails.

Pour ajouter un nouvel agencement de clavier sur votre téléphone, vous pouvez mettre un fichier d'agencement dans Gaia et compiler l'application clavier en utilisant la configuration de compilation, ou développer votre propre application clavier et l'installer sur le téléphone. Nous allons voir comment réaliser chacune de ces opérations.

Développer votre propre application clavier

Vous pouvez vous servir de l'application clavier de Gaia comme d'un modèle. Les idées de base sont :

• Dans le fichiermanifest , déclarez votre application comme ayant le role de input dans la propriété role.
• Assurez-vous d'avoir spécifié la permission input dans la propriété permissions

Une fois que c'est fait, vous pouvez installer votre clavier et il sera affiché dans la moitié basse de l'écran à chaque fois que l'utilisateur sera sur un champ de saisie. Pour gérer l'espace pris par le clavier, vous pouvez :

• utiliser la méthode classique window.resizeTo pour mettre à jour la surface qui doit être prise par l'application
• utiliser la nouvelle navigator.mozInputMethod API pour modifier le contenu en fonction de l'input. Voir la méthode WebIDL de l'API pour plus de détails. Beaucoup de ces méthodes affichent les mêmes caractères mais génèrent pourtant des évènements différents (KeyboardEvent, CompositionEvent, etc), alors assurez vous d'utiliser la bonne méthode selon le cas d'utilisation(en anglais).

Inclure un agencement personnalisé dans l'application clavier de Gaia

1. Voir le fichier CONFIGURE de l'application clavier pour plus d'informations. Selon les langues à ajouter, vous devrez éventuellement ajouter un dictionnaire ou ajouter un Input Method (IME) interactif (pour les langages asiatiques)
2. Si vous ajoutez des agencements pour de nouvelles langues, vous pouvez les ajouter comme agencements par défaut dans build/config/keyboard-layouts.json.

IME Asiatiques

Les langues de l'Asie orientale (le chinois, le japonais, et le coréen) utilisent une graphie composée de milliers de caractères. Comme il est impossible d'avoir des milliers de touches sur un clavier matériel ou logiciel, les utilisateurs se servent d'un programme d'indexation appelé éditeur de méthode de saisie (ou input method editor) (IME) qui permet de convertir une série de symboles en caractères.

La façon dont les symboles doivent être convertis et l'efficacité de la méthode reposent sur l'implémentation du programme (et repose souvent sur la science du traitement du langage naturel qui ne peut être traitée entièrement ici). Pour économiser de la mémoire, il est conseillé que les données soient compilées dans un blob binaire et interprétées comme un tableau buffer. Les structures JSON complexes ne fonctionneront pas sur certains appareils.

L'Interface du moteur IM dans l'application clavier de Gaia

Si vous disposez d'une bibliothèque IME pour convertir des symboles en caractères, vous devrez utiliser l'interface définie dans l'application clavier de Gaia pour recevoir des symboles et afficher des caractères. La version de l'API est documentée sur Github.

Nous encourageons les implémentations d'IME pour affiner cette API de Gaia.

Faire fonctionner le moteur IM avec l'agencement

Pour faire fonctionner le moteur IM avec votre agencement de clavier :

1. Ajoutez un agencement dans layout.js comme décrit précédemment.
2. Utilisez la propriété imEngine pour faire référence au moteur IM. Lorsque l'agencement est activé, l'application de clavier chargera le script situé à  keyboard/js/imes/<moteurIM>/<moteurIM>.js.
3. Paramétrez les API pour recevoir/envoyer des touches/caractères lorsque le script est chargé et initialisé.
4. Gérez les saisies de l'utilisateur comme vous le souhaitez. Généralement, lorsque l'utilisateur utilise des touches du clavier, cela envoie des données au moteur IM.

Implémentations connues :

• JSZhuyin est la première implémentation du clavier Gaia avec un moteur IM asiatique, pour le chinois traditionnel et qui intègre l'IME Zhuyin.
• JSKanji est un prototype de moteur IM pour le japonais.
• JSPinyin est écrit pour le chinois simplifié et fonctionne en saisissant des symboles Pinyin.
• Pour démonstration, Chewing, est une version C/C++ open-source de l'IME Zhuyin pour le chinois traditionnel et a été cross-compilé avec emscripten puis lié au clavier Gaia.
• JSHangul est un prototype de moteur IM pour le coréen et est en cours de développement.

Les nouvelles locales et la localisation

Ce qui suit peut s'appliquer aux systèmes d'écriture alphabétiques, ceux qui utilisent un alphasyllabaire (comme la devanagari) ou un système idéographique (comme le chinois) sont plus complexes.

Généralement, deux éléments sont nécessaires : un clavier et un lexique (pour la prédiction du texte).

Créer un agencement clavier

L'agencement du clavier est contenu dans un fichier JavaScript et définit les touches du clavier et la correspondances entre les touches et les lettres et les symboles, ainsi que les options de clavier utilisées avec les pressions longues. La méthode la plus simple consiste à récupérer un clavier existant sur GitHub, de le renommer et de l'ajuster.

Tout d'abord, il faut changer l'en-tête. Si, par exemple, votre clavier d'origine est proche du clavier anglais (en-US) et que vous voulez en créer un pour la locale gaélique écossaise (gd), vous pouvez éditer le fichier suivant (grâce à un éditeur comme Notepad++) :

Keyboards.en = {
 label: 'English',
 shortLabel: 'En',
 imEngine: 'latin',
 types: ['text', 'url', 'email', 'number', 'password'],
 autoCorrectLanguage: 'en_us',
 menuLabel: 'English',

en :

Keyboards.gd = {
 label: 'Scottish Gaelic',
 shortLabel: 'gd',
 imEngine: 'latin',
 types: ['text', 'url', 'email', 'number', 'password'],
 autoCorrectLanguage: 'gd_gb',
 menuLabel: 'Gàidhlig',

Le champ label doit être celui de votre langue en anglais, le champ shortLabel ne doit pas mesurer plus de trois caractères. Il sera utilisé comme abréviation sur le clavier afin que l'utilisateur sache quel langage il utilise. Vous pouvez utiliser le code ISO de la langue ou autre chose si vous pensez que c'est pertinent. Le champ menuLabel est le nom de la langue exprimé dans la langue en question : c'est ce que l'utilisateur verra dans le menu des options.

Si l'agencement du clavier est proche de celui que vous souhaitez, la seule chose à faire consiste à modifier les caractères alternatifs (auxquels on accède avec une pression longue sur la touche) :

alt: {
  a: 'áàâäåãāæ',
  c: 'çćč',
  e: 'éèêëēę€ɛ',
  i: 'ïíìîīį',
  o: 'öõóòôōœøɵ',
  u: 'üúùûū',
  s: 'ßśš$',
  S: 'ŚŠ$',
  n: 'ñń',
  l: 'ł£',
  y: 'ÿ¥',
  z: 'žźż',
  '.': ',?!;:'
},

Vous pouvez ainsi changer l'ordre des caractères affichés lors de la pression longue. Pour notre exemple, le gaélique utilise plus d'accents graves que d'accents aigus et on peut changer l'ordre en :

a: 'àáâäåãāæ',

On peut aussi vouloir proposer des consonnes pointées et ajouter de nouvelles lignes comme celle-ci :

b: 'ḃ',

On peut également vérifier l'agencement alternatif (celui qui propose les nombres, la ponctuation, etc.) et le symbole monétaire affiché.

Créer un lexique

Avoir un lexique permet de proposer une prédiction à la saisie (plutôt que les utilisateurs aient à taper chaque lettre de chaque mot). Pour le construire, vous avez (idéalement) besoin d'un corpus de mots classés par fréquence d'utilisation. Par exemple, le mot demain est plus fréquemment utilisé que démiurge et devrait donc être proposé avant lorsque l'utilisateur saisit un texte.

Pour le faire, on assigne des nombres de 1 (fréquence la plus faible) à 255 (fréquence la plus forte) à chaque mot (c'est-à-dire chaque ligne) du lexique (un fichier XML dont vous pouvez trouver un exemple ici). Voici ce que vous devrez créer :

<wordlist locale="gd" description="Gàidhlig" date="1401554807" version="1">
 <w f="255" flags="">a</w>
 <w f="254" flags="">an</w>
 <w f="247" flags="">agus</w>

Même si le corpus est construit rapidement à partir d'un texte suffisamment important (et en comptant les fréquences des mots de ce corpus), cela permettra d'assurer la fonctionnalité de prédiction. Si vous ne disposez pas de telles données au format numérique pour votre locale, utilisez votre connaissance du lexique pour trier manuellement les termes les plus communs selon vous.

Construire les fichiers

Une fois que vous disposez du fichier javascript et du fichier de lexique, allez dans ce répertoire gaia puis ouvrez Makefile. Ajoutez le nom du dictionnaire à votre liste (si, pour l'exemple, il est nommé gd_wordlist.xml), cela sera :

ga.dict \
gd.dict \

Assurez vous que le fichier gd_worldlist.xml soit dans le répertoire puis lancez $ make gd.dict

Si vous êtes arrivés jusqu'à ce point et que vous n'arrivez pas à passer cette dernière étape de construction, merci de remplir un bug (Composant : Gaia Keyboard) et de joindre vos fichiers en expliquant le problème. Quelqu'un devrait pouvoir vous aider. Assurez-vous de soumettre le correctif comme une pull request, et de le marquer à revoir (review) par quelqu'un, sinon, le bug pourra passer inaperçu.

Tester une nouvelle locale

Une fois que vous avez construit et envoyé les fichiers pour la nouvelle locale, vous pouvez simplement tester votre clavier et lexique sur la page web de démonstration qui utilise l'application clavier. Vous pouvez le clôner et l'essayer localement depuis ici. En cliquant sur 'En', vous pouvez parcourir les différentes locales. Si vous ne pouvez pas trouver la vôtre, cliquez sur le bouton situé en haut à droite pour cocher/décocher les claviers que vous souhaitez tester.

Discussion et QA (qualité)

Rendez-vous sur la liste de diffusion dev-gaia ou sur le canal #gaia sur irc.mozilla.org (voir Mozilla IRC (en anglais) pour plus de détails. #mozilla-taiwan est le canal chinois pour ce sujet.