OptiSyncを使用したAPI統合とAPIデータの配信方法 – OptiSigns

**記事本文（HTMLコンテンツ）:**

OptiSignsとAPIを統合することで多くの用途があり、自動更新されるデータを画面に簡単に表示できます。このガイドでは、ソフトウェアエンジニアリングの経験がなくても、APIを接続する方法をご説明します。

API統合でできること
開始に必要なもの
APIリクエストの設定方法
DesignerでのAPIデータのマッピング方法
- ステップ1：APIデータソースの作成
- ステップ2：要素マッピングの維持
OptiSyncのユースケースについて

注意：API統合はPro Plusプラン以上でのみご利用いただけます。

API統合でできること

OptiSignsでは、ユーザーのAPIと簡単に統合できます。これにより、ユーザーのAPIからのデータをデジタルサイネージに表示できます。以下の動的更新が可能になります：

デジタルメニューボード - POSシステムと統合して、デジタルメニューボードを自動的に更新し、必要に応じてデザイナーアプリを使用してデジタルメニューボードの形式を編集できます。
自動HR更新 - HRシステムのAPIを使用して、誕生日や勤続記念日を画面に自動的に表示します。
倉庫在庫追跡 - 倉庫のAPIを使用して、組織全体で自動更新される在庫レベルを表示します。
APIデータを消費して画面にデータを表示する必要があるその他の情報表示のユースケース。

このAPI統合は、OptiSignsでコーディングがほとんどまたは全く必要なく実現でき、ソフトウェアエンジニアリングの経験がない方でも利用しやすくなっています。このガイドでは、Clover POSシステムのAPIを使用した以下の例を用いて、設定方法をご説明します。

開始に必要なもの

以下が必要です：

APIエンドポイントURL
API認証トークン

これらは、OptiSignsが目的のAPIに接続するために必要です。OptiSigns Webポータルで APIリクエストを設定する前に、これらを簡単にアクセスできる場所に用意してください。これらは、組織のIT専門家またはPOSシステム管理者から取得できるはずです。

APIリクエストの設定方法

APIゲートウェイは、APIを一元管理し、APIの設定とテストを可能にする強力なツールです。

必要なものが揃ったので、APIリクエストの設定を始めましょう。APIリクエストを使用すると、以下のことができます：

OptiSigns APIキーストアを使用して、他のシステムのAPIキーを安全に保存して使用できます。
ヘッダーとパラメータを変更する機能を備えたAPIエンドポイントをテストできます。
複雑な統合を処理するために、置換パラメータと事前処理および事後処理ルールを使用できます。事前処理ルールは、APIコールを実行する前に認証トークンを取得するための追加コールが必要なAPI統合状況の処理に役立ちます。事後処理では、返されたデータを処理して、用途に合わせてカスタマイズできます。

開始するには、OptiSigns Webポータルを開きます。

画面の右上隅に移動し、アカウント名にカーソルを合わせます。

その他 → データソースにカーソルを合わせます

以下の画面が表示されます。

これで準備が整いました。

ステップ1：API認証トークンをOptiSigns APIキーストアに保存する

最初のステップは、API認証トークンを取得してOptiSigns APIキーストアに保存することです。

このステップは技術的にはオプションです：個々のAPIリクエストにAPI認証トークンを入力できます。ただし、キーストアにはいくつかの大きな利点があります：

API認証トークンを毎回手動で入力する必要なく、複数のAPIリクエストに送信できます
API認証トークンの優れたセキュリティを提供し、外部からの発見をはるかに困難にします

そのため、このステップを強く推奨します。

キーストアに入るには、ロックアイコンを見つけてクリックします。

これでAPIキーストアが開きます。

キーを追加をクリックします。

ここには2つのフィールドがあります。

最初のフィールド - ここにキーの名前を入力します。覚えやすいものをお勧めします。APIリクエストの設定に使用します。
2番目のフィールド - API通信用の実際の一意のパスコード。

API認証トークンを入力したら、保存をクリックします。このAPIキーを使用してリクエストを実行する場合は、{{apiKeystore.<<key>>}}という用語を使用します。「<<key>>」は先ほど挿入した名前に置き換えられます。この例では、リクエストに「clover」という名前を付けます。

これで、APIリクエストを設定する準備が整いました。

ステップ2：APIリクエストの設定とテスト

OptiSignsで進む前に、API接続をテストすることをお勧めします。Postmanなどの無料ツールを使用してください。これにはいくつかの利点があります：

データフォーマットの確認
正しいデータが提供されていることの確認
認証の検証
統合の問題や接続エラーの特定

テストパラメータ、エンドポイント、認証子は、OptiSignsでAPIリクエストを設定するために使用できます。その方法は次のとおりです。

リクエストを追加ボタンをクリックすると、APIリクエストを設定してテストするためのウィンドウが起動します。

