デジタルサイネージ

らら
らら

はじめに

今回は、デジタルサイネージについて調べてみたので、その時に見つけた。アプリケーションの紹介です。

調べてみると多くが、クラウド対応で、ローカルネットワークのみの対応がない・・

デジタルサイネージって

屋外・店頭・公共空間・交通機関など、街中で、ディスプレイなどの電子的な表示機器を使って情報を発信するメディアを総称して 「デジタルサイネージ」と呼びます。

最近、駅とか、ディスプレイ増えましたね・・

デジタルサイネージアプリ

今回は、Playストアにも公開されている、Slideshow Free digital signageです。

Androidが動作する。スマフォ、タブレット、AndroidTV、AndroidBOXが対象になります。

Android OS Ver5からの対応になります。Fire TVでも動作するようです。

日本語が対応していなかったのですが、筆者がGoogle翻訳でなとなくのものを作者へ渡したので、このブログが公開されるぐらいには・・・

このソフトは、商用利用も無料です。。

ホームページは下記から

https://slideshow.digital/

特徴

アンドロイド対応端末と接続できるモニター(TV)とSlideshow Free digital signageアプリがあれば、動作します。

Slideshow Free digital signageアプリ本体に、管理画面が付属しているので、実機からでも、ローカルネットワークのWEBからでも

管理画面へアクセスできます。

また、REST API (RESTful API) 、MQTTなど外部から連動ができます。

アンドロイド対応端末にFTP, WebDav, Google Drive、Dropboxなどアクセスが可能です。

外部アクセス関連図

機能が多いので・・・書いてみました。。

slideshow

Google Drive、 Dropbox、FTPサーバ、WEBサーバ、RSSサーバから、定期的な取得が可能です。

編集は各サーバへアップロードすることで、サイネージの更新が可能です。

外部サーバへアクセスできない場合は、PC等から、アンドロイド対応端末へ、FTP、REST APIにて更新が可能です。

また、WebDavでアンドロイド対応端末の記憶領域を、編集PC側で仮想ディスクとして扱うことも可能です。

また、ローカル環境にサーバーを作成して、FTP,WEB、RSSサーバを構築することで対応は可能です。

時間でスケジュールする場合、NTPサーバーで時刻補正する必要があります。

天気はOpenWeatherMap、HERE Mapsと連携できます。日本のものは対応していません。たぶん。

インストール

今回は、Androidで説明するのでPlayストアで、Slideshow Free digital signage検索

下記が見つかるので、インストールボタンを押します。

slideshow

インストール後開くを押します。

slideshow

権限を聞いてくるので、許可してください。

slideshow

これでインストールは完了です。

サンプルで試してみる

インストール後は・・

現在のキャプチャーは、ブラウザーで翻訳・・変更しているので、実際とは異なる場合があります。。

slideshow

表示にあるアンドロイド機器のIPアドレスでブラウザーで開いてみます。

ログインが出ます。表示されているID、パスでログインしてみます。。ログイン情報は。変更しておきましょう。。

slideshow

ログイン後、ホームが表示されます。

slideshow

メニューの画面レイアウトから。サンプル画面レイアウトをクリックします。

slideshow

サイドパネル付きを選択します。

slideshow

選択後かわりました！！

slideshow

画像を上げてみます。。メニューのファイルマネージャーを選択して

slideshow

ドラッグアンドドロップでファイルを上げます！

slideshow

アップした画像が・・順番に表示されるようになりました。

slideshow

FTPでも管理画面のIPとID、パスワードで接続してみます。

ファイルマネージャーと同じ内容です。！！

slideshow

ロゴを変えてみます。。サンプルサイズは480*336なのでこれで作ります。。

slideshow

ファイルマネージャーからアップロードします。一度削除して、登録しないといけないようです。。

slideshow

slideshow

アップしました。。

slideshow

表示されました。。

slideshow

サンプル画面レイアウトを入れたのでいろいろ追加されました。。

slideshow

日付を変えたいので。。

slideshow

EEEE, d.M.yyyy

↓

hh時 mm分 ss秒

yyyy年 MM月 dd日

slideshow

