ホームページ

デジタルサイネージを自作する　格安サイネージの設定手順

Posted on by hanako

無料でというとちょっと大げさかもしれませんが、WordPressを利用すると、ほとんど費用をかけずにデジタルサイネージを構築する事ができます。

ちょっとオジサンたちにご説明する際には電子看板とお伝えしています。デジタルサイネージとお伝えしてもピンとこないみたいです。

デジタルサイネージの通常安いサービスを利用しても月額5,000円ほどの費用がかかりますが、WordPressを利用してホームページ形式でサイネージを設定する事で500円のレンタルサーバで無数にサイネージページを作成する事が可能です。

テーマをサイネージ用に設定

Twenty Sixteenに設定する

テーマの更新通知を無効にする

せっかくテーマの中でテーマフィルの内容を更新し、各支店のサイネージデータとしているところにテーマの更新が入ると、テーマファイルの内容はすべて削除されます。それは困ったものですので、テーマの更新通知は無効にします。

セキュリティ上の問題も出るかもしれませんが、一般公開するwebサイトでもないし、ま、いいかという感覚で。

テーマの編集　⇒　function.php を開きます

最終行に以下を付け加えます

/*
** テーマファイルのアップデートを非通知
*/
remove_action( 'load-update-core.php', 'wp_update_themes' );
add_filter( 'pre_site_transient_update_themes', create_function( '$a', "return null;" ) );

プラグインの調整

全てのプラグインを削除します。必要なプラグインだけに絞る事で、セキュリティに関する不具合要因を少しでも軽減させておきます。

Smart Slider3のインストール・有効化

Smart Slider3によって、スライドを定期的に変えるようにします。このプラグインがポイントです。

Password Protectedのインストール・有効化

社内的なサイネージの場合、外部の方にはあまり見て欲しくない情報もあります。その時にはこのPassword Protectedを利用します。サイネージは公に広く伝えたい時もあると思うので、その場合は必要ありません。

headerファイルマスターの作成

SSHでログインして、wp-contentの中のthemes/twentywixteenに入って、headerをコピーしてマスターを作成します。これは、１つのWordPressサイトで、複数種類のサイネージを稼働させるために必要です。１つのWordPressサイトに、１つのサイネージを作成するだけないら必要ありません。

twentysixteen]$ cp header.php header-.php

headerマスターの編集

コピーしたheaderに、Smart Slider3のショートコードを配置。このheader.phpにSmart Sliderを設定する事で、サイトの一番上にスライダーを表示させる事ができます。

</head>

<body <?php body_class(); ?>>
<?php
echo do_shortcode('[smartslider3 slider=]');
?>
<div id="page" class="site">

headerマスターからコピー

配置する支店分のheaderマスターをコピーする

テンプレートマスターを作成

index.phpをコピーしてテンプレートを作成します。テンプレートマスターを作成しておくと、コピー後の作業を軽減する事ができます。

twentysixteen]$ cp index.php temp-.php

コメントすぐ下のget_headerを編集

 */

get_header('01'); ?>

テンプレート名を設定

最下行にテンプレート名を設定できるようにする

<?php get_footer(); ?>

<?php
/*
Template Name: temp-01
*/
?>

マスターから量産

headerマスターと、テンプレートマスターから支店分量産する。

twentysixteen]$ cp header-.php header-hokkaido01.php
twentysixteen]$ cp header-.php header-hakodate01.php
twentysixteen]$ cp temp-.php temp-sapporo01.php
twentysixteen]$ cp temp-.php temp-hakodate01.php

テンプレートマスターを支店用テンプレートにする

twentysixteen]$ vi temp-sapporo01.php

get_header('sapporo01'); ?>

--　省略　--

<?php get_footer(); ?>

<?php
/*
Template Name: temp-sapporo01
*/
?>

twentysixteen]$ vi temp-hakodate.01.php

get_header('hakodate01'); ?>

-- 省略 --

<?php get_footer(); ?>

<?php
/*
Template Name: temp-hakodate01
*/
?>

スライドマスターを作成する

Smart Slider3からスライドマスターを作成する

共通コンテンツの設定

vimeoで動画作成した共通コンテンツを設定する

vimeoビデオが、自動的に再生されるようauto playにする。さらに、音が流れると困るので、muteする。

支店名スライドの設定

スティックPCで設定時、他の支店と間違えていないかを確認するためのスライドを作成する。emptyスライドにテキストレイヤーで支店名と記入する。

スライダーの詳細設定

GENERAL設定

Slide background image fill を Fitにする

Background animation を Multiple animationsにする

AUTOPLAY設定

勝手にスライディングが始まるように設定し、1枚のスライドは1分で変わるようにする。

ムービーを自動再生中時間がきたら次のスライドに移行したい場合は、

Stop autoplay on のMedia startedをオフにします。下記設定は30秒経過したら、メディアがスタートしている状態ならautoplayを止めるという意味ですが、スイッチをオフにする事で、メディアがスタートしていても関係なく次のスライドへ移動します。

Arrows設定

マウスがホバーした時だけ、矢印を出し、自分が好きなスライドに移動できるようにする。

Autoplay設定

マウスがホバーした時に、一時停止・再生ができるようボタンを表示する

設定したらSAVEボタンを忘れずに

マスターを支店数分コピーする

作成したマスターをコピーする

コピーしたスライドを編集

