SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Flutterで始めるモバイルアプリ開発

アプリ名やアイコン設定までFlutterで完結! 開発者向けツールを紹介

Flutterで始めるモバイルアプリ開発 第29回

  • X ポスト
  • このエントリーをはてなブックマークに追加

アプリ名・パッケージ(バンドル)名の変更

 アプリ名については、開発中は仮の名称にしていることも多いと思います。また、パッケージ(バンドル)名は開発の過程ではFlutterの開発者に直接的に関係してくることはありません。

 そして、これらの情報はブランディングや組織等の制約により決まることも多いため、開発者の都合に関係なく変更、決定される場合が多々あります。これらの変更は、先に紹介した各OS向けネイティブパッケージの管理情報を開いて編集しても構いませんが、ここではFlutter開発者向けのツールを使って変更する方法を紹介します。

renameツールの導入

 renameは、アプリ名とパッケージ名を確認、変更するツールです。このツールはリスト2の手順で導入できます。

[リスト2]renameツールの導入
$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で個別に指定するケース以外では、あえて指定するケースは少ないでしょう。

[リスト3]アプリ名を確認する場合
$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のように実行します。

[リスト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のようにコマンドを実行します。

[リスト5]flutter_launcher_iconsのインストール
$flutter pub add flutter_launcher_icons

 続いて、リスト6のようにコマンドを利用して、設定を外部ファイルとして切り出します。

[リスト6]flutter_launcher_iconsの設定ファイルの作成
$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ファイルが生成されます(見やすいようにコメントなどは除去してあります)。

[リスト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の考え方になっています。

図3:Android向けのアダプティブアイコンの考え方
図3:Android向けのアダプティブアイコンの考え方

 そのため、iOSと違って背景部分を取り除いた部分の画像にしないと、アイコン表示をしたときに実際のアイコン画像がきれてしまうなどの問題が生じます。

 ガイドラインには「全体を108dpとしたときに、48〜66dp以内」とあるので、おおよそ50%程度に画像を縮小すれば問題ないアイコン画像が作成できます。

各ネイティブ向けのアイコン画像の作成処理

 iOS向けの画像をassets/icon/icon.pngに、Android用の画像をassets/icon/icon_android.pngに設定した場合の設定例が、リストのようになります。

[リスト8]flutter_launcher_icons.yamlの設定例
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」を実行しアプリアイコンの設定をネイティブアプリ側の設定に反映させます。

[リスト9]各DPIに適したアイコンファイルの作成とネイティブアプリ側の設定への反映
$ 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」指定にカーソルを合わせると設定した画像が表示されます。

図4:Androidプロジェクトでのアプリアイコンの確認
図4:Androidプロジェクトでのアプリアイコンの確認

 また、iOSの場合には、XCodeで図5のようにAssetsメニューを見ることで確認できます。

図5:iOSプロジェクトでのアプリアイコンの確認
図5:iOSプロジェクトでのアプリアイコンの確認

次のページ
スプラッシュ画像の設定

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flutterで始めるモバイルアプリ開発連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/20495 2024/11/28 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング