プレイヤー実装ガイド

各プレイヤータイプの実装方法と、実装時によくある質問をまとめたガイドです。

HTMLコードは、HTML/JavaScriptに対応したあらゆるCMSに実装できます。各プレイヤータイプには、それぞれ異なる動作とカスタマイズ可能な設定があります。

プレイヤーをカスタマイズする方法は2つあります。

1つ目は通常のCSSを使う方法、もう1つはウィジェットコード内に属性を追加する方法です。CSSによるカスタマイズは、一般的なWebコーディングと同じ要領で行えます。プレイヤーへのCSS変数の適用方法については、こちらのページをご覧ください。変更可能な変数は数多くあり、本記事内でも逐次紹介します。
もう1つの方法は、コード内に属性を追加することです。よく使われる例の1つが、サイト上に表示されるプレイヤーから「Made In Firework」の表示を消す方法です。その場合は、スクリプト内に「branding=false」を追加してください。

フローティングプレイヤー

フローティングプレイヤーは、サイト上に特定の配置場所を必要としないため、比較的簡単に実装できるプレイヤーです。フローティングプレイヤーのコードは、実装したいページの<body>内に配置してください。

ランディングページや商品詳細ページ（PDP）に直接配置することをお勧めします。

フローティングプレイヤーに関するよくある質問

画面左下のプレイヤーがチャットやクーポンなどに重なってしまいます。表示位置は変更できますか？
- 変更できます。属性player_placementを追加することで、表示位置を変更できます。指定できる値は「top-left」「top-right」「bottom-right」「bottom-left」です。スクリプト内にplayer_placement="top-left"のように記述してください。
- フローティングプレイヤーの位置をさらに細かく調整したい場合は、マージンの変更で対応できます。これはCSSコードで設定できます。
  - --fw-player-margin
  - 例：--fw-player-margin: 16px 24px 32px 12px;
プレイヤーが大きすぎます。小さくできますか？
1. できます。以下のCSS変数で設定できます。
  --fw-player-height
2. --fw-player-width
お客様がプレイヤーを閉じた後、フローティングプレイヤーのあるページに再度アクセスすると、プレイヤーが再表示されてしまいます。一度閉じたら再度読み込まれないようにする方法はありますか？
1. 対応可能です。仕組みとしては、当社のイベントを検知し、Cookieを使ってそのイベントを確認したうえで、プレイヤーを読み込むかどうかを判断します。CMSによって実装方法が異なるため、この対応をご希望の場合はカスタマーサクセスマネージャーまでご連絡ください。開発チームと連携して実装いたします。

ストーリーブロック

ストーリーブロックにはいくつかの実装方法があります。重要なのは、ストーリーブロックがどのように動作するかを理解することです。ストーリーブロックの大きな利点の1つは、ユーザーが全画面表示にしなくてもアクション（商品をカートに追加する、CTAをクリックする、ライブストリームに参加するなど）を利用できる点です。他のプレイヤータイプでは、ユーザーはまず動画をクリックしてからでないとアクションを利用できません。もう1つの利点は、ストーリーブロックがモバイル体験に最適化されている点です。多くのお客様にとってWebトラフィックの大半はモバイルからのアクセスであるため、これはプレイヤーを選ぶ際の大きな判断材料になります。

デスクトップでのストーリーブロックの見え方には2種類あります。1枚目の画像は、コンテナがページの幅いっぱいに設定された例、2枚目の画像は、サイト上の特定の位置にコンテナを配置した例です。

こちらはモバイルでのストーリーブロックの表示例です。全画面表示にしなくても、各アクションのオプションが表示されている点にご注目ください。

ホームページやカテゴリ商品ページの最上部に直接配置することをお勧めします。

ストーリーブロックに関するよくある質問

デスクトップ表示で余白が気になります。この余白をなくすにはどうすればいいですか？
1. 上記の例のように、ページ全体に広がらないコンテナを設定するだけです。コンテナのサイズは通常どおり調整でき、そのコンテナ内に当社のコードを配置してください。
フローティングプレイヤーは使いたいのですが、最初から表示せず、ストーリーブロックを見た後にだけ表示したいです。可能ですか？
1. 可能です。プレイヤーをスクロールで通り過ぎた後に画面へ固定表示させることができます。スクリプト内に属性としてdock=trueを追加するだけです。
デスクトップでストーリーブロックの背景色を変更したいです。どうすればいいですか？
1. CSS変数を使って設定します。ストーリーブロックの背景色を変更するためのCSS変数は以下のとおりです。
2. --fw-player-background
プレイヤーのフォントをカスタマイズしたいです。どうすればいいですか？
1. CSS変数を使って設定します。フォントをカスタマイズするためのCSS変数は以下のとおりです。
  --fw-font-family

カルーセル

カルーセルは、複数の動画をまとめて表示し、ユーザーがスクロールしながら見たい動画をクリックできる便利な形式です。ストーリーブロックとの大きな違いは、アクション（ライブストリームへの参加、商品のクリック、CTAのクリックなど）を利用するには、まず動画をクリックして全画面表示にする必要がある点です。また、モバイルでは1と1/3本分の動画しか表示されません。カルーセルはページへの実装も簡単です。以下は、モバイルとデスクトップにおけるデフォルトのカルーセルの表示例です。

ホームページやランディングページへの配置をお勧めします。

カルーセルに関するよくある質問

プレイヤーのフォントをカスタマイズしたいです。どうすればいいですか？
1. CSS変数を使って設定します。フォントをカスタマイズするためのCSS変数は以下のとおりです。
  --fw-font-family
サムネイルのサイズや間隔をカスタマイズしたいです。可能ですか？
1. サムネイルのサイズを変更する方法の1つは、コード内の属性size=mediumを使うことです（選択肢はmediumとlargeの2種類のみで、デフォルトはlargeです）。
2. CSSコードを使えば、さらに細かくカスタマイズできます。変更可能な要素は以下の表のとおりです。サムネイルのサイズ、動画間の間隔、角の丸みを変更できます。