Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

I18n of java script

1,879 views

Published on

angular-gettextの紹介です。

Published in: Technology
  • Login to see the comments

I18n of java script

  1. 1. i18n of JavaScript Junichi Shinohara @ HDE
  2. 2. Agenda ・What's i18n? ・How to support i18n in Server Side ・How to support i18n in Client Side ・Introduce AngularJS ・Introduce angular-gettext
  3. 3. What’s i18n?
  4. 4. What’s i18n ・i18n = Internationalization ・One system supports multiple languages
  5. 5. How to Support i18n in Server Side
  6. 6. How to Support i18n in Server Side ・Server Side = Python, PHP, Erlang and etc. ・GNU gettext generally is used
  7. 7. How to use gettext 1. Modify source code 2. Extract texts from source code(.pot) 3. Translate texts(.po) 4. Convert translated texts into binary translated texts(.mo) 5. Load binary translated texts on server
  8. 8. ・Use template engine like Mako ・Use _ method of gettext.py How to use gettext 1. Modify Source Code
  9. 9. How to use gettext 2. Extract Texts from Source Code(.pot) ・Create .pot file with pybabel or xgettext
  10. 10. How to use gettext 3. Translate Texts(.po) ・Create .po file from .pot file with msgmerge ・Edit .po file with vim or Poedit
  11. 11. How to use gettext 4. Convert Translated Texts into Binary Translated Texts(.mo) ・Create .mo file with msgfmt
  12. 12. ・Load .mo file on Tornado of Python How to use gettext 5. Load Binary Translated Texts on Server
  13. 13. ・Separate translating from developing  ・Translators edit po files  ・Developers edit source codes ・Useful PO file editor like Poedit   Good Points of gettext
  14. 14. How to Support i18n in Client Side
  15. 15. How to support i18n in Client Side ・Client Side = JavaScript ・GNU gettext Generally is NOT used
  16. 16. How to support i18n in Client Side with jQuery UI or jQuery Globalize ・Use GNU gettext Object or JSON ・We have to set texts into HTML
  17. 17. How to support i18n in Client Side with Server’s Template ・Use GNU gettext ・But, JavaScript depends on Server Framework
  18. 18. Introduce AngularJS
  19. 19. What’s AngularJS? ・JavaScript MVC Framework in Client Side ・Developed by Google ・Home Page: https://angularjs.org/ ・Examples: http://www.angularjshub.com/examples/
  20. 20. What’s AngularJS? Concepts of AngularJS ・2 Way Data Binding  ・Change Value in Model = Change Value in View $(‘#hoge’).value(‘fuga’) ・Model  ・Resource like REST API with $http, $q, and $resource  ・Factory like Session Storage or Local Storage ・Directive / Filter / Template  ・Behaviour as HTML <div ng-model=”items” ng-repeat=”item in items | lowercase”><a>{{item}}</div> ・Controller  ・Scope in HTML <div ng-controller=”abcCtrl”></div><div ng-controller=”xyzCtrl”></div> ・Router  ・Ajax Frendly URL with $router or angular-ui plugin http://www.example.com/blog/#/page/1  ・pushState / popState with HTML5 Mode
  21. 21. Introduce angular-gettext
  22. 22. What’s angular-gettext? ・Support gettext on AngularJS ・Extract text from AngularJS codes ・Convert .po file into JSON or Object ・Home Page: http://angular-gettext.rocketeer.be/ ・Examples: https://github.com/rubenv/angular-gettext-example
  23. 23. How to use angular-gettext 1. Modify source code 2. Extract texts from source code(.pot) 3. Translate texts(.po) 4. Convert translated texts into JSON(.json) 5. Load JSON on AngularJS or Server
  24. 24. ・Use translate directive on View ・Use gettext function on Controller How to use angular-gettext 1. Modify Source Code
  25. 25. How to use angular-gettext 2. Extract Texts from Source Code(.pot) ・Create .pot file with Grunt and grunt-angular-gettext ・We can merge other .pot file which is created by pybael  with msguniq
  26. 26. How to use angular-gettext 3. Translate Texts(.po) ・Create .po file from .pot file with msgmerge ・Edit .po file with vim or Poedit
  27. 27. How to use angular-gettext 4. Convert translated texts into JSON(.json) ・Create .json file with Grunt and grunt-angular-gettext
  28. 28. ・Load JSON on AngularJS How to use angular-gettext 5. Load JSON on AngularJS
  29. 29. ・translate directive  ・We do NOT have to set translated texts into HTML  ・JavaScript does NOT depend on Server Framework ・gettext  ・Use a de fact standard  ・Use the same as .po file of server side ・Translated texts is JSON format  ・3rd party tool like jQuery Globalize use the JSON Good Points of angular-gettext
  30. 30. Thank you for your attention!

×