本音で企画の背景を語る「舞台裏」。今回は「SVGを使ったサイネージシステム」についてです。

Scalable Vector Graphics(SVG)は画像の形式のひとつだ。JPEGやPNGと同じである。相違点は、SVGはその名の通り、ベクトルグラフィックで表現していること。JPEGやPNGなど他はビットマップ表現だ。ライトを点灯させて選手名などを表示する電光掲示板を思い浮かべるといい。ビットマップは点の集合として、画像を表現している。

画面サイズが巨大化しても美しい

1980年代からPCやワープロを使っている方なら、あるとき突然、拡大文字の輪郭がなめらかになったことを経験しているだろう。フォントデータがビットマップから、ベクトルグラフィックに進歩したからである。

SVGもこれと同じだ。アドビが熱心に規格化を進めたもので、ベクトルグラフィックをXML(eXtensible Markup Language)で記述し、画像を表現する。W3C(World Wide Web Consortium)が2001年9月に最初の規格を公開した。

最大の特長は、ベクトルグラフィックであるため、表示する画面が大きく、高精細になっても、美しい画像を表示できることである。文字を大きく拡大しても、輪郭がベクトル表現されているので、なめらかなまま、というのと同じだ。いまはスマートフォンサイズから80型のような大画面まで、ワンソースで対応したくなる時代だ。それにぴったりの画像規格である。

SVGをサイネージに応用

2008年、シャープの方から、AQUOSが標準でSVGブラウザを搭載していることを知らされ、思いついたのが、サイネージに応用することだった。大画面でもきれいに映る。以下のシステムを開発した。

  • SVGコンテンツオーサリングシステム
  • Facebook/Twitter連携機能付SVGコンテンツ配信サーバ

オーサリングシステムは、サーバ上で動作するもので、画像を投入し、文字を重ねたりすればSVG化して保存し、さらに表示時間を設定したり、スライドごとにBGMや音声をつける機能をそなえた。

ソーシャル連携を実現

配信サーバは、マルチチャンネルの番組表を構成し、それに基づいてコンテンツ配信するように開発した。そして重要なことは、FacebookとTwitterコンテンツと連携したことである。指定のURLから本文と画像を抽出し、サーバ側でSVGコンテンツに自動変換して配信する。

このシステムは、「コンテンツ更新を容易にする」「リアルタイムなエリア情報を現地のサイネージに表示する」ことを考えて開発した。たとえば、道の駅やサービスエリアに置いたサイネージに、周辺の飲食店やさまざまな施設のFacebookページを表示させれば、毎日どころか、その場でコンテンツを更新して、アナウンスできる。「絞りたての牛乳でつくったソフトクリーム」の写真をスマートフォンで撮影し、本文を書いてFacebookページに投稿すると、次の瞬間、サイネージにも表示するわけだ。

NPO法人グローバル・コロキウムと共同で、相馬市・南相馬市に寄付をした(当時のプレスリリース)のは、このシステムを利用して、放射線情報や生活支援情報のツイートを、大画面に表示するシステムである。このシステムは3.11の前から開発していたもので、たとえばサービスエリアにSVGサイネージシステムを設置し、大震災のような非常時には、情報源を政府関係のツイッターに変更することを想定していた。

いまでもサービス化は可能

このシステムの長所は、コンテンツの作成と更新が容易であり、かつ、非常に美しく(食べ物をうつすと、とてもそそられるクオリティ)、SNSと連携できることである。

逆に欠点は、シャープ・AQUOSの一部機種しか端末として使えないこと。その後、シャープが経営難となったタイミングで、いったんは当社でもこのシステムへの投資は中断せざるをえなかったのだが、最近はまた事情が変わってきている。テレビのHDMI端子に挿入して機能する端末が登場しているからである。

代表例がAmazon Fire TV Stickだ。

Amazon Fire TV Stick

これにSVGブラウザをアプリとして移植してもいいし、同様の装置を専用でつくってもいい。これがあれば、世の中の大半のテレビをサイネージ端末に変更することができる。

最初にSVGサイネージを開発してから約10年が経過しているが、システムそのものは、まだ古びてはいない。Windowsベースのサイネージ端末は、DDOS攻撃の踏み台にされる事例なども出ており、管理コストがかかることも難点である。