Linking
Linking
は、アプリへの受信リンクとアプリからの送信リンクの両方を操作するための一般的なインターフェースを提供します。
すべてのリンク(URL)にはURLスキームがあります。一部のWebサイトはhttps://
やhttp://
で始まり、このhttp
がURLスキームです。ここでは短くスキームと呼びましょう。
https
に加えて、mailto
スキームにも馴染みがあるでしょう。mailtoスキームのリンクを開くと、お使いのオペレーティングシステムはインストールされているメールアプリケーションを開きます。同様に、電話をかけたりSMSを送信したりするためのスキームもあります。下記の組み込みURLスキームについて詳しくお読みください。
mailtoスキームを使用するのと同じように、カスタムURLスキームを使用して他のアプリケーションにリンクすることが可能です。例えば、Slackから**マジックリンク**のメールを受け取った場合、**Launch Slack**ボタンは`slack://secret/magic-login/other-secret`のようなhrefを持つアンカータグです。Slackのように、カスタムスキームを処理したいことをオペレーティングシステムに伝えることができます。Slackアプリが開くと、そのアプリを開くために使用されたURLを受け取ります。これはしばしばディープリンクと呼ばれます。アプリにディープリンクを取得する方法について詳しくお読みください。
カスタムURLスキームは、モバイルでアプリケーションを開く唯一の方法ではありません。例えば、モバイルで開かれるリンクを誰かにメールで送りたい場合、カスタムURLスキームの使用は理想的ではありません。なぜなら、ユーザーがそのメールをデスクトップで開くかもしれず、その場合リンクは機能しないからです。代わりに、https://www.myapp.io/records/1234546
のような標準のhttps
リンクを使用すべきです。モバイルでは、これらのリンクはアプリを開くように設定できます。Androidでは、この機能は**ディープリンク**と呼ばれ、iOSでは**ユニバーサルリンク**として知られています。
組み込みURLスキーム
冒頭で述べたように、すべてのプラットフォームに存在するコア機能のためのURLスキームがいくつかあります。以下は網羅的なリストではありませんが、最も一般的に使用されるスキームをカバーしています。
スキーム | 説明 | iOS | Android |
---|---|---|---|
mailto | メールアプリを開きます。例: mailto: support@expo.io | ✅ | ✅ |
tel | 電話アプリを開きます。例: tel:+123456789 | ✅ | ✅ |
sms | SMSアプリを開きます。例: sms:+123456789 | ✅ | ✅ |
https / http | Webブラウザアプリを開きます。例: https://expo.io | ✅ | ✅ |
ディープリンクの有効化
アプリでディープリンクを有効にしたい場合は、以下のガイドをお読みください。
- Android
- iOS
Androidでディープリンクのサポートを追加する方法については、アプリコンテンツのディープリンクを有効にする - ディープリンクのインテントフィルタを追加するを参照してください。
MainActivityの既存のインスタンスでインテントを受け取りたい場合は、AndroidManifest.xml
でMainActivityのlaunchMode
をsingleTask
に設定できます。詳細については、<activity>
のドキュメントを参照してください。
<activity
android:name=".MainActivity"
android:launchMode="singleTask">
注: iOSでは、ここのステップ3で説明されているように、ヘッダー検索パスに
LinkingIOS
フォルダを追加する必要があります。アプリの実行中に受信アプリリンクをリッスンしたい場合は、*AppDelegate.m
に次の行を追加する必要があります。
- ObjectiveC
- Swift
// iOS 9.x or newer
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}
アプリがユニバーサルリンクを使用している場合は、次のコードも追加する必要があります。
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
return RCTLinkingManager.application(app, open: url, options: options)
}
アプリがユニバーサルリンクを使用している場合は、次のコードも追加する必要があります。
override func application(
_ application: UIApplication,
continue userActivity: NSUserActivity,
restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
return RCTLinkingManager.application(
application,
continue: userActivity,
restorationHandler: restorationHandler
)
}
ディープリンクの処理
アプリを開くURLを処理するには2つの方法があります。
1. アプリがすでに開いている場合、アプリはフォアグラウンドになり、Linkingの'url'イベントが発行されます
これらのイベントはLinking.addEventListener('url', callback)
で処理できます。これはリンクされたURLとともにcallback({url})
を呼び出します。
2. アプリがまだ開かれていない場合、アプリが開かれ、URLがinitialURLとして渡されます
これらのイベントはLinking.getInitialURL()
で処理できます。これは、URLがあればそれに解決されるPromiseを返します。
使用例
リンクとディープリンク(ユニバーサルリンク)を開く
- TypeScript
- JavaScript
カスタム設定を開く
- TypeScript
- JavaScript
ディープリンクを取得する
- TypeScript
- JavaScript
インテントを送信する (Android)
- TypeScript
- JavaScript
リファレンス
メソッド
addEventListener()
static addEventListener(
type: 'url',
handler: (event: {url: string}) => void,
): EmitterSubscription;
url
イベントタイプをリッスンし、ハンドラを提供することで、Linkingの変更に対するハンドラを追加します。
canOpenURL()
static canOpenURL(url: string): Promise<boolean>;
インストールされているアプリが特定のURLを処理できるかどうかを判断します。
このメソッドはPromise
オブジェクトを返します。指定されたURLが処理できるかどうかが判断されると、Promiseは解決され、最初のパラメータは開くことができるかどうかを示すブール値になります。
Androidでは、URLが開けるかどうかを確認できなかった場合、またはAndroid 11 (SDK 30)をターゲットにしていてAndroidManifest.xml
に関連するインテントクエリを指定していない場合にPromise
はrejectされます。同様にiOSでは、Info.plist
内のLSApplicationQueriesSchemes
キーに特定のスキームを追加していない場合、Promiseはrejectされます(下記参照)。
パラメータ
名前 | 型 | 説明 |
---|---|---|
url 必須 | string | 開くURL。 |
Web URLの場合、プロトコル(
"http://"
,"https://"
)を適切に設定する必要があります!
このメソッドはiOS 9+で制限があります。Appleの公式ドキュメントより:
- アプリが古いバージョンのiOSに対してリンクされているが、iOS 9.0以降で実行されている場合、このメソッドは最大50回まで呼び出せます。その制限に達した後、以降の呼び出しは常に
false
に解決されます。ユーザーがアプリを再インストールまたはアップグレードすると、iOSは制限をリセットします。iOS 9以降、アプリは
Info.plist
内にLSApplicationQueriesSchemes
キーを提供する必要があり、そうでない場合canOpenURL()
は常にfalse
に解決されます。
Android 11 (SDK 30) をターゲットにする場合、
AndroidManifest.xml
で処理したいスキームのインテントを指定する必要があります。一般的なインテントのリストはこちらにあります。例えば、
https
スキームを処理するには、マニフェストに以下を追加する必要があります。<manifest ...>
<queries>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https"/>
</intent>
</queries>
</manifest>
getInitialURL()
static getInitialURL(): Promise<string | null>;
アプリの起動がアプリリンクによってトリガーされた場合、リンクのURLが返され、そうでない場合はnull
が返されます。
Androidでディープリンクをサポートするには、https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents を参照してください。
リモートJSデバッグがアクティブな場合、getInitialURLは `null` を返すことがあります。確実に渡されるようにするには、デバッガを無効にしてください。
openSettings()
static openSettings(): Promise<void>;
設定アプリを開き、アプリにカスタム設定がある場合はそれを表示します。
openURL()
static openURL(url: string): Promise<any>;
指定されたurl
をインストール済みのいずれかのアプリで開こうとします。
場所(例:Androidでは "geo:37.484847,-122.148386"、iOSでは "https://maps.apple.com/?ll=37.484847,-122.148386")、連絡先、またはインストールされているアプリで開くことができる他のURLを使用できます。
このメソッドはPromise
オブジェクトを返します。ユーザーが開封ダイアログを確認するか、URLが自動的に開かれると、Promiseは解決されます。ユーザーが開封ダイアログをキャンセルするか、URLに登録されたアプリケーションがない場合、Promiseは拒否されます。
パラメータ
名前 | 型 | 説明 |
---|---|---|
url 必須 | string | 開くURL。 |
このメソッドは、システムが指定されたURLを開く方法を知らない場合に失敗します。http(s)以外のURLを渡す場合は、最初に
canOpenURL()
をチェックするのが最善です。
Web URLの場合、プロトコル(
"http://"
,"https://"
)を適切に設定する必要があります!
このメソッドはシミュレータでは異なる動作をすることがあります。例えば、iOSシミュレータではダイアラーアプリにアクセスできないため、
"tel:"
リンクは処理できません。
sendIntent()
Android
static sendIntent(
action: string,
extras?: Array<{key: string; value: string | number | boolean}>,
): Promise<void>;
追加情報(extras)付きでAndroidインテントを起動します。
パラメータ
名前 | 型 |
---|---|
action 必須 | string |
extras | Array<{key: string, value: string | number | boolean}> |