Visualizerでのアプリ名の設定方法【V9】

## 目次
1. はじめに
2. 実装方法
2. 完成
3. 最後に


## はじめに

今回はアプリインストール時に表示されるアプリ名の設定方法をご紹介します。
AndroidとiOSで設定が異なるため、アプリ名の設定を行いたい方は参考にしてみてください！

その他アプリアイコンの設定は、以下の記事でご紹介しています。
こちらも併せてご覧ください。
▶︎ [Web,Mobile(iOS/Android)アプリにアイコンを設定する手順【V9対応】](https://qiita.com/Kony_Team/item/ac075947c57ac40f848a)

## 実装方法

### iOS
#### ①アプリ名を記載したファイルを作成
アプリ名を表示するために`infoplist_configuration.json`というファイルを編集します。

ここでは、カメラや位置情報などのパーミッションが書き込まれます。
パーミッションを追加していないまっさらな状態の場合、
画像のような表示になっているかと思います。
![スクリーンショット 0004-06-14 16.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f49530af-435b-71b3-90e7-2fad547cb71a.png)

このファイルを編集していきます。
表示したいアプリ名を`CFBundleDisplayName`に記載し、以下の2行を追加してください。

```infoplist_configuration.json
"CFBundleDevelopmentRegion" : "ja_JP",
"CFBundleDisplayName" : "アプリ名（例：みんなのアプリ）"
```
![スクリーンショット 0004-06-14 16.25.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/319c6bd8-29ab-eb9d-c190-17648156cc54.png)

このようになっていればOKです。
※`/*`,`*/`の箇所は、コメントアウトされた箇所のため、一番最後の`}`手前に記載してください。

<font color="Red">

※最後の行なのに「,」がついていたり、
最後の行ではないのに「,」がついていなかったりすると、
正常にアプリ名が表示されません。

</font>

![スクリーンショット 0004-06-14 16.53.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/73be81a6-6fff-29a1-7f7e-f332a80b0bee.png)


よくある間違いなので、ビルド前に正しく表記されているか、必ず確認するようにしましょう！


#### ②Resourceフォルダに配置
`infoplist_configuration.json`ファイルが編集できたら、
以下のフォルダ直下にファイルを配置してください。
`~/Visualizer/ワークスペース名/プロジェクト名/resources/common`

このように配置されたら完成です！
![スクリーンショット 0004-06-14 16.32.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b00ae9e8-d73d-0de2-d638-c2554c693803.png)


### Android

#### ①アプリ名を記載したファイルを作成

アプリ名を表示するために`strings.xml`というファイルを作成します。
（ファイルの作成には、Visual Studio Codeなどのエディタアプリで作成ができます。）

以下の例のように、表示したいアプリ名を記載してください。

```strings.xml
<resources>
    <string name="app_name">アプリ名（例：みんなのアプリ）</string>
    <string name="search_hint">Search</string>
    <string name="search_label">Search</string>
</resources>

```

以下のように作成できればOKです。
![スクリーンショット 0004-06-14 17.23.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/89db9d3e-4bd5-cef2-283f-a1bfc07c3832.png)


#### ②Resourceフォルダに配置
次に、以下のリソースフォルダ直下に、`values`という名前でフォルダを作成してください。

`~/Visualizer/ワークスペース/プロジェクト名/resources/mobile/native/android` 

![スクリーンショット 0004-06-14 15.58.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/03b90ad2-50fe-a93b-aeb6-510576937d51.png)

①で作成した`strings.xml`ファイルを、
valuesフォルダの中に配置したら完了です。
![スクリーンショット 0004-06-14 16.09.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6a9fc480-2d70-42f9-71da-0dd7cb7b06c7.png)



## 完成
iOS,Androidどちらも設定が完了したので、
どのようになったか見てみましょう！

| iOS | Android | 
|:-----------|:------------|
|![IMG_37F637E80BE8-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c508f3b5-b599-1244-1460-5c21b7b0d5a5.jpeg)| ![スクリーンショット 0004-06-14 17.18.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2da5e9ea-9d1f-7720-aa66-1c6344e4d312.png)| 

Android,iOSどちらも設定した名前でアプリ名が表示されました！

## 最後に
アプリ名の表示方法について紹介しました！
うまく機能しなかったり、不明な点があればコメントいただけるととっても嬉しいです！


## 参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Native_App_Properties.htm