URLスキームからのスマフォアプリ起動のフォールバック

前段

ブログリハビリ..._:(´ཀ`」 ∠):

  • URLスキームで任意のアプリ(今回はLINE)を起動したい
  • フォールバックとして、アプリのURLに誘導するなりアラートするなりしたい

Android

Galaxy S3 (4.0.3) と Xperia SX (4.1.2) のAndroidブラウザで確認する限りは、下記のようなコードで実現できた。

var iframe = document.createElement('iframe');
iframe.className = 'is-hidden';
iframe.onload= function() {
  alert('LINEアプリ、インストールしてなくない?');
  iframe.parentNode.removeChild(iframe);
};
iframe.src = 'line://msg/text/loremipsum...';
document.body.appendChild(iframe);

別アプリを開くことに成功したら、onloadも発火しないようなのでかなりシンプルに処理できる。ボタンバナーのclickイベントをトリガーに、上記のような処理を実行すれば良い。

iOS

こっちのほうがめんどうな感じ。前項のiframe.onload路線が難しそうだったので、タイマー路線でいじくりまわしていた。最終的にはStackOverflowに同じような内容のポストがあったので、それを参考に下記のようなコードになった。

var iframe = document.createElement('iframe');
var start = Date.now();
iframe.className = 'is-hidden';
setTimeout(function() {
  var diff = Date.now() - start;
  if (diff < 2000) {
    // alert('hogehoge');
    window.location.href = 'LINEのアプリURL';
  }
  iframe.parentNode.removeChild(iframe);
}, 500);
iframe.src = 'line://msg/text/hogehoge';
document.body.appendChild(iframe);

URLスキームでアプリの立ち上げに実行すれば、タイマー内の時間判定よりも前に、別アプリへ移動するため、戻ってきた頃にはタイマー内の判定がfalseとなる。逆に、アプリが立ち上がらなければ、順当に500ms後のタイマー内判定がtrueとなり、そこでフォールバックを行える。

iOSでは無効なURLをくわせると「ページを開けません」ダイアログが出る。すぐにwindow.locationにURLを入れると、ダイアログが消えてそのまま、たとえばAppStoreなどの遷移先に移動するので問題ない。

しかし、alertによるメッセージ提示にすると、下記のような感じで鬱陶しさが増す。

  1. デフォルトの「ページを開けません」ダイアログ
  2. コード中で「alertに食わせたテキスト」ダイアログ
  3. デフォルトの「ページを開けません」ダイアログ

もうこれ、小細工せず素直に「ページを開けません」ダイアログだけで済ませれば良いですね。iframeでやってる限りは、親windowが現在地から下手に移動することもないですし。

ここではLINEのアプリをインストールさせることは目的でなく、ていうかLINE使ってるかどうかくらいユーザーにとって自明だしー。

参考

というような感じでした。Stack Overflowさんあざーす。


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search