⑤

➋

➌

➊

アセット(Assets)

アセット(Assets)はレイアウトを構成する基本要素です。テキスト、画像、図形、線などのコンテンツを表示するために使用される静的オブジェクトです。

動画

アセット(Assets)パネルの「動画」をクリックして、動画ライブラリを開きます。ライブラリから動画を選択すると、すぐにキャンバスに追加されます。
キャンバス上の動画をクリックすると、左側のパネルに設定が表示されます。設定の変更内容は、キャンバスに即座に反映されます。

※注: 動画設定の詳細については、画像設定のセクションをご参照ください。

テキスト

アセット(Assets)パネルの「テキスト」をクリックして、キャンバスにテキストを追加します。
テキストをダブルクリックして内容を入力または編集するか、キャンバス上の任意の場所にドラッグしてください。テキストを選択すると左側にテキスト設定パネルが表示され、そこで設定を調整できます。

テキスト設定

➊「フォント」 :
- フォントファミリー: ドロップダウンメニューから、目的のフォントと太さを選択します（例：Open Sans, Bold 700）。
- フォントサイズ: フォントのサイズを設定します。

➋「スタイル」 :
- 書式: 以下のコントロールを使用してテキストスタイルを適用します。
  - B (太字): テキストを太字にします。
  - I (斜体): テキストを斜体にします。
  - U (下線): テキストに下線を追加します。
  - T (取り消し線): テキストの中央に取り消し線を引きます。
  - X² (上付き文字): テキストを基準線より上に小さく表示します。
  - X₂ (下付き文字): テキストを基準線より下に小さく表示します。
- 配置: テキストを左寄せ、中央揃え、右寄せに設定します。
- 間隔:
  - 行間: テキストの行間の垂直距離を調整します。
  - 文字間隔: 文字間の水平距離を調整します。
- アウトライン:
  - 色: アウトラインの色を設定します。
  - 太さ:スライダーをドラッグして太さを調整します。

➌「色」 :
- 文字色: テキストの文字色と透明度を設定します。
- 背景色: テキストの背景色と透明度を設定します。

ドキュメント

キャンバスにドキュメントファイル（Word、Excel、PDF、PPTなど）を追加するには、アセット(Assets)パネルで「ドキュメント」をクリックし、ドキュメントライブラリを開きます。ライブラリには、メディアページにアップロードしたドキュメントファイルが表示されます。
ドキュメントライブラリでドキュメントを選択すると、即座にキャンバスに追加され、左側のパネルにドキュメント設定が表示されます。

※参考：目的のドキュメントファイルがない場合は、メディアページに移動する必要はありません。PCのファイルエクスプローラーから目的のファイルをドキュメントライブラリに直接ドラッグ＆ドロップして、アップロードすることができます。

Webページ

キャンバスにWebページを挿入するには、アセット(Assets)パネルの「Webページ」をクリックし、Webページライブラリを開きます。ライブラリには、メディアページからアップロードしたWebページが表示されます。
WebページライブラリからWebページを選択すると、すぐにキャンバスへ追加されます。

スクロールテキスト

テキストをテロップ（ティッカー）形式で流れるように表示でき、お知らせ、ニュース、プロモーション情報などを効果的に配信できます。
アセット(Assets)パネルの「スクロールテキスト」をクリックします。追加したスクロールテキストはドラッグしてキャンバス内の好きな位置に配置でき、左側のサイドバーにあるスクロールテキスト設定パネルから、メッセージの入力やデザインの変更が可能です。

スクロールテキスト設定

表示するテキスト:

スクロール効果を適用して画面に表示させたいテキストの内容を、直接入力するための入力ボックスです。

スクロール方向:

テキストが移動する方向を設定します。左(<)、上(^)、下(v)のいずれかの方向に移動させるか、あるいは動きを付けずにテキストを固定(■)することができます。

スクロール速度:

