문자열 및 레이블의 현지화 및 세계화를위한 모범 사례 [닫기]


124

저는 20 명 이상의 개발자로 구성된 팀의 일원입니다. 각 개발자는 별도의 모듈에서 작업합니다 (10 개에 가까운 모듈). 각 모듈에는 최소 50 개의 CRUD 양식이있을 수 있습니다. 즉, 현재 거의 500 개의 추가 버튼 , 저장 버튼 , 편집 버튼 등이 있습니다.

그러나 응용 프로그램을 세계화하고 싶기 때문에 응용 프로그램에서 텍스트를 번역 할 수 있어야합니다. 예를 들어, 어디서나, 단어 추가는 이되어야 ajouter 프랑스어 사용자를위한.

지금까지 우리가 한 것은 UI 또는 Presentation Layer의 각 뷰에 대해 키 / 값 쌍의 번역 사전이 있다는 것입니다. 그런 다음 뷰를 렌더링하는 동안이 사전을 사용하여 필요한 텍스트와 문자열을 번역합니다. 그러나이 접근 방식을 사용하면 500 개 가까운 사전에 500 개의 사전을 추가 할 수 있습니다 . 이것은 우리가 DRY 원칙을 위반했음을 의미합니다.

반면에 add 를 한 곳에 두는 것과 같이 일반적인 문자열을 중앙 집중화 하고 개발자에게 모든 곳에서 사용하도록 요청하면 문자열이 중앙 집중식 사전에 이미 정의되어 있는지 여부를 확신 할 수없는 문제가 발생합니다.

다른 옵션 중 하나는 번역 사전이없고 Google 번역, Bing 번역기 등과 같은 온라인 번역 서비스를 사용하는 것입니다.

우리가 직면 한 또 다른 문제는 프로젝트를 적시에 제공해야하는 스트레스를받는 일부 개발자가 번역 키를 기억하지 못한다는 것 입니다. 예를 들어 추가 버튼의 텍스트의 경우 개발자는 add 를 사용 하고 다른 개발자는 new 를 사용했습니다 .

응용 프로그램의 문자열 리소스의 세계화 및 지역화를위한 모범 사례 또는 가장 잘 알려진 방법은 무엇입니까?


2
이야기알렉스 교회의 머슴 주제에 대한 클라이언트 측 국제화 JS EU 회의에서 좋은 시작이다.
Minko Gechev 2013 년

답변:


51

내가 아는 한, localeplanetJavaScript에서 현지화 및 국제화 라는 좋은 라이브러리가 있습니다. 또한, 네이티브라고 생각하며 다른 라이브러리 (예 : jQuery)에 대한 종속성이 없습니다.

다음은 도서관 웹 사이트입니다. http://www.localeplanet.com/

또한 Mozilla의이 기사를 살펴보면 클라이언트 측 번역을위한 매우 좋은 방법과 알고리즘을 찾을 수 있습니다. http://blog.mozilla.org/webdev/2011/10/06/i18njs-internationalize-your-javascript-with- json-and-the-server /의 작은 도움

모든 기사 / 라이브러리의 공통 부분은 그들이 사용하는 것입니다 i18n클래스와 get(또한 같은 작은 함수 이름을 정의하는 몇 가지 방법에 방법을 _/ 검색 변환) key받는 사람 value. 내 설명에서 key번역하려는 문자열과 value번역 된 문자열을 의미합니다.
그런 다음 key의 및 을 저장할 JSON 문서가 필요합니다 value.

예를 들면 :

var _ = document.webL10n.get;
alert(_('test'));

그리고 여기 JSON :

{ test: "blah blah" }

현재 인기있는 라이브러리 솔루션을 사용하는 것이 좋은 방법이라고 생각합니다.


1
불쾌하지는 않지만 Afshin이 이미 시도한 것이 아닙니까? 문제는 개발자마다 사용할 키를 기억하는 데 어려움이 있다는 것입니다. 설명하신 방법이 갈 길이라는 데 동의합니다. 그렇지 않으면 어떻게 될 수 있는지 모르겠습니다. 훌륭한 링크 btw에 감사드립니다.
Spock

47

해결해야 할 문제에 직면했을 때 (솔직히 오늘날 누가 그렇지 않습니까?) 우리 컴퓨터 직원이 일반적으로 취하는 기본 전략을 "분할 및 정복"이라고합니다. 다음과 같이 진행됩니다.

  • 특정 문제를 작은 하위 문제 집합으로 개념화합니다.
  • 각각의 작은 문제를 해결하십시오.
  • 결과를 특정 문제의 솔루션으로 결합하십시오.

그러나 "분할 및 정복"만이 가능한 전략은 아닙니다. 보다 일반적인 접근 방식을 취할 수도 있습니다.

  • 특정 문제를보다 일반적인 문제의 특수 사례로 개념화합니다.
  • 어떻게 든 일반적인 문제를 해결하십시오.
  • 일반적인 문제의 해결책을 특정 문제에 적용하십시오.

-에릭 리퍼 트

ASP.Net/C#과 같은 서버 측 언어로이 문제에 대한 많은 솔루션이 이미 존재한다고 생각합니다.

문제의 몇 가지 주요 측면을 간략히 설명했습니다.

  • 문제 : 원하는 언어로만 데이터를로드해야 함

    솔루션 :이를 위해 각 언어별로 데이터를 별도의 파일에 저장합니다.

