最近まで、スマホのブラウザで表示したWEBサイトのURLスキームから、インストールしたネイティブアプリが起動するのは知らなかった。
スマホ用のWEBアプリ作ることが増え、ネイティブアプリと連携したくなることもしばしばあります。
実はこのURLスキームは、昔からAndroidやiPhoneで既に対応していたとのこと。
一般的に、URL Scheme(スキーム)やDeepLink(ディープリンク)と呼ぶこともあリ、iOS9からはUniversal Links(ユニバーサルリンク)を使うらしい。
![](https://minory.org/wp-content/uploads/2018/01/ratchet-300x207.jpg)
URLスキームで操作性が向上する!
以前から、メールアプリを開いて指定した宛先に送信させたい場合は「mailto:~」、電話アプリから指定した電話番号へ発信させたい場合は「tel:~」と言うのは知っていましたが、それ以外のアプリがブラウザから起動できるなんて!
なぜ、今回URLスキームを紹介するかというと、以前Laravelで2段階認証システムを導入する記事を書いたことに関連しています。
この場合、2段階認証に必要なアプリ(Google Authenticator)を起動するボタンを付けてあげれば、利用者はいちいちホーム画面から探す手間が省けます。
URLスキームの書き方
説明する程でもないですが、メモしておきます。
Google Authenticatorを起動する場合
まずは、URLスキームを知らないと話になりません。
URLスキームを検索するにはこの辺りですかね。
![](https://hibikanblog.net/wp-content/uploads/img/slooProImg_20140921210324.jpg)
起動したいアプリ名を検索して、以下のようにHTMLのリンク(アンカー)に記載します。
1 |
<a href="totp:" class="btn btn-block btn-lg btn-social btn-info btn-flat"><i class="fa fa-google"></i> Authenticatorアプリを開く</a> |
コレだけです。
先程の[Google Authenticator]アプリを検索したら「otpauth:」が表示されましたが、「totp:」も行けるようです。
iPhoneではどちらも問題なくアプリが起動しました。(Androidは知りません)
SNS系のアプリをURLスキームから起動
以下は、SNS系のアプリを起動する場合の例です。
「~://」以降にパラメータを入れてあげると、タイムラインを表示したり、投稿するメッセージを指定したりもできるらしい。
1 2 3 4 5 6 |
<!-- twitter --> <a href="twitter://" class="btn btn-info"><i class="fa fa-twitter"></i> Twitter</a> <!-- Facebook --> <a href="fb://" class="btn btn-primary"><i class="fa fa-facebook"></i> Facebook</a> <!-- Google Plus --> <a href="gplus://" class="btn btn-warning"><i class="fa fa-google-plus"></i> Google Plus</a> |
あとは参考サイトでどうぞ!
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgyJUFCJUUzJTgyJUI5JUUzJTgyJUJGJUUzJTgzJUEwVVJMJUUzJTgyJUI5JUUzJTgyJUFEJUUzJTgzJUJDJUUzJTgzJUEwJUUzJTgxJUE3JUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgyJTkyJUU4JUI1JUI3JUU1JThCJTk1JUUzJTgxJTk1JUUzJTgxJTlCJUUzJTgwJTgxJUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgxJThDJUU3JTg0JUExJUUzJTgxJTkxJUUzJTgyJThDJUUzJTgxJUIwJUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgyJUEyJUUzJTgxJUFCJUU5JTgxJUI3JUU3JUE3JUJCJUUzJTgxJTk1JUUzJTgxJTlCJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz05ODlhNDM3YzNhNjdlZmMwMDU5MWE3ZDBjZTJhN2ZmMw&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrd3N0JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zZTVmM2ZmYjRiYTM3MWM2NzIzNzcxOWRhNjY0NDBkMA&blend-x=142&blend-y=486&blend-mode=normal&s=5f89c7b3c3cf300e3ff3274a9232a6ca)
コメント
コメント一覧 (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 […]
ご紹介したiPhoneのURLスキーム検索サイトは削除された様子。
代わりに、urlスキーム検索アプリがあったのでリンクしときます。
https://apps.apple.com/jp/app/url%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%A0%E6%A4%9C%E7%B4%A2/id962530256