かっこいいデジタルサイネージを作りたい!!作りたい!!作りたい!!
どうも 北海道オホーツク海沿岸のスーパーで働いています いきなり幼稚園児みたいなノリですが４０超えました😀
デジタルサイネージ作ってみようと思った経緯、ちょっと長いので省略
Amazonや楽天などのECサイトや他のスーパーに行かずわざわざウチのお店に来てくれるお客様に、ちょっとでも良い気分で帰ってもらいたいそんな事を思ってます（照） だから商品の良い所をもっと伝えられたらと、手書きPOPを作ったり、メーカーさんからＣＭのデータをもらってタブレットで流していたりしてましたが、お客様に伝わっているのかと不安に思ったり、もっと役立つ方法はないのかと思っていたりしました ところがある日どうでしょう、よくよく考えたらスマホやタブレットが簡単に手に入り、音楽や映像を自分で作れる時代になって、さらに誰でも手軽に画像認識ツールが出来るTeachable Machineを活用したら！「見る」だけじゃない、「触れたり動く」デジタルサイネージができるじゃないか！できたらもっと良いものになるかもしれない！と、、、やるなら今でしょ！こんなの作りました(注：音楽鳴ります)
デジタルサイネージとは
日本語でいえば電子看板、ディスプレイなどの電子的な表示機器を使って情報を発信するメディア
手描きPOPと言えばヴィレッジヴァンガードさんやドン・キホーテさんのが有名ですね 大好きです
自作デジタルサイネージの案と現在の所
実装案
- 売場にWi-Fiがつながったタブレット端末を設置
- 動画や音楽などを流して雰囲気づくり
- お客様が声をかけるなど端末に何かのアクションを起こしたら、トリガーが働いてアプリが動き色々な反応を示す(今期時のメインはこれ)
- 文字入力の手間を省くのと非接触で衛生的で安全のため Teachable Machineを使って画像認識が音声をトリガーにする
- 画像認識や音声認識は商品名をわざわざ打ち込んだり検索したりしなくても良い
- 使用ツール Teachable Machine Make(旧integromat) CodePen デジタルサイネージ用タブレット端末 LINE
目標としているところは
- お客さんがタブレットにこちらが指定した数品のおすすめ商品を映すと商品のおすすめ情報やうんちくだとが、かっこいいイメージCMが流れる
- 母の日だとかクリスマスギフトのコーナーだとかワインや健康飲料などのコーナーなど商品説明だとかアピールしたい売場に設置
- 例えばワインのラベルを映したらソムリエっぽい人が商品説明をしてくれる、作り手さんが直にこだわりポイントを教えてくれる
- 内容を更新しやすい様にするため、メンテナンスできるようにするために、自分達で作り仕組みを理解する
- カメラに写そうと売場に並んだ商品をちょっと気になって手に取ってもらいやすくなる
以上がセキュリティや管理面など課題も多々ありますが、今のところのゴール設定です まだLINE通知の方は大丈夫です
現在のところは
ただ単に動画やコメントを一方的に表示するだけではなくて、お客様と双方向でやり取りできないかなぁをメインに取り組んでいます。
- サンプルのコーラ、レッドブル、デカビタCのどれかひとつのドリンクをカメラに見せたら、それぞれのコメントを表示します
- 缶や瓶らしきものが映ってない時は「おすすめ商品をカメラに向けてください」とのメッセージを表示します
- 遊び心で音楽を鳴らせます
至るまでのスッタモンダ
ということで作り始めたらなんとLINEの通知が鳴りやまなくなったんですよ！どうしてなのか聞いて下さい！
① Teachable Machineで画像判定の仕組みを作る
こちらの使い方はいろいろな方が書かれているのでそちらをどうぞ
写真をパシャパシャとれば、画像認識をして判定を返してくれる仕組みをGoogleさんがとても素早く作ってくれます、凄い世の中です
Teachable Machineについて、下記の方がたの記事を参考にさせていただきました とてもありがとうございますステイサムおもわず映画見ちゃいました
② Teachable MachineのコードをCodePenにコピペ
これだけで僕みたいなプログラムもホームページとかも作った経験が無くても、もうある程度の事はできます。
CodePenにはGoogleIDで簡単にサインインできるし言う事無しです
③ CodePenを色々いじってみよう
HTMLもCSSも全くわからないなりにGoogle先生やQiitaなどの他の方が書いた記事を参考にデコレーションしました 楽しくてとまらないので泣く泣く中止してます
コードを書いたらすぐに実装結果がわかるので凄い 形も汚いしつぎはぎだらけですけどこんな感じになりました
labelってのが認識された画像の判別結果だとわかったので、if文で分岐させてコメントを表示できるようにできたので、さらに色々できそうな予感はかなりしてます
See the Pen by Welkazuki (CodePen.
④ Webhookを利用してリアクションを集める
利用されている事が売場から離れていてもわかるように
お客様がカメラに何らかの商品を映して画像認識が切り替わったら、WebhookをMakeに送られそれからLINEに通知するようにできたんです
CodePenのHTMLに下記のコードを記入して
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
app.get(axios.post('**メイクのシナリオのwebhookのurl**',);
MakeでCustom webhookとLine Send a notification モジュールをつないだシナリオを作りました ということで、、
④ 🤷♂️🤷♂️大変なことになりました🤷♂️🤷♂️
上記流れを読まれたら既にお気づきの方がいるのだと思いますが、上記のやり方だけだと「できた！！」って試しにカメラに何かを移したらLINEの通知が鳴りやまなくなります、 画像が切り替わる度にぽんぽんと通知が来るもんだと思っていたら全くの予想外！これはこれはHTMLさんもMakeさんも休まずに通知送ってくれるって仕事熱心ですね！！😆😆
原因は理解しました、、、、、、対策はまだですが！
感想と今後
覚えたら使ってみたくて、音楽を借りてきて流していたり（フリーサイト）流れる文字を入れれ見たりと、画像認識とおすすめコメントをいかに見せるか、が今回のメインだったはずなのに寄り道しすぎた感は否めません
途中コードがよくわからなくて、Scratchの拡張機能 (TM2Scratch) で作ってしまう事も考えましたが、なんか悔しいのでやめます、それは次の機会にします
これからはもっとCSSやP5jsを勉強してボタンやテキストの見やすさなども調整したり、やっぱりワインやスパイスなどの商品の豆知識が役立ちそうな所で活躍できる様にしていきたいです。あとRaspberry Piに触りたい、小型な端末は利点しかないしサーバーとしても使えるしセンサーもつなげられる、やりたいことだらけっす！！
ラインの通知がどうにかできてからの話ですがね！😁😁😁😁
アッ店長！！仕事も頑張ります！！
今回もたくさん参考にさせて頂きましたありがとうございます！！