Submit Search
Upload
AndroiderがFirefoxOSアプリの多言化をしてみたら
•
Download as PPTX, PDF
•
1 like
•
1,248 views
Takaumi Kimura
Follow
FirefoxOSアプリの多言語化の仕方とトラブった話です。
Read less
Read more
Technology
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 25
Download now
Recommended
Rinko 1 Android
Rinko 1 Android
jagsc
Firefox OSの何が嬉しいか
Firefox OSの何が嬉しいか
Takao Sumitomo
モノカキの開発環境
モノカキの開発環境
高見 知英
Androidアプリ開発ことはじめ
Androidアプリ開発ことはじめ
takosumipasta
スマホアプリ開発再考
スマホアプリ開発再考
Daijiro Abe
[Potatotips]クロスプラットフォーム開発Tips
[Potatotips]クロスプラットフォーム開発Tips
Kenichi Kambara
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリ
Masami Yabushita
できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16
Masami Yabushita
Recommended
Rinko 1 Android
Rinko 1 Android
jagsc
Firefox OSの何が嬉しいか
Firefox OSの何が嬉しいか
Takao Sumitomo
モノカキの開発環境
モノカキの開発環境
高見 知英
Androidアプリ開発ことはじめ
Androidアプリ開発ことはじめ
takosumipasta
スマホアプリ開発再考
スマホアプリ開発再考
Daijiro Abe
[Potatotips]クロスプラットフォーム開発Tips
[Potatotips]クロスプラットフォーム開発Tips
Kenichi Kambara
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリ
Masami Yabushita
できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16
Masami Yabushita
はじめる前に知っておきたいAndroidアプリ開発のポイント
はじめる前に知っておきたいAndroidアプリ開発のポイント
Shinobu Okano
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
Hokuto Tateyama
まったりAndroid Framework Code Reading #4
まったりAndroid Framework Code Reading #4
Shinobu Okano
Android Framework Code Readingのしおり ver 1.2
Android Framework Code Readingのしおり ver 1.2
Shinobu Okano
FirefoxOS勉強会#7 カメラアプリの作り方
FirefoxOS勉強会#7 カメラアプリの作り方
Kazuyuki Suzuki
Tizen OS アプリ開発経験談
Tizen OS アプリ開発経験談
Kenichi Kambara
Firefox OSアプリ開発・公開経験談
Firefox OSアプリ開発・公開経験談
Kenichi Kambara
多人数iOSアプリ開発を考える
多人数iOSアプリ開発を考える
sasaron 397
Wankuma0402
Wankuma0402
c-mitsuba
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
Noritada Shimizu
Android Framework Code Readingのしおり
Android Framework Code Readingのしおり
Shinobu Okano
Androidアプリ開発の極意
Androidアプリ開発の極意
Daisaku Yamamoto
20121219 jagkansai lt
20121219 jagkansai lt
Katsuki Nakatani
Cordova利用アプリ開発経験談
Cordova利用アプリ開発経験談
Kenichi Kambara
Androidの会のご紹介
Androidの会のご紹介
高見 知英
20141018 osc tokyo_fall_firefox osってなぁに?
20141018 osc tokyo_fall_firefox osってなぁに?
Masami Yabushita
20150514 android
20150514 android
Fujimura Munehiko
US進出でのAndroid開発inメルカリ Mercari US App Development
US進出でのAndroid開発inメルカリ Mercari US App Development
Tomoaki Imai
Firefox os動画再生アプリの舞台裏
Firefox os動画再生アプリの舞台裏
Takaumi Kimura
Windows phone関係のなにか。
Windows phone関係のなにか。
Hiroyuki Mori
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Yoichiro Sakurai
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
More Related Content
What's hot
はじめる前に知っておきたいAndroidアプリ開発のポイント
はじめる前に知っておきたいAndroidアプリ開発のポイント
Shinobu Okano
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
Hokuto Tateyama
まったりAndroid Framework Code Reading #4
まったりAndroid Framework Code Reading #4
Shinobu Okano
Android Framework Code Readingのしおり ver 1.2
Android Framework Code Readingのしおり ver 1.2
Shinobu Okano
FirefoxOS勉強会#7 カメラアプリの作り方
FirefoxOS勉強会#7 カメラアプリの作り方
Kazuyuki Suzuki
Tizen OS アプリ開発経験談
Tizen OS アプリ開発経験談
Kenichi Kambara
Firefox OSアプリ開発・公開経験談
Firefox OSアプリ開発・公開経験談
Kenichi Kambara
多人数iOSアプリ開発を考える
多人数iOSアプリ開発を考える
sasaron 397
Wankuma0402
Wankuma0402
c-mitsuba
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
Noritada Shimizu
Android Framework Code Readingのしおり
Android Framework Code Readingのしおり
Shinobu Okano
Androidアプリ開発の極意
Androidアプリ開発の極意
Daisaku Yamamoto
20121219 jagkansai lt
20121219 jagkansai lt
Katsuki Nakatani
What's hot
(13)
はじめる前に知っておきたいAndroidアプリ開発のポイント
はじめる前に知っておきたいAndroidアプリ開発のポイント
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
まったりAndroid Framework Code Reading #4
まったりAndroid Framework Code Reading #4
Android Framework Code Readingのしおり ver 1.2
Android Framework Code Readingのしおり ver 1.2
FirefoxOS勉強会#7 カメラアプリの作り方
FirefoxOS勉強会#7 カメラアプリの作り方
Tizen OS アプリ開発経験談
Tizen OS アプリ開発経験談
Firefox OSアプリ開発・公開経験談
Firefox OSアプリ開発・公開経験談
多人数iOSアプリ開発を考える
多人数iOSアプリ開発を考える
Wankuma0402
Wankuma0402
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
Android Framework Code Readingのしおり
Android Framework Code Readingのしおり
Androidアプリ開発の極意
Androidアプリ開発の極意
20121219 jagkansai lt
20121219 jagkansai lt
Similar to AndroiderがFirefoxOSアプリの多言化をしてみたら
Cordova利用アプリ開発経験談
Cordova利用アプリ開発経験談
Kenichi Kambara
Androidの会のご紹介
Androidの会のご紹介
高見 知英
20141018 osc tokyo_fall_firefox osってなぁに?
20141018 osc tokyo_fall_firefox osってなぁに?
Masami Yabushita
20150514 android
20150514 android
Fujimura Munehiko
US進出でのAndroid開発inメルカリ Mercari US App Development
US進出でのAndroid開発inメルカリ Mercari US App Development
Tomoaki Imai
Firefox os動画再生アプリの舞台裏
Firefox os動画再生アプリの舞台裏
Takaumi Kimura
Windows phone関係のなにか。
Windows phone関係のなにか。
Hiroyuki Mori
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Yoichiro Sakurai
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouch
Shin Ise
GDG Tokyo New Year Seminar 2018 -Dialogflow-
GDG Tokyo New Year Seminar 2018 -Dialogflow-
SENSY Inc
クロスプラットフォーム開発環境のすヽめ
クロスプラットフォーム開発環境のすヽめ
Yuki Yazaki
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜
Saiki Iijima
まったりAndroid framework code reading #1
まったりAndroid framework code reading #1
Shinobu Okano
2015/02/14 FirefoxOSハンズオン@関西
2015/02/14 FirefoxOSハンズオン@関西
Jun Iida
SwiftによるiOS開発再入門
SwiftによるiOS開発再入門
Tomoki Hasegawa
複数言語に触れてIoTの表現の幅を広げよう
複数言語に触れてIoTの表現の幅を広げよう
Core Concept Technologies
個人アプリ開発
個人アプリ開発
kentarokuroda
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Noritada Shimizu
自作flutterアプリをリファクタリングしてみた!
自作flutterアプリをリファクタリングしてみた!
とさ はるき
Similar to AndroiderがFirefoxOSアプリの多言化をしてみたら
(20)
Cordova利用アプリ開発経験談
Cordova利用アプリ開発経験談
Androidの会のご紹介
Androidの会のご紹介
20141018 osc tokyo_fall_firefox osってなぁに?
20141018 osc tokyo_fall_firefox osってなぁに?
20150514 android
20150514 android
US進出でのAndroid開発inメルカリ Mercari US App Development
US進出でのAndroid開発inメルカリ Mercari US App Development
Firefox os動画再生アプリの舞台裏
Firefox os動画再生アプリの舞台裏
Windows phone関係のなにか。
Windows phone関係のなにか。
20120316 designerworkshoppublished
20120316 designerworkshoppublished
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouch
GDG Tokyo New Year Seminar 2018 -Dialogflow-
GDG Tokyo New Year Seminar 2018 -Dialogflow-
クロスプラットフォーム開発環境のすヽめ
クロスプラットフォーム開発環境のすヽめ
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜
Androidをやっただけで iOSアプリもできればいいのに 〜MOEという選択〜
まったりAndroid framework code reading #1
まったりAndroid framework code reading #1
2015/02/14 FirefoxOSハンズオン@関西
2015/02/14 FirefoxOSハンズオン@関西
SwiftによるiOS開発再入門
SwiftによるiOS開発再入門
複数言語に触れてIoTの表現の幅を広げよう
複数言語に触れてIoTの表現の幅を広げよう
個人アプリ開発
個人アプリ開発
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
自作flutterアプリをリファクタリングしてみた!
自作flutterアプリをリファクタリングしてみた!
Recently uploaded
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Recently uploaded
(10)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
AndroiderがFirefoxOSアプリの多言化をしてみたら
1.
Androiderが FirefoxOSアプリの 多言語化をしてみたら 木村 尭海(@muchiki0226)
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.
アプリを作ってみた • 海外のページで多少紹介されている • それでどおりやってみよう!(U^ω^) •
やり方は次の手順の通り • 言語ファイルを用意する • htmlファイルに言語対応
10.
アプリを作ってみた • 海外のページで多少紹介されている • それでどおりやってみよう!(U^ω^) •
やり方は次の手順の通り • 言語ファイルを用意する • 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がどのような動きをするかは要注意! • 次のような操作をしたらどうなると思いますか? •
アラビア設定でアプリを立ち上げる • 英語に変更 • もう一度アプリを立ち上げる
23.
言語切り替え • 実は言語変更前のリソースは保持されているので使いまわされる アラビア語 アプリ立ち上げ アラビア語設定がされている 英語 アプリ立ち上げ アラビア語設定がされたまま 開発者的には再起動するようになってて欲しかった
24.
調査中のことと今後改良してみたい点 • アプリごとにl10n.jsを抱えない方法を調査中 • 他にやり方があれば教えてほしい •
LTRとRTLのマーキーの自動対応 • 言語切り替えした時は必ずアプリを更新するようにOS側に対応 • アプリで対応できる範囲を超えているように感じる
25.
ご清聴ありがとうございました。
Download now