Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Monacaでアプリ名の多言語化
Search
Daisuke Kishino
November 28, 2017
Programming
0
750
Monacaでアプリ名の多言語化
Daisuke Kishino
November 28, 2017
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
430
Monaca、WKWebViewに移行しようぜ!
kishino
0
910
Ionicあらまし@okayama-js
kishino
0
1.1k
MonacaアプリをネイティブのUXに近づけるために
kishino
0
900
Sign In with Appleを実装してみた
kishino
0
430
Fluid interfaces for Monaca
kishino
0
250
Vue.jsの特徴
kishino
0
600
Other Decks in Programming
See All in Programming
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4.1k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
CSC509 Lecture 05
javiergs
PRO
0
300
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
株式会社 Sun terras カンパニーデック
sunterras
0
310
CSC305 Lecture 05
javiergs
PRO
0
210
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
930
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
190
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Why Our Code Smells
bkeepers
PRO
340
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Context Engineering - Making Every Token Count
addyosmani
6
250
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Think Like a Performance Engineer
csswizardry
27
2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
A designer walks into a library…
pauljervisheath
209
24k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Transcript
Monacaでアプリ名の多言語化 Monaca UG TOKYO #3 ~年末のLT大会!~ @2017/11/27
2 ピープルソフトウェア株式会社 岸野 大輔 @岡山県 Monaca歴10ヵ月 最近はAngularJSとかVue.jsとかやってます。 好きな言語はSwift 自己紹介
3 多言語化したアプリ • 会津若松の観光アプリ • Monaca+BaaS@rakuza • OnsenUI+Vue.js • 日本語、英語、中国語(簡・繁)、タイ
語の5か国語に対応
4 アプリの多言語化 • サーバー側 • BaaS@rakuzaで対応 • アプリ側 • OnsenUI+Vue.jsで作っているので、vue-i18nで対応
5 アプリ名は? • リリースの1週間前にアプリ名が多言語化されていないことに気が 付く • Cordova・Monacaに何か仕組みがあるだろうと高を括っていた ら、どうやらなさそう・・ どうしよう!!!
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 CordovaのHook機能を使ってみる • Cordovaの各種操作時に処理を挟み込むことができる • プラグイン追加時、プリペア時など • after_prepare(プリペア後)に、strings.xmlとInfoPlist.stringをコ ピーするHookスクリプトを作成
8 Hookスクリプト Android用の スクリプト iOS用のスク リプト プラグインの 定義ファイル Hookスクリプトは Cordova
Pluginとして作 成
9 plugin.xml
10 Hookスクリプト(Android)
11 コピーするリソースファイル Monacaはルート配下に自由に ファイルを配置できないため、 wwwに配置 phonegap buildがこのディレク トリ構成(Androidだけ)なので真 似た
12 project.pbxprojの罠 • Androidはstrings.xmlをコピーするだけでOK! • iOSはコピーするだけだとうまくいかない・・ • iOSはXcodeに認識させるために、リソースファイル(InfoPlist.string) とそのLocalization設定をproject.pbxprojに定義する必要がある •
Xcode使ってると、よくコンフリクトする謎フォーマットのアレです
13 project.pbxprojの構成 PBXFireReference PBXVariantGroup すべてのリソースファイルを表すク ラス。ここにInfoPlist.stringを言語分 だけ設定する。 ※ en.lprojなど、言語ごとのディレ クトリに配置した上で追加する
Localizationされているファイルの グループを表現するクラス。 InfoPlist.stringsというグループ名を 設定する。 ファイルの ObjectIDを参照
14 node-xcode • project.pbxprojをパース・編集できるnode.jsのライブラリ • このライブラリを使って、 PBXFireReferenceとPBXVariantGroupを 設定 iOSもうまくいった!!
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 参考 • 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 ソースコード • GitHubにアップしました https://github.com/kishino/cordova-plugin-i18n-app-name