Libérez votre développeur d'applications internes Partie 30 : Création d'applications multilingues dans Xcode 5

Vous avez une idée d'application mais vous n'avez pas les connaissances en programmation nécessaires pour commencer à la construire ? Dans cette série de blogs hebdomadaires, je vous emmènerai, en tant que non-programmeur, pas à pas dans le processus de création d'applications pour l'iPhone, l'iPod touch et l'iPad. Rejoignez-moi chaque semaine dans cette aventure et vous verrez à quel point il est amusant de transformer vos idées en réalité ! Voici le 30e volet de la série. Si vous venez de commencer, consultez le début de la série ici.

Pour la grande majorité des applications que vous créez, il est extrêmement judicieux de s'assurer que votre application peut être vendue à un maximum d'utilisateurs d'iOS dans un maximum de pays et de langues. L'App Store est disponible dans plus de 150 pays en 40 langues et gère automatiquement les paiements internationaux et la conversion courante pour vous. Il vous suffit de vous assurer que votre application peut prendre en charge une variété de langues. Je vais vous montrer les étapes de base dans ce billet, car nous rendons le projet iAppsReview multilingue.

Maîtrisez votre iPhone en une minute par jour :

Inscrivez-vous à la newsletter "Tip of the Day" de iphonologie et nous vous enverrons chaque jour un conseil pour gagner du temps et tirer le meilleur parti de votre iPhone ou iPad.

Internationalisation et localisation

Avant de commencer, mettons quelques termes au clair. L'internationalisation est le processus de conception de votre application de manière à ce qu'elle puisse supporter plusieurs langues. La localisation est le processus d'adaptation de l'application à une langue et une culture spécifiques.

En gros, vous internationalisez votre application une fois, mais vous la localisez pour chaque langue et culture que vous soutenez.

Que comprend la localisation ?

Lorsque vous pensez à la localisation d'une application, vous imaginez probablement le processus de traduction du texte visible dans une autre langue. Bien que cela représente certainement une grande partie du processus, la localisation comprend :

  1. Traduction de textes statiques dans l'interface utilisateur.
  2. Mise en forme et traduction du texte dynamique généré par votre application au moment de l'exécution.
  3. Fournir des versions multiples d'images contenant du texte ou du contenu spécifique à une culture.
  4. Enregistrement de fichiers sonores pour chaque langue prise en charge.

Dans cet article, je vais aborder les trois premiers points de cette liste.

S'internationaliser pas à pas

Plongeons dans le vif du sujet et internationalisons le projet iAppsReview . Vous pouvez obtenir la dernière version du projet à partir de ce lien . Si vous êtes bloqué en suivant les étapes de ce post, vous pouvez obtenir la version complète du projet à partir de ce lien .

Notez que si vous créez un tout nouveau projet dans Xcode 5, toutes les étapes de cette section sont déjà effectuées pour vous. Cependant, comme nous avons déplacé iAppsReview d'iOS 6 et Xcode 4 à iOS 7 et Xcode 5, nous devons effectuer ces étapes manuellement.

  1. Tout d'abord, j'aimerais que vous regardiez la structure des dossiers du projet avant que nous fassions des changements. Si vous lancez l'application Finder et que vous examinez le projet, vous verrez la structure des dossiers indiquée dans Figure 1 . Remarquez qu'il n'y a qu'un seul sous-dossier, en.lproj , qui contient un fichier InfoPlist.strings . La première partie du nom du dossier indique ma langue par défaut (anglais ou "en"). Nous en apprendrons plus sur le fichier strings plus loin dans ce post. Notez également que le fichier Mainstoryboard est situé dans le dossier racine du projet.

Figure 1 - La structure du dossier du projet

  1. Comme l'interface utilisateur de mon application se trouve entièrement dans le fichier de storyboard, nous devons internationaliser ce fichier pour pouvoir le localiser plus tard pour des langues spécifiques. Pour ce faire, allez dans le navigateur de projet de Xcode et sélectionnez le fichier MainStoryboard .
  1. Ensuite, allez dans l'inspecteur de fichiers en sélectionnant le bouton à l'extrême gauche dans la barre d'outils de l'inspecteur, puis cliquez sur le bouton Localiser... ( Figure 2 ).

Figure 2 - Localisation du storyboard

  1. En appuyant sur la touche Localiser... affiche le dialogue présenté dans Figure 3 . Confirmez l'opération en cliquant sur le bouton Localiser .

Figure 3 - Le dialogue de confirmation de localisation

  1. Si vous retournez dans le Finder, vous verrez maintenant la structure des dossiers illustrée dans la figure 4 , où le fichier de storyboard a été déplacé sous le dossier en.lproj .

