ionic-deep-links について
Ionic と Capacitor アプリにディープリンクを実装する開発者向けのガイドです。カスタム URL スキーム、iOS Universal Links、Android App Links と、アプリ内フローへのルーティングを扱います。
主な機能
- 01カスタム URL スキームのガイド
- 02iOS Universal Links の設定
- 03Android App Links の設定
- 04共通ディープリンクルーティングパターン
- 05コールドスタート時の URL 処理ガイド
活用シーン
- 01アプリでパスワードリセットリンクを開く
- 02OAuth コールバックの処理
- 03招待リンクと共有リンクのルーティング
- 04iOS と Android エミュレーターでのリンクテスト
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ erkamyaman/ ionic-capacitor-skills --skill ionic-deep-linksインストール後、Claude Code で/ionic-deep-linksを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/android-app-links.mdcustom-scheme.mdios-universal-links.mdrouting.md詳細
ディープリンク(URL スキーム+ユニバーサルリンク+アプリリンク)
一緒に使うことが多い、ディープリンクの 3 つの種類です。
| 種類 | 形式 | 検証方法 | 使用する場面 |
|---|---|---|---|
| カスタムスキーム | myapp://reset-password?token=… | なし | 内部フロー、OAuth コールバック。簡単に設定できます。誰でもこのスキームを登録できます。 |
| iOS ユニバーサルリンク | https://yourapp.com/reset-password?token=… | ドメイン上の apple-app-site-association ファイル | アプリを開くか、ウェブにフォールバックするブランド付きリンク。 |
| Android アプリリンク | https://yourapp.com/reset-password?token=… | ドメイン上の assetlinks.json | Android でユニバーサルリンクと同じ目的に使用します。 |
洗練されたアプリでは、通常 3 種類すべてを使います。1 つの URL を iOS と Android の両方で使えるようにし(ユニバーサルリンク/アプリリンク)、検証済みリンクが使えない場合に備えて、カスタムスキームをフォールバックとして用意します。
参照する場面
- カスタム URL スキーム+
@capacitor/appリスナー:custom-scheme.md - iOS ユニバーサルリンク(エンタイトルメント+AASA ファイル):ios-universal-links.md
- Android アプリリンク(インテントフィルター+assetlinks.json):android-app-links.md
- リンクからページへのルーティング:routing.md
標準 URL 形式
用途ごとにパスのプレフィックスを 1 つ選び、カスタムスキーム、ユニバーサルリンク、アプリリンク全体で一貫して使うと、同じルーターコードですべてを処理できます。
| 用途 | カスタムスキーム | ユニバーサルリンク/アプリリンク |
|---|---|---|
| 認証(リセット/OAuth コールバック/マジックリンク) | myapp://auth/<flow>?... | https://yourapp.com/auth/<flow>?... |
| 招待 | myapp://invite/<code> | https://yourapp.com/invite/<code> |
| 共有 | myapp://share/<id> | https://yourapp.com/share/<id> |
このスキャフォールドでは、認証パスを ionic-firebase、ionic-supabase、およびパスワードリセット/OAuth コールバックのフローで共通して使用します。
- マジックリンク:
https://yourapp.com/auth/finish-signin?... - パスワードリセット:
myapp://auth/reset-password?token=... - OAuth コールバック(Supabase):
myapp://auth/callback#access_token=...
ディープリンクハンドラーのルーティングロジックは pathname.startsWith('/auth/') で判定し、適切なフローに処理を委譲します。
厳守事項
- ✅
@capacitor/appのappUrlOpenリスナーを使用してください。3 種類すべてで一貫して呼び出されます。 - ✅ AASA/
assetlinks.jsonファイルは、適切なContent-Type(application/json、拡張子なし)でドメインのルートに配置してください。 - ✅
xcrun simctl openurl(iOS シミュレーター)とadb shell am start -a android.intent.action.VIEW -d "<url>"(Android エミュレーター)でテストしてください。 - ❌ パスワードリセット/OAuth でカスタムスキームだけに依存しないでください。最近の OS バージョンやメールクライアントでは、カスタムスキームが抑制されるケースが増えています。
- ❌ コールドスタート時に
App.getLaunchUrl()を呼び出し忘れないでください。コールドスタート時にはappUrlOpenが確実に呼び出されない場合があります(多くの Capacitor バージョンでは呼び出されますが、動作はプラットフォームやバージョンによって異なります)。念には念を入れて、起動時に必ず一度getLaunchUrl()を確認してください。
ライブラリ
npm install @capacitor/app
npx cap sync
コメント
Markdown 対応