mcpField
I
ionic-deep-links

ionic-deep-links

github.com/erkamyaman開発1644 回インストール1 週間前に更新
リポジトリ

ionic-deep-links について

Ionic と Capacitor アプリにディープリンクを実装する開発者向けのガイドです。カスタム URL スキーム、iOS Universal Links、Android App Links と、アプリ内フローへのルーティングを扱います。

主な機能

  1. 01カスタム URL スキームのガイド
  2. 02iOS Universal Links の設定
  3. 03Android App Links の設定
  4. 04共通ディープリンクルーティングパターン
  5. 05コールドスタート時の URL 処理ガイド

活用シーン

  1. 01アプリでパスワードリセットリンクを開く
  2. 02OAuth コールバックの処理
  3. 03招待リンクと共有リンクのルーティング
  4. 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.md
custom-scheme.md
ios-universal-links.md
routing.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.jsonAndroid でユニバーサルリンクと同じ目的に使用します。

洗練されたアプリでは、通常 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

コメント