【React Native】外部アプリを直接起動する設定

2022/06/23に公開

React Native アプリから外部アプリを直接開く方法についてまとめます。

ポイント

  • iOSとAndroidで設定が異なるので注意。
  • 外部アプリを起動する独自URLスキームが必要
  • 実機にインストールしたアプリから直接設定を調べることができる
  • Linking.canOpenURLで判定し処理を分ける必要がある

外部アプリを起動するURL

外部アプリを直接起動するためには

  • 独自のURLスキーム(slack://等)
  • ユニバーサルリンク

などの予め外部アプリによって定められた起動URLを知る必要があります。

外部アプリを起動するURLを確認する

ググると情報が公開されている場合もありますが、そうで無い場合は

  • 自分で調べるか
  • アプリ事業者に問い合わせる

必要があります。

自分で起動するURLを確認する方法

自分で調べる場合、アプリを実際にインストールした上で、設定ファイルを確認します。確認方法の一例を以下で紹介します。

iOSの場合

以下のような手順になります。

  1. iOS実機にアプリをインストール
  2. PCにアプリをコピーする
  3. Info.plistファイルを開く
  4. CFBundleURLSchemesを確認する

1. iOS実機にアプリをダウンロード

普通にappstoreからインストールします

2. PCにアプリをコピーする

以前はitunesを使用してiPhoneからアプリデータを吸い出せたのですが、現在はアップデートでその機能がなくなっています。外部アプリを利用したり、その他の方法でiPhoneからアプリデータを吸い出します。

私は「appSitter」というアプリを使用しました。(Mac)

3. Info.plistファイルを開く

アプリは.ipa拡張子になっているので、.zipに変更し展開します。

アプリ名/payload/ ディレクトリに.appファイルがあるので 右クリック+「パッケージの内容を表示」 で開きます。

その中にInfo.plistファイルがあるのでエディタで開きます。

4. CFBundleURLSchemesを確認する

Info.plist
<key>CFBundleURLSchemes</key>
<array>
  <string>myapp</string>
</array>

上記のようにkey + valueになっているので、確認します。複数設定されている場合もあります。
上記例の場合、myapp://でアプリを起動することができます。

Androidの場合

以下のような手順になります。

  1. Android実機にアプリをインストール
  2. PCにアプリをコピーする
  3. AndroidManifest.xmlファイルを開く
  4. 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-filterURLSchemeを確認します。
ただアプリを起動するだけなら、mainのintent-filterを確認すればOKです。

例えば、

  • URLScheme: myapp
  • URLHost: app

となっている場合 myapp://app が起動URLとなります。

インストール済みの場合のみ起動する設定

アプリが端末にインストールされていない場合、myapp://のような独自URLスキームへのアクセスは、意味の無いリクエストになってしまうので、そのURLを開くことができるかどうかを判定してから実際にURLを開く必要があります。

Linking.canOpenURL を使用する

URLを開くことができる場合はtrue、ひらけない場合はfalseが返却されます。

https://reactnative.dev/docs/linking

iOSの追加設定

iOSでは、予め独自URLを許可しておかないとLinking.canOpenURLが常にfalseになってしまいます。

  1. info.plistのLSApplicationQueriesSchemesに許可するURLスキームを記述する
  2. info.plistのInformation Property ListにLSApplicationQueriesSchemesを追加する
  3. LSApplicationQueriesSchemesのTypeをArrayにする
  4. Valueにxxxアプリのスキームを書く

Androidの追加設定

Android 11(SDK 30)以降をターゲットにするには、AndroidManifest.xmlを更新して、許可するURLを明示する必要があります。これを行わないと、Linking.canOpenURLが常にfalseになってしまいます。

AndroidManifest.xml
<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" />

https://stackoverflow.com/questions/64699801/linking-canopenurl-returning-false-when-targeting-android-30-sdk-on-react-native


参考

https://qiita.com/nagaoyuriko/items/67c5e262f6e88cd88885
https://qiita.com/taksatou@github/items/33dd64a83e60567f7004
https://stackoverflow.com/questions/64699801/linking-canopenurl-returning-false-when-targeting-android-30-sdk-on-react-native

Discussion