( Prateek Katyalによる写真: https://www.pexels.com/ja-jp/photo/1-2694344/ )
弊社のお客様へ導入したシステムの一部についての事例紹介です。
タイトルの通り、デジタル・サイネージを導入したところ、２４時間画像を表示するため、通信量が無視できない程の量になったということがありました。
機器の中に置いてある画像を表示するだけなら、インターネットにつなぐ必要はありませんが、動的なコンテンツを出力するには、どうしてもインターネットが必要になります。
デジタル・サイネージで実現したこと
BrightSign社のサイネージを導入されたお客様より相談を頂きました。
最初の要件は、以下のようなものでした。
表示する画像を日々変更する必要が出てくる。画像自体はWebのコミュニティでも公開するものだが、Webへの更新をしたあと、デジタル・サイネージ機器であるBrightSign用にFTPでアップロードもしなければいけない。Webを更新したら、サイネージにも反映されるようにしたい。
Webのコミュニティは、簡単なCMSになっていて、ブログのように更新出来るものでしたが、そこで使った画像をサイネージでも使いたい、ということです。
サイネージ側では画面のどこに、どの画像を、何分表示する、という設定をして、コンテンツ画像を順番に表示する運用をする想定で、コンテンツ画像は、Web側で更新があれば、新しいものに挿し代わる必要があります。
サイネージに画像ファイルをどのように渡せば良いのか、お客様からも仕様を伺いつつ、BrightSign のマニュアルも見て、以下のような形になりました。
- Webへ画像をアップロードする際に、サイネージで使うものには印をつける
- サイネージで使う、と印をつけた画像は、特別なURLでサイネージからもアクセスできるようにする
- サイネージ側にはそのURLを設定しておき、何分置きに差し替えるか、画面のどこに表示するか、を設定する
- 一定の時間ごとにサイネージは画像表示をURLより表示するが、１．で登録された画像が常に最新として表示されることになる
これで、「Webに登録した画像がサイネージでも表示出来る」という要件は満たせました。
デジタル・サイネージの通信量がぐんと増えてしまった！
サイネージなので、結構な頻度で、画像を切り替えます。１分とか、２分に１回は切り替えます。
そうすると、そのたびに画像を取得する必要があります。
サイネージの中に、固定の画像を持たせておくならば、それで構いませんが、インターネット経由で画像を取得することになっているので、四六時中画像のダウンロードが実行されることになります。最近の画像は、画素数も多いため、事前に画像を小さく編集しないと、インターネットの通信にかかる費用が馬鹿にならない状態になりました。
そこで次のご相談を頂きました。
- 画像サイズを、自動で小さくしてほしい
Web用に画像をアップロードする際に、自動で画像を小さくすることにしました。そのこと自体は、それほど難しいものではありませんでしたが、画像を小さくすると、見た目が悪くなるケースもあることが分かりました。
結局、３種類の画像を作成し、最適なサイズを必要に応じて選択できるようにしました。
画像の加工に時間がかかっている！
画像サイズを自動で調整出来るようにしたので、通信量が若干減ることは確認が取れました。しかし、すぐに問題になったのが、画像の設定が出来ないことがある、というクレームでした。
調べたところ、画像の加工に時間がかかって、処理がおいつかず、結果的にエラーになってしまうことが発生していました。
大・中・小の、３種類の画像を作るため、Webの更新をする作業が重なると、サーバ側での処理がとても遅くなり、エラーになることが頻発したようでした。
デジタル・サイネージに表示する画像は、秒単位を争う必要はなかったので、画像のアップロードをする際に、画像加工は、処理の予約だけして、順番に加工処理をするようにしました。
画像の変更は数日に１回なので、毎分画像のダウンロードが発生するのは通信量がもったいない！
通信量が多い、という問題は、それでも続きました。WiFiでの通信が出来ない状態だったので、通信料金が無視できない額になってしまったようです。
お客様からのご指摘通り、毎分画像をダウンロードするというのは、ナンセンスです。
ブラウザであれば、勝手にキャッシュされますが、デジタル・サイネージではそうはいかないようです。
インターネットを介さず、サイネージ内の画像を表示するならば発生しませんが、リモートにあるサイネージに画像を持っていくことは出来ません。
キャッシュが使えれば解決するのだが、と、お客様からご相談を頂きました。BrightSignのサポートサイトで、HTML5のキャッシュと manifest を利用したオフライン利用についての情報があるとのことで、調べました。
（参照するにはBrightSignへメンバ登録が必要です。）
しかし、サンプルのプログラムも作って動作確認をしようとしたのですが、なかなかうまく行きません。
調べていくと、manifest と キャッシュを利用した使い方は、様々な問題があって、今はブラウザもサポートをしていないようでした。
ローカルストレージを使う
オフライン・ブラウズの機能が使えないとはいえ、やりたいことは単純なオフラインでのリソース参照です。更新があったら最新を取りに行くけど、なければオフラインで参照するだけでした。
ローカルのストレージに保存さえできれば、、、と、BrightSignのドキュメントをあれこれ探していると、HTML5のローカルストレージが、設定で使えるようになることが分かりました。
ローカルストレージが使えるならば、画像はローカルストレージに保存して、画像の更新があったかだけをサーバに確認すれば、通信量ははるかに小さくなるはずです。
- 画像をダウンロードしたら、ローカルストレージに Base64で保存する
- その時の画像のタイムスタンプもローカルストレージに保存しておく
- 次回以降は、まずタイムスタンプの確認をAPIで行う
- タイムスタンプに変更がなければ、ローカルストレージの Base64 のイメージを表示する
- タイムスタンプに変更がある場合は、１．に戻って、画像の取り直し、保存のし直しを行う
という流れで、画像の更新があったかどうかを確認する必要はありますが、画像そのものは、変更なければローカルから表示する、という作りに変えることにしました。
（画像をローカルストレージに保存するには？ https://stackoverflow.com/questions/41759318/how-to-convert-image-into-base64-and-store-it-in-local-storage ）
果たして、ローカルストレージに保存して、更新がなければローカルから画像表示、という処理は、 BrightSignのデジタル・サイネージで実装が出来ました！
１分間に１度、500KBの画像をダウンロードしていたとすれば、１日で700MBあたりの通信量で、１ヶ月で20GB越えになる計算ですが、これで更新があった時のみのダウンロードになりました。毎日１つ画像が変わったとしても、画像のダウンロードは３０回増えるだけなので、15MB程で済む計算です。実際には更新確認の通信量がありますから、もっと増えますが、ギガに届くほどにはならないでしょう。
デジタル・サイネージには、ふんだんにメモリがあるわけではありませんから、動画のような大きなリソースを保存するには、外部記憶装置としてのUSBやSDカードが必要になります。ただ、このお客様のシステムでは、画像のみ、多くても２０枚程度、だったので、 Base64 で保存しても、100MB程度のメモリがあれば、対処できるはずです。
デジタル・サイネージの活用もご相談下さい
幅広い人々に提供したい情報は、デジタル・サイネージの活用が今後も進むのではないでしょうか。Webとつなげることで、広告だけれども、インタラクティブな仕掛け、というものも、提供できる可能性が広がる媒体です。