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

172013

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

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

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

実際に表示するスライドショートして、フルスクリーン表示が可能な、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の記事に埋め込む方法


アップデートに失敗したワードプレスの復旧

桜の遅い新潟ですが、それでも花見に行く前に葉桜になりそうです。

何の脈絡もありませんが、今回もWordPressのはなしを。

wp_up01

ダッシュボードから簡単にシステムのアップデートができるWordPressですが、たまに更新に失敗して、「メンテナンス中」から復旧できなくなることがあります。プラグインのアップデートでもあります。
なんかアップデートが進まないなぁ、と思ってサイトを表示させようとしても、メンテナンスモードのまま、

wp_up02

と、なって、何も受け付けなくなってます…。
プラグインとの相性か、サーバーのPHPのバージョンか、原因は様々です。
ログインも出来なくなるので焦りますが、以下の方法で復旧できます。

慌てずFTPでインストールフォルダにあるファイル、「.maintenance」を削除しましょう。
とりあえず元に戻ります。
ファイルそのものは一時ファイルですので、削除しても問題ありません。
あとは原因を探ってから、再度更新しましょう。

私は先日この症状が出た時は、WordPress側の新バージョンが出るのを待ちました。
消極的解決法。


設置済みワードプレスのURL変更方法

暖かくなってきました。新潟の桜は次の週末あたりに咲くようです。新潟市内だと、鳥屋野潟の桜がキレイですね。

5c2bc9d11e0f89c6a5ee57771145c6d1_m

ここしばらく、WordpressのURL変更を行う事が数件あり、だいたいやり方が固まったので、手順を公開してみます。
phpmyadminは使いません。ドメインの変更がないことが前提です。

はじめに

テストURLでとりあえず構築したワードプレスを正式URLに変更することはよくあると思います。
または、考え無しにテストのつもりで構築してしまい、後から変えたくなったりとか。クライアントの気まぐれでアドレス変えてくれとか…。まぁ色々ありますよね…。

★手順★
1.設定画面で、ブログのURLを変更する。
2.データベースの該当箇所を書き換える。
3.必要があれば、URL(ドメイン)を変更する。
4.確認する。

例として、
旧 http://www.agn-web.com/test04/
このブログのURLを
新 http://www.agn-web.com/niigata/
に変更するケースで説明します。

1.設定画面で、URLを変更する。

ダッシュボード→設定で、
・Wordpressアドレス(URL)
・サイトアドレス(URL)
を両方変更し、保存します。
blog_wpurlch_01
保存を押すとアクセスできなくなって、404がでますが、気にしません。

2.データベースの該当箇所を書き換える。

serch-replace-DBというPHPで書かれたツールを使います。
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
こちらからzipファイルをダウンロードしてください。
解凍したらフォルダごと、ワードプレスのルートディレクトリにアップロードします。
フォルダ名は仮にSRDBとしておきます。
ブラウザで、SRDBフォルダにアクセスします。
http://www.agn-web.com/test04/SRDB/
blog_wpurlch_02
ワードプレスで使われているDBを自動で読み込んでくれます。
このツールを使って、DB内のURLを書き換えます。
今回は、agn-web.com/test04をagn-web/niigataに置き換えます。
dry runでテストできます。明らかな間違いが無ければ、live runで実行します。
view changeで変更箇所を確認することも出来ます。

3.URLの変更

今回は、サーバー上のディレクトリ名をtest04からniigataに書き換えます。
FTPクライアント上で変更すると良いでしょう。

4.確認。

URLの変更のみなら、即座に反映されますので、変更後のURLで表示できるかどうか確認します。
チェックポイントとしては、
・変更後のURLでアクセスできるか。
・見た目で画像などがきちんと表示されているかどうか。
・画像のリンク切れがないか。
・ページ遷移のリンク切れがないか。
等を確認します。特にテーマをカスタマイズしていた場合、URLを記入している箇所は要注意です。
無事に変更できたことを確認したら危険ですので、必ずSRDBフォルダを削除しておきます。

5.注意

・変更までにDBのバックアップを取りましょう。失敗すると全てのデータを失いかねませんので、慎重に。
・上記手順を間違えると、管理画面に入れなくなりますので、ご注意を。
・元に戻せるデータを用意してから、作業するのが基本です。
・上記はWordpressのversion4あたりの話です。
・どうにもならなくなったら、新規構築する割り切りも大事。
お約束ですが自己責任で。絶対に失敗できない方はご依頼ください。
・色々書きましたが、サーバー引越しよりはラクです。引越しの時はwp-configの書き換えなども必要です。


WEBの写真

