今回、初めてデジタルサイネージを作る、という案件に携わりました。
もともと普通のWebサイトを作る、というようなことしかしてこなかったので、サイネージに関する知識は皆無。
かなりいい勉強になったので、今回はそれを書いてみようと思います。
（付け焼き刃な知識も非常に多いので、間違いや改善点などあればコメントください！）
要件
- ショッピングモール内にある小型店の店頭に置く、タッチパネル式のサイネージ
- 派手なアニメーションや広告は配置せず、見せるコンテンツをいくつか並べたい
- 店頭に設置してるポスターの代わりになるようなものにする
もともとの要件はこれだけ。
ここからモニターからPC、使用技術までの全てを選定しました。
使用技術
1店舗に設置するものということもあり、普通にHTMLで作成してサーバーにアップして、それをブラウザで表示させよう、ということになりました。
モニターとPC
ディスプレイとPCは下記に決定。
- ELO（タッチパネルシステムズ）46型タッチモニター
- インテル Compute Stick（Windows 10）
本来であればタッチモニター自体に組み込めるPCモジュールもあったのですが、予算の都合もありスティックPCになりました。
PCの設定
まず気になったのがPCの設定。
普通にブラウザ（Google Chrome）を立ち上げて全画面表示にしたところで、アドレスバーとかいろんなものが操作次第で出てしまうのでNG。
調べていたら、操作を制限する キオスクモードで立ち上げれば良い、ということがわかりました。
キオスクモードで立ち上げるにはいくつかの方法があるようですが、今回は手っ取り早くショートカットで立ち上げる方法を採用しました。
Google Chromeをショートカットでキオスクモードにする（Win）
- まずはGoogle Chromeのショートカットを用意します
- ショートカットのプロパティを開きます
- リンク先を下記に書き換えます
"C:\Program Files\Google\Chrome\Application\chrome.exe" —kiosk —disable–background–mode "http://（開きたいURL）"
これでショートカットを開くと、Google Chromeがキオスクモードで立ち上がるようになります。
しかし、それでも下記の問題が残りました。
- 画面の端からスワイプ（エッジスワイプ）でアクションセンターなどが表示されてしまう
- 画面上で左右スワイプで戻る・進むが発生する
- タッチ長押しでテキストが選択できてしまう
- ピンチイン・ピンチアウトが効いてしまう
画面端からのスワイプ（エッジスワイプ）機能を無効化する
これはSkip Metro Suiteとかっていうフリーウェアでなんとかなりました。
ダウンロードして立ち上げて、「Enable Skip Metro Suite」と他全てのチェックボックスにチェックして「Save Setting」します。
ただ、これだけだとまだダメで、 完全シャットダウンを行なってから再度起動し、1、2分待てば反映されます。
※「完全シャットダウン」は普通のシャットダウンではなく、「高速スタートアップを有効にする（推奨）」のチェックを外してシャットダウンします。
左右スワイプの戻る・進むを無効化する
これはGoogle Chromeの機能を無効にするだけでした。
chrome://flags/ から「オーバースクロール時の履歴表示」を無効化するだけでした。
タッチ長押しとピンチイン・ピンチアウトの無効化
今回はタッチのみでスワイプなどの機能は必要なかったので、CSSに下記を設定するだけでした。
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
touch-action: none;
}
-
-webkit-touch-callout：長押しで表示されるポップアップメニューの制御 -
-webkit-user-select：テキスト選択の制御 -
touch-action：タッチによるスクロールやズームなどの制御
この辺り、ハイブリッドアプリなどを作成する場合には割と常識みたいですが、全然知りませんでした。
とはいえ、これでデフォルトの機能などは制限され、ネイティブっぽくなりました。
さて、あとは表示させるコンテンツをコーディングするだけ！
なのですが、そこは気力と体力が残っていればまた後日書こうと思います。