ウェブビュー/ WEB VIEW

• ウェブビュー機能の使い方

  アプリ内でウェブサイトをそのまま表示し、展開することができます。

  ECサイトや会員ページ、ゲームなど、何でもアプリに取り込める便利な機能です。

  ウェブサイトとアプリのデザインをマッチさせることで、違和感なくウェブをアプリ化することも可能です。

   

  デフォルト表示するウェブページ

  そのコンテンツを開いた際にデフォルトで表示するページを設定できます。

  

  リンク先に設定するウェブページ

  他コンテンツからのウェブページをリンク設定する際に活用いただける機能です。

   

  画面のように設定した場合、他コンテンツ(フリーレイアウト機能、ニュース機能など)から該当ウェブビュー機能を選択すると、設定済みのリンク一覧が表示されます。

   

   

  ※「リンク先に設定するウェブページ」のURLを変更した場合は、フリーレイアウト機能やニュース機能で該当のウェブビューを設定している箇所のリンクを設定し直す必要がありますのでご注意ください。

  CSS上書き

  ウェブビュー機能に設定したURLに対して、CSSの上書きが可能です。表示したくないヘッダー・フッダーを消したり、ページの一部を消す際に使用します。

  

  例：#hogehoge{display:none;}

  対象URLパターンは複数登録が可能です。

  https://yapp.li/  →yapp.li以下すべてのページ適応
  https://yapp.li/news  →yapp.liのnews以下すべてのページ適応
  https://yapp.li/index.html  →yapp.liのindex.htmlだけに適応

   

   

  応用編

  リンク先設定からウェブビュー機能を選択し、URLを直接入力することで、ウェブページを表示することも可能です。

  その際は、 【CSS上書き】で設定されたCSS上書き設定も引き継がれます。

  

  1. アクションより「リンク」を選択肢、「未設定」をクリック
  2. ウェブビューコンテンツを選択
  3. URLを入力します

  

  ★CSSの設定も引き継がれます。

   

  拡張設定

  詳細はこちらのサポートページをご参考ください。 

   

• ウェブビュー機能の使い方〜上級編〜

  ※本機能は法人プランをご契約のお客様のみご利用いただけます

  ウェブビュー機能の拡張設定では、より詳細な設定を行えます。

  • 各設定について
  • SafariView/ChromeViewについて
  • 各機能の比較

   

  各設定について
  

  ①ウェブページをすべて読みこんでから表示するかを選択できます。
  OFFにした場合、読み込んだ順に表示されます。

  ※iOSのみ反映されます。AndroidはOFF（読み込んだ順に表示）となります。

  ※なお管理画面に設定したCSS上書きはウェブページを表示後に行われますので、最初から非表示にさせたいバナーなどはUserAgent判定で予め消す必要があります。

  ②バックグラウンドからの復帰などで、画面が表示された際に読み込みをするか否かを選択できます。

  ③リンク先としして設定されたSFSafariViewControllerで表示するか否かを選択できます。
  下記の「SFSafariViewController / Chrome Custom Tabs（旧：ChromeView）について」を御覧ください。

  ④リンク先として設定された際にChromeViewで表示するか否かを選択できます。
  下記の「SFSafariViewController / Chrome Custom Tabsについて」を御覧ください

  ⑤ウェブビュー機能でウェブサイトを閲覧し、いくつかページ遷移した状態で戻るボタンを押した時、
  ON：ひとつ前のページに戻ります。
  OFF：ウェブページではなくアプリのコンテンツ画面に戻ります。

  ⑥【iOSのみ】ページを表示したとき、自動で再読み込みをするか選択できます。
  サブメニュー（ヘッダー右上）にウェブビューを設置する場合、有効にすることをおすすめいたします。
  例：「カート内の商品が更新されない」などの場合はこちらの設定をご確認ください。
  
  

  よくあるご質問

  Q.iOSだけを指定したい場合はどうすればいいですか？

  A.「その他細かな設定」の③をONにしてください

  Q.Androidだけを指定したい場合はどうすればいいですか？

  A.「その他細かな設定」の④をONにしてください。

  Q.iOS/Androidの両方を指定したい場合はどうすればいいですか？

  A.「その他細かな設定」の③と④をONにしてください。

  Q.iOSにChrome Custom Tabsを指定できますか？

  A.SafariViewのみ指定いただけます。

  Q.Webに表示されたすべての動画が再生されるようになりますか？

  A.すべての端末での動画再生を保証するものではございません。
  端末の仕様など何かしらが起因し、再生がされない場合もございます。

   

   

  SFSafariViewController / Chrome Custom Tabsについて

  『SFSafariViewController / Chrome Custom Tabs』を使うことで、よりウェブブラウザで開いた時に近しい挙動となります。
  ※SFSafariViewController / Chrome Custom Tabsは、『リンク設定でのみ』設定が可能です。
  タブ内・その他内・出し分けからのリンク設定には対応していませんので、注意ください

   

  主なメリット

  • AndroidアプリからChrome Custom Tabsを開くことで、Web内動画を再生できる
  • Chromeでログイン情報が保持できる場合がある(表示するWebの仕様に基づく)

  対応バージョン

  本機能をご利用いただくには、アプリが以下のバージョンとなっている必要がございます。
  設定を行う前に、必ずアプリのバージョンをご確認ください。
  対応しているバージョン未満の場合、管理画面より『再申請』をいただくと弊社にてバージョンアップの対応をさせていただきます。 

  ・iPhone…7.7以降
  ・Android…v5.5.8以降
  
  

  設定方法 

  1. 『ウェブビュー機能』を開く
  2. 「拡張設定」をクリック
  3. SFSafariViewController / Chrome Custom Tabsを有効にする
  4. 保存を押す

   
  
  

  各機能の比較

  	ウェブビュー	SFSafariViewController ChromeCustomTabs
  CSSの適用	◯	✕
  特殊処理の多いウェブの表示 （ウェブ内の動画埋め込み等）	✕ Androidで処理できない場合がある	◯ ウェブブラウザで表示ができていれば表示が可能
  ログイン状態の保持	✕ セッション切れ状態となるため保持できない場合がある	△ 表示するウェブのセッション保持の仕様により可能な場合もある

  ※ログイン状態の保持については、外部API連携などをされている場合は影響ありません。

