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

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

概要は以下の通りです。

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

 

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

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

 

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

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

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

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

 

 

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

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

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

 

 

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

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

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

native:/tab/xxxx/xxxxxxxxx 

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

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

yappli:/tab/xxxx/xxxxxxxxx

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

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