Windows タブレットでデジタルサイネージ制作

あらすじ

隠岐・西ノ島に移住して早くも３年が過ぎましたが、去る7月21日、我らが西ノ島町にもすてきな図書館が完成しました。

f:id:k-aeg:20180919221002j:plain

今回この図書館のウェブサイト制作と館内のデジタルサイネージ(しまポータル)の制作を任せていただきました。特にデジタルサイネージはあまり制作機会がないので制作記を記しておこうと思います。備忘録を兼ねているのでかなり細かい話が多くて読みづらいですが。

f:id:k-aeg:20180920015649j:plain

システム構成

f:id:k-aeg:20180919230326j:plain

しまポータルでは、タッチ操作できるインタラクティブなコンテンツを計画していましたが、システム構成は予算の都合上、大型タッチパネルモニタではなく普通の大型テレビモニタと操作用のタブレットという構成になりました。ちなみに大型タッチパネルモニタは普通のテレビの3倍くらいのお値段...。

検討案	検討内容
大型モニタ + 画面表示用PC + 操作用タブレット	モニタとPCはHDMI、PCとタブレットの接続はWiFi(リモートデスクトップ)となる。WiFI通信による操作遅延と、リモートデスクトップ自体の操作バネルが常に表示されており、ユーザが操作できてしまうという問題あり。
大型モニタ + 操作用タブレット	操作用タブレットとモニタはHDMIで接続。基本的に有線接続となるためケーブルの取り回しが効かなくなる。通信による操作遅延はないが、タブレット側で2つのモニタ出力をまかなう必要があるので、廉価タブレットのオンボード GPUには若干負荷が高めか。

当初の案では、画面表示用PC + 大型モニタ + コントロール用タブレットという構成で検討していましたが、Webサイトのブラウジングなど、モニタとコントローラの画面を完全に同期する必要があったので、タブレットから直に大型モニタに出力するシンプルな構成となりました。

コンテンツはウェブサイトと共にVPSに配置しており、タブレットからアクセスしています。

モニタへの出力方法

タブレットからモニタへの出力方法は無線・有線を検討しましたが、遅延や安定性などを考慮して有線としました。

検討案	検討内容
無線(ワイヤレスHDMI)	送信機のドングルが邪魔なので却下
無線(ChromeCast のような WiFi で飛ばすタイプ)	タブレット本体がケーブルレスになるので取り回しが良い。動画などでは問題にならないが、インタラクティブなコンテンツは操作遅延が気になる。また、受信側のドングルは熱のこもりやすいモニタの裏側(しかもモニタは木枠で覆われたデザイン)に設置することになるため、動作が不安定になりそう。
有線(HDMI)	ケーブルの取り回しやタブレット側接続端子の耐久性が問題だが、最も遅延が少なく安定している。

HDMIケーブルは通常のストレート型だと端子に負荷がかかるので、L字型(左向き)のものを使用しました。

HDMI Micro HDMI 変換ケーブル片方L型（左向き） Ver1.4 イーサネット、3D、フルHD対応 (2m)

エスエージェー

Amazon

タブレット選定

タブレットはモニタと画面をミラーリングする都合上、アスペクト比をなるべく揃えることと、キオスク端末としての設定の柔軟さ(と予算)で検討し、Windows10 Pro のタブレットを使用することにしました。

検討案	検討内容
iPad	アスペクト比4:3であり、テレビ画面(16:9)と大きく異なるので却下。
Android タブレット	常に表示される操作ボタンバーのため、テレビのアスペクト比16:9より若干幅広な16:10のものがほとんどであり、テレビのアスペクト比に併せて出力した場合、タブレット側の上下に黒い帯ができてしまう。また Android のバージョンにもよるが、電源周りの設定等、キオスク端末として使うための機能が不十分であったり、それらの機能にバグがあるなどの理由で却下とした。
Windows タブレット	設定の方法は煩雑だが自由度が高く、機能的には十分。Android タブレットと同様にアスペクト比 16:10 のタブレットが多く、Android タブレットと同様に帯ができてしまう。稼働中に Windows Update が実行されないようにスケジューリングが必要なため、Windows 10 Pro エディションが必須(Home だと制御不可)。

機能や性能の要件的には Microsoft Surface シリーズがベストですが、経年劣化や故障によるリプレースも視野に入れると予算オーバーだったため、Lenovo 製の Windows10 タブレット(キーボード付き)を採用しました。Windows 10 Home のモデルしかなかったので、購入後に Pro にアップグレードしています。

Lenovo ideapad Miix 320 Atom x5-Z8350 メモリ4GB eMMC64GB 10.1型フルHD Windows10 80XF0007JP

Lenovo

Amazon

Surface 以外で候補にしていたWindows タブレットは以下の通りです。いずれも3万円台。

機種名	メーカー	モニタサイズ	重さ	プロセッサ	ビデオカード	メモリ	ストレージ
LAVIE Hybrid ZERO HZ100/DA 2016年春モデル	NEC	11.6インチ	398g	Pentium 4405Y/1.5GHz	インテル® HD グラフィックス 515	4GB	64GB
Diginnos DG-D09IW2SL	ドスパラ	8.9インチ	495g	Atom x5-Z8350/1.44GHz	インテル HDグラフィックス400	4GB	64GB
ideapad Miix 320 80XF0007JP	Lenovo	10.1インチ	550g	Atom x5-Z8350/1.44GHz	インテル HDグラフィックス400	4GB	64GB
WiZ KVK111KHD	KEIAN	11.6インチ	730g	Atom x5-Z8350/1.44GHz	インテル HDグラフィックス400	4GB	32GB
dynabook S29/TG PS29TGP-NYB	東芝	8.9インチ	479g	Atom Z3735F/1.33GHz	Intel Atom® プロセッサー Z3700 シリーズ向けインテル® HD グラフィックス	2GB	32GB