Figure 4 - Le fichier MainStoryboard a été déplacé dans le dossier en.lproj .

  1. Notre prochaine étape consiste à mettre en place une base d'internationalisation . Il s'agit d'un mécanisme relativement nouveau pour l'internationalisation de votre application, introduit dans le Xcode 4.5. Au lieu d'avoir un fichier de storyboard séparé pour chaque langue que vous prenez en charge, vous créez un seul fichier de storyboard de base et vous créez simplement des fichiers de traduction de chaîne séparés pour chaque langue que vous prenez en charge.

Pour mettre en place cette base, cliquez sur le tout premier nœud du navigateur de projet pour afficher l'éditeur de projet. Dans la zone de liste située en haut à gauche de l'éditeur de projet, sous Project , sélectionnez iAppsReview , puis cochez la case Use Base Internationalization ( Figure 5 ).

Figure 5 - Cochez la case Utiliser l'internationalisation de la base .

  1. La sélection de cette option lance le dialogue illustré dans la figure 6 . Par défaut, il sélectionne le fichier MainStoryboard pour créer la localisation de base. Cliquez sur le bouton Finish pour continuer.

Figure 6 - Choix des fichiers pour créer une localisation de base

Lorsque vous faites cela, vous pouvez voir qu'une nouvelle langue de base a été ajoutée sous la section Localisations de l'éditeur de projet ( Figure 7 ). Le storyboard dans la langue d'origine sera désormais utilisé comme langue de base pour toutes les autres localisations.

Figure 7 - Une nouvelle langue de base a été ajoutée aux localisations .

  1. Si vous examinez la structure des dossiers du projet dans le Finder, vous verrez qu'un nouveau dossier Base.lproj a été ajouté et que le fichier MainStoryboard a été déplacé dans le nouveau dossier ( Figure 8 ).

Figure 8 - Un nouveau dossier Base.lproj contient le fichier MainStoryboard .

Cela complète notre dispositif d'internationalisation de base. Nous sommes maintenant prêts à localiser le projet pour une langue spécifique.

Ajouter une nouvelle langue

Ajoutons au projet le soutien à la langue espagnole.

  1. Retournez à l'éditeur de projet, cliquez sur le signe plus sous la liste des langues comme indiqué dans Figure 9 .

Figure 9 - Ajouter l'espagnol comme langue soutenue par le projet.

  1. Lorsque vous faites cela, un dialogue apparaît vous demandant de choisir les fichiers et la langue de référence ( Figure 10 ). Acceptez les sélections par défaut et cliquez sur le bouton Terminer .

Figure 10 - Sélectionnez les sélections par défaut et cliquez sur Terminer .

Lorsque vous faites cela, espagnol est ajouté à la liste des localisations dans l'éditeur de projet ( Figure 11 ).

Figure 11 - L'espagnol est ajouté à la liste des localisations .

  1. Si vous allez dans l'application Finder, vous pouvez voir la nouvelle structure des dossiers illustrée dans Figure 12 . Comme vous pouvez le voir, il y a un nouveau dossier espagnol es.lproj qui contient un fichier InfoPlist.strings et Mainstoryboard.strings . Tous les fichiers spécifiques à la langue espagnole se trouveront dans ce nouveau dossier.

Figure 12 - Le nouveau dossier espagnol es.lproj

  1. Ensuite, retournez au navigateur de projet. Remarquez qu'il y a maintenant une flèche à gauche du fichier de storyboard. Si vous cliquez sur cette flèche, elle se développe pour révéler les fichiers indiqués dans Figure 13 . Il y a maintenant un fichier MainStoryboard.strings espagnol . Regardons ce fichier de plus près.

Figure 13 - Le fichier de chaînes de caractères espagnol MainStoryboard .

  1. Dans le navigateur de projet, cliquez sur le fichier MainStoryboard.strings (espagnol) . Ceci affiche le contenu du fichier dans l'éditeur de code comme indiqué dans Figure 14 .

Figure 14 - Le fichier MainStoryboard.strings espagnol

Xcode a cherché dans tout le fichier de storyboard et a trouvé chaque instance de texte et l'a écrite dans ce fichier de chaînes de caractères. Chaque entrée de ce fichier de chaînes de caractères est une paire clé/valeur. La première partie de la clé est l'ID d'objet de l'élément d'interface utilisateur dont le texte a été extrait. Vous pouvez voir l'ID d'un objet en le sélectionnant dans la surface de conception et en allant à la section Document de l'inspecteur d'identité ( Figure 15 ).

Figure 15 - Vous pouvez voir l'ID d'un objet de l'IU dans l'inspecteur d'identité.

