OptiSyncを使用すると、API統合を通じて動的なデジタルメニューを作成できます。POSシステムはOptiSignsと直接連携して、価格の自動更新、在庫追跡などが可能です。
この記事では、Clover POSシステムと統合した実際のデジタルメニューボード（DMB）を作成します。DMBはCloverから製品情報を取得し、画面に表示します。アイテムが利用できない場合は、「売り切れ」と表示されます。
| 注意 |
API統合はPro Plusプラン以上でのみ利用可能です。 |
APIリクエストを通じてPOSシステムを統合する方法
ほとんどのPOSシステムにはAPIライブラリがあり、OptiSignsはこれを使用してシステムから関連データをプログラムで取得できます。このAPIは、メニューアイテム、アイテム価格、在庫状況などを返すことができます。
OptiSyncを使用すると、APIをOptiSignsポータルにリンクし、人の介入なしにデータをデジタルメニューボード（DMB）やその他の種類の画面として画面にプッシュできます。
この記事では、これらのPOS固有の課題と、POSデータをアセットにマッピングして画面にプッシュするプロセスに焦点を当てます。
| 重要 |
| POSシステムを統合するには、まずAPIゲートウェイリクエストを設定する必要があります。その方法に関する完全なガイドはこちらでご覧いただけます。 |
APIエンドポイントURLの取得とAPIリクエストDataSourceの設定
APIゲートウェイリクエストの設定方法に関する包括的なガイドがあります。初期リクエストが設定されるまで、このガイドに従うことをお勧めします。
最低限、APIエンドポイントURLとAPI認証トークンが必要です。
API認証に関する追加情報
ほとんどのトークンベースの認証では、キーストアで認証トークンを設定することが通常、APIリクエストに必要なすべてです。しかし、特定のAPI（Toastなど）では、各リクエストの認証トークンを取得するために追加の呼び出しが必要になる場合があり、これはリクエスト前処理で処理できます。その処理方法については、Toast APIに関する記事をご覧ください。
複数の店舗またはPOSロケーションの処理
基本的なAPIゲートウェイリクエストを設定したら、画面用に複数のロケーションがある場合は、いくつかの追加手順を実行する必要があります。これらの異なるロケーションには、異なるメニュー、その日の異なる特別メニュー、またはさまざまな要因に応じて異なる価格設定がある場合があります。
POSシステムは通常、各ロケーションごとに個別のライセンスが必要です。POSシステムのAPIは、APIエンドポイントで異なる店舗IDを提供するか、異なる認証トークンを使用する場合があります。複数の店舗を持つ大規模な展開では、OptiSignsで置換パラメータを使用して処理できます。
複数のPOSロケーションを処理する方法は2つあります：
- 各POSロケーション用に個別のAPIリクエストを設定し、毎回URLエンドポイントの値を変更して、各画面に個別にマッピングします。POSシステムを使用するロケーションが数か所しかない場合は、これで十分に機能します。
- （推奨）各画面を設定して、そのstoreIDをAPI呼び出しに送信し、単一のAPIリクエストで複数の画面にデータを提供できるようにします。2〜3台以上の画面がある場合は、この方法をお勧めします。
オプション2の処理方法は次のとおりです。
開始するには、編集したい画面を見つけます。
詳細設定 → その他 → デバイス追加属性をクリックします。
キーと値の2つのフィールドが表示されます。
- キー - API呼び出し中に店舗の値を置換するために使用されるパラメータ。これはAPI URLエンドポイントの一部を置き換えます。
- 値 - APIに渡したい店舗またはロケーションに関連付けられた一意のコードを表します。
この例では、変更するパラメータが「merchantID」と呼ばれると仮定します。入力される値は一意であるため、お客様側で取得する必要があります。
次に、APIリクエスト設定ページに戻ります。APIエンドポイントのmerchantIDを、以前に定義したキー名で置き換えます。
デバイスでAPIリクエストがトリガーされると、デバイスから値を取得し、実行時に置換します。各画面に対して、キー名を同じに保ちながら値を変更して、これらの同じ手順を実行する必要があります。これにより、単一のAPIリクエストから異なる画面に異なるデータをプッシュできます。
リクエスト後処理を使用してAPIデータを変換する方法
POSシステムからデータを取得する際、最初は希望どおりに表示されない場合があります。または、在庫切れのアイテムに「売り切れ」を表示する機能など、いくつかの機能を追加したい場合があります。
たとえば、価格が整数として表示される場合があります（$12.99ではなく1299など）。ここで「リクエスト後」タブが役立ちます - これにより、データが入ってきた後に変更を加えることができます。これを使用するには、基本的なコーディングが必要です。
先ほどの価格表示の例を考えてみましょう。1299のような数値を$12.99として表示するように変換し、そのコードを類似の表示エラー（$18.99ではなく1899など）に拡張可能にするにはどうすればよいでしょうか？
この一般的な例では、次のJavaScriptコードで問題を解決できます。
let {data, headers, status} = os.context.get("response");
temp_data = data.elements
for (let object of temp_data) {
object.price = '$' + (object.price*.01);
if (object.available == true)
{object.soldout=0;}
else {object.soldout=1;}
}
return temp_data
これにより、返されたデータが修正され、適切に表示されます。また、アイテムが在庫切れの場合に「売り切れ」と取り消し線を作成することもできます。
| 注意：WebHookを有効にして設定すると、APIから取得したデータをほぼリアルタイムで更新できます。デジタルサインを使用して店舗在庫を追跡する予定がある場合は、設定することをお勧めします。これを設定するには、提供されたWebHookキーをAPIに入力する必要があります。 |
OptiSyncを使用してDesignerでデジタルメニューボードを構築する方法
POSシステムからのデータでDMBを作成するには、APIリクエストをDataSourceとして登録する必要があります。これにより、データ要素をOptiSignsのDesignerアプリに追加でき、そこでフォーマットして、表示したい任意のビジュアルデザインに組み込むことができます。
Designerアプリとテンプレートを使用して、フォーマットを行い、要素をAPIデータソースからのデータにマッピングできます。任意のテキストボックスまたは画像要素をDesignerでマッピングできます。画像要素をマッピングすると、画像のURLが実行時に置き換えられます。
DataSourcesとRepeaterの使用
開始するには、ファイル/アセットタブでデザインを見つけるか、新しいデザインを作成します。
デザインを開いた状態で、左側の列の「DataSource」をクリックします。次に、「DataSourceを追加」をクリックして、APIデータソースをデザインに追加します。
「APIゲートウェイコレクション」と書かれている場所までスクロールダウンし、クリックします。
リクエスト前処理やリクエスト後処理なしの1回限りのデザインが必要な場合は、APIゲートウェイコマンドで1回限りのゲートウェイを設定することもできます。ただし、この例ではそれらが必要なので、ゲートウェイコレクションを使用します。
次の画面が表示されます：
- 名前 - DataSourceの名前。これは内部向けであり、画面には表示されません。
- APIを選択 - ここで、前の手順ですでに設定したAPIゲートウェイから選択します。1つだけ選択することも、複数選択することもできます。複数が選択された場合、API DataSourceは自動的にそれらを集約します。
- 更新間隔 - 更新のためにAPIに再度リクエストを送信する頻度。なし（APIを再度呼び出さない）、30分、60分、または6時間ごとから選択します。APIリクエストでWebHookを有効にし、提供されたURLをAPIに入力すると、この更新間隔はほぼリアルタイムに変わります。
保存を押すと、DataSourceが作成されます。
左側の列の「このデザインで使用」の下に表示されるはずです。「その他のDataSources」セクションには必ず表示されます。表示されるようにページを更新する必要がある場合があります。
要素マッピング
API DataSourceが作成されたので、データをマッピングする準備ができました。この例では、製品名に取り消し線を引き、アイテムが在庫切れの場合に「売り切れ」というフレーズを表示する機能を持つDMBの作成方法を示します。
デジタルメニューボードにテキスト要素を追加する
まず、デザインを作成します。Designerアプリ内でメニューを作成できます。
DMBを設定する最も簡単な方法は、データRepeaterを使用することです。Repeaterの機能の完全な説明については、この記事をご覧ください。ここでは、POSシステムから情報を追加する方法に焦点を当てます。
Repeaterを設定するには、「Repeaters」→「空のRepeaterを追加」をクリックします。
Repeaterを選択した状態で、設定をクリックします。次に、サイドメニューでDataSourceに接続を選択します。
「その他のDataSources」の下で、前のセットで設定したDataSourceを選択します。
DataSourceが選択された状態で最後のペインに戻ります。次に、編集をクリックするか、選択したRepeaterをダブルクリックして、Repeaterエディタに移動します。これは、Repeater（メニュー）アイテム専用のデザイン内デザインのようなものです。テキストを選択した状態で、左側の矢印をクリックします。
DataSourceタブが表示されます。このデザインで使用されているDataSourceをクリックすると、次のようなものが表示されます：
この例では、名前と価格を表示し、「売り切れ」と表示する可能性があります
テキストを作成し、データポイントをドラッグすることで、次のようなメニューアイテムを作成できます：
これは、APIからデータポイントを見つけて、目的のテキストボックスにドラッグすることで作成されました。この場合、「name」と「price」のみを表示したいので、これらの値を空白または既存のテキストボックスにドラッグしました。
数値に追加のフォーマットが必要な場合は、数値をクリックしてから設定を押します。
詳細オプション → 「表示形式」をクリックして「数値」を選択し、「数値形式」をクリックして希望するフォーマットを選択します。これにより、価格にドル記号を追加したり、その他のオプションを使用したりできます。
新しい数値形式を表示するには、必ず更新を押してください。
Repeaterの価値は、この1つのセルの形式をコピーし、データポイントをAPIから他のものに置き換えることです。正しく行うと、メニューは次のようになります：
RepeaterはAPIで設定したデータポイントの数だけ引き出します。この例では、9つのアイテムでメニューを作成しましたが、適切なデザインを使用すれば、動的な説明を含む任意の数のアイテムを配置できます。画面に一度に表示するように設定したものよりも多くのアイテムがある場合、メニューのアイテムはすべて表示されるまで順番に表示されます。
取り消し線と売り切れ警告の作成
上記の例では、売り切れ警告を表示しています。ただし、これを常に表示したくはありません - アイテムが利用できないときのみです。OptiSyncを使用すると、以前に行ったリクエスト後処理のおかげでこれを実現できます。コードは「soldout: 0」データを作成しました。これは「available」データに関連付けられています：
「available」データが「true」と読み取ると、「soldout」データは0と読み取ります。POSシステムがアイテムが利用できないことを検出すると、「available」データは「false」と読み取ります。これにより、「soldout」データは1と読み取ります。
この知識を使用して、売り切れ警告と取り消し線を、アイテムが利用できない場合にのみ表示するように設定できます。
Repeaterエディタに戻り、取り消し線を引きたいテキストをクリックして設定を押します：
設定タブで、詳細オプションを押します。
詳細オプションで、プロパティマッピングを押します。
2つの値が表示されます：プロパティと値。
プロパティで、取り消し線を選択します。
値で、.soldoutを選択します。「.」の前にAPIリクエストの名前が表示されます。
これにより、「soldout」データが1と読み取るときにテキストが取り消されるように設定されます。
売り切れの表示でもこれを繰り返すことができますが、取り消し線の代わりに表示を選択します。
これにより、「visible」データが1と読み取るとき - つまり、製品が売り切れのときにのみ売り切れテキストが表示されます。
最終的なメニューは次のようになります：
最後に、デザインに名前を付けて保存する準備ができました。
デジタルメニューボードを画面にプッシュする
新しいDMBを画面に表示するのは比較的簡単です。以前に置換パラメータで設定した画面に戻ります。次に、画面を編集を押します。
タイプで、アセットを選択し、再生するDMBアセットを選択します。
以上です！
動的データ機能を持つデジタルメニューボードを作成できるはずです。
OptiSignsに関する追加の質問、懸念、またはフィードバックがある場合は、support@optisigns.comのサポートチームまでお気軽にお問い合わせください。