URLスキームでスマホのWEBブラウザからアプリを起動する

url-scheme
  • URLをコピーしました!

最近まで、スマホブラウザで表示したWEBサイトURLスキームから、インストールしたネイティブアプリ起動するのは知らなかった。

スマホ用のWEBアプリ作ることが増え、ネイティブアプリと連携したくなることもしばしばあります。
実はこのURLスキームは、昔からAndroidiPhoneで既に対応していたとのこと。
一般的に、URL Scheme(スキーム)やDeepLink(ディープリンク)と呼ぶこともあリ、iOS9からはUniversal Links(ユニバーサルリンク)を使うらしい。

あわせて読みたい
【Ratchet】WEB上で簡単にiOSやAndroidライクなSPAが実現できるフレームワーク SPA(シングルページアプリケーション)のフレームワークと聞くと、どうしてもReactやAngular等のJavaScriptのライブラリを想像すると思いますが、今回は学習コストがか...
目次

URLスキームで操作性が向上する!

以前から、メールアプリを開いて指定した宛先に送信させたい場合は「mailto:~」、電話アプリから指定した電話番号へ発信させたい場合は「tel:~」と言うのは知っていましたが、それ以外のアプリブラウザから起動できるなんて!

なぜ、今回URLスキームを紹介するかというと、以前Laravelで2段階認証システムを導入する記事を書いたことに関連しています。

この場合、2段階認証に必要なアプリGoogle Authenticator)を起動するボタンを付けてあげれば、利用者はいちいちホーム画面から探す手間が省けます。

URLスキームの書き方

説明する程でもないですが、メモしておきます。

Google Authenticatorを起動する場合

まずは、URLスキームを知らないと話になりません。
URLスキーム検索するにはこの辺りですかね。

総計290個以上掲載!iPhoneアプリのURLスキーム一覧

起動したいアプリ名を検索して、以下のようにHTMLリンクアンカー)に記載します。

コレだけです。
先程の[Google Authenticator]アプリを検索したら「otpauth:」が表示されましたが、「totp:」も行けるようです。
iPhoneではどちらも問題なくアプリ起動しました。(Androidは知りません)

SNS系のアプリをURLスキームから起動

以下は、SNS系のアプリを起動する場合の例です。
~://」以降にパラメータを入れてあげると、タイムラインを表示したり、投稿するメッセージを指定したりもできるらしい。

あとは参考サイトでどうぞ!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • […] WinAuthを導入する前に、対象のサービスのシークレットキー、もしくは読み取れる場合はQRコードを用意しておきましょう。 例えば、以前ご紹介したLaravelでGoogle Authenticatorを利用した2段階認証システムを構築したことがあります。 Laravel 5.5に2段階認証システムを導入する(Google2FA)https://minory.org/laravel-google2fa.html何かとセキュリティが問われる昨今、これまでのIDとパスワードだけの認証では不安を感じている方も多々いると思います。近年、もしかしたら皆さんもご存知か、既に使われているかもしれませんが、ワンタイムパスワードを利用した2段階認証というものがあり、今回はそ… Minory  1 share 1 user この場合だと、2段階認証を設定する場面で表示されるシークレットキーとQRコードです。 他のサービスも同じように表示されるはずです。 このシークレットキーは再発行が難しく、サービスによっては再発行してくれません。 さらに、Google Authenticatorは機種変する際のバックアップ、またはデータ移行ができないようですので、必ず控えておきましょう。 スマホで登録するとこのようになります。 おそらく、PCではURLスキームを使えないです。 URLスキームでスマホのWEBブラウザからアプリを起動するhttps://minory.org/url-scheme.htmlスマホ用のWEBアプリ作ることが増えた今日この頃。ネイティブアプリと連携したくなることもしばしばあります。以前から、メールアプリを開いて指定した宛先に送信させたい場合は「mailto:~」、電話アプリから指定した電話番号へ発信させたい場合は「tel:~」と言う… Minory  2 shares 2 users […]

コメントする

CAPTCHA


目次