読者です 読者をやめる 読者になる 読者になる

wootan's diary

iOSアプリ開発を中心としたエンジニアブログ

relux iOSアプリでディープリンク対応

relux iOSアプリでディープリンク対応を行いました。
ちょうどiOS9.3がリリースされたあとに着手しはじめ、
iOSの不具合でUniversalLinksが全く動かずかなりハマりました。
ブラウザがまともに動かず悩まされた人も多いのではないでしょうか?

今回はディープリンクを以下と定義し対応方法を紹介したいと思います。

Universal Linksとは?

iOS9から導入された仕組みです。
Universal Linksでは通常のURLから直接アプリを起動することができるようになります。

  • アプリがインストール済:アプリが開く
  • アプリが未インストール:Webページが開く

CustomURLSchemeではSafariを経由してアプリを起動しますが、
Universal Linksではアプリにシームレスに遷移するのでUXがかなり改善されます。
また、CustomURLSchemeとは違いschemeが衝突する心配もありません。

developer.apple.com

f:id:wootan1102:20160419213700g:plain

実際の画面はこのような動きになります。
Googleの検索結果からアプリを起動しています。

Facebook App Linksとは?

Facebookアプリから直接アプリを起動することができるようになります。
Universal LinksはiOS9以降のみ対応ですが、こちらはそれ以前のOSでも動作します。

  • アプリがインストール済:アプリが開く
  • アプリが未インストール:AppStoreが開く

App Links - 参考資料 - 開発者向けFacebook

f:id:wootan1102:20160419213746g:plain

実際の画面はこのような動きになります。
Facebookからアプリを起動しています。

対応するページ

reluxの旅館・ホテルの施設詳細ページのみ対応しました。
Facebook, Instagram, Twitter などのSNSでURLがシェアされた際に
アプリが起動されることを想定しています。
※2016年4月現在

サーバサイドの対応

apple-app-site-associationファイルを作成してルート直下に配置します。

Universal Links
apple-app-site-associationファイル

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "4M2H9MG272.com.loco-partners.relux",
        "paths": [
            "/2????/",
            "/5????/"
        ]
      }
    ]
  }
}

appID: TeamID + BundleIndentifierの組み合わせです。
paths: 対応するパスを記載します。
施設詳細のURLは
https://rlx.jp/20000/ もしくは https://rlx.jp/50000/ のように2または5からはじまる5桁の数字と決まっています。
パスは一般的な正規表現には対応していないので "2????", "5????" としました。

ポイント
  • 拡張子".json"は不要
  • "*"は任意の部分文字列
  • "?"は任意の一文字
  • "NOT"をつけると除外


Facebook App Links

WebページにMETAタグを入れる必要があります。

<meta property="og:url" content="https://rlx.jp/27500" />
<meta property="og:image" content="https://s3-ap-northeast-1.amazonaws.com/relux/img/hotelpictures/RP27500_1046.jpg" />
<meta property="og:site_name" content="relux" />
<meta property="fb:app_id" content="482299358457316" />
<meta property="al:ios:url" content="rlx://hotels/27500/" />
<meta property="al:ios:app_store_id" content="843104033" />
<meta property="al:ios:app_name" content="relux" />

al:ios:url      CustomURLSchemeを指定
al:ios:app_store_id  AppleIDを指定
al:ios:app_name   アプリ名を指定

ポイント
  • FacebookDebuggerで警告がでているとうまく動作しません
  • METAタグが存在しない状態でキャッシュされると動作しません

https://developers.facebook.com/tools/debug/

iOSアプリ側の対応

Capabilitiesの設定
Associated DomainsのDomainsを設定します。
f:id:wootan1102:20160417221955p:plain
applinks:url という形で指定します。

Universal Links

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler {
    if ([userActivity.activityType isEqual:NSUserActivityTypeBrowsingWeb]) {
        int hotelId = [self matchHotelId:userActivity.webpageURL pattern:UNIVERSAL_LINKS_PATTERN];
        if (hotelId) {
            [self pushHotelDetailViewController:hotelId];
        } else {
            [application openURL:userActivity.webpageURL];
            return NO;
        }
    }
    return YES;
}
ポイント
  • ActivityTypeはNSUserActivityTypeBrowsingWebになります
  • 対応しないURLの場合は openURL でブラウザを開いたほうが良いです

Facebook App Links

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
    if ([url.scheme isEqualToString:CUSTOM_URL_SCHEME]) {
        int hotelId = [self matchHotelId:url pattern:CUSTOM_URL_SCHEME_PATTERN];
        if (hotelId) {
            [self pushHotelDetailViewController:hotelId];
            return YES;
        }
    }
    return NO;
}
ポイント
  • CustomURLSchemeに関する実装がされていれば、追加で実装する必要はありません

これから

ディープリンクはUXを改善できるものですが
対応するコンテンツが正しく、素早く表示されることが前提にあります。
どのページを対応するか、表示速度に問題ないかなど慎重に検討をおこなう必要があります。
reluxでは将来的に検索画面やrelux selections, relux Magazineなんかも対応したいと考えています。

rlx.jp
rlx.jp