windowsでデジタルサイネージをやるにあたり制御用の小さなプログラムをUWSCで書いてみる。

172013

最近流行のスティックPCですが、これを使ってWindowsPCによるデジタルサイネージが出来ないか、模索してます。
PCベースでデジタルサイネージを構築する際、必要になってくるがブラウザ制御用ソフト。基本放置で何時間も稼働するわけですが、不意のリセットやフリーズ、勝手な再起動にどう対処するかが、課題になります。

まずは、どんなサイネージになるのかデモを作ろうと思い、IEをコントロールする用のスクリプトをUWSCで書いてみました。UWSCはフリーのWindowsコントロール用スクリプト言語。元々はマウスの動きを「録画して」再生するソフトだったと思います。基本的にWindowsの制御には最適な言語です。

とりあえず、スクリプトをEXE化して、スタートアップに入れ、自動でブラウザを起動、定期的に読み込み直し、時間が来たら終了、をやってみたいと思います。(EXE化はUWSCシェアウェア版の機能)
とりあえず、UWSC公式サイトのIE起動サンプルをベースに組み立てます。

STOPFORM(FALSE) //stopボタンを非表示に

//ブラウザをフルスクリーンで起動
Public IE
IE = CreateOLEObj("InternetExplorer.Application")
IE.Visible = true
setOleEvent()
URL = "スライドショーの置いてあるURL"
IE.Navigate(URL)
IE.FullScreen = True

//定期的に読み込み直し
WHILE 1
KBD(VK_F5, CLICK, 100) //F5キーを押す
SLEEP(600) //600秒に1回リロード

GETTIME()
X = G_TIME_HH2 + G_TIME_NN2 //現在時刻の取得
IFB X = 2030 THEN //20時30分にシャットダウンする
POFF(P_SHUTDOWN) //PCをシャットダウン
ENDIF

WEND

//------IE制御用
DEF_DLL SendMessageA(Hwnd, Long, Long, Dword): bool: user32
CONST WM_ACTIVATE = $06
Public Pub_url, Pub_docc, Pub_BeforNav_cnt, Pub_DocComp_cnt, Pub_inp_flg
Procedure BusyWait()
  Sleep(0.3)
  tm = GetTime()
  repeat
    ifb GetTime() - tm > 90  // TimeOut
       Pub_docc = ""; Pub_BeforNav_cnt=0; Pub_DocComp_cnt=0
       IE.Navigate(Pub_url)
       tm = GetTime()
    endif
    Sleep(0.2)
    ifb Pub_inp_flg
       Pub_inp_flg = False
       continue
    endif
    if IE.busy then continue
    if Pub_url = "" then break  // No read
    if (Pos("*"+Pub_url+"*",Pub_docc)) or (Pos("*"+IE.LocationURL+"*",Pub_docc)) or (Pub_BeforNav_cnt<=Pub_DocComp_cnt) then else continue
    errflg = False
    if IE.document.title = "503 Unavailable" then errflg = True
    if IE.document.title = "Service Unavailable" then errflg = True
    if IE.document.title = "503 Service Temporarily Unavailable" then errflg = True
    ifb errflg
       Sleep(90)  // 503: Wait&Retry
       tm = 0
       continue
    endif
    Sleep(0.3)
  until ! Pub_inp_flg
  Pub_url=""; Pub_docc=""; Pub_BeforNav_cnt=0; Pub_DocComp_cnt=0
  SendMessageA(IE.Hwnd, WM_ACTIVATE, 0, 0)
Fend
Procedure setOleEvent()
  OleEvent(IE, "DWebBrowserEvents2", "BeforeNavigate2", "fucBeforNav")
  OleEvent(IE, "DWebBrowserEvents2", "DocumentComplete", "fucDocComp")
  OleEvent(IE, "DWebBrowserEvents2", "OnQuit", "fucQuit")
  Pub_url=""; Pub_docc=""; Pub_BeforNav_cnt=0; Pub_DocComp_cnt=0; Pub_inp_flg=False
Fend
Procedure fucBeforNav()
  ifb (Pos("javascript:",""+EVENT_PRM[1])=0) and ("about:blank"<>""+EVENT_PRM[1])
     if Pub_url="" then Pub_url = ""+EVENT_PRM[1]
     Pub_BeforNav_cnt = Pub_BeforNav_cnt + 1
  endif
  Pub_inp_flg = True
