記事一覧/ ARTICLES
その他
-
ポップアップ機能の使い方
『ポップアップ機能』とは、アプリ内でポップアップを表示し、簡易的なお知らせや案内ができる機能です。
前提事項
-
ポップアップはフリーレイアウト機能で作成します。
-
ポップアップとして設定するフリーレイアウト機能の画面に、多くの情報が設定されている場合、ポップアップの立ち上がりが遅くなることがあります。
表示領域が長い場合ポップアップ内はスクロールしますが、スクロールしない範囲での設定を推奨します。
必要なアプリのバージョン
本機能をご利用いただくには、アプリが以下のバージョンとなっている必要がございます。
設定を行う前に、必ずアプリのバージョンをご確認ください。
対応しているバージョン未満の場合、管理画面より『再申請』をいただくと弊社にてバージョンアップの対応をさせていただきます。★対応バージョン★
・iPhone…7.4以降
・Android…4.6以降また、「アプリ上でポップアップが表示された際、外側をタップすることで閉じられるように改善したバージョン」は以下になります。
★対応バージョン★
・iPhone…9.42以降
・Android…7.6.6以降『ポップアップ』を設置できる機能
- フリーレイアウト機能
『ポップアップ』に設定できる機能
- フリーレイアウト機能
『ポップアップ』内からリンクできる機能
- フリーレイアウト機能
- 電子書籍機能
- クーポン機能
- ウェブビュー機能
- アニメーションレイアウト機能
- フォト機能
- ニュース機能
- カタログ機能
- ショップ機能
- ビデオ機能
- 通知履歴
- 会員カード機能
- スクロールメニュー
- お気に入り一覧
- ログイン機能
- フォーム機能
- スタンプ機能
- リダイレクト
※あくまでリンク先として指定ができ、機能としてタブバー内に配置できるのみとなり、フリーレイアウト内のオプション機能(テキストコピー等)は含まれません。
設定方法
機能を設定するための全体の流れとしては
- 「ポップアップ機能」内で表示させる「フリーレイアウト機能(表示元)」を作成する
- 「ポップアップ機能」を表示させたい「フリーレイアウト機能(表示先)」で設定をする
となります。
「ポップアップ機能」内で表示させる「フリーレイアウト機能(表示元)」を作成する
-
新しいフリーレイアウト機能を用意し、コンテンツ管理から編集画面に移動します。
-
ポップアップ内に表示させたい画像や文字を設定します。
アピアランスも反映されるので、必要に応じてマージンやパディングといった余白やカラムなどもご設定ください。
※フリーレイアウト内のオプション機能(テキストコピー/エンベッド動画/ポップアップ等)はご利用いただけません - リンク先に設定できる機能は、『ポップアップ』内からリンクできる機能に記載のものに限ります。
-
設定が完了したら、ページの下にある「保存」ボタンを押します。
「ポップアップ機能」を表示させたい「フリーレイアウト機能(表示先)」で設定をする
- コンテンツ管理から、ポップアップ機能を設置したいフリーレイアウト機能を開きます
- リンク元であるセルのアクションから、「ポップアップ」を選択します
- 「ポップアップで表示するフリーレイアウト機能」に、上記で作成したフリーレイアウト機能(表示元)を選択し決定します
- 保存後、Preview Yappliにて動作をご確認ください
-
-
角丸シャドウ機能の使い方
新入稿画面のフリーレイアウト機能にて、セルや画像に角丸やシャドウを適用することができます。
必要なアプリのバージョン
本機能をご利用いただくには、アプリが以下のバージョンとなっている必要がございます。
設定を行う前に、必ずアプリのバージョンをご確認ください。
対応しているバージョン未満の場合、管理画面の「アプリ登録」より『再申請』をいただくと、弊社にてバージョンアップの対応をさせていただきます。
★対応バージョン★
・iPhone…9.43以降
・Android…7.6.7以降注意事項
本設定は、旧入稿画面では行えません。
新入稿画面のフリーレイアウト機能のみで行なえます。
角丸シャドウ機能の使い方
1.角丸シャドウを適用したいセルの「詳細設定」をクリックします
2.詳細設定画面にて以下3点を入力し、角丸を適用します
・サンプルイメージ①
・サンプルイメージ②
- プレビューヤプリにて見え方を確認し、問題がなければ再構築を行ってください。
-
カルーセル機能の使い方
カルーセル機能とは、アプリのフリーレイアウト内で画像などのコンテンツを横にスライドさせて表示ができる機能です。
よりアプリらしい表現ができるようになります。※画像は参考イメージです
上部画像でいうと、右の「フリーレイアウト機能」で設定いただいた3枚の画像が、左のカルーセル機能内で横にスライドして表示されます。
ループの指定や自動スクロール、時間指定など細かな設定も可能ですので、アプリ上の魅せ方は多岐に渡ります。必要なアプリのバージョン
本機能をご利用いただくには、アプリが以下のバージョンとなっている必要がございます。
設定を行う前に、必ずアプリのバージョンをご確認ください。
対応しているバージョン未満の場合、管理画面の「アプリ登録」より『再申請』をいただくと、弊社にてバージョンアップの対応をさせていただきます。
★対応バージョン★
・iPhone…7.35以降
・Android…5.5.7以降カルーセル内で表示できるもの
- 画像(バナーなど)
- 文字
※フリーレイアウト内のオプション機能(テキストコピー/エンベッド動画/ポップアップ等)は現在ご利用いただけません。
カルーセル内で指定できる要素
- ループの指定
コンテンツが最後まで表示されたあとに最初の画像を表示するかどうかのループの有無を設定 - ページングの指定
コンテンツを手動でスクロールし中途半端な位置で止まった場合に、画面内にコンテンツが収まるように吸着する動作の有無を設定 - コンテンツの揃え位置の指定
コンテンツのサイズが異なる場合、上揃え・中央揃え・下揃えのいずれで表示するかを設定 - 自動スクロールの指定
コンテンツの自動スクロールの有無を指定 - スクロールするまでの時間の指定
スクロールするまでの時間(秒単位)を指定
【注意事項】
※ループ無しで設定した場合は自動スクロールを有にしても自動スクロールしない仕様となっております。
※自動スクロールは手動で動かした後はスクロールしない仕様となっております。(Androidは他タブ遷移でスクロールいたします)カルーセル機能の使い方
機能を設定するための全体の流れとしては
- 「カルーセル機能」内で表示させる「フリーレイアウト機能(表示元)」を作成する
- 「カルーセル機能」を表示させたい「フリーレイアウト機能(表示先)」で設定をする
となります。
「カルーセル機能」内で表示させる「フリーレイアウト機能(表示元)」を作成する
- 新しいフリーレイアウト機能を用意し、コンテンツ管理から編集画面に移動します。
- 1ブロック目に、1枚目に表示される画像や文字を設定します。
アピアランスも反映されるので、必要に応じてマージンやパディングといった余白やカラムなどもご設定ください。
※フリーレイアウト内のオプション機能(テキストコピー/エンベッド動画/ポップアップ等)はご利用いただけません - 2ブロック目以降は、手順2のセルを複製し、追加していきます。
※セルを複製せずに新規セルを使った場合、カルーセルでの表示が崩れる可能性があります
※フリーレイアウト内のオプション機能(テキストコピー/エンベッド動画/ポップアップ等)はご利用いただけません - 設定が完了したら、ページの下にある「保存する」ボタンを押します。
「カルーセル機能」を表示させたい「フリーレイアウト機能(表示先)」で設定をする
- コンテンツ管理画面の右上あたりにある「リンク生成」ボタンを押します。
※「プッシュ通知」の左隣にあるボタンです - 先ほど作成した、カルーセル元になるフリーレイアウト機能を押します。
- 上に表示されたB内「/tab/bio/xxxxxx」の文字列が必要なコードになるので、コピーして控えます。
xxxxxxはコンテンツごとにユニークなIDになりますので、以下はあくまで参考例となります。 - コンテンツ管理から、カルーセルを設置したいフリーレイアウト機能を開きます。
- カルーセルを設定する位置に空のブロックを用意し、そのブロックのタイトルに
horizontal_scroll(カルーセル元ページのコード,カルーセルで指定できる要素 ①,②,③,④,⑤)を入れます。
各設定の詳細は以下となります。① ループの指定 (0:ループしない、1:ループする) ② ページングの指定 (0:ページングしない、1:ページングする) ③ コンテンツの揃え位置の指定 (0:センター 、1:トップ、2:ボトム) ④ 自動スクロールの指定 (0:自動スクロールしない、1:自動スクロールする) ⑤スクロールするまでの時間を指定 (例)5 → 5秒でスクロールさせる ※推奨は4〜7秒程度です) -
- 設定が完了したら、ページの下部にある「保存する」ボタンを押して完了になります。