【React Native】外部アプリを直接起動する設定
React Native アプリから外部アプリを直接開く方法についてまとめます。
ポイント
- iOSとAndroidで設定が異なるので注意。
- 外部アプリを起動する独自URLスキームが必要
- 実機にインストールしたアプリから直接設定を調べることができる
- Linking.canOpenURLで判定し処理を分ける必要がある
外部アプリを起動するURL
外部アプリを直接起動するためには
- 独自のURLスキーム（slack://等）
- ユニバーサルリンク
などの予め外部アプリによって定められた起動URLを知る必要があります。
外部アプリを起動するURLを確認する
ググると情報が公開されている場合もありますが、そうで無い場合は
- 自分で調べるか
- アプリ事業者に問い合わせる
必要があります。
自分で起動するURLを確認する方法
自分で調べる場合、アプリを実際にインストールした上で、設定ファイルを確認します。確認方法の一例を以下で紹介します。
iOSの場合
以下のような手順になります。
- iOS実機にアプリをインストール
- PCにアプリをコピーする
- Info.plistファイルを開く
- CFBundleURLSchemesを確認する
1. iOS実機にアプリをダウンロード
普通にappstoreからインストールします
2. PCにアプリをコピーする
以前はitunesを使用してiPhoneからアプリデータを吸い出せたのですが、現在はアップデートでその機能がなくなっています。外部アプリを利用したり、その他の方法でiPhoneからアプリデータを吸い出します。
私は「appSitter」というアプリを使用しました。（Mac）
3. Info.plistファイルを開く
アプリは.ipa拡張子になっているので、.zipに変更し展開します。
アプリ名/payload/ ディレクトリに.appファイルがあるので 右クリック＋「パッケージの内容を表示」 で開きます。
その中にInfo.plistファイルがあるのでエディタで開きます。
4. CFBundleURLSchemesを確認する
<key>CFBundleURLSchemes</key>
<array>
<string>myapp</string>
</array>
上記のようにkey + valueになっているので、確認します。複数設定されている場合もあります。
上記例の場合、myapp://でアプリを起動することができます。
Androidの場合
以下のような手順になります。
- Android実機にアプリをインストール
- PCにアプリをコピーする
- AndroidManifest.xmlファイルを開く
- CFBundleURLSchemesを確認する
1. Android実機にアプリをダウンロード
普通にストアからインストールします。
2. PCにアプリをコピーする
apkのパスを調べるために、以下のコマンドを実行します。
adb shell pm list packages -f | grep com.example.targetapp
得られたパスをもとにpullします。
adb pull /data/app/com.example.targetapp-1/base.apk
3. AndroidManifest.xmlファイルを開く
Android Studioなどで、.apkファイルを開き、intent-filterのURLSchemeを確認します。
ただアプリを起動するだけなら、mainのintent-filterを確認すればOKです。
例えば、
- URLScheme: myapp
- URLHost: app
となっている場合 myapp://app が起動URLとなります。
インストール済みの場合のみ起動する設定
アプリが端末にインストールされていない場合、myapp://のような独自URLスキームへのアクセスは、意味の無いリクエストになってしまうので、そのURLを開くことができるかどうかを判定してから実際にURLを開く必要があります。
Linking.canOpenURL を使用する
URLを開くことができる場合はtrue、ひらけない場合はfalseが返却されます。
iOSの追加設定
iOSでは、予め独自URLを許可しておかないとLinking.canOpenURLが常にfalseになってしまいます。
- info.plistのLSApplicationQueriesSchemesに許可するURLスキームを記述する
- info.plistのInformation Property ListにLSApplicationQueriesSchemesを追加する
- LSApplicationQueriesSchemesのTypeをArrayにする
- Valueにxxxアプリのスキームを書く
Androidの追加設定
Android 11（SDK 30）以降をターゲットにするには、AndroidManifest.xmlを更新して、許可するURLを明示する必要があります。これを行わないと、Linking.canOpenURLが常にfalseになってしまいます。
<manifest package="com.example.game">
<queries>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="http"/>
</intent>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https"/>
</intent>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="geo" />
</intent>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="google.navigation" />
</intent>
</queries>
...
</manifest>
特定の基準に合致するアプリケーション（アンチウイルスアプリ、ファイルマネージャ、ブラウザなど）については、QUERY_ALL_PACKAGESパーミッションを使用して、以前のAndroidバージョンと同様に任意のパッケージを照会できるようにすることができます。
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />
参考
Discussion