コンテンツ制作

コンテンツ制作は、ウェブベースで行いました。廉価タブレットの性能を考えると Unity でネイティブアプリとして実装したほうがキビキビ動いて良かったんですが、ネイティブアプリ内でウェブサイトのブラウジングを扱うのがいろいろ厄介な感じだったので断念して、全部ウェブでやることにしました。イラストは西ノ島町出身のデザイナーまの悠さん( http://marumi03.petit.cc/ )によるものです。

f:id:k-aeg:20180920021541j:plain

f:id:k-aeg:20180920021525j:plain

f:id:k-aeg:20180920021638j:plain

f:id:k-aeg:20180920021702j:plain

クライアント側は貸出ランキングや埋め込みブラウザの表示に vue.js、サザエや牛を触ったりできるインタラクティブ要素に phina.js + Box2d などを使って実装しました。サーバ側はOPACから吐き出される貸出ランキングなどのCSVデータに、Ruby で openBD から取得した書影URLを付加して JSON に成形したものを配信しています。貸出ランキングなどはサーバ側でレンダリングまでしたほうがおそらく速いんですが、今の所すべてクライアントまかせです。

Windows タブレットのキオスク端末化

いろいろなやり方があって試行錯誤しましたが、最終的にシンプルだけどあまり上品でない方法に落ち着きました(笑)

キオスク画面用のローカルユーザで自動ログイン(管理者アカウントは別に用意しておく)
スタートアップで explorer.exe(エクスプローラ) の強制終了と Chrome のフルスクリーンモード起動を行うバッチファイルを実行

Chrome のKIOSKモードで大体の要件は満たせるのですが、explorer.exe の強制終了が必要なのはエッジスワイプ(画面端から画面内に向かってのスワイプ)対策です。エッジスワイプ操作が行われると、エクスプローラのアプリ一覧画面が表示されてしまい、Chrome の画面から抜け出せてしまいます。

デジタルサイネージを作ったので学んだことを晒してみる Part.1 - Qiita

エッジスワイプ自体を無効にする方法はいろいろウェブ上に乗っているのですが、現在のバージョン1803ではどれも無効なようで、最終的に確実な解決策が explorer.exe を殺す、という方法な訳です(笑)

explorer.exe を強制終了しても、タスクマネージャは Ctrl + Alt + delete キーで起動できるんですが、タブレット端末の場合は入力できないので問題なさそうです。(Surface とかハードウェア Windows ボタンがついている場合は電源ボタン + Windows ボタン長押しで起動できてしまうようですが...)

forest.watch.impress.co.jp

なお、一番真っ当なやり方としては、

Windows 構成デザイナー(ICD)でキオスク端末としてプロビジョニング
- キオスク用アカウントの作成や、固定するアプリの指定(割り当てられたアクセス)、スクリーンの自動オフ無効化などをまとめて設定
割り当てられたアクセスには Kiosk Browser を指定

だと思います。が、Kiosk Browser や IE11 ではタッチイベントを拾えず、うまくコンテンツが動かなかったのでやむなく却下としました(Microsoft Edge の開発者オプションでタッチイベント有効にできるぽいけど、Kiosk Browser ではできなそう)。

ちなみに開発当初、「割り当てられたアクセス」はストアアプリ限定のため、ブラウザとして使えるのはIE11のみ(Microsoft Edge はストアアプリだが「割り当てられたアクセス」に非対応、Chrome 等他社製ブラウザはストアアプリでないため使用不可)という状況でしたが、Windows 10 Fall Creators Update（バージョン1703）でMicrosoft 公式の Kiosk Browser(Edge の機能限定版) が実装されたので、これを使うことができるようになりました。

Kiosk Browser の細かい設定ができるようになったのは、Windows 10 April 2018 Update（バージョン1803）からで、Windows 構成デザイナー(ICD)を利用して規定のURLや表示するUIの設定を行うことができるようになったようです。

“割り当てられたアクセス”で使えるMicrosoft純正ブラウザ「Kiosk Browser」とは：企業ユーザーに贈るWindows 10への乗り換え案内（28） - ＠IT

さらに補足しておくと、Windows 構成デザイナー(ICD)にはストアアプリ版と Windows ADK 版の2種類あるんですが、ストアアプリ版は罠です！ストアアプリ版ではキオスク端末のプロビジョニングウィザードで、Required の項目を全部埋めてもパッケージのビルドができない不具合があってハマりました。Windows ADK 版を使いましょう。

docs.microsoft.com

なお、プロビジョニングウィザードで固定するアプリに Windows Classic のアプリが(ドキュメントには Windows 10 Proは非対応と書いてあるが)指定できたのでやってみたところ、キオスク用アカウントでサインインできなくなるばかりか、管理者アカウント側のエクスプローラが起動しなくなり復旧が大変でした(笑)

ちなみに復旧方法は、

管理者アカウントでログイン(画面真っ暗)
Ctrl + Alt + Delete でタスクマネージャ起動
適当なプロセスの右クリックメニューから「ファイルの場所を開く」→ エクスプローラが起動する...がタスクバーはまだ表示されない
タスクマネージャでファイルエクスプローラのアプリの「ファイルの場所を開く」
explorer.exe をダブルクリックで起動 → タスクバー復活
原因となったプロビジョニングパッケージの削除 → http://www.wannko.net/windows10/etc/probijo2.html Windows10のプロビジョニングパッケージを解除・削除を行う方法
「regedit」を起動し、レジストリを編集。キー名：HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon 値名　：Shell に"eshell.exe"が設定されていたので、“explorer.exe” に置き換え(全ユーザ用の初期起動Shellの設定)。