【HTML】Webページからスマホアプリを起動する

こんにちは、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ページからスマホアプリを起動する方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら