離島プログラマの雑記

島根県の離島、隠岐・西ノ島に移住して子育て中のフリープログラマです。

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

あらすじ

隠岐・西ノ島に移住して早くも3年が過ぎましたが、去る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字型(左向き)のものを使用しました。

タブレット選定

タブレットはモニタと画面をミラーリングする都合上、アスペクト比をなるべく揃えることと、キオスク端末としての設定の柔軟さ(と予算)で検討し、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 にアップグレードしています。

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 でネイティブアプリとして実装したほうがキビキビ動いて良かったんですが、ネイティブアプリ内でウェブサイトのブラウジングを扱うのがいろいろ厄介な感じだったので断念して、全部ウェブでやることにしました。イラストは西ノ島町出身のデザイナーまの悠さん( marumi03 )によるものです。

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データに、RubyopenBD から取得した書影URLを付加して JSON に成形したものを配信しています。貸出ランキングなどはサーバ側でレンダリングまでしたほうがおそらく速いんですが、今の所すべてクライアントまかせです。

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

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

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

ChromeKIOSKモードで大体の要件は満たせるのですが、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は非対応と書いてあるが)指定できたのでやってみたところ、キオスク用アカウントでサインインできなくなるばかりか、管理者アカウント側のエクスプローラが起動しなくなり復旧が大変でした(笑)

ちなみに復旧方法は、

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

Windows 10 でのシェルの置き換えについて | Ask CORE

Windows10でWindows ICDを使って埋め込みシェル起動ツール(Shell Launcher)を設定する方法

【cmd】Windows10でエクスプローラーが動かない時にコマンドプロンプトでエクスプローラーだけを再起動する方法 | onocom

2 でタスクマネージャ起動できるのに気づくのに時間がかかったり、3でエクスプローラが起動するけどタスクバーが表示されない状態でハマったり、7の当該レジストリを探したりなんだかんだで復旧に1日かかりました...。

以上、コンテンツについてあまり触れていないですが、とりとめのない制作記でした。中身の話はそのうち書くかも...

[2018/11/1追記]

パスワード有効期限の罠

Windows 10 のデフォルト設定ではパスワードの更新期限は42日に設定されているようです。

パスワードの有効期間 (Windows)

この期限が切れると自動ログインに失敗して、起動しなくなるので無期限に設定しておく必要があります。 この設定はローカルグループポリシーエディターで変更できます(要 Windows 10 Pro 以上)。

Windows10 - ローカルグループポリシーエディターを起動する方法 - PC設定のカルマ