スライダーを左右に調整して、テキストが移動する速さを設定します。右側に動かすほど、テキストの動きが速くなります。

カメラ

カメラは主に以下の2つの目的で活用されます。

店舗のセキュリティおよびリアルタイムモニタリング: Public View Monitor (PVM) アプリケーションにおいて、カメラウィジェットを通じて現場の映像をリアルタイムでデジタルサイネージ画面に配信し、店舗のセキュリティを強化します。
視聴者データの分析と戦略立案: カメラで顔を検出し、性別や年齢層を推定してデータを分類します。これらのデータは指標、時間帯、曜日別に分析され、効率的な店舗運営戦略を立案するために活用されます。

アセット(Assets)パネルで「カメラ」をクリックすると、キャンバスにカメラが追加されます。ドラッグ＆ドロップでキャンバス内の好きな位置に配置できます。

サイズ調整:
- 比率を維持: カメラアセット(Assets)のコーナーハンドルをドラッグすると、元の比率を維持したままサイズが調整されます。

カメラ映像出力設定: キャンバスにカメラアセットを追加しても、物理的なカメラがデバイスに接続されている必要があります。また、デバイス設定で USB Camera または ONVIF Profile S を選択しなければ、映像は正常に出力されません。

※注: レイアウトエディターのプレビューモードではカメラ映像は表示されません。実際の再生機器でご確認ください。

プレイリスト

キャンバスにプレイリストを追加して、1つの画面内で複数の動画や画像をループ（Loop）形式で再生することができます。

アセット(Assets)パネルで「プレイリスト」をクリックするとプレイリストライブラリが開き、任意のプレイリストを選択すると、即座にキャンバスに追加されます。

図形

長方形、円、星型、矢印などの図形をキャンバスに追加して、サイズや色、境界線などを自由にカスタマイズし、デザインのアセット(Assets)として活用できます。

追加するには、アセット(Assets)パネルで「図形」をクリックし、表示される図形ライブラリから任意の図形を選択すると、図形がキャンバスに追加されます。

アイコン

Google Material Symbolライブラリを活用して、様々なアイコンをキャンバスに追加できます。視覚的な直感性を高めるグラフィック要素として、レイアウトに配置することで、メニュー、通知、情報などの意味を効果的に伝達してください。

追加するには、アセット(Assets)パネルで「アイコン」をクリックし、表示されるGoogle Material Symbolライブラリから任意のアイコンを選択すると、キャンバスに追加されます。

QRコード

キャンバスにQRコードを追加することで、ウェブサイトのリンクやアプリのダウンロード、連絡先情報などを提供できます。

アセット(Assets)パネルの「QR コード」をクリックし、キャンバスに追加します。
キャンバス上でQRコードを選択すると、左側のサイドバーにQR コード設定パネルが開きます。
そのパネルでQRコードに埋め込むデータを入力し、、デザイン（色、スタイルなど）をカスタマイズすることができます。

QRコード設定：

QRデータの入力：QRコードにエンコードするURLまたはテキストを入力してください（例：https://connectplayer.net）。

画像

アセット(Assets)パネルで「画像」項目をクリックすると、➊「画像ライブラリ」が開き、メディアページにアップロードした画像ファイルが表示されます。

※参考：目的の画像がない場合は、メディアページに移動する必要はありません。➋PCのファイルエクスプローラーから目的のファイルを「画像ライブラリ」に直接ドラッグ＆ドロップして、アップロードすることができます。

➊

➋

「画像ライブラリ」で画像を選択すると、すぐにキャンバスに追加されます。
キャンバス上の画像をクリックすると、左側のパネルに「画像設定」が表示されます。設定を変更すると、その結果が即座にキャンバスに反映されます。

➍

画像設定

