こんにちは、Ryohei（@ityryohei）です！

本記事では、HTMLのaタグを使って、Webページからスマホアプリを起動する方法をご紹介しています。

Webページからスマホプリを起動したいな。良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

Webページからスマホアプリは起動できるの？

スマホアプリ側にURLスキームが設定されていれば起動可能です。Twitterを例にすると、下記のURLスキームを呼び出すことでアプリの起動が可能です。

twitter://

上記URLスキームを使って、aタグのリンクからTwitterアプリのタイムラインを表示するようにしてみます。

<a href="twitter://timeline">アプリでタイムラインを表示する</a>

上記を記述してTwitterをインストールしたスマホからリンクをクリックすると、Twitterのネイティブアプリが起動します。このようにWebページからスマホアプリを起動するリンクのことをディープリンクと呼びます。URLスキームさえわかれば、ディープリンクを指定することで簡単にスマホアプリを起動することが可能となります。

iPhone／AndroidのURLスキームの調べ方

AndroidとiPhoneアプリの開発環境を構築している方であれば、対象アプリのファイルを参照してURLスキームを確認することができます。ただ、開発環境がない場合は下記の対応を取る必要があります。

  • アプリの開発環境を構築する
  • URLスキーム検索サービス・アプリを使用する
  • Webで検索する

個人的には、Webページから呼び出すようなアプリであれば、「アプリ名 + URLスキーム」と検索すればある程度信頼できる情報が見つかります。

例えばfacebookを検索すると下記ような情報がすぐに見つかります。

fb://

実際にリンクを指定する場合は下記のようにします。

<a href="fb://profile/{userID}">アプリで〇〇のプロフィールを表示する</a>

Webページから起動が必要なアプリの種類はそんなに多くはないので、有名なアプリであればURLスキームというキーワードだけ覚えておけばすぐに見つけることができそうですね。

最後に

最近はインターネットの検索はスマホで済ませるという方が多くなりました。私のサイトはパソコンで閲覧される方がほとんどなのでデータで示すことはできないですが、業務で制作しているサイトのアナリティクスを見ると、スマートフォンからのアクセスの方が多くなっているのは明らかです。

Webページからアプリを起動する場合は予め通知をするなどの配慮は必要になりますが、SNSの登録を促したり、自社開発したアプリへ誘導したりする際にURLスキームを活用したディープリンクは役に立ちそうですので、覚えておくと良いかもしれませんね。

以上、HTMLでWebページからスマホアプリを起動する方法のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら