<p data-line="0" class="code-line">二つのアプリ間で情報の連携を行うために、DeepLinkを使いたいと思ったのですが、意外とアプリ間を往復する動きが紹介されている記事があまりなかったので実験してみました。</p>
<h1 id="%E5%AE%9F%E8%A3%85%E3%81%AE%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8" data-line="2" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E3%81%AE%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8" aria-hidden="true"></a> 実装のイメージ</h1>
<p data-line="4" class="code-line">アプリA、アプリBが存在するときに以下のような挙動を想定してます</p>
<ol data-line="5" class="code-line">
<li data-line="5" class="code-line">アプリAがアプリBに情報を問い合わせるDeepLinkをコール</li>
<li data-line="6" class="code-line">アプリBが立ち上がり、アプリBの中でアプリAに渡すための情報を準備する</li>
<li data-line="7" class="code-line">アプリBでアプリAに情報を渡すDeepLinkをコール</li>
<li data-line="8" class="code-line">アプリAが立ち上がり、アプリBの情報を受け取る</li>
<li data-line="9" class="code-line">アプリAでアプリBから受け取った情報をもとに処理を行う</li>
</ol>
<p data-line="11" class="code-line">色々なアプリを調べてみましたが、Amazonのアプリで、Paypayの支払い方法を登録するときの動きがイメージに近かったです。</p>
<h2 id="%E3%82%B7%E3%83%BC%E3%82%B1%E3%83%B3%E3%82%B9%E5%9B%B3" data-line="13" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B7%E3%83%BC%E3%82%B1%E3%83%B3%E3%82%B9%E5%9B%B3" aria-hidden="true"></a> シーケンス図</h2>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__0a46cda8b746a" src="https://embed.zenn.studio/mermaid#zenn-embedded__0a46cda8b746a" data-content="sequenceDiagram%0A%20%20%20%20participant%20%E3%82%A2%E3%83%97%E3%83%AAA%0A%20%20%20%20participant%20%E3%82%A2%E3%83%97%E3%83%AAB%0A%20%20%20%20%0A%20%20%20%20%E3%82%A2%E3%83%97%E3%83%AAA-%3E%3E%E3%82%A2%E3%83%97%E3%83%AAB%3A%20DeepLink%E3%82%92%E3%82%B3%E3%83%BC%E3%83%AB%3Cbr%3E(%E4%BE%8B%3A%20appb%3A%2F%2Frequest%3Fparam%3Dvalue)%0A%20%20%20%20Note%20over%20%E3%82%A2%E3%83%97%E3%83%AAB%3A%20%E3%82%A2%E3%83%97%E3%83%AAB%E3%81%8C%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%8C%E3%82%8B%0A%20%20%20%20%0A%20%20%20%20%E3%82%A2%E3%83%97%E3%83%AAB-%3E%3E%E3%82%A2%E3%83%97%E3%83%AAB%3A%20%E6%83%85%E5%A0%B1%E3%82%92%E6%BA%96%E5%82%99%0A%20%20%20%20Note%20over%20%E3%82%A2%E3%83%97%E3%83%AAB%3A%20%E3%82%A2%E3%83%97%E3%83%AAA%E3%81%AB%E8%BF%94%E3%81%99%E6%83%85%E5%A0%B1%E3%82%92%E7%94%9F%E6%88%90%0A%20%20%20%20%0A%20%20%20%20%E3%82%A2%E3%83%97%E3%83%AAB-%3E%3E%E3%82%A2%E3%83%97%E3%83%AAA%3A%20DeepLink%E3%82%92%E3%82%B3%E3%83%BC%E3%83%AB%3Cbr%3E(%E4%BE%8B%3A%20appa%3A%2F%2Fcallback%3Fresult%3Ddata)%0A%20%20%20%20Note%20over%20%E3%82%A2%E3%83%97%E3%83%AAA%3A%20%E3%82%A2%E3%83%97%E3%83%AAA%E3%81%8C%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%8C%E3%82%8B%0A%20%20%20%20%0A%20%20%20%20%E3%82%A2%E3%83%97%E3%83%AAA-%3E%3E%E3%82%A2%E3%83%97%E3%83%AAA%3A%20%E5%8F%97%E3%81%91%E5%8F%96%E3%81%A3%E3%81%9F%E6%83%85%E5%A0%B1%E3%82%92%E5%87%A6%E7%90%86" frameborder="0" scrolling="no" loading="lazy"></iframe></span><h1 id="%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F" aria-hidden="true"></a> 実装してみた</h1>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="34" class="code-line">本記事では手軽に試すために、Deep Linkの仕組みをカスタムURLスキームを用いて実現しています。<br>
この仕組みはURLが一意であることを担保できないので、セキュリティの観点から非推奨です。<br>
商用などで利用する際は <a href="https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html" target="_blank" rel="nofollow noopener noreferrer">Universal Links</a> または <a href="https://developer.android.com/training/app-links" target="_blank" rel="nofollow noopener noreferrer">App Links</a> を使用することをお勧めします。</p>
</div></aside>
<p data-line="39" class="code-line">A,B二つのアプリを作成しました。<br>
実際のコードもGitHubにあげました。</p>
<h4 id="%E3%82%A2%E3%83%97%E3%83%AAa%EF%BC%88%E6%9C%80%E5%88%9D%E3%81%AB%E8%B5%B7%E5%8B%95%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E3%80%81id%E3%82%92%E8%A6%81%E6%B1%82%E3%81%99%E3%82%8B%E5%81%B4%EF%BC%89" data-line="41" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AAa%EF%BC%88%E6%9C%80%E5%88%9D%E3%81%AB%E8%B5%B7%E5%8B%95%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E3%80%81id%E3%82%92%E8%A6%81%E6%B1%82%E3%81%99%E3%82%8B%E5%81%B4%EF%BC%89" aria-hidden="true"></a> アプリA（最初に起動されているアプリで、IDを要求する側）</h4>
<p data-line="42" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c0577fb6c1c4c" src="https://embed.zenn.studio/card#zenn-embedded__c0577fb6c1c4c" data-content="https%3A%2F%2Fgithub.com%2FYuta-KTD%2Fdeep_link_interactive" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/Yuta-KTD/deep_link_interactive" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/Yuta-KTD/deep_link_interactive</a></p>
<h4 id="%E3%82%A2%E3%83%97%E3%83%AAb%EF%BC%88id%E3%82%92%E7%99%BA%E8%A1%8C%E3%81%99%E3%82%8B%E5%81%B4%EF%BC%89" data-line="43" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AAb%EF%BC%88id%E3%82%92%E7%99%BA%E8%A1%8C%E3%81%99%E3%82%8B%E5%81%B4%EF%BC%89" aria-hidden="true"></a> アプリB（IDを発行する側）</h4>
<p data-line="44" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9b801d59d29ee" src="https://embed.zenn.studio/card#zenn-embedded__9b801d59d29ee" data-content="https%3A%2F%2Fgithub.com%2FYuta-KTD%2Fdeep_link_interactive_sub" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/Yuta-KTD/deep_link_interactive_sub" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/Yuta-KTD/deep_link_interactive_sub</a><br style="display:none">
実行環境はFlutter3.29.2になります</p>
<div class="code-block-container"><pre><code class="code-line" data-line="46">$ flutter --version
Flutter 3.29.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c236373904 (3 days ago) • 2025-03-13 16:17:06 -0400
Engine • revision 18b71d647a
Tools • Dart 3.7.2 • DevTools 2.42.3
</code></pre></div><p data-line="54" class="code-line">仕組みとしては、アプリBを呼び出す時にURLスキームにホスト名 <code>fetchid</code> をつけて呼び出します。<br>
そのホスト名をアプリB側で確認して、<code>fetchid</code>であればアプリB側でIDを発行して、アプリAを呼び出す際にIDをクエリパラメーターとして付与する、といった流れです。</p>
<p data-line="57" class="code-line">結論、想定通りに動いてくれました🎉</p>
<p data-line="59" class="code-line">※ アプリBに遷移用のボタンも配置しましたが、タップせずに遷移できてます。ややこしくてごめんなさい。</p>
<table data-line="61" class="code-line">
<thead data-line="61" class="code-line">
<tr data-line="61" class="code-line">
<th style="text-align:center">iOS</th>
<th style="text-align:center">Android</th>
</tr>
</thead>
<tbody data-line="63" class="code-line">
<tr data-line="63" class="code-line">
<td style="text-align:center"><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/f5b7e2374a6f028094380d97.gif?sha=8e389cd925bf44947aabffd59dfd5f9c712190b9" alt="iOS_result" loading="lazy" class="md-img"></td>
<td style="text-align:center"><img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/a75440387b2466789df9933c.gif?sha=e0783c5a2ce06941ab97389b114de3c33afa1261" alt="android_result" loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<p data-line="65" class="code-line">個人的にこんな感じのシームレスなアプリ間の遷移はみていて気持ちがいいです。<br>
UXを考えると、アプリ間を遷移することを知らないユーザーにとっては少し挙動に不気味さを覚えることもあるので、遷移することをダイアログ通知してあげることも一つの手段だと思います。</p>
<h2 id="%E5%AE%9F%E8%A3%85%E3%81%AE%E4%B8%AD%E3%81%A7%E6%B0%97%E3%81%A5%E3%81%84%E3%81%9F%E5%88%B6%E7%B4%84" data-line="68" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E3%81%AE%E4%B8%AD%E3%81%A7%E6%B0%97%E3%81%A5%E3%81%84%E3%81%9F%E5%88%B6%E7%B4%84" aria-hidden="true"></a> 実装の中で気づいた制約</h2>
<p data-line="69" class="code-line">本検証の中で気づいた制約について紹介します。<br>
主にDeepLink周りの制約になります。</p>
<h3 id="%5Bandroid%5Dscheme%E3%82%92%E5%A4%A7%E6%96%87%E5%AD%97%E5%B0%8F%E6%96%87%E5%AD%97%E3%81%BE%E3%81%A7%E5%90%88%E3%82%8F%E3%81%9B%E3%81%AA%E3%81%84%E3%81%A8%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%9B%E3%81%AA%E3%81%84" data-line="72" class="code-line">
<a class="header-anchor-link" href="#%5Bandroid%5Dscheme%E3%82%92%E5%A4%A7%E6%96%87%E5%AD%97%E5%B0%8F%E6%96%87%E5%AD%97%E3%81%BE%E3%81%A7%E5%90%88%E3%82%8F%E3%81%9B%E3%81%AA%E3%81%84%E3%81%A8%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%9B%E3%81%AA%E3%81%84" aria-hidden="true"></a> [Android]Schemeを大文字小文字まで合わせないとアプリを呼び出せない</h3>
<p data-line="73" class="code-line">adbコマンドを使用してアプリ呼び出しをテストしていましたが、最初は呼び出せず苦労してました。</p>
<div class="code-block-container"><pre class="language-zsh"><code class="language-zsh code-line" data-line="74">$  adb -d shell am start -W -a android.intent.action.VIEW -c android.intent.category.BROWSABLE -d "deepLinkMainScheme://open"
Starting: Intent { act=android.intent.action.VIEW cat=[android.intent.category.BROWSABLE] dat=deepLinkMainScheme:///... }
Error: Activity not started, 
</code></pre></div><p data-line="79" class="code-line">AndroidManifestの設定を変えたりして色々試した結果、AndroidManifestの指定と、呼び出しの大文字小文字を揃える必要があることに気づきました。<br>
アプリ内部で <a href="https://pub.dev/documentation/url_launcher/latest/url_launcher/launchUrl.html" target="_blank" rel="nofollow noopener noreferrer">launchUrl</a> で呼び出す時は、基本全て小文字になるのでAndroidManifest側も小文字にしました。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">android/app/src/main/AndroidManifest.xml</span></div>
<pre class="language-xml"><code class="language-xml code-line" data-line="81"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>data</span> <span class="token attr-name"><span class="token namespace">android:</span>scheme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deeplinkmainscheme<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">android:</span>host</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>open<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre>
</div><h3 id="%5Bandroid%5Dimpeller%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%81%A8%E6%8F%8F%E7%94%BB%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%80%81%E9%81%B7%E7%A7%BB%E5%BE%8C%E3%81%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8C%E5%8B%95%E4%BD%9C%E3%81%97%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E3%81%82%E3%82%8B" data-line="86" class="code-line">
<a class="header-anchor-link" href="#%5Bandroid%5Dimpeller%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%81%A8%E6%8F%8F%E7%94%BB%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%80%81%E9%81%B7%E7%A7%BB%E5%BE%8C%E3%81%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8C%E5%8B%95%E4%BD%9C%E3%81%97%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E3%81%82%E3%82%8B" aria-hidden="true"></a> [Android]Impellerを使用すると描画に関するエラーが発生し、遷移後にアプリが動作しないことがある</h3>
<p data-line="87" class="code-line">実機（Pixel6a/Android14）で何回か動作確認していると、実行ログに下記のようなエラーが出力されていて、画面が真っ黒になってDeepLinkが動作しないことがありました。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/38a88a6dea6a58ddbeff6493.gif?sha=7625447090ba459b822bc5d4ab5f790798131bd2" alt="android_impeller" loading="lazy" class="md-img"><br>
👇はアプリB側のログになります。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="90">D/com.llfbandit.app_links(22307): Handled intent: action: android.intent.action.VIEW / data: deeplinksubscheme://fetchid
I/ContentCaptureHelper(22307): Setting logging level to OFF
E/gralloc4(22307): ERROR: Format allocation info not found for format: 3b
E/gralloc4(22307): ERROR: Format allocation info not found for format: 0
E/gralloc4(22307): Invalid base format! req_base_format = (&lt;unrecognized format&gt; 0x0), req_format = (&lt;unrecognized format&gt; 0x3b), type = 0x0
E/gralloc4(22307): ERROR: Unrecognized and/or unsupported format (&lt;unrecognized format&gt; 0x3b) and usage (CPU_READ_NEVER|CPU_WRITE_NEVER|GPU_TEXTURE|GPU_RENDER_TARGET|COMPOSER_OVERLAY 0xb00)
</code></pre></div><p data-line="98" class="code-line">動画やログを見る感じ、アプリA→Bの遷移まではできていそうです。<br>
その後に <a href="https://source.android.com/docs/core/graphics/arch-bq-gralloc?hl=ja#gralloc_HAL" target="_blank" rel="nofollow noopener noreferrer">gralloc4</a> を用いた描画に関するメモリの割り当てに失敗しているように見えます。<br>
なんとなくですが、レンダリングエンジン周りが関係してそうだったので、Impellerを無効化したところ、問題が解消しました。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">android/app/src/main/AndroidManifest.xml</span></div>
<pre class="language-xml"><code class="language-xml code-line" data-line="101"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta-data</span>
    <span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>io.flutter.embedding.android.EnableImpeller<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">android:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre>
</div><p data-line="106" class="code-line">似たようなエラーで<a href="https://github.com/flutter/flutter/issues/163562" target="_blank" rel="nofollow noopener noreferrer">Admob関連のIssue</a>がありました。<br>
ここでは遅延処理を入れて解決できたみたいですが、端末によっては遅延が間に合わないこともあるかなと思います。<br>
残念ですが根本原因の特定や、その解決ができるまではSkiaを使おうかなと思います。</p>
<h3 id="%5Bios%5D%E3%83%AB%E3%83%BC%E3%83%88%E5%AE%9A%E7%BE%A9%E3%82%92%E3%81%97%E3%81%AA%E3%81%84%E3%81%A8%E3%80%81%E3%83%9B%E3%82%B9%E3%83%88%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9Fdeeplink%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%97%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%81%95%E3%82%8C%E3%82%8B" data-line="110" class="code-line">
<a class="header-anchor-link" href="#%5Bios%5D%E3%83%AB%E3%83%BC%E3%83%88%E5%AE%9A%E7%BE%A9%E3%82%92%E3%81%97%E3%81%AA%E3%81%84%E3%81%A8%E3%80%81%E3%83%9B%E3%82%B9%E3%83%88%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9Fdeeplink%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%97%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%81%95%E3%82%8C%E3%82%8B" aria-hidden="true"></a> [iOS]ルート定義をしないと、ホスト指定したDeepLink呼び出しでページがスタックされる</h3>
<p data-line="111" class="code-line">あまりないかもしれませんが、GoRouterなどでルート定義をしなかった場合、ホスト指定したDeepLinkでアプリが呼び出されると、意図しないページが作成されてしまいます。<br>
GoRouterで明示的にページ構成を定義することで回避できました。</p>
<h1 id="%E5%8F%82%E8%80%83" data-line="114" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<p data-line="115" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__dc43690f284c5" src="https://embed.zenn.studio/card#zenn-embedded__dc43690f284c5" data-content="https%3A%2F%2Fzenn.dev%2Fmatsumaru%2Farticles%2Ffd63cf2793638f" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/matsumaru/articles/fd63cf2793638f" style="display:none" target="_blank">https://zenn.dev/matsumaru/articles/fd63cf2793638f</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b10c33ed9ec8d" src="https://embed.zenn.studio/card#zenn-embedded__b10c33ed9ec8d" data-content="https%3A%2F%2Fzenn.dev%2Fmsorz%2Farticles%2F72a282ff71a350" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/msorz/articles/72a282ff71a350" style="display:none" target="_blank">https://zenn.dev/msorz/articles/72a282ff71a350</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6f113204bcbcd" src="https://embed.zenn.studio/card#zenn-embedded__6f113204bcbcd" data-content="https%3A%2F%2Fdocs.flutter.dev%2Fperf%2Fimpeller" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.flutter.dev/perf/impeller" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.flutter.dev/perf/impeller</a></p>


【Flutter】DeepLinkでアプリを往復するには

[Android]Schemeを大文字小文字まで合わせないとアプリを呼び出せない

[Android]Impellerを使用すると描画に関するエラーが発生し、遷移後にアプリが動作しないことがある

[iOS]ルート定義をしないと、ホスト指定したDeepLink呼び出しでページがスタックされる

Discussion