Fend
Procedure fucDocComp()
  ifb (Pos("javascript:",""+EVENT_PRM[1])=0) and ("about:blank"<>""+EVENT_PRM[1])
     Pub_docc = Pub_docc + "*"+EVENT_PRM[1]+"*"
     Pub_DocComp_cnt = Pub_DocComp_cnt + 1
  endif
  Pub_inp_flg = True
Fend
Procedure fucQuit()
  ExitExit
Fend

実際に表示するスライドショートして、フルスクリーン表示が可能な、jqueryのスライダーcamera slideshowを使ってみました。画像のみ差し替えあとはフルスクリーンのデモそのままです。

http://agn-web.com/demo/camera/demo/fullscreen.htm

デモではドロップボックスのpublicフォルダにスライド用の写真を入れてありますので、ドロップボックスに指定のファイル名で画像を放りこめば、デジタルサイネージのスライドショーも差し変わる、コンテンツ更新らくらく仕様です。

これで、UWSCのEXEファイルをPCに仕込むことで、フルスクリーンでIEを起動し、定期的にリロードして、指定時間にスリープするデジタルサイネージ用PCとしての体裁が整いました。

できれば、これらに加えて
・安全のためキー操作などのハードウェアロック。
・PCのハードウェア情報などのログを取り、1日1回メールで送信。
・WEBカメラを仕込んで、立ち止まった人の数を計測。
・その時何を見ていたかと合せてレポート作成。
なども仕込んでおくと、これだけでも結構高機能なデジタルサイネージになりますね。安全な連続運転にはもっと色々気を遣う必要がありますが、デモとしては十分でしょう。
安価なWindowsベースのスティックPCの登場で夢が広がります。

本格的に動かすならならもうちょっと堅牢さが必要だと思います。自由度ではRasberry PiあたりでLinuxベースのシステムを組んだ方がいいような気もします。とりあえず、お手軽さを重視して、UWSCを使った構築例でした。


撮影事例(ネコ編)

先日、梅雨の合間をぬって、カメラマンとサイトの制作で利用する写真の撮影に行ってきました。

以前も記事を載せましたが、弊社ではWEBサイト制作の際、専属カメラマンによる写真撮影を行なっております。

http://agn.jp/blog/?cat=26

WEB用には低解像度でも十分と言われていた時代もありましたが、近年は回線が速くなり、PCの画面は大型・高解像度化、携帯サイトもガラケーからスマホへと、よりリッチに見せる写真が求められています。サイト制作において写真にこだわりのある方は、ぜひ弊社までご相談ください。さらに一眼レフによる撮影以外にも、特殊撮影として、ドローンを使った空撮や、360°記録する全天球写真などにも対応しております。

今後当ブログでは、定期的に撮影事例を掲載していきたいと思います。

今月は撮影の合間に撮られたネコ達の写真をおたのしみ下さい。

neko1

某浴場の看板ネコ

neko3


theta360.comの埋込み画像をwordpressでlightbox風に表示する方法

前回、ワードプレスにプラグインを導入することで、直接全天球写真をアップできるようにしましたが、安定した閲覧環境を考えると、リコーのサービス、theta360.comも外せません。今回は、theta360.comの画像を記事に埋め込みつつ、更にlightbox風表示にも対応してみたいと思います。 続きを読む theta360.comの埋込み画像をwordpressでlightbox風に表示する方法


RICOH THETAのパノラマ写真を外部サーバー(theta360.com)を使わずにWordPressの記事に埋め込む方法

20150320ricoh

超お手軽に360°写真を取ることが出来るリコーのシータですが、この写真をWordPressの記事中にアップしようとすると、現状リコーのサービスtheta360.comを使い埋め込みコードを取得する事になります。ユーザー登録が必要でFacebookアカウントも必要と、少々面倒です。代わりの方法が無いか調べてみましたが、余所で紹介されていたのは別のWEBサービスを利用する方法でした。

theta360.comは簡単にパノラマ画像をWEB利用できる良いサービスですが用途によっては外部サーバーを使いたくないケースも多々あると思います。出来ればサーバー内で完結させたい!今回はWordPressの記事中へのパノラマ画像の埋め込みをプラグインのみでやってみました。 続きを読む RICOH THETAのパノラマ写真を外部サーバー(theta360.com)を使わずにWordPressの記事に埋め込む方法