Skip to content

ディープリンク

Flutterを使用してiOSまたはAndroidアプリにディープリンクを実装する方法を学びます。サンプルアプリをチェックしたい場合は、GitHubをご覧ください。Braze Flutter SDK 例。ディープリンクに関する一般的な情報については、ディープリンクFAQをご覧ください。

前提条件

ディープリンクをFlutterアプリに実装する前に、ネイティブのAndroidまたはiOSレイヤーでディープリンクを設定する必要があります。

ディープリンクの実装

ステップ 1:Flutter の組み込み処理を設定する

  1. Xcodeプロジェクトで、Info.plistファイルを開封します。
  2. 新しいキーと値のペアを追加します。
  3. キーをFlutterDeepLinkingEnabledに設定します。
  4. タイプをBooleanに設定します。
  5. 値をYESに設定します。 ![追加されたキーと値のペアを持つInfo.plistファイルの例]（/docs/ja/assets/img/flutter/flutter-ios-deep-link-info-plist.png?1b18847d484e9f36433781cfa4d00de2「XcodeプロジェクトInfo.plistファイル」）
  1. Android Studio プロジェクトで、AndroidManifest.xml ファイルを開封します。
  2. .MainActivityタグのactivityを見つけます。
  3. activityタグ内に、次のmeta-dataタグを追加します: 
    1

     <meta-data android:name="flutter_deeplinking_enabled" android:value="true" />

ステップ2:データをDartレイヤーに転送する（オプション）

ネイティブ、ファーストパーティ、またはサードパーティのリンク処理を使用して、アプリ内の特定の場所にユーザーを送信したり、特定の機能を呼び出したりするなどの複雑な使用例に対応できます。

例: アラートダイアログへのディープリンク

まず、メソッドチャネルがネイティブ層で使用され、ディープリンクのURL文字列データをDart層に転送します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

extension AppDelegate {
  
  // Delegate method for handling custom scheme links.
  override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    forwardURL(url)
    return true
  }
  
  // Delegate method for handling universal links.
  override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    guard userActivity.activityType == NSUserActivityTypeBrowsingWeb,
        let url = userActivity.webpageURL else {
      return false
    }
    forwardURL(url)
    return true
  }

  private func forwardURL(_ url: URL) {
    guard let controller: FlutterViewController = window?.rootViewController as? FlutterViewController else { return }
    let deepLinkChannel = FlutterMethodChannel(name: "deepLinkChannel", binaryMessenger: controller.binaryMessenger)
    deepLinkChannel.invokeMethod("receiveDeepLink", arguments: url.absoluteString)
  }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

class MainActivity : FlutterActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    handleDeepLink(intent)
  }

  override fun onNewIntent(intent: Intent) {
      super.onNewIntent(intent)
    handleDeepLink(intent)
  }

  private fun handleDeepLink(intent: Intent) {
    val binaryMessenger = flutterEngine?.dartExecutor?.binaryMessenger
    if (intent?.action == Intent.ACTION_VIEW && binaryMessenger != null) {
      MethodChannel(binaryMessenger, "deepLinkChannel")
        .invokeMethod("receivedDeepLink", intent?.data.toString())
    }
  }

}

次に、コールバック関数がDartレイヤーで使用され、以前に送信されたURL文字列データを使用してアラートダイアログを表示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

MethodChannel('deepLinkChannel').setMethodCallHandler((call) async {
  deepLinkAlert(call.arguments, context);
});

void deepLinkAlert(String link, BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text("Deep Link Alert"),
        content: Text("Opened with deep link: $link"),
        actions: <Widget>[
          TextButton(
            child: Text("Close"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}
  GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!