今日はサイト制作材料として新潟市内の銭湯数件で撮影を行いました。
季節柄、湿気と湯気に悩まされる撮影でした。カメラマンは苦労したと思います。

新潟市内 銭湯で撮影

かつてWEBの写真は、それほど高画質でなくても大丈夫と言われた時代もありましたが、回線速度も速くなり、スマホもPCも大画面化、高精細化して、WEBにおける写真のクオリティは以前よりもずっと重要になっています。写真の良いサイトはぐっと魅力的に見えるものです。

弊社では、WEB制作においてクオリティにこだわった上質な写真を、弊社専属のカメラマンが撮影させていただきます。店内撮影から、人物、物撮りまであらゆる撮影に対応可能です。写真にこだわるWEB制作はお気軽にご相談ください。

(写真はディレクターがさらっと適当に撮ったスナップですので、あしからず。)


複数出来てしまったFacebookページの統合

451247893555a3974e744388f49b08be_m

フェイスブックもかなり日常に浸透した気がします。

WEB制作の仕事をしていると、よく聞くトラブルで、
「Facebookに会社のページが複数ある!なんとかしたい。」
と言うのがあります。と言うかよく相談されます。

WEBに強い社員が勝手に作っていたり、担当者がやめてしまいやむを得ず新しく作り直したり、よく分からずに勢いで個人アカウントで企業ページを作ってしまったりと原因は様々です。

複数出来てしまった、Facebookページは統合できます。
当然ですが、事前に、両方のページの管理人になっておく必要があります。
統合できるのはページとページのみなので、上記のケースで、個人アカウントで企業ページを作ってしまった場合は、そのページを一旦Facebookページに変更しておく必要があります。その辺の手順は「個人アカウント Facebookページ 移行」等で検索して下さい。

注意点としては、統合されるページはいいね以外の情報が消えますので、アクセスできる内に、投稿済みの画像などはダウンロードしておきましょう。

実際の統合ですが、簡単です。
Facebookページの「設定」→「一般」に「ページを統合」と言う項目がありますので、ここから設定します。
Facebookページの統合1

重複したページを統合をクリックすると、管理しているページを2つ選ぶ画面が出てきます。
Facebookページの統合
1つめのリストが残すページ
2つめのリストが統合するページです。

あとはページを統合ボタンを押して完了です。
統合するには、名前が似ているだけでなく、登録住所等も同じである必要があります。

登録情報の微妙な違いで統合できないケースもあります。その場合は、手動で申請する必要があります。
私のやったケースだと、登録名が僅かに違ったために統合できず、申請を出すことになりました。
申請すると、2時間程度統合され、その旨お知らせメールが届きます。

統合するページは、残すページに吸収され、「いいね」のカウントは残すページに追加されます。
フォローして頂いているユーザーは残すページの方に引き継がれます。
また、タイムラインに投稿した画像や記事は引き継げないようです。

手順はこんな感じです。
そもそも、ページが重複して存在しているようだと、管理者のアカウントすら不明のケースもあるので、その場合はあきらめてFacebookに相談しましょう。

※あくまで2015年2月25日現在のやり方です。Facebookはよくやり方やルールが変わりますので、ページの統合は最新のヘルプを参考に慎重に進めて下さい。


トラックボール

PC312853

こんにちは。今年最後の記事です。
今回は制作現場の私的なことを。

仕事柄、PCを扱う時間はかなり長いと思います。なので普段使う道具にはこだわりがあります。
私は会社の中で唯一のトラックボールユーザーです。かれこれ十五、六年は使い続けているので、もうやめられません。

もともとは、マウスの使いすぎで腱鞘炎みたいな状態になり、解消すべく導入しました。
現在では、使わないと作業効率がかなり落ちるので、必須アイテムになっています。

誰もが初見で使いにくいというトラックボールですが、慣れると腕の筋肉をほとんど使わないため、腕の疲労が大幅に軽減されます。
さらにマウスのように、動かすスペースを必要としない点もメリットです。
指先のチカラだけで、画面の端から端までカーソルを移動できますので、近年の高解像度化したモニタには最適です。

しかし、その取っつきにくさから、商品としてのトラックボールは減る一方なんです。
運動機能に問題のある障がい者の方に選ばれることも多いと言う一面もありますので、メーカー各社には引き続き頑張って新機種の投入をお願いしたい所です。


最後に、使用中のトラックボールを紹介しておきます。

Logicool M570t
現在使用中です。3年ほど使い続けてます。途中で壊れて買い直したので2台目です。可も無く不可も無いバランスの良い機種です。ボタンの配置もマウスに近く、誰にでもお勧めできます。

logicool_M570t

 

