アプリのページにフローティングアイコンとドラッグ可能なフローティングウィンドウを追加する方法

フローティングパーツは、アプリのページコンテンツの上に表示され、特定の目的地へのクイックアクセスを提供したり、追加のコンテンツを表示したりします。ページのフローティングセクションには、2種類のパーツを追加できます：

• フローティングアイコン： ライブチャット、プロモーションページ、その他の目的地へのクイックアクセスを提供します。フローティングアイコンは、顧客がスクロールすると自動的にフェードアウトし、スクロールが停止するとフェードインします。
• ドラッグ可能なフローティングウィンドウ： アプリによって提供されるこれらのウィンドウは、商品動画、バンドルオファー、その他のコンテンツを表示できます。ページ上に常に表示され、顧客はウィンドウを異なる位置にドラッグできます。

この記事では、どのページがフローティングパーツをサポートしているか、追加できる数、追加および管理方法、そしてドラッグ可能なフローティングウィンドウのアプリ内での動作について説明します。

サポートされているページとパーツの制限

フローティングアイコンとドラッグ可能なフローティングウィンドウは、異なるアプリページでサポートされています：

• フローティングアイコンは以下に追加できます：
  • ホームページ
  • カスタムページ
  • 商品詳細ページ
  • カートページ
  • カテゴリページ
  • 商品一覧ページ
  • 検索結果ページ
  • マイアカウントページ
• ドラッグ可能なフローティングウィンドウは以下に追加できます：
  • ホームページ
  • カスタムページ
  • 商品詳細ページ
  • カートページ

各ページには以下の制限が適用されます：

アプリページにフローティングアイコンを追加する

アプリページにフローティングアイコンを追加するには：

1. カスタマイズしたいページのエディターを開きます（例：商品詳細ページ）。左のサイドバーでフローティングセクションを見つけ、フローティングパーツを追加をクリックします。

2. ポップアップパネルで、ネイティブパーツタブを選択し、基本パーツの下にあるフローティングアイコンを選びます。

   注：ページごとにフローティングアイコンパーツは1つだけ追加可能です。すでにページにある場合、フローティングアイコンのオプションは利用できません。

   

3. （ホームページ以外のページの場合）右側のフローティングアイコン設定パネルで、コンテンツソースを選択します：

   • ホームページのフローティングアイコンと同期：ホームページのフローティングアイコン設定を使用します。現在のページでフローティングアイコンを個別にカスタマイズできません。
   • 独立して設定：現在のページ専用にフローティングアイコンを設定できます。

   

4. フローティングアイコンを独立して設定するには、左のサイドバーのフローティングアイコンパーツの下にある＋ フローティングアイコンを追加をクリックし、フローティングアイコンを選択します。

   

5. 右側のフローティングアイコン設定パネルで、以下を設定します：
   • フローティングラベル名：アイコンの名前を入力します。この名前は管理者のみが見えます。
   • フローティングラベルの位置：アイコンがページのどこに表示されるかを選択します（例：右下隅）。
   • 画像：1:1のアスペクト比の画像をアップロードします。推奨サイズは240 × 240ピクセルです。対応フォーマットは.png、.jpg、.jpeg、.gifです。
   • 機能タイプ：アイコンの機能を選択し、対応する設定を行います：
     • ライブチャット： オンラインチャットアプリを選択し、未読メッセージ通知を有効にするか選びます。
     • プロモーションページ：アイコンをタップしたときに顧客が遷移するプロモーションページを選択します。
   • 有効時間（任意）： 開始時間と終了時間を設定するか、期限なしを選択します。
6. アイコンの設定が完了したら、申請をクリックします。さらにフローティングアイコンを追加するには、手順4～5を繰り返します。

アプリページにドラッグ可能なフローティングウィンドウを追加する

ドラッグ可能なフローティングウィンドウはインストールされたアプリによって提供されます。ドラッグ可能なフローティングウィンドウをサポートするアプリパーツのみが利用可能なオプションに表示されます。

ドラッグ可能なフローティングウィンドウを追加するには：

1. カスタマイズしたいページのエディターを開きます。フローティングセクションの下でフローティングパーツを追加をクリックします。
2. ポップアップパネルでアプリケーションタブを選択し、追加したいアプリパーツを選びます。
3. 必要に応じてアプリパーツを設定します。

