Yappli Support Desk

アプリ作成から申請までをサポート!

【応用編】ディープリンクを使って、ウェブページからアプリのページを繋ぐ方法

最終更新日: Dec 13, 2016 05:54PM JST

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

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

手順は以下の通りです。
⒈ ディープリンクを生成する
⒉ ウェブページのHTMLにディープリンクを設定する
⒊ ウェブビュー機能で
ディープリンクを設定したURLを表示させる
 

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


①コンテンツ管理を選択します。




②枠内のリンク生成をクリックします。




③ディープリンクを生成したいページを選択します。

A:リンクができるメニューが、左列に並びます。

B:メニューをクリックすると、メニュー内の階層(ページ)が表示されていきます。上図は、詳細まで階層をおりていったものを示しています。どの階層を表示させたいかは、自由に設定可能です。 

 

C:HTML
内の<a>タグに貼り付けたいコンテンツを選択します。<a>タグに貼るURLが生成されますので、このURLをコピーして、該当するウェブページのHTMLに貼り付けましょう。


 

 

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


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

<a href="#">

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

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



 

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


①コンテンツ管理からウェブビュー機能を選びます。
②コンテンツ管理から、ディープリンクを設定した
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スキームを使うことで、ウェブページからのアプリコンテンツへの遷移が可能になります。


URLスキームの詳細についてはこちらから▶︎▶︎


 

お問い合わせ

support@fastmedia.jp
http://assets0.desk.com/
false
desk
Loading
seconds ago
分前
minutes ago
1時間前
hours ago
日前
days ago
false
Invalid characters found
/customer/ja/portal/articles/autocomplete