Cordovaアプリのディスプレイ名に日本語（マルチバイト文字）設定する

Cordovaを使ったAndroidとiOSプロジェクトの生成する際にスマホのホーム画面で表示される名前（Display Name）の設定方法の記事です。解説ではIonicのプロジェクトを使っています。

##手っ取り早い方法
config.xmlで下記内容を記述します。

config.xml

<widget>
    <!-- Android用 -->
    <platform name="android">
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
            <activity android:label="ディスプレイネーム" />
        </edit-config>
    </platform>
    <!-- iOS用 -->
    <platform name="ios">
        <edit-config file="*-Info.plist" mode="merge" target="CFBundleDisplayName">
            <string>ディスプレイネーム</string>
        </edit-config>
    </platform>
</widget>

再ビルドすると各OSの設定ファイルが書き換わって、表示名が変わっているか確認してください。

##環境
Cordova 9.0.0
Ionic4
##解説
各OSにビルド後に直接設定ファイルを修正することもできますが、設定値を固定するためにCordovaのedit-configを使用してビルド時にAndroid.Manifest.xmlとapp_name-Info.plistを編集するようにします。

nameにアプリ名を記載することで表示するアプリ名を変更できますが、iosのワークスペースの名前が日本語になってしまって動作しないので、ここに日本語を使うのはよくありません。

config.xml

<widget>
    <!-- アプリ名.xcworkspaceというファイルを生成してしまう -->
    <name>アプリ名</name>
</widget>

Cordovaのドキュメントに沿って各OSの設定ファイルを編集します。XMLのカスタム部分についてはCordovaのドキュメントに詳しく記載があります。

##Android
AndroidMainifest.xmlのmanifest/application/activityのandroid:labelの値がホーム画面に表示される名前です。
参考：公式 -Manifest

activity のデフォルトはstring.xmlのactivity_nameを参照しています。ここの参照をconfig.xmlで書き換えています。

AndroidMainifest.xml

<activity android:label="@string/activity_name" >

ちなみにIonicのプロジェクトでは、activity_nameはlauncher_nameを参照して、launcher_nameはデフォルトのアプリ設定値を参照しているようです。

string.xml

<resources>
    <string name="app_name">MyApp</string>
    <string name="launcher_name">@string/app_name</string>
    <string name="activity_name">@string/launcher_name</string>
</resources>

##iOS

*Info.plistのCFBundleDisplayNameというキーがディスプレイネームの設定項目なのでここでディスプレイネームを設定します。

※　2020/10/21追記

修正前の投稿ではconfig-fileを使ってiosのディスプレイネームを変更していましたが、cordovaのバージョンによって機能しません。
GitHub - isn't reflected in generated Info.plist

config.xml

<platform name="ios">
    <config-file parent="CFBundleDisplayName" platform="ios" target="*-Info.plist">
        <string>ナカジツ</string>
    </config-file>
</platform>

Cordova-iosのバージョンアップによって解消されるようですがedit-configによる追加で問題ありません。
GitHub - Plugins config-file not added to .plist file

##おわり
せっかくのハイブリッドアプリだしビルド後に各OSのツールで設定ファイル弄るのは微妙という気持ちがあって、全てCordovaの設定ファイルで解決しようとしています。

多言語対応とかでstring.xmlを使い分ける場合はまた別の方法考える必要があるようです。
参考 -Monacaのアプリ名多言語化について

もっとうまいやり方がありそうな気がする。

##共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。