Monacaでアプリ名の多言語化

Transcript

1. Monacaでアプリ名の多言語化 Monaca UG TOKYO #3 ~年末のLT大会！~ @2017/11/27

2. 2 ピープルソフトウェア株式会社 岸野 大輔 ＠岡山県 Monaca歴10ヵ月 最近はAngularJSとかVue.jsとかやってます。 好きな言語はSwift 自己紹介

3. 3 多言語化したアプリ • 会津若松の観光アプリ • Monaca+BaaS@rakuza • OnsenUI+Vue.js • 日本語、英語、中国語(簡・繁)、タイ

   語の5か国語に対応

4. 4 アプリの多言語化 • サーバー側 • BaaS@rakuzaで対応 • アプリ側 • OnsenUI＋Vue.jsで作っているので、vue-i18nで対応

5. 5 アプリ名は？ • リリースの1週間前にアプリ名が多言語化されていないことに気が 付く • Cordova・Monacaに何か仕組みがあるだろうと高を括っていた ら、どうやらなさそう・・ どうしよう！！！

6. 6 ネイティブはどうやるんだっけ？ • Android 1. resにvalues-enなど、言語ごとのディレクトリを作成 2. strings.xmlを作成し、「app_name」にアプリ名を記述 • iOS

   1. XcodeからInfoPlist.stringを作成し、 Localizationをクリックして各言 語をチェックする 2. InfoPlist.stringの「CFBundleDisplayName」にアプリ名を記述 strings.xmlとInfoPlist.stringをコピーすればよいのでは？

7. 7 CordovaのHook機能を使ってみる • Cordovaの各種操作時に処理を挟み込むことができる • プラグイン追加時、プリペア時など • after_prepare（プリペア後）に、strings.xmlとInfoPlist.stringをコ ピーするHookスクリプトを作成

8. 8 Hookスクリプト Android用の スクリプト iOS用のスク リプト プラグインの 定義ファイル Hookスクリプトは Cordova

   Pluginとして作 成

9. 9 plugin.xml

10. 10 Hookスクリプト(Android)

11. 11 コピーするリソースファイル Monacaはルート配下に自由に ファイルを配置できないため、 wwwに配置 phonegap buildがこのディレク トリ構成(Androidだけ)なので真 似た

12. 12 project.pbxprojの罠 • Androidはstrings.xmlをコピーするだけでOK！ • iOSはコピーするだけだとうまくいかない・・ • iOSはXcodeに認識させるために、リソースファイル(InfoPlist.string) とそのLocalization設定をproject.pbxprojに定義する必要がある •

    Xcode使ってると、よくコンフリクトする謎フォーマットのアレです

13. 13 project.pbxprojの構成 PBXFireReference PBXVariantGroup すべてのリソースファイルを表すク ラス。ここにInfoPlist.stringを言語分 だけ設定する。 ※ en.lprojなど、言語ごとのディレ クトリに配置した上で追加する

    Localizationされているファイルの グループを表現するクラス。 InfoPlist.stringsというグループ名を 設定する。 ファイルの ObjectIDを参照

14. 14 node-xcode • project.pbxprojをパース・編集できるnode.jsのライブラリ • このライブラリを使って、 PBXFireReferenceとPBXVariantGroupを 設定 iOSもうまくいった！！

15. 15 (TIPS)node-xcodeのインストール • CustomConfigプラグインを使用していればインストール不要…と 思ったが、Monaca標準のCustomConfigプラグイン(2.0.3)だと node-xcodeのバージョンが古い(0.8.x) • 0.9.xでないと、 PBXVariantGroupの編集ができない •

    MonacaのCustomConfigプラグインを最新(4.0.2)にしてみるも、なぜ かビルドでコケる… • npm install xcodeを実行して、node_modules以下をまるごとアップ ロードして解決

16. 16 参考 • cordova-plugin-localization-strings (https://github.com/kelvinhokk/cordova-plugin-localization- strings) • node-xcodeの使い方の参考 • .xcodeproj/project.pbxproj

    を解読する (https://qiita.com/yokomotod/items/02e395e99bb891d27f67) • project.pbxprojの仕様の参考

17. 17 ソースコード • GitHubにアップしました https://github.com/kishino/cordova-plugin-i18n-app-name