전의. res.de.js, res.fr.js, res.en.js, res.js (기본 언어 용)

  • 문제 : 필요한 데이터 만 얻을 수 있도록 각 페이지의 리소스 파일을 분리해야합니다.

    솔루션 : https://github.com/rgrove/lazyload 와 같이 이미 존재하는 일부 도구를 사용할 수 있습니다.

  • 문제 : 데이터를 저장하려면 키 / 값 쌍 구조가 필요합니다.

    솔루션 : 문자열 / 문자열 공기 대신 자바 스크립트 개체를 제안합니다. IDE에서 인텔리 센스를 활용할 수 있습니다.

  • 문제 : 일반 회원은 공개 파일에 저장해야하며 모든 페이지에서 액세스해야합니다.

    솔루션 :이를 위해 웹 응용 프로그램의 루트에 Global_Resources라는 폴더를 만들고 각 하위 폴더에 대해 'Local_Resources'라는 이름의 전역 파일을 저장할 폴더를 만듭니다.

  • 문제 : 각 하위 시스템 / 하위 폴더 / 모듈 구성원은 해당 범위에서 Global_Resources 구성원을 재정의해야합니다.

    솔루션 : 각 파일을 고려

신청 구조

root/
    Global_Resources/
        default.js
        default.fr.js
    UserManagementSystem/
        Local_Resources/
            default.js
            default.fr.js
            createUser.js
        Login.htm
        CreateUser.htm

파일에 해당하는 코드 :

Global_Resources / default.js

var res = {
    Create : "Create",
    Update : "Save Changes",
    Delete : "Delete"
};

Global_Resources / default.fr.js

var res = {
    Create : "créer",
    Update : "Enregistrer les modifications",
    Delete : "effacer"
};

Global_Resource에서 선택한 페이지에 원하는 언어의 리소스 파일을로드해야합니다.-모든 페이지에로드되는 첫 번째 파일이어야합니다.

UserManagementSystem / Local_Resources / default.js

res.Name = "Name";
res.UserName = "UserName";
res.Password = "Password";

UserManagementSystem / Local_Resources / default.fr.js

res.Name = "nom";
res.UserName = "Nom d'utilisateur";
res.Password = "Mot de passe";

UserManagementSystem / Local_Resources / createUser.js

// Override res.Create on Global_Resources/default.js
res.Create = "Create User"; 

UserManagementSystem / Local_Resources / createUser.fr.js

// Override Global_Resources/default.fr.js
res.Create = "Créer un utilisateur";

manager.js 파일 (이 파일은 마지막에로드되어야 함)

res.lang = "fr";

var globalResourcePath = "Global_Resources";
var resourceFiles = [];

var currentFile = globalResourcePath + "\\default" + res.lang + ".js" ;

if(!IsFileExist(currentFile))
    currentFile = globalResourcePath + "\\default.js" ;
if(!IsFileExist(currentFile)) throw new Exception("File Not Found");

resourceFiles.push(currentFile);

// Push parent folder on folder into folder
foreach(var folder in parent folder of current page)
{
    currentFile = folder + "\\Local_Resource\\default." + res.lang + ".js";

    if(!IsExist(currentFile))
        currentFile = folder + "\\Local_Resource\\default.js";
    if(!IsExist(currentFile)) throw new Exception("File Not Found");

    resourceFiles.push(currentFile);
}

for(int i = 0; i < resourceFiles.length; i++) { Load.js(resourceFiles[i]); }

// Get current page name
var pageNameWithoutExtension = "SomePage";

currentFile = currentPageFolderPath + pageNameWithoutExtension + res.lang + ".js" ;

if(!IsExist(currentFile))
    currentFile = currentPageFolderPath + pageNameWithoutExtension + ".js" ;
if(!IsExist(currentFile)) throw new Exception("File Not Found");

도움이되기를 바랍니다 :)


7
이 접근 방식에 대해 내가 싫어하는 유일한 점은 지역화와 개발이 밀접하게 결합되어 있다는 것입니다. 따라서 영어 (기본값이 무엇이든) 문자열이 추가되면 나머지 언어는 코드를 통해 업데이트되어야합니다. 차라리 일부 유형의 번역 파일에서 도구로 JSON을 생성하고 싶습니다. 여전히 좋은 표현입니다!
Nate-Wilkins

현지화에서했던 것과 동일한 방식으로 수행 한 경우 다음 쿼리에서 확인할 수 있습니다. stackoverflow.com/q/53864279/4061006 . 유일한 것은 Global_Resources / default.js를 Global_Resources / default.fr.js로 번역하는 방법입니다. 해당 파일을 원하는 언어로 변환하는 데 사용하는 도구 / 키트입니다. 이것도 필요하기 때문에
Jayavel

문자열의 위치와 의미를 설명하는 각 키와 함께 사람이 읽을 수있는 주석을 저장해야합니다. 그래야 새 언어를 추가하려고 할 때 번역자 (또는 자신)에게 더 많은 컨텍스트를 제공 할 수 있습니다. 문자열의 의미. 예를 들어 Chrome 확장 프로그램현지화하는 것과 "Create" : {"message": "Create", "description": "text on the button that opens the editor with a blank Foo"}같은 작업을 수행하십시오 . 또는 이러한 주석을 담은 별도의 파일을 만드십시오.
Boris

13

jQuery.i18n 은 웹 페이지에서 국제화를 가능하게하는 경량 jQuery 플러그인입니다. Java Resource Bundle과 마찬가지로 '.properties'파일에 사용자 지정 리소스 문자열을 패키지화 할 수 있습니다. 제공된 언어 또는 브라우저에서보고하는 언어를 기반으로 리소스 번들 (.properties)을로드하고 구문 분석합니다.

이에 대한 자세한 내용은 JQuery를 사용하여 페이지를 국제화 하는 방법을 참조하십시오.


링크는 사라입니다
알렉산더 파버
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.