SwiftUI でユーザー招待機能を実装する方法
🎯 目的
SwiftUI で実装された iOS アプリで、ディープリンクを利用してユーザーを招待できる機能を実現する方法を決める
💡 前提
🏁 やりたいこと
個人開発で、家族や同棲している恋人とで買い物リストを管理できる iOS アプリ(⚙️Swift/🛠️SwiftUI)を開発しています。そこで家族や同棲している恋人など他のユーザーをアプリに招待して、同じ買い物リストに食材や日用品を追加したり、削除できるようにしたいです。
この記事では、主に招待リンクから iOS アプリに遷移し、買い物リストに参加するまでの機能の実装方法について解説します
🔗 ユーザー招待機能
🧐 技術調査
ユーザー招待機能を実装するにあたり、ディープリンクと呼ばれる技術を利用する必要があります。ディープリンクはURLからアプリを開くための技術です。このディープリンクは具体的に以下の「🔗カスタムURLスキーム」「🔗Universal Links」「🔗Webアプリ」で実現することができます。
🔗 Firebase Dynamic Linksについて
🔗 「カスタムURLスキーム」でユーザーを招待する
該当のアプリ(この記事だと買い物リストアプリ)をインストールした iPhone の Safari ブラウザから myapp://cart/34qu4rwefqu4io3ero/join のようなカスタム URL スキーマ(この例だと、myapp://)からアプリに遷移できます。
🛠️実装方法
TARGET > Info > URL Types にてカスタム URL スキームを設定します。
カスタムURLスキームを設定する例
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
// ...
.onOpenURL(perform: { url in
// カスタム URL スキームのURLに応じて View を切り替える
})
.navigationDestination(...) {
HogeView()
}
}
}
}
👍 メリット
- 実装が簡単✨
👎 デメリット
- アプリがインストールされてない場合、リンクが機能せず、何も起こらないorエラーになる💭
-
他アプリとスキームが競合したら、他アプリに遷移する可能性がある❗
- iOSのURLスキームを乗っ取る攻撃手法もあるので注意が必要
🔗 「Universal Links」
🛠️実装方法
1. ⚡️サーバー側) apple-app-site-association ファイルを作成する
{
"applinks": {
"apps": [],
"details": [
{
"appID": "{Team ID}.{Bundle ID}",
"paths": ["*"]
}
]
},
"webcredentials": {
"apps": ["{Team ID}.{Bundle ID}"]
}
}
2. ⚡️サーバー側) https://example.com/.well-known/apple-app-site-association でアクセスできるようにする
- ファイルの MINE タイプは
application/jsonにしてください -
.htaccessにAddType application/json .well-known/apple-app-site-associationと記載するなりしてください
3. 📱アプリ側) TARGETS > Signing & Capabilities > + Capabilityを選択する
詳しい設定は以下のページを参照してください。
👍 メリット
- アプリがインストールされてない場合、Webページへ遷移する
- 他アプリと競合しない👍
👎 デメリット
- 実装コストがカスタム URL スキーマより高い‼️
- LINE,Messenger内で招待リンクをクリックしてもアプリへ遷移せずにLINE,Messenger の WebView に遷移する🤔
🔗 Webアプリ内で処理する
Universal Linksでも LINE や Messenger などのアプリでは、Safariに遷移せずにアプリの WebView で Web サイトが表示します。また、iPhone のデフォルトブラウザが Chrome など Safari 以外の場合もアプリに遷移せずに、Web サイトが表示されるようです。そのため、表示された Web サイト内でも適切に処理できる必要があります。
そのため、Next.js や Nuxt.js で実装された Web アプリ内で招待リンクにアクセスしたら、適切に処理するように実装します。この際、招待された者の認証をする必要があるでしょうから、ユーザー登録機能やログイン機能も実装しておく必要があります。
🔗 「Deferred Deep Link」
詳細は以下の記事を参照してください。アプリをインストールしていない場合は、AppStoreに遷移して、インストールしたら適切な画面へ遷移する技術。上記のどの技術よりもユーザー体験が良い。
🎯 設計
🛠️ 実装方法
以下の記事を参照してください。
📚 参考文献
📚 ディープリンクについての解説サイト
📚 ディープリンクの導入事例
Discussion