Localisation vers une nouvelle langue

Nous sommes maintenant prêts à effectuer la traduction proprement dite du texte de l'interface utilisateur de l'anglais vers l'espagnol. Comme je ne suis pas hispanophone, j'ai utilisé Google Translate pour convertir quelques phrases anglaises en espagnol (toutes mes excuses aux hispanophones !). Ce n'est certainement pas l'approche recommandée dans une application du monde réel. Vous devez trouver quelqu'un qui parle couramment à la fois votre langue de base et la langue vers laquelle vous traduisez afin de pouvoir offrir à vos utilisateurs la meilleure expérience possible. Cependant, nous utiliserons cette technique de force brute pour l'instant.

Cherchez dans le fichier MainStoryboard.strings (espagnol) les clés indiquées dans Figure 16 et remplacez le texte anglais par le texte espagnol qui y est indiqué.

Figure 16 - Traduire le texte anglais en espagnol.

L'avantage de ce nouveau modèle de localisation est que les traducteurs n'ont besoin de travailler qu'avec les fichiers qui se trouvent dans les dossiers spécifiques à la langue. Ils n'ont pas besoin de modifier les fichiers de story-board (bien qu'ils doivent certainement tenir compte du contexte dans lequel le texte est utilisé pour fournir une traduction précise).

Tester la localisation espagnole

Nous sommes maintenant prêts à tester la localisation espagnole dans le simulateur. Pour que cela fonctionne, vous devez généralement retirer l'application du simulateur, nettoyer le projet et réinstaller l'application.

Pour ce faire :

  1. Lancez le simulateur en sélectionnant Xcode> Open Developer Tool> iOS Simulator dans le menu Xcode.
  1. Cliquez à droite du contrôle de page (les points blancs) en bas de l'écran pour passer au deuxième écran d'icônes.
  1. Maintenez votre souris sur l'icône iAppsReview jusqu'à ce que toutes les icônes se mettent à trembler.
  1. Cliquez sur le X dans le coin supérieur gauche de l'icône (Figure 17).

Figure 17 - Supprimer l'application iAppsReview du simulateur.

  1. Lorsque le dialogue de confirmation apparaît, cliquez sur le bouton supprimer pour supprimer l'application du simulateur.
  1. Ensuite, appuyez sur Shift+Command+H pour sortir du mode d'édition.

Nous sommes maintenant prêts à changer la langue par défaut du simulateur pour l'espagnol.

  1. Cliquez à gauche de la page de contrôle dans le simulateur pour revenir au premier écran d'icônes.
  1. Cliquez sur l'icône Settings app.
  1. Sélectionnez Général> International> Langue .
  1. Dans la liste Langue , sélectionnez Espanol ( Figure 18 ).

Figure 18 - Sélectionnez Espanol dans la liste des langues.

  1. Cliquez sur le bouton Fait et vous verrez un message qui dit "Cambiando idioma...", ce qui se traduit par "Réglage de la langue...".
  1. Vous saurez que la sélection a pris effet lorsque vous verrez les icônes de l'écran d'accueil avec les noms espagnols ( Figure 19 ).

Figure 19 - L'écran d'accueil en espagnol

  1. Retournez à Xcode et sélectionnez Produit> Nettoyer dans le menu.
  1. Ensuite, cliquez sur le bouton Run et vous devriez voir le texte espagnol mis à jour dans la première scène de l'application ( Figure 20 ) !

Figure 20 - Texte en espagnol dans le simulateur !

Gestion des modifications du texte du story-board

Tout cela fonctionne très bien une fois que la poussière s'est installée sur votre story-board. Cependant, que se passe-t-il si vous changez le texte du story-board à une date ultérieure ?

Apple dispose d'un outil en ligne de commande appelé ibTool que vous pouvez utiliser pour mettre à jour les fichiers de chaînes de caractères. Pour exécuter cet outil :

  1. Cliquez sur le dossier Applications dans le dock de votre Mac, puis cliquez sur le dossier Utilisations .
  1. Sélectionnez Terminal.app .
  1. Au lancement du terminal, tapez une commande de changement de répertoire (cd) pour vous rendre dans le dossier Base.lproj de votre projet. Par exemple, La figure 21 montre la commande cd que j'ai utilisée pour naviguer vers le dossier Base.lproj sur ma machine developmenet.

Figure 21 - Dans Terminal, changez les répertoires dans le dossier Base.lproj du projet.

  1. Ensuite, vous devez exécuter la commande ibtool dans l'application Terminal comme indiqué dans Figure 22.

Figure 22 - Exécution ibtool depuis une ligne de commande Terminal.

Juste pour être clair, cette commande est :

ibtool MainStoryboard.storyboard --generate-strings-file NewStrings.strings
  1. Vous pouvez maintenant aller dans le dossier Base.lproj, copier les nouvelles chaînes du fichier et les coller dans chaque fichier de chaînes de story-board.

Pour plus d'informations, consultez la rubrique d'aide d'Apple Preparing Your Nib Files for Localization sous la section Using ibtool à ce lien .

Localisation des images

Vous n'avez pas nécessairement besoin de localiser toutes les images de votre application, mais vous devez absolument localiser les images qui contiennent du texte ou qui ont un contexte culturel spécifique. Il se trouve qu'il y a une image dans iAppsReview qui contient du texte anglais que nous devons localiser.

  1. Dans le navigateur de projet, développez le groupe Supporting Files et sélectionnez le fichier AddImage.png et vous verrez que l'image contient le texte Add Image ( Figure 23 ).

Figure 23 - Les images contenant du texte doivent être localisées !

  1. Allez dans l'inspecteur de fichiers en cliquant sur le bouton à gauche dans la barre d'outils de l'inspecteur.
  1. Cliquez sur le Localiser... montré dans Figure 24 .

Figure 24 - Localisation du fichier AddImage.png .

Un dialogue de confirmation s'affiche ( Figure 25 ).

Figure 25 - Confirmation de la localisation de AddImage.png .

  1. Cliquez sur Localize et vous verrez alors plusieurs langues listées sous la section Localization (Figure 26).

Figure 26 - Plusieurs langues sont énumérées pour le fichier image.

  1. Cochez la case espagnol . Cela ajoute une copie du fichier image au projet. Pour le voir, allez dans le navigateur de projet, cliquez sur la flèche à gauche du fichier AddImage.png et vous verrez les versions Base et Spanish du fichier ( Figure 27 ).

Figure 27 - Les images de la base et de la base espagnole .

  1. Si vous allez dans l'application Finder et vérifiez la structure des dossiers du projet, vous verrez qu'il y a une copie du fichier AddImage.png stockée dans le dossier Base.lproj et une autre dans le dossier es.lproj .

Figure 28 - Nouvelles copies du fichier AddImage.png

Comme vous pouvez l'imaginer, ces nouvelles images ne sont pas localisées, elles sont simplement des copies du fichier image original. Nous devons créer une version du fichier image qui fonctionne bien en langue espagnole. Plutôt que de traduire le texte de l'image, j'ai décidé de créer un bouton sans texte que je peux utiliser pour la version en langue espagnole ainsi que pour d'autres langues. Il s'agit simplement d'une image d'un signe plus. Nous allons supprimer le fichier AddImage.png existant sous le répertoire es.lproj et le remplacer par un nouveau.

  1. Allez dans l'application Finder et supprimez le fichier AddImage.png du dossier es.lproj .
  1. Faites glisser le fichier AddImage-es.png depuis le dossier racine du projet et déposez-le dans le dossier es.lproj .
  1. Renommez le fichier image en AddImage.png . Ceci remplace le fichier original.

Suivez maintenant ces trois mêmes étapes pour le fichier AddImage@2x.png (il s'agit de la version du fichier qui est utilisée lorsqu'il est exécuté sur un appareil avec un affichage Retina).

Pour tester la nouvelle image :

  1. Appuyez sur le bouton "Run" de Xcode .
  1. Lorsque l'application apparaît dans le simulateur, sélectionnez l'option Écrire un commentaire .
  1. Vous devriez voir l'image du signe plus dans la figure 29 !

Figure 29 - L'image du signe plus espagnol au moment de l'exécution.

Internationalisation et localisation des cordes dynamiques

Souvent, les applications contiennent un code de programme qui définit dynamiquement le texte des contrôles ou d'autres messages au moment de l'exécution. Évidemment, si votre application contient des chaînes de caractères codées en dur, vous devez vous assurer que vous fournissez des traductions de ces chaînes pour toutes les langues que votre application prend en charge. Vérifions un cas de ce type de texte dans iAppsReview .

  1. Dans le navigateur de projet, sélectionnez le fichier SettingsViewController.m . Notez les chaînes anglaises codées en dur Done et Cancel indiquées dans Figure 30 .

Figure 30 - Les chaînes Done et Cancel sont codées en dur en anglais.

  1. Modifiez le code dans le fichier comme indiqué dans la figure 31.

Figure 31 - Utilisez NSLocalizedString pour tout texte codé en dur dans votre application.

La fonction NSLocalizedString obtient une chaîne localisée à partir d'un fichier de chaînes de caractères pour la langue courante. Elle prend deux arguments :

  • Une clé
  • Un commentaire

Au moment de l'exécution, NSLocalizedString utilise la clé pour rechercher la traduction de la langue courante dans un fichier de chaînes de caractères. Le commentaire est important ! Il est utilisé par les traducteurs pour fournir le contexte du texte à traduire.

En effectuant cette étape pour tout le texte codé en dur de votre application, vous internationalisez ces chaînes de caractères et les faites parvenir à un endroit où elles peuvent être localisées. Faisons cela maintenant.

  1. Allez dans l'application Terminal et exécutez les commandes indiquées dans Figure 32 .

Figure 32 - Exécution de la commande groupes électrogènes .

Par souci de clarté, vous devez d'abord lancer une commande de modification du répertoire (cd) qui vous amène au répertoire racine de votre projet :

cd Documents/iAppsReview/iAppsReview

Ensuite, vous devez exécuter la commande genstrings . Cet outil en ligne de commande lit tous les fichiers d'implémentation (.m) de votre application, recherche la fonction NSLocalizedString et place toutes les chaînes qu'il trouve dans un fichier nommé Localized.strings . Voici la commande :

find . -name \*.m | xargs genstrings -o en.lproj/
  1. Si vous allez dans l'application Finder, vous pouvez voir le fichier Localizable.strings qui a été ajouté au dossier en.lproj du projet ( Figure 33 ).

Figure 33 - Le fichier Localizable.strings nouvellement généré .

  1. Ajoutons ce nouveau fichier au projet. Allez dans le navigateur de projet, faites un clic droit sur le groupe Supporting Files et sélectionnez Add Files to "iAppsReview"... dans le menu contextuel. Dans le dialogue Ajouter des fichiers, sélectionnez le fichier Localizable.strings et cliquez ensuite sur Ajouter ( Figure 34 ).

Figure 34 - Ajouter le fichier Localizable.strings au projet.

  1. Examinons le contenu de ce fichier de chaînes de caractères. Allez dans le navigateur de projet et sélectionnez le fichier Localizable.strings . Vous verrez le contenu affiché dans Figure 35 .

Figure 35 - Chaînes.localisables contenus

L'utilitaire genstrings a donc trouvé les deux occurrences de NSLocalizedString que nous avons ajoutées au projet, a extrait les commentaires que nous avons ajoutés ainsi que la traduction de base pour chacune. Sur le côté gauche du signe égal, la clé est "Cancel" et le texte de base est "Cancel", et sur la deuxième ligne, la clé est "Done" et le texte de base est "Done".

Nous sommes maintenant prêts à créer une version espagnole de ce fichier et à le traduire ou le localiser.

  1. Le fichier étant toujours sélectionné dans le navigateur de projet, allez dans l'inspecteur de fichiers (le bouton à gauche dans la barre d'outils de l'inspecteur) et sous Localisation , cochez la case Espagnol ( Figure 36 ).

Figure 36 - Sélectionnez une localisation espagnole du fichier Localizable.strings .

  1. Cela crée une version espagnole du fichier Localizable.strings . Pour voir cela, allez dans le navigateur de projet, développez le fichier Localizable.strings et vous verrez les fichiers indiqués dans Figure 37 .

Figure 37 - Le fichier espagnol Localizable.strings

  1. Cliquez sur le fichier Localizable.strings (Spanish) pour afficher son contenu dans l'éditeur de code. Traduisez le texte en espagnol comme indiqué dans Figure 38 .

Figure 38 - Traduire les chaînes de caractères en espagnol.

Maintenant, lançons l'application pour voir comment ces cordes espagnoles fonctionnent au moment de l'exécution.

  1. Cliquez sur le bouton "Run" de Xcode .
  1. Lorsque l'application apparaît dans le simulateur, sélectionnez l'option Paramètres et commentaires .
  1. Cliquez sur le bouton Edit et vous devriez voir les boutons Cancelar et OK illustrés dans Figure 38 !

Figure 39 - Les boutons Cancelar et OK au moment de l'exécution

Vous avez réussi à faire exécuter trois des principales tâches de localisation d'une application !

Conclusion

Une fois que vous aurez pris en main l'internationalisation et la localisation des applications iOS, vous constaterez que vous pouvez maîtriser le processus et offrir une expérience de grande qualité aux utilisateurs de nombreuses langues différentes. Plutôt que de donner à vos utilisateurs l'impression que l'application a été traduite à partir d'une autre langue, vous pouvez les aider à sentir que l'application a été écrite spécifiquement pour leur langue et leur localité.

Click to rate this post!
[Total: 0 Average: 0]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *