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

Cordovaを使ったAndroidとiOSプロジェクトの生成する際にスマホのホーム画面で表示される名前（Display Name）の設定方法の記事です。解説ではIonicのプロジェクトを使っています。
![iphone_home_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537165/c5629f6a-660b-fc25-79d4-6a4c51d9a9da.jpeg)



##手っ取り早い方法
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のドキュメント](https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#edit-config)に詳しく記載があります。

##Android
[AndroidMainifest.xml](https://developer.android.com/guide/topics/manifest/manifest-intro.html)の`manifest/application/activity`のandroid:labelの値がホーム画面に表示される名前です。
参考：[公式 -Manifest](https://developer.android.com/guide/topics/manifest/activity-element.html)

`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](https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html)のCFBundleDisplayNameというキーがディスプレイネームの設定項目なのでここでディスプレイネームを設定します。

_※　2020/10/21追記_

修正前の投稿では`config-file`を使ってiosのディスプレイネームを変更していましたが、cordovaのバージョンによって機能しません。
[GitHub - <config-file> isn't reflected in generated Info.plist](https://github.com/apache/cordova-ios/issues/401)

```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](https://github.com/apache/cordova-ios/issues/775)

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

多言語対応とかでstring.xmlを使い分ける場合はまた別の方法考える必要があるようです。
[参考 -Monacaのアプリ名多言語化について ](https://qiita.com/kishisuke/items/81b4e1c527873dc68316)

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

##共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくは[Wantedly](https://www.wantedly.com/projects/134741)からお問い合わせください。