ブラウザから、「iOSアプリがインストールしてあったら起動・インストールしていない場合はAppStoreへ移動する」サンプル

2019年10月22日

SaraCameraに CustomURLScheme を組み込んでいただいたのでメモ。

a href="saracamera://" でSaraCameraを直接起動できます。

もしインストールされていない場合は、AppStore に遷移させることができます。

「アプリがインストールしてあったら起動・していない場合はAppStoreへ移動する」htmlサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アプリがインストールされていない時にStoreへ遷移するデモ</title>
<meta name="viewport" content="width=device-width,user-scalable=Yes,maximum-scale=10, initial-scale=1.0">


<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="bundle.js"></script>

  <style media="screen">
    body {
      padding: 16px;
    }

    #log {
      font-size: 24px;
      padding: 8px;
    }
  </style>
</head>
<body>
<form>
  <div class="form-group" id="form">
    <label for="urlScheme">起動するiPhoneアプリScheme名</label>
    <input class="form-control" id="urlScheme" value="saracamera://" placeholder="saracamera://">
  </div>
  <div class="form-group">
    <label for="fallback">起動しない時の遷移先</label>
    <input class="form-control" id="fallback" value="https://apps.apple.com/jp/app/saracamera/id1459627879" placeholder="https://apps.apple.com/jp/app/saracamera/id1459627879">
  </div>
  <div class="form-group">
    <label for="browserback">ブラウザの戻るボタンを押した時の遷移先</label>
    <input class="form-control" id="browserback" value="https://saracamera.com/" placeholder="https://saracamera.com/">
  </div>
  <button class="btn btn-default" id="launch">テスト検証</button>
</form>
<div id="log">
</div>
<script>
  $('#launch').on('click', function(e) {
    e.preventDefault();
    var urlScheme = $('#urlScheme')[0].value;
    var fallback = $('#fallback')[0].value;
    var browserback = $('#browserback')[0].value;
    if (!urlScheme) {
      $('#log').text('you must set "urlScheme"');
      return;
    }
    var fcs = new window.FallbackCustomScheme({
      urlScheme: urlScheme,
      fallback: fallback,
      browserback: browserback,
      onFallback: function() {
        $('#log').text('fallback: ' + fallback);
      },
      onBrowserback: function() {
        $('#log').text('browserback: ' + fallback);
      }
    });
    fcs.launch();
  });
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>アプリがインストールされていない時にStoreへ遷移するデモ</title>

body {

padding: 16px;

}

#log {

font-size: 24px;

padding: 8px;

}

</style>

</head>

<body>

<form>

<label for="urlScheme">起動するiPhoneアプリScheme名</label>

</div>

<label for="fallback">起動しない時の遷移先</label>

</div>

<label for="browserback">ブラウザの戻るボタンを押した時の遷移先</label>

</div>

<button class="btn btn-default" id="launch">テスト検証</button>

</form>

</div>

$('#launch').on('click', function(e) {

e.preventDefault();

var urlScheme = $('#urlScheme')[0].value;

var fallback = $('#fallback')[0].value;

var browserback = $('#browserback')[0].value;

if (!urlScheme) {

$('#log').text('you must set "urlScheme"');

return;

}

var fcs = new window.FallbackCustomScheme({

urlScheme: urlScheme,

fallback: fallback,

browserback: browserback,

onFallback: function() {

$('#log').text('fallback: ' + fallback);

onBrowserback: function() {

$('#log').text('browserback: ' + fallback);

}

});

fcs.launch();

});

</script>

</body>

</html>

blog