今日のペースの速いデジタル環境では、デジタルディスプレイを手動で更新することは退屈で、エラーが発生しやすい作業です。このガイドでは、ライブデータをデジタルスクリーンに統合し、ディスプレイ全体でシームレスな自動更新を可能にする方法をご説明します。
この記事の内容:
| 注意: OptiSyncはPro Plus以上のプランでのみご利用いただけます。 |
OptiSyncとは？
OptiSyncは、スプレッドシート、API、テーブルなど、様々なデータソースにシームレスに接続するように設計された統合ソリューションです。
主な機能:
- 簡単なセットアップ: データソースの設定は、ローコードまたはノーコードで、迅速で簡単なプロセスを確実にします。
- 自動更新: データソースをDesignerアプリに直接リンクでき、コンテンツが自動的に更新されます。
- リアルタイムデータ: これにより、デジタルディスプレイは常に最新のデータを反映し、手動入力の必要性を排除し、エラーを減らし、時間を節約します。
使用例:
OptiSyncは、以下のような幅広い使用例に最適です:
- 従業員の誕生日の表示
- レストランメニュー
- 勤続記念日
- 製品カタログ
- チーム紹介
- その他多数！
OptiSyncを使用すると、デジタルディスプレイは正確で最新の状態を保ち、様々な環境でのコミュニケーションとエンゲージメントを向上させます。
データソースの追加
アカウント設定またはDesignerアプリからデータソースを追加できます。
アカウント設定
- 右上隅のアカウント名をクリック
- その他を選択
- データソースを選択
- データソースを追加を選択
- オプションのリストからデータソースを選択し、インポート方法の指示に従います
- アカウント設定を完全に開くと、左側の列の「詳細設定」の下に表示されます
Designerアプリ:
- Designerアプリを開く
- 左側の列からデータソースを選択
- データソースを追加を選択
- オプションのリストからデータソースを選択し、インポート方法の指示に従います
様々な種類のデータソースをアップロードするには、以下のガイドに従ってください:
さらに、APIリクエストを統合してテストし、リクエスト前後に必要なコーディングを実行することもできます。
データソースが設定されると、使用場所を確認したり、データソースを編集したり、複製したりできます。
- 使用場所: このデータソースを使用しているデザインが表示されます。これは、異なるアセット間でこのデータソースの使用を追跡するのに便利です。
- データを編集: データソースに入り、更新や変更を行います。
- 複製: データソースのコピーを作成します。
Designerでデータソースを入力する
データソースが設定されたら、Designerアプリに接続できます。
サイドメニューの左側にあるデータソースに移動します。
前述のとおり、ここでデータソースを追加できます。または、詳細設定のデータソースセクションですでに作成している場合は、その他のデータソースの下に表示されるはずです。
データソースを選択します。
データソース要素をDesignerキャンバスにドラッグアンドドロップします。
- 行全体または行内の個々の要素をドラッグアンドドロップできます。
「このデータをRepeaterで使用しますか、それとも単独で使用しますか？」というポップアップメッセージが表示されます。
-
単独で使用: 単独の要素として使用され、データソースに基づいて自動的に更新されます。
-
Repeaterで使用: データソース要素をRepeaterコンポーネントに含めます。
- Repeaterは、Designerアプリケーションで使用できるツールで、アイテムのリストを動的に表示および繰り返すことができます。
| 重要 |
| OptiSyncは特殊文字（英語キーボードの範囲外のもの）をサポートしていません。これにより、システムデータが空白として読み取られ、表示されません。 |
DesignerでRepeaterを編集・デザインする
Designerでテンプレートとリピーターの両方を編集できます！
RepeaterはDesignerアプリケーションのサイドメニューにあります。
Repeatersセクション内には、すぐに使える「Repeaterコンポーネント」と「Repeaterテンプレート」がいくつか含まれています。
| 2つの違いは何ですか？ |
|
Repeaterコンポーネント: 一部のデザイン要素と共に繰り返し要素を管理および表示するように設計されています。このRepeaterコンポーネントは、選択したテンプレートデザインに組み込むことができます。Repeaterテンプレートである必要はありません。追加したら、データソースに接続するだけです。異なるデザイン間で簡単に実装およびカスタマイズできるウィジェットとして考えてください。 |
|
Repeaterテンプレート: 事前定義されたテンプレートまたはデザインレイアウト内で繰り返し要素を表示するように特別に設計されています。他のテンプレートと同様に、適用すると既存のデザインが置き換えられます。必要に応じて編集や変更を加えることができます。再度、ユーザーはダウンロードして目的のデータソースに接続するだけです。 |
これらの要素のいずれもデータソースをマッピングでき、その後、他のDesignerコンポーネントと同じ方法で編集できます。
詳細については、ガイドをご覧ください:
Repeaterを選択してから設定を選択することで、Repeaterの書式設定を調整することもできます。
これにより、サイドメニューにRepeaterのデータマッピングセクションが開きます:
次のオプションが表示されます:
- データソースを置換: データソースを変更します
- 管理: データソースの情報を変更します
- フィルター: データソースに条件ベースのフィルターを適用します。フィルター条件は、固定値またはデバイス属性を使用して適用できます。
- 切断: データソースをRepeaterから切断します
-
空のデータ処理: データソース要素がない場合、デフォルトの動作は空白値を使用することです。以下のオプションでこれを調整できます:
- スキップ: スキップするか、設定された「ページあたりの総表示アイテム数」に達するのに十分なデータがない場合、追加のRepeaterアイテムを削除します。
- デフォルト値を使用: Repeater要素単体の見た目であるデフォルトコンテンツを表示します。
- 空白を使用: Repeaterは何も表示しません。
- アイテム間のスペース: Repeaterアイテム間のスペースを増減します。
-
アイテム表示方向: Repeaterアイテム内でのデータソースからの行の配置を変更します。
- 左から右: 行を左から右に表示します。
- 上から下: 行を上から下に表示します。
- アイテム表示の配置: 残りの要素アイテム（設定されたアイテムより少ない）の配置を左/中央/右または上/中央/下に変更します。
- ページあたりの総表示アイテム数: 表示するRepeaterアイテムの数を増減します。
- 各行/列の最大アイテム数: 各行/列に表示するRepeaterアイテムの数を増減します。
- 追加の行/列スペース: 行/列間のスペースを増減します。
- 継続時間（秒）: 各Repeaterアイテムが表示される時間を調整します。
- シャッフル: データソース内のアイテムをランダムにシャッフルしてRepeaterに表示します。
Repeaterを編集すると、データセット内のデータの各インスタンスに対して更新が複製されます。
- これにより、個々にデザインする必要なく、類似の要素間で一貫した外観を実現できます。
特定のRepeaterテンプレートまたはコンポーネントを使用したい場合、サンプルデータソースをご自身のデータソースの1つに更新したい場合は、以下の手順に従ってください:
プロパティマッピング機能の使い方
この高度な機能により、ユーザーが設定した条件に基づいて、Repeater内の特定のデータの外観を変更できます。データソースで定義されたこれらの条件は、Repeater内の対応する値または要素にマッピングされ、指定された書式設定が適用されます。
- Designerで、変更したいRepeaterをダブルクリックします。（Repeater Editorが開きます。）
- 編集したいRepeater内の要素を選択し、上部の設定をクリックします
- サイドメニューで詳細オプションをクリックします
- + プロパティマッピングをクリックします（マッピングの新しいインスタンスごとにこれを押します）
- プロパティメニューをクリックして、ドロップダウンメニューから上記のオプションの1つを選択するか、以下にリストされている利用可能なオプションの1つを手動で入力します。
- 値メニューをクリックして、対応する列名を選択します（この情報はデータソースから取得されます）。
- Repeater内の複数の要素に対して、必要なだけ繰り返します。
- 更新をクリックして、この情報が保存され、Repeaterに適用されることを確認します。
詳細設定で利用可能なプロパティマッピングオプションのリスト:
| プロパティ | 機能 | 値 |
| 塗りつぶし色 | Repeater内の選択した図形やテキストの色を変更します | 有効なHex カラー 値またはカラー名を受け付けます（例: #CE657Eまたは赤） |
| フォントサイズ | テキストフォントのサイズと画面上での表示方法を変更します | 数値を受け付けます（例: 20） |
| フォントファミリー | 選択したテキストのフォントを、Arial、Times New Roman、またはカスタムフォントなどに変更します。 | フォントファミリーを表す文字列値を受け付けます。（例: Times New Roman） |
| 背景色 | Repeater内の選択した図形やテキストの背景色を変更します。 | 有効なHex カラー 値またはカラー名を受け付けます（例: #CE657Eまたは赤） |
| フォントの太さ | テキストフォントの重さや太さを変更し、より細くまたは太く見せます。 | 特定の値を受け付けます: normal、bold、lighter、bolder、unset、または100、200、300、400、500、600、700、800、900 |
| 下線 | 強調のためにテキストに下線を引くかどうかを指定します。 | ブール値：true/falseまたは0/1を受け付けます |
| 取り消し線 | テキストに取り消し線を引くかどうかを指定します。 | ブール値：true/falseまたは0/1を受け付けます |
| 上線 | テキストに上線があるかどうかを指定します。 | ブール値：true/falseまたは0/1を受け付けます |
| テキスト配置 | テキストの水平配置を変更します。 | 特定の値を受け付けます：left、center、right、justify、justify-left、justify-center、justify-right |
| 線の色 | 線/輪郭の色を変更します | 有効なHexカラー値またはカラー名を受け付けます（例: #CE657Eまたは赤） |
| 線幅 | 線の幅を指定し、輪郭の太さや細さを決定します。 | 数値を受け付けます。 |
| 方向 | テキストの方向を設定します：左から右または右から左 | 特定の値を受け付けます：ltrまたはrtl |
| 表示 | 要素が表示されるかどうかを決定します。 | ブール値：true/falseまたは0/1を受け付けます |
| 不透明度 | Repeater内の選択した図形、テキスト、または写真の透明度レベルを変更します | 0-1の数値を受け付けます（例: 0.2は20%） |
塗りつぶし色、背景色、不透明度、フォントの太さ、テキスト配置で設定されたサンプルデータソースの例:
表示フォーマットオプションの使い方
データソースからの特定のデータがRepeater上でどのように表示されるかのフォーマットを変更したい場合は、Repeater Editorで利用可能な表示フォーマットオプションを使用できます。これにより、元のデータソースを編集する時間を節約でき、Repeater内のすべての繰り返し要素にフォーマットが適用されます。
表示フォーマットオプションにアクセスするには、プロパティマッピングに関する前のセクションの手順に従ってください。
| 表示フォーマットオプション | 機能 |
| テキスト | フォーマットなしで生の値を表示します。 |
| 日時 | 利用可能なオプションでタイムゾーン、日付形式、時刻形式を変更できます。 |
| 数値 | 数値をパーセンテージ、小数点、通貨などで表示するようにフォーマットできます。 |
スクリーンにプッシュする
デザインが完成したら、スクリーンにプッシュする準備ができています。
（さらなるサポートが必要な場合はこちらのガイドをご覧ください。）
接続されたデータソースに基づいて、スクリーンは自動的に更新されます。
手動でデータを更新する必要はもうありません。これは時間がかかり、エラーが発生しやすいものです。