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

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

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

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

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

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

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

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

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

02Twitter で実際にやってみる

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

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

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

「星の子」ネタバレレビュー・あらすじ：芦田愛菜の演技と大森立嗣監督の演出で日日是好日以来の秀作に！ https://t.co/kPI8XE3mBC
大森監督の映画は出来不出来の落差が激しいがこれはいい。ファンタジーな大人たちの中でちひろひとりが現実感ある人物として浮かび上がってくる #星の子 #はてなブログ

— ausnichts (@ausnichts) October 10, 2020

Android（ver.10）, iPhone（ver.12） ともに

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

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

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

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

twitter://status?id=1314821821552717824

Android（ver.10）, iPhone（ver.12） ともに

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

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

03Filmarks の 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階層までしか読まない
  （あるいは私に理解できていない）

ということになります。

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

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

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

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

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