5. 画面のカスタマイズ

標準テンプレートはCSS（Cascading Style Sheets）によりカスタマイズを行うことが可能です。サイネージ端末を設置する場所や目的、オフィスのテーマに合わせて、テンプレートを選択し、必要に応じてカスタマイズを行います。

5.1. 画面のカスタマイズ概要

サイネージ端末アプリの表示画面は、テンプレートをカスタマイズし、オフィスレイアウト図に予約情報やステータスを重ねて表示をするなど、視覚的に分かりやすくすることが可能です。
カスタマイズは主に、フロアマップのテンプレートを利用して実施します。
画面のカスタマイズはCSSで行います。HTML/JSはアプリで準備しているものを利用します。（HTML/JSの変更はできません。）

注釈

画面のカスタマイズをご検討の場合、担当営業までお問い合わせください。

5.2. HTTPで提供されている画像

画面のカスタマイズはCSSで行います。画像、その他ファイルを追加する場合はupload_filesフォルダに配備します。

ここに保存されたファイルは”/upload_files/”以下で提供されます。

その他、SmartRoomsで使用している下記の画像をHTTPで提供しています。

パス

説明

\customize.css

修正可能なCSS

\images\inuse.png

使用中を示すアイコン

\images\vacant.png

空室を示すアイコン

\images\waitting.png

入室待ちを示すアイコン

\images\smart_room_log.png

SmartRoomsのロゴ

\image\clock.png

時計アイコン

\images\dashboard.png

サイネージ端末のメイン画面に表示するアイコン

\images\loading_gray.gif

読み込み中を示すアイコン

注釈

HTMLの構造を示す記法としてはslimを使用しています。

slim記法については https://github.com/slim-template などで確認してください。

5.3. カスタマイズテンプレートの適用手順

カスタマイズしたテンプレートを適用する場合、以下の手順でファイルを配置します。

=手順=

カスタマイズしたCSSファイルの名称を「customize.css」に変更し、以下の場所に配置します。
（展開先）\config\customize.css
例）
C:\SmartRooms\SmartRooms-V-EX4_X_X\config\customize.css

CSSで利用する画像ファイルを以下の場所に配置します。

（展開先）\upload_files\

例）

C:\SmartRooms\SmartRooms-V-EX4_X_X\upload_files\