このセクションの記事一覧はこちら

【新】ウェブページからアプリの特定のページへリンクを繋ぐ方法

ディープリンクとは、ウェブページからアプリ内の特定のページに直接遷移するためのリンクです。
Yappliではこのディープリンクを生成する機能を標準で備えています。

通常、ウェブページからウェブページ以外のコンテンツへ遷移させることはできませんが、
ディープリンクを使うことで、ウェブビューで表示しているウェブページからアプリ内の機能へのリンクを繋ぐことが可能になります。

概要は以下の通りです。

  • ディープリンクを生成する方法
  • ウェブページのHTMLにディープリンクを設定する方法
  • ウェブビュー機能でディープリンクを設定したURLを表示させる方法

 

ディープリンクを生成する方法

  1. コンテンツ管理を選択します。
  2. 画面右上にある「リンク生成」をクリックします。
  3. 左列からディープリンクを生成したいページを選択します。
    1-3.png
  4. メニューをクリックすると、メニュー内の階層(ページ)が表示されていきます。上図は、詳細まで階層をおりていったものを示しています。どの階層を表示させたいかは、自由に設定可能です。 
    1-4.png
  5. HTML内の<a>タグに貼り付けたいコンテンツを選択します。<a>タグに貼るURLが生成されますので、このURLをコピーして、該当するウェブページのHTMLに貼り付けましょう。
    1-5.png 

 

ウェブページのHTMLにディープリンクを設定する方法

HTMLの<a>タグ部分に上記で生成したディープリンクを設定します。
貼り付け方法は、Aタグの#部分に、ディープリンクのURLを貼り付けるだけです。

<a href="#">

<a href="native:/tab/home/××××××××">

ディープリンクを付けたHTMLを、お手持ちのサーバーにアップします。
アップしたHTMLを確認してリンクされていることを確認します。

 

 

ウェブビュー機能でディープリンクを設定したURLを表示させる方法

  1. コンテンツ管理からウェブビュー機能を選びます。
  2. 貴社でご用意いただいたディープリンクを設定したURLを設定し、保存してください。
    __________2020-03-03_17.48.20.png

注:変更が確認できない場合は、一度プレビューヤプリを閉じて、再度開くことで反映されます。

 

 

【応用編】ブラウザからアプリ内のコンテンツに遷移させる方法

上記のリンクの方法では、Yappliのwebビュー内からでしか遷移できませんが、事前にURLスキームを設定することにより、SafariやChromeからアプリのコンテンツに遷移させることができます。

通常以下のようなリンクが生成されます。

native:/tab/xxxx/xxxxxxxxx 

赤字の"naitive"部分を遷移したいアプリのURLスキーム名に変更します。

例:Preview Yappliでは「yappli」というURLスキームが設定されておりますので、以下のようになります。実際には赤字の部分をそれぞれのアプリ毎のURLスキームを設定をすることになります。

yappli:/tab/xxxx/xxxxxxxxx

HTMLのハイパーリンクの<a>タブ内に上記のURLを埋め込むことで、アプリをダウンロードしている端末であれば、ブラウザからアプリに画面に遷移することができます。

ディープリンクとURLスキームを使うことで、ウェブページからのアプリコンテンツへの遷移が可能になります。

 

不明点はございますか? お気軽にお問い合わせください >

不明点はございますか? お気軽にお問い合わせください >