Blog
Webページの「ChatGPTを開く」でアプリが起動しない。window.openをやめて公式の指定に変えるまで
スマホ向けに作ったWebアプリに「ChatGPTを開く」ボタンを付けました。押すとChatGPTアプリが立ち上がってほしい。ところが実際には、Safariで chatgpt.com が開くだけでした。
原因は2つあり、どちらも調べてみるまで分かりませんでした。この記事にまとめておきます。
前提:ユニバーサルリンクという仕組み
iPhoneには、特定のURLを開いたときにブラウザではなくアプリを起動する仕組みがあります。ユニバーサルリンクと呼ばれるものです。
大事なのは、これがリンクを出す側では決められないという点です。「このURLはアプリに渡す」と決めているのは、リンク先のサービス側。つまりChatGPTアプリを開きたいなら、ChatGPTが決めたルールに従うしかありません。
つまずき1:JavaScriptで開くと、アプリは起動しない
最初の実装はこうでした。
button.addEventListener("click", function () {
window.open("https://chatgpt.com/", "_blank");
});
ボタンを押したらJavaScriptでウィンドウを開く、というよくある書き方です。これが1つ目の原因でした。
ユニバーサルリンクは**「利用者がリンクをタップした」という操作を起点に判定されます**。JavaScriptから開いた場合はその起点とみなされず、ふつうのWeb表示になります。
対処は、ボタン要素をやめて本物のリンクにすることです。
<a class="btn" href="https://chatgpt.com/..." target="_blank" rel="noopener">ChatGPTを開く</a>
見た目は変えたくなかったので、リンクにボタンと同じスタイルを当てました。下線を消して中央揃えにすれば、見た目はボタンのままです。利用者から見て何も変わらないのに、動きだけが変わります。
つまずき2:トップページのURLだけでは足りない
リンクに変えても、まだ開きませんでした。2つ目の原因はURLそのものです。
サービス側が「どのURLをアプリに渡すか」を書いたファイルは、決まった場所で公開されています。ブラウザのアドレス欄にそのまま入れれば誰でも読めます。
https://【サービスのドメイン】/.well-known/apple-app-site-association
ChatGPTのものを開くと、66件の条件が並んだJSONが出てきます。ここを読んで分かったのが、次のことでした。
トップページの / は、そのままではアプリに渡らない。 クエリかフラグメント(URLの # 以降)が付いている場合だけ対象になります。2026年8月時点で、トップページが対象になる条件はこうでした。
| URLの形 | 何が起きるか |
|---|---|
#native |
ChatGPTのホーム。アプリ内で新しい会話が始まる |
?q= に値がある |
検索・質問として渡る |
?prompt= に値がある |
プロンプトとして渡る |
#pricing |
料金の画面をアプリで開く |
#settings |
設定画面をアプリで開く |
ファイルには各条件に説明文まで付いていて、#native には「ChatGPTのホームに一致。アプリ内で新しい会話を開始する」と書かれています。やりたかったことそのものでした。
トップページ以外にも、共有リンク、個別の会話、画像、アプリ一覧など多くのパスが対象に指定されています。逆に、URLに no_universal_links=1 を付けるとわざとアプリを開かせないこともできる、という指定も入っていました。
結果として書いたもの
最終的に、この形に落ち着きました。
<a href="https://chatgpt.com/#native" target="_blank" rel="noopener">ChatGPTを開く</a>
これだけです。アプリが入っていればアプリが起動し、入っていない端末やパソコンでは、これまでどおりブラウザでChatGPTが開きます。片方を切り捨てずに済むのがユニバーサルリンクの利点です。
なお、ボタンを押したときにプロンプトをクリップボードへコピーする処理は残しています。リンクの動作を止めなければ、コピーと画面遷移は両立します。
他のサービスでも、調べ方は同じ
この手順は、ChatGPTに限らずどのサービスでも使えます。
https://【ドメイン】/.well-known/apple-app-site-associationを開くapplinksの中の条件を読む- 開きたい画面に対応するURLの形を探す
- そのURLを本物のリンクとして置く
「アプリを開くための裏技のURL」を探して回るより、公式が公開しているこのファイルを読むほうが速くて確実です。書かれていないURLは、そもそもアプリに渡りません。
それでもブラウザが開くとき
仕組みが正しくても、端末側の状態で開かないことがあります。確認する順番はこうです。
- アプリが入っているか。 入っていなければブラウザが開きます(これは正常な動作です)
- アプリにログインしているか
- 過去に「Webサイトで開く」を選んでいないか。 一度その選択をすると記憶されます。アプリで開いたページの上部に出るバナーから「開く」を押すと元に戻ります
3つ目は気づきにくく、「実装が間違っている」と思い込んで原因を探し続けることになりがちです。別の端末で試すと切り分けが早いです。
手前で止まらないための考え方
今回の2つのつまずきには、共通点があります。**どちらも「動かない」ではなく「思ったのと違う動きをする」**という形で出たことです。エラーは出ません。ボタンは反応しますし、ChatGPTも開きます。ただアプリではなくブラウザだった、というだけ。
こういう不具合は、放っておくと「まあ動いてるからいいか」で残ります。今回それに気づけたのは、実際にスマホで使ってみた人が違和感を伝えてくれたからでした。パソコンの画面だけ見ていたら、たぶん一生分かりません。
作ったものは、必ず本番の環境で、本当に使う人が使う端末で触ってみる。手間はかかりますが、ここを飛ばすと「動いているのに使われないもの」ができあがります。
よくある質問
Q. WebページからiPhoneのChatGPTアプリを開けますか。
開けます。本物のリンク(aタグ)であること、そしてChatGPT側が対象に指定したURLの形であること、この2つが条件です。
Q. なぜ window.open ではダメなのですか。
ユニバーサルリンクは、利用者がリンクをタップした操作を起点に判定されるためです。JavaScriptから開くとその起点になりません。
Q. アプリに渡るURLはどこで確認できますか。
対象サイトの /.well-known/apple-app-site-association を開けば、条件が一覧で読めます。
Q. リンクを押してもブラウザが開きます。
アプリ未インストール、未ログイン、または過去に「Webサイトで開く」を選んだ履歴が原因のことが多いです。
「作ったけれど、細かいところが思ったとおりに動かない」ものがあれば、AI導入のご相談からお聞かせください。どこからAIに任せられるかを見たい方はAI任せ度の診断から。限定公開の料金と手順についてはVercelのパスワード保護は月150ドルにまとめています。