iPhoneにInstagramのアプリがインストールされていればアプリに、なければウェブブラウザ版に遷移するリンクをつくる 📱

iOSのCustom URL Schemeを使い、

1. Instagramのアプリがインストールされている → アプリに遷移
2. Instagramのアプリがインストールされていない → ブラウザでインスタを開く

という挙動を実装してみました。

developer.apple.com

InstagramのCustom URL Schemeは公式ドキュメントを探しても見つからなかったのですが、いろいろと試したところ、iOSでアプリの起動に成功しました。

if (/iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())) {
  location.href = 'instagram://user?username=ki_230';
}

setTimeout(() => location.replace('https://www.instagram.com/ki_230/'), 200);

DEMO

https://develop.kimizuka.org/instagram

解説

1. iOSでは起動に成功しました
2. Androidでは起動できなかったのでif文の条件式から除きました
3. location.replaceのタイミングを、適当に200msにしていますが、0sだとアプリインストール済みでもブラウザ版が開くことが稀にありました