1
/
5

【開発日誌 #1】Mercedes Benz Cafe(六本木) 人感センサー サイネージ

六本木にあるMercedes Benz CafeのEQC(電気自動車)を紹介するデジタルサイネージの開発に携わらせていただきました。

ただ、普通のサイネージとは少し違います。
なんと、国内初の「人感センサー(Leap Motion)」で操作する「透明の有機ELディスプレイ」です!
(ディスプレイは、LGディスプレイ様 提供)

僕は現地でサイネージ内のコンテンツの調整を担当しましたが、本案件は「STAR WARS」や「アイアンマン」の劇中でよくあるような、空中で手を動かして画面を操作するというSFチックな仕様になっています。

僕自身、エンジニアとして担当させていただけるとのことで、終始胸を踊らせておりました。



また、横幅が20,000pxを超える画面幅のコンテンツを作成したのも初めてだったので、とても新鮮な気持ちで構築しておりました。

こちらですが、常にサイネージの前に座って開発する必要はございません。
Leap Motionはよくできているライブラリで、開発時は人感センサーではなくPCのWebブラウザ上でマウス操作できるようにOptionで設定できます。
なので、実機検証の時のみLeap Motion + サイネージを使います。

下記はコードの一部ですが、useMouse をtrue / false 切り替えすることでマウス or 人感センサーと操作元を選択できます。

// /plugins/cursor.js のコードの一部

let useMouse = true //確認用にマウスを使う場合はtrueにする
let leapSpeed = {
x: 300, //Leapmotionのx軸の移動スピード(数値が小さいと速くなる)
y: 100, //Leapmotionのy軸の移動スピード(数値が小さいと速くなる)
}

if (useMouse) {
mouseInit()
} else {
leapInit()
}


サイネージはBenz CafeにあるMac MiniからローカルでHTMLソースを表示させております。
シームレスなコンテンツ切り替えとアニメーションが多いので、JSフレームワークはNuxt.js を使用しました。


待機画面


Aboutページ


Interiorページ


Body Colorページ

株式会社コムデ's job postings
6 Likes
6 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more