アプリの仕上げ（後編）

前編では、テーマの設定、ダークモード対応、アイコンの追加について学びました。後編では、スプラッシュスクリーンの設定とアプリ名の設定について説明します。

4. スプラッシュスクリーンの設定

スプラッシュスクリーンは、アプリの起動時に一時的に表示される画面です。スプラッシュスクリーンを設定することで、アプリのブランドを印象付けたり、起動時のユーザー体験を向上させたりすることができます。

AndroidとiOSでは、スプラッシュスクリーンの設定方法が異なります。

4.1 Androidのスプラッシュスクリーン設定

Androidでは、launch_background.xml というドローワブルリソースを使って、スプラッシュスクリーンを定義します。

android/app/src/main/res/drawable ディレクトリに、launch_background.xml ファイルがあることを確認します。
launch_background.xml を編集し、スプラッシュスクリーンのレイアウトを定義します。例えば、以下のように記述します。

xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/splash_background" />

    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/splash_image" />
    </item>
</layer-list>

@color/splash_background は、スプラッシュスクリーンの背景色です。colors.xml ファイルで定義します。
@mipmap/splash_image は、スプラッシュスクリーンに表示する画像です。mipmap ディレクトリに配置します。

android/app/src/main/res/values/styles.xml を開き、LaunchTheme の windowBackground に @drawable/launch_background が設定されていることを確認します。

xml

<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

4.2 iOSのスプラッシュスクリーン設定

iOSでは、LaunchScreen.storyboard というストーリーボードファイルを使って、スプラッシュスクリーンを定義します。

Xcodeで ios/Runner.xcworkspace を開きます。
Runner > Runner > LaunchScreen.storyboard を選択します。
デフォルトでは、LaunchScreen.storyboard には、アプリ名と著作権情報が表示されています。これをカスタマイズして、スプラッシュスクリーンをデザインします。
画像を表示する場合は、Assets.xcassets に画像を追加し、LaunchScreen.storyboard に ImageView を配置して、画像を設定します。

4.3 スプラッシュスクリーンの表示時間

スプラッシュスクリーンの表示時間は、ネイティブコードで制御されています。Flutter側で表示時間を制御することはできません。

ただし、スプラッシュスクリーンが表示された後に、Flutter側で追加の初期化処理を行う場合は、WidgetsBinding.instance.addPostFrameCallback を使って、最初のフレームが描画された後に処理を実行することができます。

dart

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // スプラッシュスクリーンが表示された後に行う処理
  });
}

5. アプリ名の設定

アプリ名は、デバイスのホーム画面やアプリ一覧などに表示される、アプリの名前です。

5.1 Androidのアプリ名設定

Androidでは、AndroidManifest.xml ファイルでアプリ名を設定します。

android/app/src/main/AndroidManifest.xml を開きます。
application タグの android:label 属性に、アプリ名を設定します。

xml

<application
    android:label="電卓アプリ"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher">

5.2 iOSのアプリ名設定

iOSでは、Info.plist ファイルでアプリ名を設定します。

ios/Runner/Info.plist を開きます。
CFBundleDisplayName キーの値に、アプリ名を設定します。

xml

<key>CFBundleDisplayName</key>
<string>電卓アプリ</string>

5.3 アプリ名の国際化

アプリ名を多言語対応させるには、文字列リソースを使います。

Androidでは、values ディレクトリに言語別の strings.xml ファイルを作成します。例えば、英語用の values-en/strings.xml と、日本語用の values-ja/strings.xml を作成します。

xml

<!-- values/strings.xml -->
<resources>
    <string name="app_name">Calculator</string>
</resources>

<!-- values-en/strings.xml -->
<resources>
    <string name="app_name">Calculator</string>
</resources>

<!-- values-ja/strings.xml -->
<resources>
    <string name="app_name">電卓アプリ</string>
</resources>

AndroidManifest.xml では、android:label に @string/app_name を設定します。

xml

<application
    android:label="@string/app_name"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher">

iOSでは、InfoPlist.strings ファイルを言語別に追加します。例えば、en.lproj/InfoPlist.strings と ja.lproj/InfoPlist.strings を作成します。

/* en.lproj/InfoPlist.strings */
"CFBundleDisplayName" = "Calculator";

/* ja.lproj/InfoPlist.strings */
"CFBundleDisplayName" = "電卓アプリ";

Info.plist では、CFBundleDisplayName に設定した値が、InfoPlist.strings から取得されるようになります。

コラム：Flutterアプリのパフォーマンス最適化

Flutterアプリのパフォーマンスを最適化するには、以下のような点に注意する必要があります。

不要なウィジェットの再構築を避ける: const コンストラクタを使ったり、build メソッドを小さなウィジェットに分割したりすることで、不要なウィジェットの再構築を避けられます。
ListView で itemExtent を指定する: ListView を使う場合は、itemExtent プロパティを指定することで、リストのパフォーマンスを向上させることができます。
画像のサイズを最適化する: 画像のサイズが大きいと、メモリ使用量が増加し、パフォーマンスが低下する可能性があります。画像のサイズを適切に調整し、不要な透明部分は削除しましょう。
プロファイリングツールを使ってボトルネックを特定する: Flutter DevTools のプロファイリングツールを使って、アプリのパフォーマンスのボトルネックを特定し、最適化することができます。
不要なアニメーションを避ける: アニメーションはUIを魅力的にしますが、過度な使用はパフォーマンスに影響を与える可能性があります。本当に必要なアニメーションだけに絞りましょう。
バックグラウンド処理に compute 関数を使う: 時間のかかる処理は、compute 関数を使ってバックグラウンドで実行することで、UIスレッドのブロックを避けられます。
メモリリークを避ける: 不要になったオブジェクトへの参照を保持し続けないように注意し、メモリリークを避けましょう。

これらの点を意識することで、Flutterアプリのパフォーマンスを最適化し、ユーザー体験を向上させることができます。