はじめに
React Native アプリから外部アプリを直接開く方法について調べたのでまとめます。
iOSとAndroidで若干異なるので注意が必要です。
外部アプリを起動するURLが必要
外部アプリを直接起動するためには、基本的に
- 独自のURLスキーム（slack://等）
- ユニバーサルリンク
など予め外部アプリによって定められた起動URLを知っておく必要があります。
外部アプリを起動するURLを確認する
ググると情報が公開されている場合もありますが、そうで無い場合は自分で調べる or アプリ事業者に問い合わせる必要があります。
自分で起動する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を確認する。
- URLScheme: myapp
- URLHost: app
となっている場合 myapp://appが起動URLとなる
アプリインストール済みの場合のみ起動URLを開くよう設定する
アプリが端末にインストールされていない場合、myapp://のような独自URLスキームへのアクセスは、意味の無いリクエストになってしまうので、
そのURLを開くことができるかどうかを判定してから実際にURLを開く必要がある。
Linking.canOpenURLを使用する
URLを開くことができる場合はtrue、ひらけない場合はfalseのPromiseを返す。
公式: https://reactnative.dev/docs/linking
const OpenURLButton = ({ url }) => {
const handlePress = useCallback(async () => {
// Checking if the link is supported for links with custom URL scheme.
const supported = await Linking.canOpenURL(url);
if (supported) {
// Opening the link with some app, if the URL scheme is "http" the web link should be opened
// by some browser in the mobile
await Linking.openURL(url);
} else {
Alert.alert(`Don't know how to open this URL: ${url}`);
}
}, [url]);
iOSは追加設定が必要
iOSでは、予め独自URLを許可しておかないとLinking.canOpenURLが常にfalseになってしまう。
info.plistのLSApplicationQueriesSchemesに許可するURLスキームを記述する
- info.plistのInformation Property ListにLSApplicationQueriesSchemesを追加する
- LSApplicationQueriesSchemesのTypeをArrayにする
- Valueにxxxアプリのスキームを書く
まとめ
React Native アプリから外部アプリを直接開く方法についてまとまました。
- 独自URLスキームが必要
- 実機にインストールしたアプリから直接設定を調べることができる
-
Linking.canOpenURLで判定し処理を分ける必要がある - iOSの場合は許可するURLスキームを明示する必要がある