iframeで設置する
コードを書く必要はありません。ホームページの表示したい位置に、タグを1行貼り付けるだけで稼働状況が表示されます。
店舗ホームページへの掲載
1
タグをページに貼り付ける
サイトの任意の場所に、次のタグを設置します。store に店舗IDを指定してください。
embed=1 を付けると、ヘッダー・フッターを除いた表示部分だけになります。
<!-- 店舗名・店舗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>店舗名は API に含まれないため、見出しなどで iframe の外（自社ページ側）に表示してください。 iframe の中には、機器の稼働状況だけが表示されます。
2
表示を確認する
ページを開いて、機器が号機順に並んでいれば設置完了です。 表示されない場合は よくあるご質問 をご確認ください。
設定
パラメータ
URL の ? 以降で、表示する店舗や配色を指定します。
| パラメータ | 説明 | 例 |
|---|---|---|
store | 表示する店舗ID（必須） | 10001 |
embed | 1 でブランド枠を非表示（埋め込み向け）。省略すると枠あり表示 | 1 |
primary | メインカラー（見出し・空きリングなど）。# は省略可。濃淡などの派生色は自動生成されます | 14532D |
accent | アクセントカラー（運転中リング・ライブ表示）。# は省略可 | 66BB6A |
typeColors | 機器種別ごとの色。種別名:色;種別名:色 形式。省略した種別は自動で色分けされます（カード型のみ） | 乾燥機:C77D3A;洗濯乾燥機:2F6E8C |
primary / accent を指定すると、自社サイトのブランドカラーに合わせて配色を変更できます。
指定しなければ既定の配色です。
<!-- 例：ブランドカラーを緑系に変更する -->
<iframe
src="https://device-status-sample.tosei-solution.com/laundry-status.html?store=10001&embed=1&primary=14532D&accent=66BB6A"
width="100%" height="700"
style="border:0; border-radius:12px"
title="稼働状況モニター"></iframe> 選択
表示スタイル ― カード型 / 表形式
既定は、機器をリング付きカードで見せるカード型（laundry-status.html）です。
よりシンプルな一覧をご希望の場合は表形式（laundry-status-table.html）も使えます。
表形式は号機・稼働状況・残り運転時間・機種名を罫線のある表で表示し、運転中の機器はアクセント色でハイライトされます。
<!-- 表形式で表示する場合：ファイル名を laundry-status-table.html に変えるだけ -->
<iframe
src="https://device-status-sample.tosei-solution.com/laundry-status-table.html?store=10001&embed=1"
width="100%" height="700"
style="border:0; border-radius:12px"
title="稼働状況モニター（表形式）"></iframe> store / embed / primary / accent はカード型と共通です。
種別ごとの色分け（typeColors）はカード型のみの対応で、表形式では使用しません。
実例
プレビュー
実際に上のタグを設置したときの表示です（本番のデータを表示しています）。
TOSEI Laundry 伊豆の国店 Store ID: 10001
TOSEI Laundry 伊豆の国店 Store ID: 10001