TOSEIクラウド2Integration Guide
← トップへ戻る
導入ガイド

サイトへの組み込み方法

デバイスの稼働状況をサイトに表示する方法は2通りございます。手軽に設置されたい場合は方法1(iframe)デザインを自由に作り込まれたい場合は方法2(API)をご利用ください。用途に合わせてお選びいただけます。

💡 サンプル画面(稼働状況モニター)は表示例の一つです。そのままご利用になる場合は方法1、表示部分のみを取り出してご自身で実装される場合は方法2をご参照ください。
1

iframe で設置する

コードの記述は不要です。タグを1行設置するだけでご利用いただけます。

サイトの任意の場所に、次のタグを設置してください。store に店舗IDを指定します。embed=1 を付けると、ヘッダー・フッターを除いた表示部分のみになります。店舗名は API に含まれないため、見出しなどで iframe の外(自社ページ側)に表示してください。

<!-- 店舗名・店舗ID は店舗情報なので、iframe の外(自社ページ側)に表示します -->
<h2>TOSEI Laundry 伊豆の国店</h2>
<p>Store ID: 10001</p>

<iframe
  src="https://device-status-sample.tosei-solution.com/laundry-status.html?store=10001&embed=1"
  width="100%" height="700"
  style="border:0; border-radius:12px"
  title="稼働状況モニター"></iframe>

パラメータ

パラメータ説明
store表示する店舗ID(必須)10001
embed1 でブランド枠を非表示(埋め込み向け)。省略すると枠あり表示1

※ iframe 内には機器の稼働状況のみが表示されます。店舗名・店舗ID(どの店舗かの情報)は、上記のコード例のように自社ページ側(iframe の外)に表示してください。なお店舗名は API では取得できません。

プレビュー(実際の表示例)

店舗名はページ側(iframe の外)/その下に iframe(?store=10001&embed=1)
TOSEI Laundry 伊豆の国店
Store ID: 10001
2

API を利用して実装する

デザインを自由に設計できます。API からデータを取得し、ご自身のUIに組み込みます。

エンドポイント

GET https://toseicloud-admin-api.laundry-dx.jp/api/public/device-statuses/{StoreID}?sort=unit_no

認証は不要です。{StoreID} に店舗IDを指定して呼び出すと、機器一覧と稼働状況が JSON 形式で返却されます。レスポンスの詳細は Swagger UI(API リファレンス) でご確認・お試しいただけます。

使う主なフィールド

フィールド(result[] 配列の各要素)意味
unit_no号機番号
connection_flg通信状態。false なら未接続
device_type_master.name機器種別(乾燥機 / 洗濯機 など)
device_model_master.product_number型番
device_model_master.device_sizeサイズ区分(S / M / L)
device_status.operation_status.code稼働コード。"1" が運転中
device_status.operation_status.name稼働状態の表示名(空き / 運転 など)
device_status.remaining_time残り運転時間(分)

稼働状態の判定ルール

最小コード例(コピーしてご利用ください)

装飾を除いた「データ取得+表示」の最小例です。STORE_ID を変更し、表示部分(innerHTML の内側)をご自身のデザインに差し替えてください。

<div id="device-status">読み込み中…</div>

<script>
const STORE_ID = 10001;  // ← 店舗IDを指定
const API = `https://toseicloud-admin-api.laundry-dx.jp/api/public/device-statuses/${STORE_ID}?sort=unit_no`;

async function loadDeviceStatus() {
  const res = await fetch(API);
  const { result } = await res.json();

  document.getElementById("device-status").innerHTML = result.map(d => {
    const offline = !d.connection_flg;
    const running = d.connection_flg && d.device_status?.operation_status?.code === "1";
    const state = offline ? "未接続" : running ? "運転中" : "空き";
    const remain = (running && d.device_status.remaining_time > 0)
      ? `(残り${d.device_status.remaining_time}分)` : "";
    return `<li>${d.unit_no}号機 ${d.device_type_master?.name ?? ""}:${state}${remain}</li>`;
  }).join("");
}

loadDeviceStatus();
setInterval(loadDeviceStatus, 30000);  // 30秒ごとに更新
</script>

注意点

  • サイトは HTTPS で配信してください(HTTP の場合、混在コンテンツとしてブロックされます)。
  • 本APIはブラウザから直接呼び出せます(CORS 許可済み)。サーバーを経由せず JavaScript から取得できます。
  • 更新間隔は 30秒程度を推奨します。短い間隔での連続呼び出しはお控えください。
  • 各項目の意味やレスポンス全体は Swagger UI をご参照ください。サンプルの全ソースは、稼働状況モニター 右上の「HTMLをダウンロード」から取得いただけます。