この記事は
- スマートバナー（スマホブラウザで画面の上の方にアプリインストールを促すバナー）をiOSに加えてAndroidも含めて表示したかったので、そのメモです
やりたかったこと
- スマートバナーはiOSだとSafariが標準対応していて、metaタグを書くだけでいい感じにしてくれます
- それをAndroidでもやりたかったです
- でも標準では非対応なのでJSで個別に対応する必要があり
- 仕様上はPWA仕様の一部に含まれてるので試してみたけど、今はまだ動かないっぽい
使用ライブラリ
- Smart App Bannerというライブラリを使いました
- 派生でsmartbanner.jsというのもあり、こっちでもよかったかもしれないです（こっちはほぼJSなしでいけるらしい）
- あとjquery.smartbannerっていうのが情報よく出てくるのですが、動きませんでした
インストール
- 各々の方法でJSを読み込みます
- npmで入れるのが通常手順だと思われます
$ npm install --save smart-app-banner
- 私の今回の環境はrailsのasset pipelineだったので、この辺のJSとか、この辺のCSSとかをassetsディレクトリ配下に個別に取り込みました
使い方
- こんな感じで、metaタグをいくつか指定した上で、JSで初期化をすると動きます。
<html>
<head>
<title>MyPage</title>
<meta name="apple-itunes-app" content="app-id=502838820">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="google-play-app" content="app-id=ru.hh.android">
<link rel="android-touch-icon" href="android-icon.png" />
</head>
<body>
<script type="text/javascript">
new SmartBanner({
daysHidden: 15, // days to hide banner after close button is clicked (defaults to 15)
daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)
appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
title: 'MyPage',
author: 'MyCompany LLC',
button: 'VIEW',
store: {
ios: 'On the App Store',
android: 'In Google Play',
windows: 'In Windows store'
},
price: {
ios: 'FREE',
android: 'FREE',
windows: 'FREE'
}
// , theme: '' // put platform type ('ios', 'android', etc.) here to force single theme on all device
// , icon: '' // full path to icon image if not using website icon image
// , force: 'ios' // Uncomment for platform emulation
});
</script>
</body>
</html>
- タグのポイント的にはこの辺で、該当アプリのGoogle PlayのIDと、バナーに表示させたいアイコン画像を指定します
<meta name="google-play-app" content="app-id=ru.hh.android">
<link rel="android-touch-icon" href="android-icon.png" />
- JSのパラメータは基本的にみたままなのですが、
forceというパラメータでテスト用に表示を切り替えることができます
動き
- iOSでのすみわけ
- iOSだと二重表示にならないか心配でしたが、Safariで表示した場合は自動的にライブラリのバナーの表示がOFFになってくれます
- つまりいい感じにiOSネイティブのバナー表示だけになってくれます
- 開くを押した時の動き
- iOSではネイティブの動きの仕様で、すでにアプリがインストールされていればアプリを起動、されていなければAppStoreが開きます
- Androidで表示した場合は、アプリのインストール状況に関わらず、常にGoogle Playが開く動きをします
- バナーの再表示の動き
- iOSではバツボタンを押すと一旦表示されなくなり、次回なんらかのタイミングでまた表示されます（仕様不明）
- Androidで表示の場合、JSのパラメータで
daysHiddenとdaysReminderというのがあり、ここで指定した日数が経過すると再表示されます
終わりに
- Androidでもインストール状況によってアプリ起動とストア起動を自動的に切り分けたいのですが、今の所できませんでした
- IntentのURLとかをうまく使えばできそうな気はするので、そういうライブラリを自作してもいいかもしれないですね