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
730
Monacaでアプリ名の多言語化
Daisuke Kishino
November 28, 2017
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
410
Monaca、WKWebViewに移行しようぜ!
kishino
0
900
Ionicあらまし@okayama-js
kishino
0
1.1k
MonacaアプリをネイティブのUXに近づけるために
kishino
0
880
Sign In with Appleを実装してみた
kishino
0
430
Fluid interfaces for Monaca
kishino
0
240
Vue.jsの特徴
kishino
0
600
Other Decks in Programming
See All in Programming
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
440
C++20 射影変換
faithandbrave
0
530
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
430
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
550
Team operations that are not burdened by SRE
kazatohiei
1
210
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
380
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Designing Experiences People Love
moore
142
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Why Our Code Smells
bkeepers
PRO
337
57k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
KATA
mclloyd
29
14k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Speed Design
sergeychernyshev
32
1k
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