Web & Deep Linkingの仕組みと実装方法ーFLUTTER

Flutterでアプリを開発する際、「Deep Linking（ディープリンク）」を使うことで、外部リンクからアプリ内の特定のページへ直接遷移させることができます。Webアプリでもモバイルアプリでも使えるこの機能は、ユーザー体験を大幅に向上させます。

今回は、FlutterでのWeb & Deep Linkingの仕組みと、具体的な実装方法をわかりやすく解説します。

✅ Deep Linkingと画像？

Deep Linkingとは、外部のURLリンクからアプリ内の特定の画面へ直接アクセスできる仕組みです。

たとえば：

https://example.com/product/123

このリンクを開くと、Flutterアプリ内の「商品詳細ページ（ID:123）」に直接遷移させることが可能になります。

この機能は、ECアプリ・ニュースアプリ・SNSなど、さまざまなアプリでよく使われています

✅ FlutterでのWeb Deep Linkingの実

FlutterのWebアプリでは、基本的にURLで画面遷移（ルーティング）できます。初期設定では/#/のようなURL構造になりますが、UrlStrategyを使えば、より自然なURL形式（例: /product/123）に変更できます。

設定例（main.dart）：

import 'package:flutter_web_plugins/url_strategy.dart';

void main() {
  usePathUrlStrategy(); // /#/ をなくす設定
  runApp(MyApp());
}

✅ モバイル（Android & iOS）でのDeep Linkingの実装

◾ Android側の設定

AndroidManifest.xml に以下のようなIntent Filterを追加します：

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="https"
        android:host="example.com"
        android:pathPrefix="/product" />
</intent-filter>

これにより、Android端末で該当URLを開くとFlutterアプリが自動的に起動し、該当画面が表示されます。

◾ iOS側の設定

• Info.plist に関連ドメインを追加
• Appleサーバー向けに apple-app-site-association ファイルを設置

この設定により、「Universal Link」が有効になります。

✅ GoRouterでルーティングを管理する

Flutterでのルート管理には go_router パッケージがおすすめです。Deep Linkとの相性も抜群です。

ルート定義例：

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/product/:id',
      builder: (context, state) {
        final id = state.params['id']!;
        return ProductPage(productId: id);
      },
    ),
  ],
);

これにより、https://example.com/product/123 のリンクでアプリが起動し、商品ID 123 のページへ直接遷移できます。

✅ Deep Linkのテスト方法

◾ Androidでのテスト：

adb shell am start -a android.intent.action.VIEW \
  -c android.intent.category.BROWSABLE \
  -d "https://example.com/product/123"

◾ iOSでのテスト（シミュレーター）：

xcrun simctl openurl booted "https://example.com/product/123"

✅ おわりに

Web & Deep Linkingは、ユーザーが求めるコンテンツへ素早くアクセスできるようにする便利な機能です。Flutterなら、Webとモバイルの両方に簡単に対応可能です。

ルーティングには GoRouter を活用し、各プラットフォームの設定を適切に行うことで、スムーズなDeep Linking体験を提供できます。

🎓 もっとFlutterを学びたい方へ！

Flutterスクール（https://flutter.cmatrix.co.jp/school/）では、
初心者からでもFlutterを体系的に学べるカリキュラムをご用意しています。

• 実務向けのアプリ開発講座
• Firebase・Riverpod・GoRouter などの実践講座
• 日本語でしっかり学べる環境

Flutterを仕事にしたい方は、ぜひチェックしてみてください！