メニューを閉じる

テクノデジタルグループ

メニューを開く

2014.10.14

プログラミング

URLスキームからのアプリ起動・アプリが無ければショップサイトを開く(iOS/Android)

こんにちは、JTです。

【動作概要】
・UAからiOS/Androidを判定してそれぞれの処理へ
・URLスキームを利用して、facebookアプリで該当のページ(ディープリンク)を開く。
・アプリがインストールされていなければAppStore/GooglePlayのアプリダウンロードサイトを開く。

【メモ】
・iOS側の処理は古くから利用されているもので、アプリが起動していなければ300ミリsec後にショップサイトへ遷移するというもの。
・Androidでは上記処理をiframe内で実行する必要があるが、Chrome・標準ブラウザ(バージョン25(2013年2月)以降)では以下の様な書式で呼び出すことを推奨している。こっちの方が簡単。


intent:
HOST/URI-path // Optional host
#Intent;
package=[string];
action=[string];
category=[string];
component=[string];
scheme=[string];
end;


 

例)

<a href="intent://profile/341219895930508#Intent;scheme=fb;package=com.facebook.katana;end">facebookでテクノモバイルのページを開く</a>

 

【サンプルコード】

<html>
<head>
<title>インストール判定テスト(iOS/Android共存)</title>
</head>
<body>

    <a href="#" onclick="launchApp()">[facebookでテクノモバイルのページを開く]</a>

<script>

    function launchApp() {
        if (
          navigator.userAgent.indexOf('iPhone') > 0
          || navigator.userAgent.indexOf('iPad') > 0
          || navigator.userAgent.indexOf('iPod') > 0
        )
        {
           document.location = "fb://profile/341219895930508";
           var time = (new Date()).getTime();
           setTimeout(function(){
               var now = (new Date()).getTime();

               if((now-time)<400) {
                       document.location = "https://itunes.apple.com/jp/app/facebook/id284882215?mt=8&uo=4";
               }
           }, 300);
        }
        else if(navigator.userAgent.indexOf('Android') > 0)
        {
                        document.location = "intent://profile/341219895930508#Intent;scheme=fb;package=com.facebook.katana;end";
        }

    };

</script>
</body>
</html>

 


【参考サイト】
# iOS部分
http://iphone-dev.g.hatena.ne.jp/laiso/20120625/1340615723

# Android部分
https://developer.chrome.com/multidevice/android/intents

# スマートフォン(iPhone/Android)のページ内振り分け
http://rfs.jp/sb/javascript/js_lab/smartphone_user-agent.html

 


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事