Blog - レーベの開発やクリエイティブについて

Webサイトがあるアプリなら必須対応になりそうな、App Linksを使ってみた

May092014
iOSAndroidby Lebe Inc.

image

2014年4月20日、FacebookがF8カンファレンスでApp Linksというアプリ間連携のための新しい仕組みを発表しました。App Linksではこの仕組みをオープンにし、全ての開発者が利用できることを目標としています。

image

FacebookアプリからTumblrの記事を開こうとしたらアクションシートに「Tumblrで開く」があります。これがApp Linksで実装できます。

簡単な機能紹介はニュースサイトから引用します。

アプリ開発者は、アプリのコンテンツに数行のコードを追加することでApp Linkメタデータをパブリッシュできる。このコンテンツにリンクするアプリはメタデータを利用してアプリに“deep-link”できるようになる。例えば映画紹介アプリ内に映画のチケット販売アプリへのリンクをApp Linksで入れておけば、ユーザーは映画紹介アプリからチケット販売アプリを直接開いてチケットを購入し、また映画紹介アプリに戻ってくることなどが可能になる。そのユーザーがチケット販売アプリをインストールしていなければ、インストールページが開く。

http://www.itmedia.co.jp/news/articles/1405/01/news029.html

ざっくりと書くと、これまでは一旦ブラウザを中継していた操作を、ダイレクトにアプリ間で遷移しやすくなるという事です。私たちも当初はAndroidにあるIntent.ACTION_SENDのiOS版のような理解をしていましたが、よく考えてみると用途、役割が違いますね。

現在ではFacebookアプリなど一部のアプリが対応しているのみですが、今後は対応するアプリが増えていくと思います。FacebookのようなスマホアプリSNSから自社アプリに誘導することを目的とするのであれば、App Linksの導入は今後必須になるではと思います。

簡単に実装テストしてみましたので、行程を紹介します。

App Linksの導入

App Linksを導入するには、Webサイトの<head>タグに数行追加するだけで可能です。

Webサイトのコンテンツに対して「このWebページは、こんな内容です」というのがOGPですが、「このWebページは、このアプリに対応しています」という情報を記述するのがApp Linksです。iOS、Android、WindowsPhoneについて記述を使い分けたり、iPhoneとiPadで切り分けることも出来ます。

App Linksを利用出来るアプリ、出来ないアプリ

App Linksは性質上、下記の条件を満たしたアプリのみが対象となります。

  • iOSアプリ、Androidアプリがある
  • アプリでURLスキームを利用している
  • アプリのコンテンツがWebサイトに公開されている

ほとんどのCGM系のアプリ・サービスが該当すると思います。
また、現時点でFacebookアプリ以外に確認することの出来るアプリが少ないため、App Linksを試す場合は上記の条件に加え

  • Facebookアプリがある

という条件が必要となります。

Webサイトのmetaタグの記述

App LinksではiOS、Androidの区別だけでなくiPadとiPhoneで出し分けるということも可能ですが、本記事では簡単にiOSで試す場合について説明します。
まずは次のようなmetaタグをHTMLのhead内に記述します。


<meta property="fb:app_id" content="【FacebookアプリのID】" />
<meta property="al:ios:url" content="【アプリを起動するためのURLスキーム】" />
<meta property="al:ios:app_store_id" content="【iTunesのストアID】">
<meta property="al:ios:app_name" content="【アプリ名】">

iOS側の実装(受け取り側)

アプリ側ではURLスキームに対応する必要があります。
URLスキームについては
http://d.hatena.ne.jp/nakamura001/20111105/1320501005
などを参照してください。

URLスキームの受け取りについてはFacebookにサンプルコードが公開されています。
https://developers.facebook.com/docs/ios/share/#applinks

App Links経由でアプリを起動した場合、パラメーターにJSON形式で次のような情報が与えられます。


{
    "target_url": "<開かれた元URL>",
    "extras": {
        "fb_app_id": 
    },
    "referer_app_link": {
        "url": "fb://<アプリに戻る場合のURLスキーム>",
        "app_name": "<アプリ名>"
    }
}

どのアプリから開かれたか、という情報を使うことで前のアプリに戻るUIを作ることが出来ます。App Linksでは戻るためのナビゲーションを作ることを推奨しています。

動作

App Linksタグが記載されたページをFacebookでシェアし、Facebookアプリから開きます。アプリがインストールされた状態であれば期待した動作をします。

image

URLをシェアした状態

image

Facebookアプリ内のWebviewで表示した状態。「アプリ名で開く」と開くボタンが表示出来ます。

image

シェアボタンを押した状態。アクションシートの最上部に「アプリ名で開く」が表示されます。これをタップすると直接当該アプリが開きます。アプリが無い場合はアプリストアに誘導されます。

image

開いた先のアプリから元のアプリに戻る事ができます。(上部のTouch to return to Facebookの部分) ※http://applinks.org/wp-content/uploads/2014/04/AppLinks_Anypic-576x1024.png から引用


Appストアを開く動作については、まだFacebookアプリでは上手く動かないようです。アプリがインストールされていない状態では普通にWebページが表示されるだけでした。

iOS側の実装(App Linksを開く側)

App Linksを自作のアプリに導入する場合に便利なライブラリが公式から提供されています。
https://github.com/BoltsFramework/Bolts-iOS

Boltsを利用することで簡単なコードでApp Linksタグをパースすることが出来ます。


	BFTask *task = [BFAppLinkNavigation resolveAppLinkInBackground:url];
	[task continueWithSuccessBlock:^id(BFTask *task){
		BFAppLink *link = task.result;
		for(int i=0; i<link.targets.count; i++){
			BFAppLinkTarget *target = [link.targets objectAtIndex:i];
			NSLog(@"target:%@ %@ %@", target.appName, target.appStoreId, target.URL);
		}
		return nil;
	}];

その他のアプリの対応状況

App Linksタグを導入しているサイトで日本から利用出来るものはまだ数少ないようです。Pintrest、Tumblrのメジャーなサービスで導入されているので、Facebook上でシェアすることで試すことが出来ます。

image

またApp Linksを開くことが出来るアプリが公式サイト上にいくつか紹介されていました。Quip https://quip.com/ というアプリではFacebookとは若干挙動が異なり、内部ブラウザを開くことなく自動的にアプリに遷移しました。

それ以外については日本では利用出来なかったり、上手く動作しませんでしたが今後は導入アプリが増えていくのではと思います。

まとめ

AndroidのIntent.ACTION_SENDと何が違うのか、という事を簡単にまとめると、Intent.ACTION_SENDはあくまで端末内で対応するアプリに「送る」機能です。Intent.ACTION_SENDの仕組みではhttpのリンク情報から対応するアプリを探す事はできません。

App Linksでは端末に入っていないアプリであっても、WebサイトにURLスキームを記述する事でスムーズにアプリへ誘導する事ができます。似たような機能ではありますが、役割が違うという事を理解して、今後のアプリやサイトの設計に組み込めればと思います。

OGPタグ同様ように急速に普及が進むのではと思いました。

[Writer: Ryosuke Miyazawa , Masaaki Fujii]

2014.05.09 17:41