AndroiderがFirefoxOSアプリの多言化をしてみたら
•Télécharger en tant que PPTX, PDF•
1 j'aime•1,248 vues
FirefoxOSアプリの多言語化の仕方とトラブった話です。
Recommandé
Contenu connexe
Tendances
Tendances (13)
Similaire à AndroiderがFirefoxOSアプリの多言化をしてみたら
Similaire à AndroiderがFirefoxOSアプリの多言化をしてみたら (20)
Dernier
Dernier (9)
AndroiderがFirefoxOSアプリの多言化をしてみたら
- 2. 自己紹介 • 木村 尭海 (きむら たかうみ) • @muchiki0226 • お仕事内容 • Androidアプリ開発者 • 組み込みソフト開発 • 個人的な活動 • Robotの大会出場 • Windows Phone アプリ開発 • 執筆活動 • プロの力が身につくAndroidプログラミングの教科書 • Effective Android • 進撃の火狐 –Attack on Firefox- • etc…
- 3. 目次 • なぜ多言語化を取り上げたのか • FirefoxOSの多言語化 • アプリを作ってみた • モバイルアプリで多言語化する時の注意点
- 4. なぜ多言語化を取り上げたのか • モバイルアプリケーションは簡単に海外展開ができる • Webアプリも同様だが・・・ • Androidアプリ開発にて • 30カ国以上の言語に対応したアプリケーション開発しました • 国内ではバッシングがほとんど • モチベーションの低下 • ちなみに言語は得意ではありません(^_^;)
- 5. FirefoxOSアプリを開発するなら • マーケットプレイスにてアプリ配布する地域はどうしますか？ • 日本のみ • アメリカのみ • etc… • アプリの公開する場合に言語対応をやりますか？やりませんか？ • 日本語のみ • 英語と日本語のみ • それ以外は対応する？ • FirefoxOSの多言語化するにはどうしたらよいのか？
- 6. HTMLの多言語化の方法 • Webページで各言語のページを用意 • URLで言語切替 • CSSで各言語の文字列を保持 • JavaScriptで言語切替 • jQueryなどを利用するなど • アプリ内にファイルを保持 • JavaScritptで言語切替 →FirefoxOSではこの手法
- 7. FirefoxOSの多言語化 • すごく便利な多言語化のJavaScritptを使っている • webL10n.js • https://github.com/mozilla-b2g/gaia/blob/master/shared/js/l10n.js • ベース • https://github.com/fabi1cazenave/webL10n • l10n.jsというのもあるがこちらではないらしい • https://github.com/eligrey/l10n.js/ • webL10n.js • 標準APIから言語情報を取得して読み込む言語ファイルを切り替える • document.documentElement.lang
- 8. FirefoxOSが標準で対応する言語 • FirefoxOSのシミュレータの対応言語 • フランス語 • スペイン語 • ドイツ語 • クロアチア語 • ハンガリー語 • ポーランド語 • ポルトガル語 • 中国語 • ヘブライ語 • アルゼンチン語 • 英語
- 9. アプリを作ってみた • 海外のページで多少紹介されている • それでどおりやってみよう！（Ｕ＾ω＾） • やり方は次の手順の通り • 言語ファイルを用意する • htmlファイルに言語対応
- 10. アプリを作ってみた • 海外のページで多少紹介されている • それでどおりやってみよう！（Ｕ＾ω＾） • やり方は次の手順の通り • 言語ファイルを用意する • htmlファイルに言語対応 こんなことになろうとは…
- 11. フォルダ構成 • locales.ini • 設定ファイル • *.properties • 言語ファイル • index.html • アプリのページ • manifest.webapp • FirefoxOSアプリのマニフェストファイル 空
- 12. 言語ファイルを用意する • それぞれの言語ファイル名の命名規則 • ファイル名+国コード+地域コード • ISO 638-1：国コード • ISO 3166-1：地域コード • 例：中国語の台湾を対応する場合(ファイル名：file) • file.zh-TW.properties
- 13. 言語ファイルの中身 • key valueの対応付けで表現される locale = en-US marquee = marquee en-US language = Language locale = zh-TW marquee = marquee zh-TW language = 語 test.en-US.properties test.zh-TW.properties Key Value
- 14. 設定ファイル • どの言語の時にどのファイルを読み込ませるのかを記述しておく • 今回の場合はlocales.iniファイルに記述しました • 国コードと地域コードで指定する • 指定しないものは対応する言語がない場合に読み込まれるファイルとなる @import url(test.en-US.properties) [ar] @import url(test.ar.properties) [fr] @import url(test.fr.properties) [zh-TW] @import url(test.zh-TW.properties)
- 15. htmlファイルに言語対応 • 設定ファイルと言語対応を行うJavaScriptを記載する • 多言語化したいオブジェクトにdata-l10n-idで 言語ファイルのKeyを指定 • 自動的に言語に応じた文字列に置き換えられる <head> <link rel="resource" type="application/l10n" href="locales/locales.ini" /> <script defer src=“/shared/js/l10n.js" charset="utf-8"></script> </head> <small data-l10n-id="locale">Locale</small>
- 16. 動かない(；´Д｀) 現実理想 <small data-l10n-id="locale">Locale</small> locale = en-US test.en-US.properties
- 17. 動かない原因 • 端末内にある/shared/js/l10n.jsは全アプリで使えると 思われていたが実は違った • FirefoxOSで用いられる/shared/js/l10n.jsを持ってくる <head> <link rel="resource" type="application/l10n" href="locales/locales.ini" /> <script defer src=“/shared/js/l10n.js" charset="utf-8"></script> </head> <head> <link rel="resource" type="application/l10n" href="locales/locales.ini" /> <script defer src=“js/l10n.js" charset="utf-8"></script> </head>
- 18. フォルダ構成(変更) • locales.ini • 設定ファイル • *.properties • 言語ファイル • index.html • アプリのページ • manifest.webapp • FirefoxOSアプリのマニフェストファイル これで理想通りに動作！(当たり前)
- 19. モバイルアプリで多言語化する時の注意点 • LTRとRTLは注意が必要 • UIを考えるうえで知っておく必要がある • 言語切り替えはかなり鬼門 • バージョンが変わったりしたときは必ずチェックしよう
- 20. LTRとRTL • LTR(Left-to-Right)とは • 左横書き言語 • 左から右へ文字を書く • RTL(Right-to-Left)とは • 右横書き言語 • 右から左へ文字を書く • 「そんなのしってるわ！」と思われている人も注意！ • OSのサポートの有り無しで天国と地獄
- 21. マーキーでトラブルトラブルが起きやすい • マーキーとは • 文字を横へスライドする機能 • スライドする方向を指定するのは開発者 • 標準は右から左へスライドする • 左から右に読む文化では問題ない • 右から左へ読む文化ではどうなるのか？ • 後ろから文字が流れるため読めない • システムの言語に応じて切り替えてくれるのか →答えはNO、JavaScriptなどで自分で切り替える必要がある 対応は大変。できるだけ使わないようにUI設計をしよう！
- 22. 言語切り替え • 切り替え時にOSがどのような動きをするかは要注意！ • 次のような操作をしたらどうなると思いますか？ • アラビア設定でアプリを立ち上げる • 英語に変更 • もう一度アプリを立ち上げる
- 24. 調査中のことと今後改良してみたい点 • アプリごとにl10n.jsを抱えない方法を調査中 • 他にやり方があれば教えてほしい • LTRとRTLのマーキーの自動対応 • 言語切り替えした時は必ずアプリを更新するようにOS側に対応 • アプリで対応できる範囲を超えているように感じる
- 25. ご清聴ありがとうございました。