React Nativeでスプラッシュスクリーンを構築する方法（コード例付き）

モバイルアプリでは第一印象が重要です。ユーザーがReact Nativeアプリを起動すると、最初に目にするのがスプラッシュスクリーンです。スプラッシュスクリーンはアプリの初期化中にアプリのロゴやブランディングを表示し、空白の画面を避けてアプリに洗練された印象を与え、ユーザーにアプリが読み込み中であることを伝えます。

React Nativeにおけるスプラッシュスクリーンとは？

スプラッシュスクリーンはアプリ起動時に表示される最初の画面です。React Nativeでは、スプラッシュスクリーンは通常、シンプルな背景にアプリ名、ロゴ、またはその他のブランディング要素を表示します。ネイティブコードがReact Nativeアプリを読み込み、準備している間、このスクリーンは表示されたままになります。スプラッシュスクリーンの主な目的は以下の通りです：

• ブランディング：アプリのブランドを即座に表示します
• ユーザーエクスペリエンス：アプリ起動中に空白または応答のない画面が表示されるのを防ぎます
• 速度の認識：何かが進行中であるという印象を与え、読み込み時間を短く感じさせます

なぜiOSのReact Nativeでスプラッシュスクリーンを使用するのか？

すべてのモバイルアプリはスプラッシュスクリーンの恩恵を受けられますが、iOSでは特に重要です。実際、Appleはアプリに起動画面を持つことを要求しています—iOSでは、スプラッシュスクリーンは単なる見せ物ではなく、期待されるユーザーエクスペリエンスの一部です。主な理由は以下の通りです：

• 向上したユーザーエクスペリエンス：洗練されたデザインのスプラッシュスクリーンで起動するiOSアプリは、よりスムーズでプロフェッショナルに感じられます
• アプリブランディング：スプラッシュスクリーンはアプリのロゴ、タグライン、またはアートワークを紹介します
• 読み込み時間の管理：iOSはアプリの準備が整うまで起動画面を表示し、起動中の遅延を隠します

React Nativeでスプラッシュスクリーンを設定する（iOS特有）

ステップ1：スプラッシュスクリーン画像の作成

まず、スプラッシュスクリーン用の画像が必要です：

• サイズ：すべてのデバイス画面で見栄えの良い高解像度画像（少なくとも2000 x 2000ピクセル）を使用します
• フォーマット：PNGはスプラッシュスクリーンに最も一般的に使用されるフォーマットです
• 向きとセーフエリア：重要なコンテンツは画像の中央に配置しましょう

プロのヒント： App Icon Generator (appicon.co) などのツールは、様々なiOS画面に合わせた適切なサイズの画像作成に役立ちます。

ステップ2：Xcodeでスプラッシュスクリーンを追加する

1. XcodeでiOSプロジェクトを開く：iosフォルダに移動し、.xcworkspaceまたは.xcodeprojファイルを開きます。
2. 画像アセットを追加する：XcodeでImages.xcassetsを見つけ、""Splash""という名前のNew Image Setを作成し、スプラッシュ画像を追加します。
3. 起動画面のストーリーボードを編集する：LaunchScreen.storyboardを開き、デフォルトの要素を削除してImage Viewを追加します。画像をスプラッシュ画像に設定し、サイズ変更または制約を設定し、Content Mode（Aspect FitまたはAspect Fill）を設定します。
4. 必要に応じてセーフエリアを設定する：必要であれば、「Use Safe Area」を無効にして、画像がステータスバー/ノッチエリアの下まで拡張できるようにします。

ステップ3：適切な表示設定のためにInfo.plistを変更する

1. Info.plistを開き、キー**""UILaunchStoryboardName""**を探します。
2. その値がストーリーボードの名前（例：「LaunchScreen」）であることを確認します。
3. LaunchScreenファイルがアプリターゲットに含まれていることを確認します。

iOSシミュレータまたはデバイスでアプリを実行し、起動時にスプラッシュスクリーンが短時間表示されることを確認します。

ライブラリを使用したスプラッシュスクリーン

ライブラリを使用すると、プロセスが簡素化され、追加の制御が可能になります。人気のあるライブラリは以下の2つです：

• react-native-splash-screen – iOSとAndroid両方で広く使用されています
• expo-splash-screen – Expoマネージドワークフロー用

react-native-splash-screenを使用してみましょう：

1. ライブラリをインストールする：

   npm install react-native-splash-screen --save
   

   または

   yarn add react-native-splash-screen
   

2. iOS：podsをインストールする：

   cd ios
   pod install
   cd ..
   

3. iOSネイティブコードを設定する：

   • AppDelegate.mを変更する：

     #import ""RNSplashScreen.h""  // このインポートを追加
     

     application:didFinishLaunchingWithOptions:メソッドに以下を追加：

     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
         // ... 既存のReact Nativeブートストラップコード ...
         [self.window makeKeyAndVisible];
         [RNSplashScreen show];  // スプラッシュスクリーンを表示
         return YES;
     }
     

   • Info.plistを確認する：UILaunchStoryboardNameが引き続きLaunchScreenストーリーボードに設定されていることを確認します。