ドラッグ可能なフローティングウィンドウの管理

ドラッグ可能なフローティングウィンドウを追加した後、エディターのフローティングセクションで管理できます：

• ウィンドウの並べ替え：パーツリスト内のフローティングウィンドウの順序を変更します。複数のウィンドウが重なっている場合、リストの下にあるものが上に表示されます。
• ウィンドウの非表示：顧客が見られないようにウィンドウを非表示にします。非表示のウィンドウもページごとの最大3つの制限にカウントされます。
• ウィンドウの削除：スロットを空けるためにウィンドウを削除します。ウィンドウを削除すると、顧客が以前に保存した位置もクリアされます。

フローティングパーツ設定の保存と公開

フローティングパーツの設定は、ページ上の他のパーツと一緒に保存および公開されます。

設定が完了したら、変更を確認するためにアプリをプレビューをクリックするか、テストするためにSnaplookに公開をクリックします。すべてが期待通りに見えることを確認したら、変更をアプリでライブに反映するためにライブストアに公開をクリックします。

アプリ内でのドラッグ可能なフローティングウィンドウの動作

顧客がアプリを閲覧するとき、ドラッグ可能なフローティングウィンドウは以下のように動作します：

• 初期位置： フローティングウィンドウは、最初にアプリ開発者が定義した位置に表示されます。これにより、上部ナビゲーションバー、下部アプリバー、システムインターフェースのエリアを自動的に避け、これらの要素が隠れないようにします。
• ドラッグと位置の記憶： 顧客はウィンドウをページ上の任意の利用可能な位置にドラッグできます。アプリは最後の位置を自動的に保存し、顧客がページに戻ったときにその位置を復元します。
• 商品詳細ページ間での位置同期： すべての商品詳細ページのテンプレートが同じフローティングパーツの設定を共有しているため、ある商品詳細ページでウィンドウを移動すると、他のすべての商品詳細ページでの表示位置も決まります。
• ポップアップと全画面表示： アプリの機能に応じて、顧客はポップアップやドロワーを開いたり、フローティングウィンドウを全画面に開いたりできます。全画面モードは閉じるボタンや、Androidデバイスの場合は戻るボタンで終了できます。
• 読み込み失敗： ポップアップの読み込みに失敗した場合、アプリは自動的にそれを閉じ、「読み込みに失敗しました。もう一度お試しください。」というメッセージを表示します。

アプリのアンインストールがフローティングパーツに与える影響

ドラッグ可能なフローティングウィンドウを提供するアプリをアンインストールすると、関連するパーツには以下の影響があります：

• パーツが表示されなくなる： ページを更新または再度開くと、アンインストールしたアプリが提供していたパーツはエディターやアプリ内に表示されなくなります。
• ページ設定は一時的に保持される： パーツの既存の設定、表示順序、表示状態は一時的に保持されます。
• ページの保存でパーツが削除される可能性： アプリがアンインストールされた状態で影響を受けたページを保存すると、そのパーツがページ設定から削除されることがあります。アプリを再インストールしても、既に削除されたパーツや設定は復元されません。

フローティングパーツに関するよくある質問

Q1: インストールしたアプリがアプリケーションタブに見つかりません。なぜですか？

ドラッグ可能なフローティングウィンドウをサポートするアプリのパーツのみがアプリケーションタブに表示されます。ページコンテンツに埋め込む必要があるアプリのパーツは、代わりにページコンテンツセクションの「パーツを追加」をクリックしてください。

Q2: 非表示のドラッグ可能なフローティングウィンドウはパーツの制限に含まれますか？

はい。非表示のドラッグ可能なフローティングウィンドウも、ページあたり最大3つの制限に含まれます。空きスロットを作るには、既存のウィンドウを削除してください。

Q3: ドラッグ可能なフローティングウィンドウのサイズや初期位置を変更できますか？

いいえ。サイズと初期位置はアプリ開発者によって定義されており、エディターで変更することはできません。ただし、顧客はアプリ内でウィンドウをドラッグでき、更新された位置は自動的に保存されます。

Q4: ドラッグ可能なフローティングウィンドウは、削除して再度追加した場合、前の位置を記憶しますか？

いいえ。ウィンドウを削除すると、顧客によって以前に保存された位置もクリアされます。再度追加すると、ウィンドウはアプリ開発者によって定義された初期位置に表示されます。