デバイスの稼働状況をサイトに表示する方法は2通りございます。手軽に設置されたい場合は方法1(iframe)、デザインを自由に作り込まれたい場合は方法2(API)をご利用ください。用途に合わせてお選びいただけます。
サイトの任意の場所に、次のタグを設置してください。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 |
embed | 1 でブランド枠を非表示(埋め込み向け)。省略すると枠あり表示 | 1 |
※ iframe 内には機器の稼働状況のみが表示されます。店舗名・店舗ID(どの店舗かの情報)は、上記のコード例のように自社ページ側(iframe の外)に表示してください。なお店舗名は API では取得できません。
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 | 残り運転時間(分) |
connection_flg === falseconnection_flg === true かつ operation_status.code === "1"装飾を除いた「データ取得+表示」の最小例です。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>