表示名 - これはAPIゲートウェイリストに表示され、主にユーザーがAPIリクエストを識別するのに役立ちます。
名前 - これはAPIリクエストへの参照として使用され、後でAPIリクエストデータを参照するためのパスで使用される技術的な名前です。
URL - これはAPIエンドポイントです。APIリクエストに応じてGETまたはPOSTメソッドを使用できます。たとえば、GraphQLを使用している場合、すべてのリクエストはPOSTを使用します。
Params - APIリクエストでパラメータを定義できます。APIエンドポイントURLにパラメータが表示される場合があります。これらは「?」マークの前に付きます。これらは、APIリクエストをさらに自動化するために、事前および事後処理リクエストコードで使用できます。
Headers - APIリクエストのヘッダー。ここにAPI認証トークンを入力します。
Pre-request - APIリクエストの前にコンテキストを準備するオプションのコード。たとえば、APIを呼び出す前に短期間有効な認証トークンを取得するために別のAPIを呼び出す必要がある場合、またはAPIリクエストで使用する変数を計算する必要がある場合があります。
Post-request - リクエストから受信したデータを変更するオプションのコード。たとえば、受信したデータが希望どおりに表示されない場合は、デジタルディスプレイのニーズに応じてデータを変更するコードを少し書くことができます。
Enable Webhook - ウェブフックリンクと関連トークンを生成します。このウェブフックは、データの変更を通知するために使用でき、APIリクエストを更新して画面を自動的に更新します。
Enable this Request - APIリクエストのステータスを設定します。

リクエストをテストするには、ヘッダーを設定する必要があります。ここでキーストアが役立ちます。2番目のボックスにBearer {{apiKeystore.<<key>>}}と入力します。ここで、Bearerはトークンのタイプで、{{apiKeystore.<<key>>}}はキーストアに保存されているトークンを取得します。この例では、上記で参照した「clover」という名前を使用します。

それが完了したら、「テストを実行」をクリックします。応答コードが200の場合、APIは正常にデータを返しました。他のコードがある場合は、APIリクエストに問題があります。

パラメータの使用方法

パラメータは、あらゆる種類のURLに存在します。パラメータには2つの要素があります：

URLの「?」マークの後に続く必要があります。
関連する値があります。

Paramsタブでは、値を変更するパラメータを指定できます。

通常、Paramsタブは、Pre-requestおよびPost-requestタブと組み合わせて使用され、自動的に更新される値を作成します。

事前および事後リクエスト処理の使用方法

事前および事後リクエスト処理を使用するには、ある程度のJavaScriptの知識が必要です。

2つの違いは何ですか？

Pre-request：これは通常、APIリクエスト前にコンテキストを設定するコードスニペットです。これは、別のAPIから認証トークンを取得したり、より多くの自動化を可能にするためにパラメータを変更したりすることができます。

Post-request：APIリクエストから受信したデータに適用するコードです。このコードを使用して、受信したデータを変更し、画面での表示方法を変更できます。

Pre-requestタブは、事前リクエスト処理用のコードを入力する場所です。

例：Toastのように動的に生成される認証トークンを必要とするシステムの場合、これを使用して別のAPIを呼び出して認証トークンを取得し、APIのコンテキストに設定できます。

この例の詳細については、Toast APIを接続する方法に関する記事をご覧ください。

Post-requestタブは、事後リクエスト処理用のコードを入力する場所です。

例：POS（販売時点情報管理）ソフトウェアAPIからデータを受信していますが、特定のデータが希望どおりに表示されていません。

価格が適切な価格設定（例：$12.99）ではなく、整数（例：1299）として表示される場合があります。この場合、整数を価格に変換するコードが必要であり、そのコードは同様の表示エラー（例：1899ではなく$18.99）に拡張可能である必要があります。

この一般的な例については、このJavaScriptコードで問題が解決するはずです。同時に、製品の在庫状況をマッピングする機能も設定できます。

これにより、返されたデータが修正され、適切に表示されるようになります：

これは、データを「SOLD OUT」として表示したり、利用できない場合にアイテムに取り消し線を引いたり、在庫管理システムで警告を表示したりするためにも使用できます。この例の詳細については、デジタルメニューボードに関する記事をご覧ください。

ステップ3（オプション）：デバイス属性からの置換パラメータを使用する

多くのPOSシステムは店舗/場所ごとにライセンスされています。OptiSyncで単一のAPIリクエストを設定し、置換パラメータを使用してさまざまな場所で動作させることができます。これらを入力すると、画面が店舗または場所の識別情報を通信できます。つまり、画面ごとに個別のAPIリクエストを作成する必要がなく、単一のAPIリクエストで異なる店舗や場所に異なるデータを通信できます。

開始するには、編集する画面を見つけます。