エレコム M-XT1URBK
まさかの新機種で、2014年に突如発売されました。私も自宅用に年末に購入しました。何となく無線ドライバを入れるのが嫌で有線にしてみました。
まだ買ったばかりで慣れてないので、操作については何とも。大きさや握った感じは上々です。デザインもいいですね。M570tのボールと入れ替えると、操作性が向上するとのことで、そのうちやってみたいと思います。

elecom_m_xt1

 

Kensington SlimBlade trackball
最後はコレクションから。サブマシン用であまり使っていませんが、やはりトラックボールと言えばケンジントンです。
ゴロゴロと大玉を転がす感覚はたまりません。これはボールを横方向に回転するとスクロールするという独自ギミックがあります。親指派となって久しいので、メインで使うことはありませんが、使い心地は抜群です。なにより格好いい。

kensington_slimblade

 

と言うわけで道具の紹介でした。
個人的には、マイクロソフトのtrackball explorerが最高だったのですが、残念ながらマイクロソフトはこの分野から撤退してしまいました。

マウス操作で腕がつりそうなひとや、マウスだこが出来てしまいそうな方は検討してみて下さい。3日も我慢すれば自在に使えるようになります。
最近は、同じく省スペースで指先でコントロール可能なトラックパッドに普及の兆しがありますが、Mac以外の製品はまだ過渡期で、常用には厳しい感じがしますね。


来年も仕事の効率を高めるために!いろんな製品を試していきたいと思います。
 


Facebookページにフォームを設置する。

この記事は1年以上前に投稿されました。
公開時の情報を元に記述してありますので、最新版に対しては内容が陳腐化している可能性があります。ご注意ください。

Facebookページに何らかのフォームを付けたいという要望は多いと思います。

先日お客様から、アンケートフォームの設置依頼が来たので、設置方法をまとめておきました。

 

やり方としてはHiveloSocialAppsの「Form」アプリを設置する形になります。

項目等もある程度自由に設定できるので、中々便利です。

fbform_0

 

手順

1.HiveloSocialAppsをFacebookへ導入。

前提条件として、どこかのFacebookページの管理人になっておいて下さい。

Facebookログイン状態で、こちらのURLにアクセスします。

https://apps.facebook.com/hivelosocialapps/fbform_1-1

Formを選択肢、インストールを押します。

fbform_1-2
れで該当ページに設置されました。fbform_1-3

次にフォームの中身を設定します。

 

2.タブに表示する名前を設定

該当するFacebookページに移動し、【設定】→【アプリ】と移動すると、

追加済みアプリケーションに【Form】がありますので、【設定を編集】を押すとタブに表示する名前を変更できます。fbform_2-1

空欄だとデフォルトの【Form】です。任意の名前を付けて保存して下さい。

fbform_2-2

 

3.フォームの各項目を設定

次に【アプリケーションに移動】から、フォームの各項目を設定する画面に入ります。

最初にフォームの見出しや、受け取り先のメールアドレスなど基本事項を設定します。

fbform_3-2

次に【質問内容の設定】で、お問い合わせフォームの内容を決めていきます。

fbform_3-3

参考に以下の内容で設定してみます。電話番号以外は必須にしておきます。

質問項目 回答タイプ ※必須
・お名前 テキスト チェック
・メールアドレス テキスト チェック
・電話番号 テキスト  
・メッセージ テキストエリア チェック

  

回答タイプは「テキスト」「テキストエリア」「チェックボックス」「セレクトボックス」「ラジオボタン」が選べますので、簡単なフォームであれば十分対応出来ると思います。必須項目も選択可能です。

 

追加が終わると、こんな感じになります。

fbform_3-4

この場面では、順番の入れ替えも可能です。

 

 

4.確認

実際にFacebookページを見てみると、タブの後ろの方に追加されています。

fbform_4-1

目立たせたいときは、【タブの管理】から、順番を前の方に変えましょう。

 

fbform_4-2

以上で設置は完了です。

 

 

 

 

5.投稿データを見る。

フォームページの下に、【管理画面】へのリンクボタンがありますので、そこからアプリの設定画面に入ります。【お問い合わせ内容を閲覧する】ボタンが出来てますので、ここから確認します。

fbform_5-1

送って頂いた内容は、メールで届くのと同時にこちらの管理画面内にも蓄積されます。

複数人で運用するなどFacebook上で管理を完結させたい場合は便利です。

fbform_5-2

フォームが設置できると、Facebookページの使い道が広がりますね。

お問い合わせ以外にも、アンケートフォームや、申込みフォームなどにも応用できます。

上手に使って、訪問者からのフィードバックを集めてみましょう。