• ログイン画面で、IDやパスワードを記憶・自動補完させる方法 - ウェブビュー機能

  ログインするたびにIDやパスワードを入力する必要がないように、ID（メールアドレスや名前）とパスワードを記憶して自動入力することができます。

  ここでは、ウェブビューで表示しているログイン画面上で、ID・パスワードを記憶させる方法をご紹介します。

   

   

  自動補完の定義と注意事項

  端末の初期化またはWEBサイトの仕様変更により、記憶したID・パスワードが消えてしまうことがございます。

  本設定による挙動については設定されているWEBサイト側の仕様や端末挙動に左右されるため、弊社では調査対応を行っておりません。

  また、Ajax通信を用いたウェブサイトには対応していません。

   

   

  必要なアプリのバージョン

  • iOS…本機能において、必要なアプリのバージョンはございません。 しかしながら、動作の安定したバージョンでエンドユーザーが快適にご利用いただくためにも、本機能をご利用いただく際には、最新のバージョンへのアップデートを強くおすすめいたします。
  • Android…v7.6.3以上

  アプリのバージョンアップとはなんですか？も合わせてご参考ください。

   

  管理画面での設定の仕方

  1. コンテンツ管理より、ログイン画面を設定しているWebページを開きます。

  2. 「拡張設定」をクリックし、設定ページにある、「 フォームの自動補完を有効にするウェブページ」 に、保持させたいログイン画面のURLとID・パスワードのパラメータ名を入力し、保存します（パラメータ名の詳細は後述）。

  

   

  URLの記載の仕方

  URLを記載するとき、通常のログイン画面やマイページのURLをそのまま貼り付けると、すべてのユーザーに対して自動補完が上手く反応しない場合があります。

  URLの後ろについている余分なパラメータは、なるべく外しましょう。

   

  悪い例

  

  良い例

  

  URLはそのWebページを示す、シンプルなものを記載しましょう。

   

   

  パラメータ名の取得方法

  パラメータ名とは、コードで指定している"name"属性を表します。

  "name"属性は、該当するIDまたはパスワードにマウスを置いた状態で右クリックし、検証（または要素の詳細）をクリックして調べることができます。下記の赤字部分が、パラメータ名に入れる内容となります。

  　　　<input name="〇〇" 〜　

  パラメータ名とパラメータ名の間は、半角カンマで入力します。（以下参考）

  

   

  ID・パスワードだけでなく、"name"属性の取れるフォームはいくつでも指定することができます。

  パラメータ名は、それぞれのウェブページによって異なりますので、上記の手順で必ず確認してください。 

   

