スマートバナーを作る(後編)

今日は自分でスマートバナーを作っていきます。

とはいっても複雑なやつじゃなくて デバイスによってリンク先が違ったり表示されなかったりするところを実現していきます。

レイアウト

See the Pen アプリバナー by たまき こう (@ulqvhvox) on CodePen.

まずは見た目
ピンクのボタンが、スマホから見るとリンクになっており
スマホから押すとappストアやgoogle playに飛びます。

PCやスマホによって表示を切り替える。

navigator.userAgent.indexOf() を使えばユーザーの判別が楽にできます。

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
        // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        // タブレット向けの記述
} else {
        // PC向けの記述
}

こちらを用いてユーザーを判別して、アプリ変遷ボタンを出力しました。

navigatorはユーザー情報を持つオブジェクトのことです。
https://developer.mozilla.org/ja/docs/Web/API/Navigator