4. 必要に応じてAndroidネイティブコードを設定する：

   • MainActivityにSplashScreenをインポートする
   • super.onCreateの前にSplashScreen.show(this)を呼び出す
   • launch_screen.xmlレイアウトを追加する
   • AndroidManifestを更新する

5. React Nativeコードでスプラッシュスクリーンを非表示にする：

   // App.js（またはindex.js）
   import React, { useEffect } from 'react';
   import { View, Text } from 'react-native';
   import SplashScreen from 'react-native-splash-screen';  // ライブラリをインポート
   
   const App = () => {
     useEffect(() => {
       // アプリの準備ができたらスプラッシュスクリーンを非表示にする
       SplashScreen.hide();
     }, []);
   
     return (
       <View>{/* アプリのUIコンポーネントはここから始まります */}
         <Text>Hello, Main App!</Text>
       </View>
     );
   };
   
   export default App;
   

スプラッシュスクリーンのタイミングと遷移の処理

• 短時間に保つ：スプラッシュスクリーンは必要な時間だけ表示されるべきです（理想的には1〜3秒）
• 準備ができたら非表示にする：アプリのメインコンテンツの表示準備ができたら、すぐにSplashScreen.hide()を呼び出します
• 遷移を合わせる：アプリの最初の画面の背景色をスプラッシュスクリーンと同じにします
• スムーズなアニメーション：スプラッシュスクリーンを非表示にする際に、微妙なアニメーションを追加することを検討してください
• 一貫した表示時間：アプリが早く読み込まれても、最小限の時間（例：2秒）スプラッシュを表示するアプリもあります

一般的な問題とデバッグのヒント

• スプラッシュスクリーンが表示されない：Info.plistのUILaunchStoryboardNameを確認し、LaunchScreenファイルがアプリターゲットに含まれていることを確認し、画像アセットが含まれていることを確認します
• 画像が引き伸ばされたり切り取られたりする：Content Mode設定を確認し、制約をチェックし、適切な画像サイズを提供していることを確認します
• スプラッシュスクリーンが点滅した後に空白の画面が表示される：UIの準備ができた時だけスプラッシュを非表示にし、背景色を合わせます
• スプラッシュスクリーンが固まったままになる：SplashScreen.hide()が呼び出されていることを確認し、早期のエラーをチェックします
• iPadでのアスペクト比が不正確：固定サイズではなく制約を使用し、ストーリーボードのデバイスをユニバーサルに設定し、高解像度の画像を提供します
• 変更が反映されない：ビルドをクリーンし、アプリを再インストールし、正しいファイルを編集していることを確認します

結論

React Nativeアプリにスプラッシュスクリーンを追加することは、よりプロフェッショナルでユーザーフレンドリーな体験をもたらす小さなステップです。Xcodeで手動でスプラッシュスクリーンを設定するか、react-native-splash-screenのようなライブラリを使用することで、起動時にブランディングを表示し、ユーザーを引き付けるスプラッシュスクリーンを統合できます。

タイミングに注意し、スプラッシュスクリーンとアプリの最初の画面の間のスムーズな遷移を確保することを忘れないでください。適切に実装すれば、スプラッシュスクリーンは起動した瞬間からアプリの認識品質を向上させるでしょう。

よくある質問

リブランドしたり新しいデザインにしたい場合、後からスプラッシュスクリーンを変更するにはどうすればよいですか？

Xcodeのアセットカタログで古いスプラッシュ画像を新しい画像に置き換えます（または新しい画像セットを追加し、LaunchScreen.storyboardのImage Viewを更新します）。背景色を使用した場合は、ストーリーボードでそれも調整します。その後、アプリを再ビルドします。スプラッシュスクリーンはネイティブコードの一部であるため、変更を確認するにはアプリを再コンパイルする必要があります。

React Nativeのスプラッシュスクリーンでアニメーションを使用できますか？

ネイティブのスプラッシュスクリーンは本質的に静的です。ただし、以下の方法でアニメーションの錯覚を作り出すことができます：1）スプラッシュスクリーンと最初の画面の間の遷移をアニメーション化する、2）最初の画面をスプラッシュに似せてデザインし、フェードアウトやスライドアップアニメーションを使用する、または3）アニメーション制御付きのExpo SplashScreenを使用する。実際のネイティブスプラッシュはアニメーションできないため、アニメーションはアプリが読み込まれた後に開始されます。

iOSシミュレータでスプラッシュスクリーンをテストするにはどうすればよいですか？

スプラッシュスクリーンをテストするには、iOSシミュレータまたはデバイスでアプリのコールドスタートを実行します。Xcodeで実行ボタンを押して、アプリを新規にインストールして起動します。変更を加えた後は、ビルドをクリーン（Product > Clean Build Folder）するか、再実行する前にアプリをアンインストールします。スプラッシュがどのようにスケーリングするかを確認するために、複数のシミュレータサイズでテストしてください。Expoアプリの場合、カスタムスプラッシュを確認するにはExpo prebuildを行うか、シミュレータビルドを使用する必要があるかもしれません。