画面構成

編集画面は大きく3つのエリアで構成されています。

• 左: パレット — 配置するアイテムを選ぶエリア。カテゴリごとにアイテムが並んでいます。
• 中央: キャンバス — ドロップしたアイテムを配置・編集するメインエリア。
• 右: プロパティ — 選択中のアイテムの設定（サイズ、色、バインド先など）を行うエリア。

画面上部のメニューから「キャンバス」タブと「設定」タブを切り替えられます。また、キャンバスの新規作成・削除・切替えもメニューから行えます。

基本操作

配置・選択・移動

• 左パレットから中央キャンバスへドラッグ＆ドロップしてアイテムを配置します。
• アイテムをクリックすると選択状態になり、右プロパティパネルに設定が表示されます。
• 選択したアイテムはドラッグで自由に移動できます。

サイズ変更

• 右プロパティの「＋拡大」「－縮小」ボタンで比率を保ったままサイズ変更します。
• W（幅）/ H（高さ）の数値を直接入力して変更することもできます。
• 選択時に表示されるリサイズハンドルをドラッグしてもサイズ変更できます。

削除

• 右プロパティの「削除」ボタンで選択中のアイテムを削除できます。
• キーボードの Delete または Backspace キーでも削除できます。

右クリックメニュー

• キャンバス上のアイテムを右クリックすると、コンテキストメニューが表示されます。
• 重ね順の変更（最前面/最背面への移動）などの操作ができます。

パレットアイテム

パレットは「通常アイテム」と「KMIoTアイテム」の2カテゴリに分かれています。各アイテムをキャンバスにドラッグ＆ドロップして配置します。

背景画像

パレット下部の「＋」ボタンから背景画像を追加できます。背景画像はキャンバス全体の背景として表示されます。

通常アイテム

すべてのユーザが利用できる基本アイテムです。

矩形（Square）

矩形シェイプはキャンバス上に配置する基本的な図形です。右プロパティで以下の設定ができます。

• 塗り色: RGB カラーピッカーで塗り色を指定。透明度も設定できます。
• 枠線色: 枠線の色を指定します。
• 枠線幅: 枠線の太さをピクセル単位で指定します。

テキストアイテム

Text（固定テキスト）

任意のテキストを表示するアイテムです。右プロパティのテキスト入力欄で内容を編集します。

TextRef（センサ値参照テキスト）

IoT センサのデータをリアルタイムに表示するテキストアイテムです。

• バインド先: 右プロパティで参照するセンサ ID を指定します。
• フォーマット文字列: {温度}℃ / {湿度}% のようにプレースホルダーを使って表示形式をカスタマイズできます。

対応センサ種別

テキストスタイル

Text / TextRef ともに以下のスタイル設定が可能です。

• フォントファミリー
• 太さ（bold / normal）
• サイズ（px）
• 色（通常色 / 警報色）

画像アイテム

Image

• 右プロパティの「画像プレビュー」から画像を選択します。
• 1枚の画像（imageOn）を表示します。

Sensor Image（センサ連携アイコン）

センサの状態に応じて表示画像を切り替えるアイテムです。右プロパティの「画像設定」で状態と電波の2つのモードを切り替えられます。各モードの画像は独立して設定できます。

状態モード

センサの検知状態・警報状態に応じて画像を切り替えます。センサ種別によって設定できる画像タブが異なります。

イベント系センサ（開閉／人感）: ON/OFF の状態画像と警報画像の計4枚を設定できます。

• ON 画像: センサが ON（検知 / 閉）の状態で表示。
• OFF 画像: センサが OFF（未検知 / 開）の状態で表示。
• ON 警報画像: ON かつ警報状態で表示。
• OFF 警報画像: OFF かつ警報状態で表示。

測定系センサ（温湿度／照度／CO2／土壌水分／圧力）: 警報画像のみ2枚を設定できます。

• ON 警報画像: 警報発生中（警報ON）で表示。
• OFF 警報画像: 警報未発生（警報OFF）で表示。

電波モード

センサの電波強度（RSSI レベル）に応じて画像を切り替えます。

• 電波0: 電波レベル 0（圏外/最弱）で表示。
• 電波1: 電波レベル 1 で表示。
• 電波2: 電波レベル 2 で表示。
• 電波3: 電波レベル 3（最強）で表示。

