IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Android / ウェブからスマホアプリを起動 URLスキーム、ユニバーサルリンク

ウェブからスマホアプリを起動 URLスキーム、ユニバーサルリンク

2020/10/12 Android, iPhone, javascript, Node.js

Glitsh で Node.js アプリを立ち上げ、映画レビューサイト「そんなには褒めないよ。映画評」に Filmarks 疑似ソーシャルボタンをつくったのですが、この Filmarks はスマホアプリがあり、またサイト自体もスマホアクセスのほうが多いですので、ボタンをクリックした場合、スマホであればアプリを立ち上げるようにしようと思います。

前記事:無料サービス Glitch で Node.js アプリを立ち上げる

  • URLスキーム、ディープリンク、ユニバーサルリンク、アプリリンク
  • Twitter で実際にやってみる
    • ユニバーサルリンク、アプリリンク
    • URLスキーム、ディープリンク
  • Filmarks の URLスキーム、ユニバーサルリンク
    • Android(ver.10)の場合
    • iphone(ver.12)の場合
    • Filmarks アプリのまとめ
  • Filmarks 疑似ソーシャルボタンの実装

URLスキーム、ディープリンク、ユニバーサルリンク、アプリリンク

用語がいろいろありますので詳細はググってください。私もいろいろ読んでみましたがクリアになるこれは!というサイトが見つかりません。とりあえずは、簡単に言いますと、

  • URLスキーム … https:// や ftp:// のことで、スマホアプリには twitter:// など独自の URLスキームがある
  • ディープリンク … スマホアプリの特定のコンテンツヘ直接遷移するリンク
  • ユニバーサルリンク … URL はhttps:// のままで、アプリ内のディープリンクにアクセスした場合、アプリがインストールされていればアプリのコンテンツ、いなければストアを起動(またはブラウザのWebサイトを起動?)
  • アプリリンク … Android ではユニバーサルリンクと同等の機能をアプリリンクという(らしい)

ということでいいかと思います。

が、これがなかなか難しく、アプリ側の設定方法の記事はたくさんありますが、ウェブ上にリンクを貼る場合にどうすればいいかがよくわかりません。

Twitter で実際にやってみる

で、実際に Twitter のリンクで調べてみました。

ユニバーサルリンク、アプリリンク

リンクを Android と iPhone でクリックし確かめてみます。

https://twitter.com/ausnichts/status/1314821821552717824

Android(ver.10), iPhone(ver.12) ともに

  • アプリがインストールされログインされていれば、アプリの該当ツイートが表示される
  • ログインされていなければ、アプリのログイン画面が表示される
  • アプリがインストールされていなければ、ログイン関係なくウェブの Twitter サイトの該当ツイートが表示される

これがおそらくユニバーサルリンク、アプリリンクということでしょう。

URLスキーム、ディープリンク

で、以下が URLスキームを使ったディープリンクということだと思います。

twitter://status?id=1314821821552717824

Android(ver.10), iPhone(ver.12) ともに

  • アプリがインストールされログインされていれば、アプリの該当ツイートが表示される
  • アプリがインストールされていなければ、何も起きない

URLスキームでディープリンクを貼る場合は、デバイスの振り分けやアプリ未インストールの場合の処理を考える必要があります。

Filmarks の URLスキーム、ユニバーサルリンク

Android(ver.10)の場合

https://filmarks.com/movies/88062/reviews/98837384

  • (インストール済)ログイン関係なくアプリの該当ページを表示
  • (未インストール)ウェブの該当ページを表示

filmarks://movies/88062/reviews/98837384

filmarks://movies/88062?mark_id=98837384

filmarks://users/ausnichts

  • (インストール済)ログイン関係なくアプリの該当ページを表示
  • (未インストール)何も起きない

intent://movies/88062/reviews/98837384#Intent;scheme=filmarks;package=in.tsumiki.filmarks;end;

  • (インストール済)ログイン関係なくアプリの該当ページを表示
  • (未インストール)ストアのインストールページを表示

iphone(ver.12)の場合

https://filmarks.com/movies/88062/reviews/98837384

  • (インストール済)ウェブの該当ページを表示
  • (未ログイン)ウェブの該当ページを表示
  • (未インストール)ウェブの該当ページを表示

filmarks://movies/88062/reviews/98837384

  • (インストール済)アプリの前回表示ページを表示(アプリが立ち上がるだけ)
  • (未ログイン)アプリのログインページを表示
  • (未インストール)何も起きない

filmarks://movies/88062?mark_id=98837384

  • (インストール済)アプリのクエリ文字列を除いた movies/88062 を表示
  • (未ログイン)アプリのクエリ文字列を除いた movies/88062 を表示
  • (未インストール)何も起きない

filmarks://users/ausnichts

  • (インストール済)アプリの該当ページを表示
  • (未ログイン)アプリの該当ページを表示
  • (未インストール)何も起きない

Filmarks アプリのまとめ

  • Android の Filmarks アプリはアプリリンクに対応している
  • iPhone の Filmarks アプリにはユニバーサルリンクは実装されていない
    (あるいは私に理解できていない)
  • iPhone の Filmarks アプリの URLスキームは URL の第2階層までしか読まない
    (あるいは私に理解できていない)

ということになります。

Filmarks 疑似ソーシャルボタンの実装

結局目的は、ボタンをクリックした場合に、/movies/88062/reviews/98837384 などの投稿の単独ページへ飛ばしたいわけですから、リンク先は

https://filmarks.com/movies/映画ID/reviews/投稿ID

にしておくしかないということになります。

なぜ iPhone はだめなんでしょうね?

たった2日でマスターするiPhoneアプリ開発集中講座 Xcode 11 Swift 5対応

たった2日でマスターするiPhoneアプリ開発集中講座 Xcode 11 Swift 5対応

  • 作者:藤 治仁,小林 加奈子,小林 由憲
  • 発売日: 2019/10/23
  • メディア: 単行本

Joomla! 3.9.22 バグフィックスがリリースされています
Javascript, jQuery のイベントを削除する
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com