GENERAL設定で名前を変更

emptyスライド支店名変更

間違えないように作成したemptyslideの支店名を支店の名前に変更

変更したらSAVEボタンを忘れずに。支店数分繰り返し行う。

各支店用のスライダーIDを控えておく。

各支店用のheaderファイルのスライダーID設定

札幌01支店用のサイネージスライダーIDは3になったので、これを設定

<body <?php body_class(); ?>>
<?php
echo do_shortcode('[smartslider3 slider=3]');
?>
<div id="page" class="site">

各支店用の固定ページの作成

いらないサンプルページは削除しておく。

各支店用に固定ページを作成し、テンプレートを割り当てる。

固定ページ作成

札幌01支店用の固定ページを作成し、札幌01用のテンプレートを割り当てる。

ここで、公開するとホームページとして確認可能になる。

VPN設定

万一、設定したクライアント側・サイネージ表示ＰＣの調子が悪くなった時のためにリモートデスクトップ環境を整備しておきます。

私はソフトウェアVPNはPacketixを利用しています。

Packetix VPNのオープンソース版SoftEther VPNは、無償で利用が可能です。

http://ja.softether.org/

使いやすいOSでサーバ立てればいいのですが、私は少しでも安くあげたいので使い古したサーバにLinuxを入れて、この無償のVPNサーバを構築しています。

クライアントの設定を行うため、SoftEther VPNサーバ上に支店ごとのユーザを作成します。有償版のPacketix VPNでは電子証明書が利用できますが、SoftEhter VPNはパスワードしか利用できないので30文字くらいの長い文字列を作成してパスワードとしています。

LinuxにSoftEhter VPNを設定する方法はこちらに詳しく解説してあります。

SoftEther VPN ServerをLinux上で使ってみる

TightVNC

Windowsリモートデスクトップは、Windows10 Proでないと利用ができません。OSも安く上げたいのでHomeEditionを利用しています。そこでリモートデスクトップするために、TightVNCを導入しています。

Screenshot of www.tightvnc.com

キッティング作業

サイネージを表示するためのお勧めマシーンは、インテル製のスティックPC。ただ、ブラウザが動くOSなら何でも構いません。安い、もしくは古いパソコンでもＯＫです。

Compute Stick STK1AW32SC（中身はだたのWin10 PCです。）

Atom x5-Z8300(Cherry Trail)
メモリ2GB、eMMC：32GB、Intel(r) Wireless-AC 7265 + BT 4.2、
ファン有

Atom x系のCPUはそこそこ性能がいいので、動画再生時にカクカクしたりなどの問題は起きません。またファンもついているので冷却効果もあり、暴走してサイネージが止まるという事もありません。（ただ、過酷な環境下では条件変わると思います。）

CHUWI HeroBoxへ変更

2022/8 そろそろ、Compute Stickも手に入らなくなりサイネージに利用するミニPCを再選定しました。少し大きくなってしまいましたが、うちではCHUWIのHeroBoxを利用する事にしました。

また、Windows11に変更しています。

Win11対応 手のひらサイズのミニPC比較 コスパ最高のおすすめ2022

クローニングがミソ

できるだけ設定の手間を省くためには、共通部分の設定をクローンしてしまうというのがミソです。様々なやり方があると思いますが、私はSymantec Ghost Suiteを利用しています。これは企業用でライセンスを購入しているもので複数台を同時に同じ状態にする事ができます。

クローニング設定内容

イメージ作成した内容です。1台1台に共通な設定をするのは無駄なので、流し込んで一気にこの状態まで持っていきます。

WindowsUpdateを完了させる（これが、なかなか時間がかかる）
VNCアプリインストール（パスワードも決めておける）
Packetix設定(VPN 通信設定まで行う）
Google Chromeのインストール
Google ChromeURLの設定（ベースになるURLまで）
拡張機能 auto loginをインストール

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --start-fullscreen --app=techlive.tokyo


スタート画面からピン止めを外す
スクリーンキーボードをスタートにピン止め
集中モード　アラームのみ
電源設定　バランス
ディスプレイの電源を切る　適用しない
ハードディスクの電源を切る　なし
電源ボタンの操作　シャットダウン

サイネージ用PC仕上げ

クローン作業ではできない、1台1台に施さなければいけない作業です。

コンピュータ名の変更
PacketixVPN IPアドレスの試験
Google ChromeURLの設定（各支部用の設定にする）
Google Chromeスタートアップにショートカットコピー
PacketixVPN パスワードの設定

テスト

起動時スタートアップで、該当支部のサイネージが表示される（この際にパスワードが保存されている事）
VPN越しにVNC接続ができる

出荷

Chromeでパスワードが保存されない時

パスワードの保存を停止する
パソコンで Chrome を開きます。
画面右上のその他アイコン [設定] をクリックします。
下部の [詳細設定] をクリックします。
[パスワードとフォーム] で [パスワードを管理] をクリックします。

設定がオンになっているか確認

パスワード常に保存しないURLに登録されていないか確認

Auto LoginでChromeパスワードをそのままスルー

スティックPC2画面認識

このスティックPC時々2画面認識になる事があります。なんでだろう。テレビの後ろにつけて1画面のみでしか運用していないのですが。（だって、HDMIポートも1つしかないし、物理的に2画面付ける事は不可能なのに。）

また、未解決です。

hanako