変わりましたーー

slideshow

更新されない場合、一度アプリケーションのリロードで時間短縮します。。

slideshow

RSSも変えてみます。。。

http://feeds.bbci.co.uk/news/rss.xml

↓

https://www.newsweekjapan.jp/story/rss.xml

slideshow

変わりましたーーー

slideshow

天気はユーザー登録あるので・・・パスで・・おぃ。。

サンプル削除

サンプルを投入後、削除する順番を間違えると、エラーになるので注意が必要です。

画面レイアウトをアクティブは外して、削除、その後にアイテム等を削除する感じです。

ダメ場合、アンドロイドのアプリの管理で、slideshowを選択して、データの削除等行ってみてください。。

応用

RSS

こちらをWEBサーバーでオリジナルのものをCMSで作成すると、便利そうですね。

MQTTの場合

下記を参照して

MQTTって

MQTTって
https://www.omakase.net/blog/2022/07/mqtt.html

Whole screenというスクリーン名の場所にSample bold textを5秒表示します。


mosquitto_pub -u ユーザーID -P パスワード -t "SLIDESHOW/REQ/登録したトピック名/API" -r  -h 設定したIP -m "{'operation': 'showSentHtml', 'parameters': {'panelName': 'Whole screen', 'length': 5, 'html': 'Sample bold text'}}"

開発者に聞いたところ。。登録したトピック名を複数のアンドロイドに登録することで同報送信できるらしいです・・

REST API (RESTful API) の場合

下記とか書いちゃえば・・オリジナルでコントロールできます。

ん！phpで書けって！。。。。こういうのって・・Perlが楽なんで・・・検証すぐできるし・・・

Whole screenというスクリーン名の場所にこんにちわを5秒表示します。


#!/usr/bin/perl
use HTTP::Request::Common;
use LWP::UserAgent;
my $userid		= "ユーザーID";
my $pass		= "パスワード";
my $url			= "http://設定したIP:8080/ajax/showSentHtml";
my $data 		=  [
	html		=> 'b>Hello こんにちわ',
	length		=> '5',
	panelName	=> 'Whole screen'
];
my $req = POST($url, $data);
$req->authorization_basic($userid, $pass);
my $ua = LWP::UserAgent->new;
my $res = $ua->request($req);
print "RESPONSE data\n";
print $res->content;

パソコンにXAMPPとかいれて、わざわざサーバ―構築しなくても。。複数台をコントロールできるよね。。

XAMPPを使おう！
https://www.omakase.net/blog/2021/12/xampp.html

XAMPPとかで、HTTP構築できれば、ローカルネットワークでRSSファイルを更新するシステムなんか作れば..複数台同時更新できそうですし・

Google Drive、Dropboxの使用が許可できれば、各ドライブを更新することで、サイネージも反映されるので楽ですね。

翻訳

筆者が、開発者に許可もらって。下記のページつくったので、参考に・・

英語がいける方は、本家へどうぞ！

ドキュメント翻訳

さいごに

小売店とかは、Fire tv stick買って、1台で運用する場合、お値打ちに構築できちゃいますね。。

パソコンなくても、スマフォから、管理画面にアクセスして変更もできちゃうので・・・便利です。

あと、駅でも見かけますが・・表示がおかしくなったりは、こちらもなると思いますので・・

再起動の対策は必要ですね。Slideshow Free digital signageでもアプリのリロード・再起動コマンドはあるので対応ですますよ。

追記

OpenWeatherMapをつかってみました。。

OpenWeatherMapを使ってみる
https://www.omakase.net/blog/2022/07/openweathermap.html

設定は・・

設定のデバイス設定

openweather

アイテムの天気のパネル

Nagoya-shi,jp

EEEE': %.0f °Cから %.0f °C'

openweather

関連記事

Windows10でOpenSSLを使う
https://www.omakase.net/blog/2022/07/windows10openssl.html

Windows10でWebDavを接続してみる。
https://www.omakase.net/blog/2022/07/windows10webdav.html

OpenWeatherMapを使ってみる
https://www.omakase.net/blog/2022/07/openweathermap.html

関連記事