• よくある質問-ウェブビュー機能

  アプリ内で、ウェブページに設定している背景画像が表示されません

  ウェブページ側で背景色が設定されていない場合に発生いたします。
  ウェブビュー機能のCSS上書き設定にて、下記をお試しください。
  
  html{ background-color: transparent !important; }

  設定しているウェブページの、特定のバナーを非表示にしたいです

  CSS上書き設定にてご設定いただけます。
  CSS上書き設定については、【新】ウェブビュー機能の使い方をご参考ください。
  ※CSSの指定方式は、貴社ウェブサイトご担当者様様にご確認ください。

  設定しているウェブページの、ヘッダーやフッターなど一部分のみを非表示にしたいです

  CSS上書き設定にてご設定いただけます。
  CSS上書き設定については、【新】ウェブビュー機能の使い方をご参考ください。
  ※CSSの指定方式は、貴社ウェブサイトご担当者様様にご確認ください。

  遷移先が表示されません

  以下のことが考えられます。
  (1)遷移先に設定されているウェブビュー機能が削除されている
  (2)URLに無効な文字が含まれている
  (3)URLにひらがな・漢字などが含まれている
  (4)表示されているサイトの証明書などがエラーとなっている
  ※Android版Preview Yappliでご確認いただきますと、エラーが発生している場合ダイアログが表示されます。
  (5)リンク先に設定されているウェブビュー機能を作成後、再構築ボタンを押していない
  ご設定いただいている内容が上記に該当をしていないかご確認をお願いいたします。

  リンク先ページを更新したのに反映されません

  表示されているサイト側でキャッシュコントロールがされていないと、端末側でキャッシュが残り、更新いただいたとしても閲覧している端末で更新がされない場合がございます。
  サイト側のキャッシュコントロールをご確認ください。

  Androd本番アプリで下記のように「通信障害が発生いたしました。」といったエラー画面となり、サイトが利用できません
  

  ウェブビュー機能に設定されているサイトでエラーが起きている状況です。
  プレビューヤプリ(Android版)で上記が発生している箇所をご確認いただき、ダイアログに表示されるエラー内容に基づき、サイト側でご対応いただく必要がございます。

  Androidプレビューでエラー表示が出ました

  表示されているサイトでエラーが起きている状況です。
  
  ダイアログのエラー内容をご確認いただき、貴社ウェブサイトご担当者様にお伝えの上、ご対応をお願いいたします。

  AmazonPayには対応していますか？

  Amazon Payのデフォルトの挙動ですと、弊社アプリ内で正常に遷移いたしません。
  現在の回避策としては、以下の2つがございます。
  ①AmazonPayのWEBサイトの設定にて、別タブではなく同タブ内での挙動とする
  こちらはAmazonPayの仕様確認なども関わってくるかと思われますので、実施できるかはウェブサイトご担当者様にご確認ください。
  ②オンラインストアを開く際、アプリ内基本設定の「ウェブビュー」ではなく、拡張設定「ChromeView」を設定する
  ChromeViewの設定方法は【新】ウェブビュー機能の使い方〜上級編〜をご参考ください。

  アプリ内のウェブビュー機能で表示したサイトに一度ログインをした後、ログアウトやアプリの立ち上げ直した際に再度ID・パスワードを要求されないようにしたいです

  オプションのDB連携セグメントプッシュをご利用いただき、API連携をしていただくことで、ログイン情報を保持することが可能となります。貴社仕様によって、実現可否が異なりますため、オプションお申し込み時に担当者にて詳細をヒアリングさせていただきます。
  オプションをご利用ご希望の際はカスタマーサポートまでお問い合わせください。

  ウェブビュー機能に設定したウェブサイト上で、メールアドレス・パスワード情報を保持したいです

  可能です。設定方法はログイン画面で、IDやパスワードを記憶させる方法をご参考ください。
  なお、自動補完については端末の挙動・設定されているWEBサイトの仕様によって動作が異なってまいります。