• 右クリックで画像の削除メニューを開けます。

背景画像

キャンバス全体の背景として使用する画像です。パレット下部の「＋」ボタンから追加します。

KMIoTアイテム

IoT センサやカメラなど KMIoT 連携機能に特化したアイテムです。

センサ

IoT センサと連携し、センサの状態に応じて画像を切り替えて表示するアイテムです。

動作モード

• 状態モード: ON / OFF / ON警報 / OFF警報 の4状態に対してそれぞれ画像を設定できます。センサ種別に応じたデフォルト画像が用意されています。
• 電波モード: 電波レベル 0〜3 の4段階に対してそれぞれ画像を設定できます。

対応センサ種別とデフォルト画像

右プロパティ

• センサ情報: バインドするセンサを選択します。
• 画像設定: 各状態の画像をカスタマイズできます。未設定の場合はデフォルト画像が表示されます。

カメラ画像

カメラデバイスから撮影された画像を日時指定で表示するアイテムです。

• From / To: 取得する画像の日時範囲を指定します。
• 署名付き URL で画像を取得し、プレビュー表示します。

タブアイテム

複数のタブを切り替えて表示内容を変更するアイテムです。

• タブヘッダー: カンマ区切りでタブ名を設定します（例: 概要,詳細,設定）。
• bindKey: タブ連動キーを設定すると、同じ bindKey を持つ他のアイテムがタブ切替えに連動して表示/非表示を切り替えます。

テキストスタイル（フォント、サイズ、色）もカスタマイズできます。

動画アイテム

mp4 形式の動画ファイルをキャンバス上で再生するアイテムです。監視映像やマニュアル動画の埋め込みに活用できます。

動画の設定

• ファイル選択: 右プロパティの「ファイル選択」ボタンから mp4 ファイルをアップロードします。アップロードした動画は S3 に保存されます。
• プレビュー: アップロード後、右プロパティ内にプレビューが表示されます。

再生オプション

表示キャンバスでの動作

表示キャンバスでは動画プレーヤ（再生/一時停止、シークバー、音量等のコントロール付き）として表示されます。設定したオプションに従って再生が開始されます。

グラフアイテム

キャンバス内にグラフを埋め込むアイテムです。

• From / To: グラフに表示する日時範囲を指定します。
• チャートタイプ: 折れ線（line）または棒グラフ（bar）を選択します。
• 平均間隔: none（生データ）、10分、1時間、1日、10日から選択します。
• イベント表示モード: 回数表示（count）または時間表示（time）を選択します。
• データソース: KMIoT センサデータまたは共通データベースのデータを表示できます。

データ一覧アイテム

センサデータを一覧表形式で表示するアイテムです。グラフと同じセンサ情報・期間設定を使用しますが、チャートではなくデータ行をそのまま表示します。

• センサ情報: 表示対象のセンサを選択します（カメラセンサを除く）。
• From / To: 表示する日時範囲を指定します。

警報通知アイテム

センサの警報発生時にアプリ通知を行うアイテムです。センサアイテムと紐づけて使用します。

基本設定

• センサ情報: 通知対象のセンサを選択します。

アプリ通知

• アプリ通知を送信する: チェックを入れると、警報発生時に専用モバイルアプリへプッシュ通知を送信します。

データベースアイテム

共通データベースのデータをテーブル形式で表示するアイテムです。

• データキー選択: 右プロパティのセレクトボックスで、データベース画面で作成済みのデータベースキーを選択します。
• 表示/非表示切替え: アイテム上の DB アイコンをクリックすると、テーブルの表示/非表示を切り替えられます。
• データキーを選択すると、データベースからカラム定義とデータ行が自動的に取得されます。

キャンバス設定

向き

• Landscape（横向き）: 横長のキャンバス。
• Portrait（縦向き）: 縦長のキャンバス。

解像度

キャンバスの幅・高さをピクセル単位で設定できます。向きごとに異なるサイズを指定可能です。

保存

編集内容は右プロパティ下部の「OK」ボタンで保存されます。保存データが表示キャンバスに表示されます。

• 変更があるアイテムは自動的に検出され、保存対象になります。
• 新規配置したアイテムも保存時にサーバーに送信されます。