iOS アプリのリンクバナーを簡単に設置できる「Smart App Banners」機能

iOS6 の Safari に「Smart App Banners」という機能が追加されました。

iOS アプリの紹介 Web ページにたった1行追加するだけで、ページの上部にアプリのバナーが表示されます。

Smart App Banners 表示例

設置方法は、表示したいページ内に、下記の一行を追加するだけです。

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

<meta> タグなので、<head> 内に記述しないといけないかと思ったのですが、本文内でも表示されました。WordPress などの CMS でコンテンツを編集している場合で、特定のページのみ表示したい場合は、その本文に記述すれば OK です。

“myAppStoreID” にはアプリの ID を入力するのですが、”Link Maker” というページでアプリを検索して、結果の右側に表示されるリンクの URL に含まれる “id” 以降の9桁の数字を入力します。それ以外のパラメータは任意で、詳しくはドキュメントを参照してください。

バナーのボタンをタップすると、そのアプリがインストールされている場合はそのアプリを起動して、インストールされていない場合は、AppStore アプリを起動し、そのアプリのページを表示します。

ちなみに、自分がリリースしているアプリのページに設置してみました。iOS6 で表示すると上部にバナーが表示されます。

iOS6 の Safari だけでしか表示されませんが、設置が簡単で、他のブラウザで表示する場合にもコンテンツに影響を与えないので、手軽にアプリをダウンロードしてもらいたい場合に便利かなと思います(ちょっと読み込みに時間がかかるので、気づかないことも多そうですが…)。