MovableType.netはサービス型CMSです。CMSの利用用途はウェブサイトだけとは限りません。
例えば以前紹介したタブレットアプリ風に見せる方法などもあります。
今回はウェブサイトの情報と連動してディスプレイなどでデジタルサイネージとして表示する方法をサンプルと一緒にご紹介します！
まずどのようなシーンで利用するか？の例をあげてみます。
- 飲食店のオススメメニューをウェブサイトで掲載しつつ店内のディスプレイにも表示する。
- 施設のイベント情報をウェブで掲載しているが、その情報を実際の施設内のディスプレイでも表示する。
- オフィスのエントランスにあるディスプレイに最新事例を表示しておく。
こういった場合にウェブサイトを更新するだけでサイネージも自動的に更新される、となれば非常に効率的で効果的です。
これらを実現するための例をご紹介します。
まず必要なものは以下になります。
- MovableType.netで運営するウェブサイトとサイネージ用のテンプレート
- PCとWiFi環境
- ディスプレイ
これだけで実現できます。
サイネージ用ページの作成
まずサイネージ用のページですが、以下のデモサイトをご覧ください。活用ブログの記事をサイネージ化したものになります。
※ Chromeでフルスクリーンで表示することを前提としているためGoogle ChromeなどのWebkit対応のブラウザでフルスクリーンでご覧ください。
https://movabletype.net/blog/signage.html
動作としては最新の記事が3件ずつ3ページ自動で切り替わります。右側の画像は3件の内一番上の記事のメインイメージが表示されます。
サンプルのテンプレートは以下になりますので、インデックステンプレートで作成してご利用ください。
以下ファイルの説明になります。
- signamge.html
実際に表示されるHTMLを出力します。右側に表示される画像は記事のカスタムフィールドの識別子が「main_image_entry」と設定されていますので、サイトの構成にあわせて変更してください。 - signage.css
ページのレイアウト等を調整するCSSです。見た目の変更などこのファイルを変更します。背景画像はimages/ogimage.jpgが初期で設定されていますので必要に応じて変更してください。 - animate.css
3ページの切替時のアニメーションタイミングの調整になります。
ディスプレイ表示用のPC
通常使っているノートPCなどを利用しても良いですが、オススメはGoogleのスティック型PC Chromebit など小型のものです。
非常に小型でHDMI端子に挿して、別途電源だけ繋げば利用できるので、場所もとらずに簡単に利用できます。
今回はテンプレートがWebkit対応ということもあり、利用するブラウザはGoogle Chromeになります。
やり方としては、Chromeブラウザを開き作成したサイネージ用のページのURLを指定して表示、さらにそれをブラウザの機能でフルスクリーン表示にするだけです。
表示用のディスプレイ
ディズプレイはテレビなどの大きなディスプレイでも良いですし、場所がなければPC用途のディスプレイでもいいと思います。
最近のディスプレイならHDMIにも対応していますし、安価なものも多くあります。
ページの最初の画像が大きめな壁掛けテレビに表示した例、以下の画像がPC用ディスプレイに表示した例になります。
このように、CMSの良いところは同じデータを色々なデバイスで利用できることです。今回のサンプルテンプレートも一例であり、作り方次第で様々な表現が可能です。
是非、一度お試しいただければと思います！
