Zenn
JINSテックブログPublicationへの投稿
🐷

FlutterアプリでUniversal Linksを設定してみた【2024/09】

cab
2024/09/10に公開
Flutter
iOS
Deep link
tech

はじめに用語整理

特定のアプリに遷移するためリンクを作成しよう！と思って調べてみると、「Deeplink」や「カスタムURLスキーム」、「app links」、「Universal Links」、「Dynamic Links」などいろんなワードが出てきてどれを設定すれば良いかわからなくなると思います

とりあえず、以下の2つを覚えてください！

  • iOSは Universal Links
  • Androidは app links

他をざっくり説明すると、

  • Deeplink: リンクを踏んだときに特定のアプリに遷移する技術の総称。「カスタムURLスキーム」、「app links」、「Universal Links」、「Dynamic Links」はDeeplink技術を用いた機能名のようなもの
  • カスタムURLスキーム: hoge://*** の形式でリンクを作成できます。iOSやAndroidでも設定可能ですがセキュリティ面で懸念があるようです
    • 例） mailto://***でメールアプリを起動するなど
  • Dynamic Links: Firebaseが提供するDeeplink技術です。記事も多くよく使われていたようですが、2025/8/25に廃止になります

今回はUniversal Linksにフォーカスして書いていきます

Appleが正式サポートするDeeplink技術です
WebページのURLと関連する仕組みになっており、https://***.com/hoge/のようなWebページに、アプリ内のコンテンツを直接リンクすることができます
アプリがインストールされている場合はアプリが開き、アプリがインストールされていない場合はWebページが開きます

構成

Universal Linksの構成は、端末から直接サーバにアクセスしているわけでなく、下図のようにAppleのCDNを経由してサーバにアクセスしています

Flutter公式通りにやってみる

Flutterのサイトを参考に実践してみましょう！

ここではiOS14以上のバージョンを対象にしています
バージョンによって書き方などが変わっているため、対象のバージョンをご確認ください

Create or modify a Flutter app

いきなりgo_routerの話かよって思いますが、これはUniversal Linksのパスによって遷移先を変えたい場合に必要になります
単純にアプリを起動するだけであれば設定は不要です

今回は割愛します

Adjust iOS build settings

Add the FlutterDeepLinkingEnabled key value pair

  • iosフォルダのios/Runner.xcworkspaceをXcodeで開きます
  • Runner内のInfo.plistを開きます
    • Information Property List内に下記を追加します
      • Key: FlutterDeepLinkingEnabled
      • Type: Boolean
      • Value: YES

Add associated domains

下図の赤枠で囲った部分を見てもらえば簡単に設定できるかと思います

Domainsには、applinks:hogehoge.comとドメインを入力します

注意点

  • 頭にapplinks:つけること
  • https://は不要

Associate your app with your web domain

Universal Linksを実現するためにはapple-app-site-associationを必ずサーバに配置する必要があります

Locate components of the appID

次のappIDを設定するために、以下の２つを用意します

  • bundle ID: アプリを識別するID com.example.app
  • team ID: Appleが生成する10文字で構成される一意の文字列

Create and host apple-app-site-association JSON file

JSON形式のapple-app-site-associationファイルを作成しますが、拡張子はなしです（.jsonをつけない）

最小の構成は以下でOKです(Flutter公式の内容を変更したパターン↓)

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appIDs": [
          "S8QB4VV633.com.example.deeplinkCookbook"
        ],
        "paths": [
          "*"
        ],
      }
    ]
  },
}
変更する項目

以下の２つの項目を変更します

  • appIDs: 上記で用意した<team ID>.<bundle ID>を設定する
  • paths : アプリが起動しなかった場合にブラウザで表示するWebページのパスを設定します
    *を設定するとhttps://hogehoge.com/*のパス全てでUniversal Linksが有効になります

もっと詳細に設定したい場合は下記リンクを参照ください

apple-app-site-associationの設置場所

https://hogehoge.com/.well-known/apple-app-site-associationとなるように設置します
rootに.well-knownフォルダを生成して、apple-app-site-associationファイルを配置すればOKです
HTMLファイルはどこでもOKです

.
├── .well-known/
│   └── apple-app-site-association
└── jp/
    └── index.html // アプリ起動しない場合に表示するWebページ

Xcode CLIでなくても、メモ帳などに保存したリンクを踏むでもOKです

これでUniversal Linksの設定は完了です！

Universal Linksが効かない時の対処法

先人たちが書いた記事を見れば、大体の原因は判明すると思いますのでそちらを参考にしてください

Tips

AppleのCDN経由でapple-app-site-associationへのアクセス確認方法

下記のエンドポイントでアクセス確認できます
<hogehoge.com>を書きかえてください

curl -v https://app-site-association.cdn-apple.com/a/v1/<hogehoge.com>

サーバにIP制限を設けている場合の確認方法

開発用でサーバにIP制限を設けている場合、AppleのCDNがサーバにアクセスするためUniversal Linksは発動しません
そこでAppleのCDNを経由しないDeveloperモード方法を紹介します

Developerモード

  1. developerモードの設定

    ドメインの後に?mode=developerを追加します

    コードから修正する場合は、ios/Runner/Runner.entitlements内のを以下のように書きかえます

    <dict>
	<key>com.apple.developer.associated-domains</key>
	<array>
		<string>applinks:hogehoge.com?mode=developer</string>
	</array>
</dict>

  2. 開発用プロファイルで署名

    プロファイルを作成する際に、developerのプロファイルで署名します
    それ以外ではUniversal Linksは発動しません

  3. iPhoneの設定

    iPhoneの設定からdeveloperモードをONにします
    設定 > デベロッパ > ユニバーサルリンク > 関連ドメインの開発 をONにする

  4. 診断

    サーバのURLを入力するとアクセス可能かどうか確認できます
    下記のようになっていればOKです

まとめ

もっと簡単にできると思っていましたが、意外とハマりどころが多い印象です
この記事が少しでもお役に立てばと思います

参考

JINSテックブログ
JINSテックブログPublication

アイウエアや服飾雑貨の企画・製造・販売のほか、ウェアラブル端末の企画、開発、製造をしています。

Discussion