ウェブページからアプリの特定のページへリンクを繋ぐ方法
ディープリンクとは、ウェブページからアプリ内の特定のページに直接遷移するためのリンクです。
Yappliではこのディープリンクを生成する機能を標準で備えています。
通常、ウェブページからウェブページ以外のコンテンツへ遷移させることはできませんが、
ディープリンクを使うことで、ウェブビューで表示しているウェブページからアプリ内の機能へのリンクを繋ぐことが可能になります。
概要は以下の通りです。
- ディープリンクを生成する方法
- ウェブページのHTMLにディープリンクを設定する方法
- ウェブビュー機能でディープリンクを設定したURLを表示させる方法
ディープリンクを生成する方法
- コンテンツ管理を選択します。
- 画面右上にある「リンク生成」をクリックします。
- 左列からディープリンクを生成したいページを選択します。
- メニューをクリックすると、メニュー内の階層(ページ)が表示されていきます。上図は、詳細まで階層をおりていったものを示しています。どの階層を表示させたいかは、自由に設定可能です。
- HTML内の<a>タグに貼り付けたいコンテンツを選択します。<a>タグに貼るURLが生成されますので、このURLをコピーして、該当するウェブページのHTMLに貼り付けましょう。
ご注意
- アクティブタブのいづれかを遷移先として設定する場合、前回開いていたタブ、もしくは1番左のタブ内でコンテンツが表示されます。
ウェブページの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スキームはCMSのダッシュボードより確認いただけます。詳細は以下サポートページを御覧ください。
URLスキームとは何ですか?

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

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