➊「置換 (Replace)」 : キャンバス上で選択した画像を、ライブラリ内の別のファイルに置き換えます。
➋「配置」
- キャンバスに揃える: 画像をキャンバスの特定の基準線に合わせて自動的に整列します。
  - 左/中央/右揃え: 水平軸を基準として、画像をキャンバスの左端、中央、右端に配置します。
  - 上/中央/下揃え: 垂直軸を基準として、画像をキャンバスの上端、中央、下端に配置します。
  - キャンバス中央配置: 画像をキャンバスの中央に配置します。
- 反転（Flip）：画像を左右または上下に反転します。
  - 左右反転: 画像を水平方向に反転させます。
  - 上下反転: 画像を垂直方向に反転させます。
「位置とサイズ」 : 画像の正確な座標とサイズを設定します。
- X, Y 座標: キャンバス内における画像の開始点（左上隅を基準）の位置を指定します。
- W (幅), H (高さ): 画像の幅と高さを指定します。
- 縦横比を固定 (鍵アイコン):
  - アイコンがロックされている場合、幅(W)または高さ(H)の値を変更すると、元の比率を維持したまま反対側の数値が自動的に調整されます。
  - アイコンを解除すると、幅と高さをそれぞれ独立して調整できます。

➌「スケールモード」 : キャンバス上の画像をクリックすると、画像の外側に選択フレームが表示されます。四隅のハンドルをドラッグすると画像の元のアスペクト比を維持したままサイズが変更され、上下左右の辺のハンドルをドラッグすると、選択したスケールモードに応じて次のように動作します。
- ➍「Fit (比率維持)」 : 元の画像の比率を維持したまま、選択フレーム内に全体が表示されます。選択フレームと画像の比率が異なる場合、上下または左右に余白が生じます。

➎「Fill (全体表示)」 : 元の画像の比率を維持しながら、選択フレームをいっぱいに満たします。この際、選択フレームからはみ出した画像の端の部分は切り取られます。

➏「Stretch (比率無視)」 : 元の画像の比率を無視し、選択フレームのサイズに合わせて強制的に引き伸ばしたり縮小したりします。選択フレーム全体を満たしますが、画像に歪みが生じます。

➐「背景色と不透明度」 :
- 背景色: 画像の背景色を設定します。
- 不透明度: 画像の不透明度を設定します。

➑「枠線」 :
- 不透明度と色: 枠線の不透明度と色を設定します。
- 太さ: 枠線の太さを設定します。
➒「角丸」 : 画像の角の丸みを設定します。中央のリンクアイコンをクリックして有効にすると、4つの角の値を同時に調整できます。
「調整」 : 画像の表示を細かく調整します。
- 明るさ: 画像の明るさを調整します。
- コントラスト: 画像の明るい部分と暗い部分の差を調整します。
- 彩度: 画像の色の鮮やかさを調整します。
「影」 : 画像に影の効果を追加します。
- 影を適用: スイッチをオンにして影の効果を有効にします。
- Xオフセット / Yオフセット: 影の水平方向（X）および垂直方向（Y）の位置を設定します。
- ぼかし: 影のぼかしの強さを調整します。
- 色と不透明度: 影の色と不透明度を設定します。
➓「アニメーション」 : 画像アセット(Assets)にアニメーション効果を追加し、より魅力的で動きのある表示を実現します。
- 「アニメーションタイプ」 : ドロップダウンメニューから、画像に適用するアニメーション効果を選択します。
  - Back In [方向]: 指定された方向から現れ、一度少し通り過ぎてから弾むように元の位置に戻ります。
  - Bounce In: **弾むような動き（バウンス）**を伴いながら、徐々に大きくなって表示されます。
- 「速度」 : スライダーを使用してアニメーションの再生速度を調整します。左に動かすほど速くなり、右に動かすほど遅くなります。
- 「遅延」 : スライダーを使用して、アニメーションが開始されるまでの待機時間を設定します。
- 「繰り返し回数」 : アニメーションを再生する回数を設定します。スライダーで任意の回数を指定でき、0に設定するとアニメーションが無限に繰り返されます。