アプリ名・パッケージ(バンドル)名の変更
アプリ名については、開発中は仮の名称にしていることも多いと思います。また、パッケージ(バンドル)名は開発の過程ではFlutterの開発者に直接的に関係してくることはありません。
そして、これらの情報はブランディングや組織等の制約により決まることも多いため、開発者の都合に関係なく変更、決定される場合が多々あります。これらの変更は、先に紹介した各OS向けネイティブパッケージの管理情報を開いて編集しても構いませんが、ここではFlutter開発者向けのツールを使って変更する方法を紹介します。
renameツールの導入
renameは、アプリ名とパッケージ名を確認、変更するツールです。このツールはリスト2の手順で導入できます。
$flutter pub global activate rename Downloading packages... . (省略) export PATH="$PATH":"$HOME/.pub-cache/bin" Activated rename 3.0.2.
また、インストール時の表示にもあるようにPATHの設定を忘れないようにしてください。
アプリ名の確認と変更をする
現在のアプリ名の確認をする場合には、リスト3のように行います。--targetsオプションで、確認するOSを指定する事もできます。何も指定しない場合には、iosとandroidがデフォルトになっているため、スマホ開発においてはiosとandroidで個別に指定するケース以外では、あえて指定するケースは少ないでしょう。
$rename getAppName --targets ios,android Targets: [ios, android] ┌──────────────────────────────────────────────── │ #0 Rename._handleCommand (package:rename/rename.dart:153:16) │ #1 <asynchronous suspension> ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ 💡 IOS getAppName => sample └──────────────────────────────────────────────── ┌──────────────────────────────────────────────── │ #0 Rename._handleCommand (package:rename/rename.dart:153:16) │ #1 <asynchronous suspension> ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ 💡 ANDROID getAppName => sample └────────────────────────────────────────────────
表示がログ形式になりますが、ここでは「sample」というアプリ名であることがわかるようになりました。また、変更する場合にはリスト4のように実行します。
$rename setAppName --targets ios,android --value "サンプルアプリ" Targets: [ios, android] Value: サンプルアプリ ┌──────────────────────────────────────────────── (省略) ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ 💡 rename has successfuly changed appname for IOS │ 💡 sample -> サンプルアプリ └──────────────────────────────────────────────── (省略) ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │ 💡 rename has successfuly changed appname for ANDROID │ 💡 sample -> サンプルアプリ └────────────────────────────────────────────────
パッケージ名(バンドル名)も同様の手順で確認と設定が行えます。
アプリアイコンを設定する
アプリをリリースする際に面倒な設定の一つに、ホーム画面などに表示するアプリアイコンの設定があります。アイコン画像を作るためにさまざまなサイズに自動変換してくれる機能は、デザイナーが使うツールにある場合があります。しかし、flutter_launcher_iconsというツールを使えば、サイズの自動調整だけではなく、設定も自動で行ってくれるので作業が楽になります。
インストールと初回設定
インストールには、プロジェクトフォルダ配下からリスト5のようにコマンドを実行します。
$flutter pub add flutter_launcher_icons
続いて、リスト6のようにコマンドを利用して、設定を外部ファイルとして切り出します。
$dart run flutter_launcher_icons:generate Building package executable... // (省略) You can now use this new config file by using the command below: flutter pub run flutter_launcher_icons
これによって、リスト7のようなflutter_launcher_icons.yamlファイルが生成されます(見やすいようにコメントなどは除去してあります)。
flutter_launcher_icons: image_path: "assets/icon/icon.png" android: "launcher_icon" min_sdk_android: 21 ios: true remove_alpha_channel_ios: true
設定では1つの共通画像ファイルのみ指定されていますが、iOSとAndroid8以降でアイコン画像の考え方が大きく異なるため、共通ファイルですべてのアプリアイコンに対応することは現実的にはできません(※)。よって、iOS向けとAndroid向けの画像を作成して、それぞれ設定します。
※Android8からアプリアイコンは、アダプティブアイコンという考え方になっています。
iOS向けのアイコン画像を用意する
iOS向けのアイコンを作成する場合には、高解像度向けの端末に対応するための正方形画像を用意するだけです。
iOS向けのアイコン作成についての詳細は、Apple Developerサイトにありますが、アプリストアで必要とするサイズが1024x1024で、それ以外のアプリアイコンはそれ以下のサイズです。よって、1024x1024のアイコンだけを用意すれば問題ありません。
Android向けのアイコン画像を用意する
Android向けのアイコン画像の準備は、iOSに比べると少々面倒です。Androidアプリの場合、アイコン画像はこちらで説明されているように、背景と本体画像の2つのレイヤーでできています。さらに本体画像についてもカラー(通常)用とモノクロ用があり、iOSに比べるとさまざまなカスタマイズが可能になっています。
しかしながら、iOSと同じレベルのアイコンの見た目で問題なければ、flutter_launcher_iconsでは本体画像を指定すれば問題ありません。
ただし、Androidの場合には前述したとおりアダプティブアイコンになっていて、図3の考え方になっています。
そのため、iOSと違って背景部分を取り除いた部分の画像にしないと、アイコン表示をしたときに実際のアイコン画像がきれてしまうなどの問題が生じます。
ガイドラインには「全体を108dpとしたときに、48〜66dp以内」とあるので、おおよそ50%程度に画像を縮小すれば問題ないアイコン画像が作成できます。
各ネイティブ向けのアイコン画像の作成処理
iOS向けの画像をassets/icon/icon.pngに、Android用の画像をassets/icon/icon_android.pngに設定した場合の設定例が、リストのようになります。
flutter_launcher_icons: image_path: "assets/icon/icon.png" android: "launcher_icon" min_sdk_android: 21 # android min sdk min:16, default 21 adaptive_icon_background: "#ffffff" adaptive_icon_foreground: "assets/icon/icon_android.png" ios: true remove_alpha_channel_ios: true
image_pathで設定している画像は、iOSとアダプティブアイコン対応前(Android 8.0以前)のAndroid機種向けにはなります。現在Android8以前をサポートするケースはあまりないと思われるため、現実的にはiOS向けの制限やガイドラインに沿って作成すれば問題ありません。
また、androidにて指定した「launcher_icon」という設定は、Androidプロジェクトファイル内で管理されるファイル名です。これはAndroidプロジェクト内のファイルを直接編集する方以外は関係ないので、デフォルトのままで問題ありません。
「adaptive_icon_background」には、背景画像もしくは、背景色を設定します。上記例では背景色として「白(#ffffff)」を設定しています。そして「adaptive_icon_foreground」にAndroid用の画像パスを設定します。
ここまで設定が終わったら、リスト9のように「dart run flutter_launcher_icons」を実行しアプリアイコンの設定をネイティブアプリ側の設定に反映させます。
$ dart run flutter_launcher_icons ════════════════════════════════════════════ FLUTTER LAUNCHER ICONS (v0.14.1) ════════════════════════════════════════════ // (省略) No platform provided ✓ Successfully generated launcher icons
実際に、各ネイティブプロジェクト内で設定されていることを確認するには、Androidであれば、図4のようにAndroid Studioでapp/src/main/res/mipmap-anydpi-v26/launcher_icon.xmlファイルの「ic_launcher_foreground」指定にカーソルを合わせると設定した画像が表示されます。
また、iOSの場合には、XCodeで図5のようにAssetsメニューを見ることで確認できます。